Last active
January 28, 2025 13:43
Revisions
-
sinterstice revised this gist
Sep 12, 2014 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,4 @@ // From http://robots.thoughtbot.com/an-introduction-to-webgl var app = function () { var canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); -
sinterstice revised this gist
Sep 12, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ var app = function () { var canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); // Create elements on the page which contain your shaders. // I like using script tags with a different type attribute, like: -
sinterstice revised this gist
Sep 12, 2014 . 1 changed file with 7 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,12 +1,17 @@ var app = function () { var canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl'); // Create elements on the page which contain your shaders. // I like using script tags with a different type attribute, like: // `<script id="vertex-shader" type="x-vertex/x-shader">` // You could also just put the shaders inline, but I hate escaping line breaks. var shaders = { vertexMain : document.getElementById('vertex-shader').innerHTML, fragmentMain : document.getElementById('fragment-shader').innerHTML } // This pattern from "The Good Parts", which you should read if you haven't. var WebGLCompiler = function (gl, shaders) { var that = {}; @@ -89,4 +94,5 @@ var app = function () { gl.drawArrays(gl.TRIANGLES, 0, 3); } // Wait until the DOM is ready window.requestAnimationFrame(app); -
sinterstice created this gist
Sep 12, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,92 @@ var app = function () { var canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl'); var shaders = { vertexMain : document.getElementById('vertex-shader').innerHTML, fragmentMain : document.getElementById('fragment-shader').innerHTML } var WebGLCompiler = function (gl, shaders) { var that = {}; that.shaders = shaders || {}; that.gl = gl; that.createProgramWithShaders = function (vertexShaderName, fragmentShaderName) { var vertexShader = this.createShader(vertexShaderName), fragmentShader = this.createShader(fragmentShaderName); return this.createProgram(vertexShader, fragmentShader); } that.createShader = function (shaderName) { var shaderSource = this.shaders[shaderName]; if (!shaderSource) { throw "Shader not found"; } return this.compileShader(shaderSource, this.typeForShader(shaderName)); } that.typeForShader = function (name) { if (name.indexOf('vertex') != -1) { return this.gl.VERTEX_SHADER; } else if (name.indexOf('fragment') != -1) { return this.gl.FRAGMENT_SHADER; } else { throw "Unknown shader type"; } } that.compileShader = function (shaderSource, shaderType) { shader = this.gl.createShader(shaderType); this.gl.shaderSource(shader, shaderSource); this.gl.compileShader(shader); return shader; } that.createProgram = function (vertexShader, fragmentShader) { var program = this.gl.createProgram(); this.gl.attachShader(program, vertexShader); this.gl.attachShader(program, fragmentShader); this.gl.linkProgram(program); if ( !this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ) { error = this.gl.getProgramInfoLog(program); console.error(error); throw "Program failed to link. Error: #{error}"; } return program; } return that; } compiler = WebGLCompiler(gl, shaders); program = compiler.createProgramWithShaders('vertexMain', 'fragmentMain'); gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ 0.0, 0.8, -0.8, -0.8, 0.8, -0.8, ]), gl.STATIC_DRAW ); vertexCoord = gl.getAttribLocation(program, "vertexCoord"); gl.enableVertexAttribArray(vertexCoord); gl.vertexAttribPointer(vertexCoord, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); } window.requestAnimationFrame(app);