Beginning WebGL for HTML5 pptx

[...]... location of an attribute or uniform within the WebGL program, we use these API calls: GLint getAttribLocation(WebGLProgram program, DOMString name) WebGLUniformLocation getUniformLocation(WebGLProgram program, DOMString name) The GLint and WebGLUniformLocation return values are references to the location of the attribute or uniform within the shader program The first parameter is our WebGLProgram object and... function getMatrixUniforms(){ glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, "uPMatrix"); glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, "uMVMatrix"); } function setMatrixUniforms() { gl.uniformMatrix4fv(glProgram.pMatrixUniform, false, pMatrix); gl.uniformMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix); }  …  … initShaders(); setupBuffers(); getMatrixUniforms(); (function... modified line in Listing 1-3 to get the WebGL context is future compatible It will check for the webgl context first If this is not supported, it will try the “experimental -webgl context next, as shown in the following code: gl = canvas.getContext( "webgl" ) || canvas.getContext("experimental -webgl" ); Once we successfully obtain a WebGL context, we call four functions: setupWebGL(); initShaders(); setupBuffers();... location of these uniforms within our shader and also be able to update the values The matrices are uniforms because they are applied with the same values for every vertex We add two new helper methods, getMatrixUniforms and setMatrixUniforms We call getMatrixUniforms outside of our animation loop as the location within the shader will always stay the same, while we call setMatrixUniforms each animation... null; function initWebGL() { canvas = document.getElementById("my-canvas"); try{ 8 gl = canvas.getContext( "webgl" ) || canvas.getContext("experimental -webgl" ); }catch(e){ } CHAPTER 1 ■ Setting the Scene if(gl) { }else{ } } setupWebGL(); initShaders(); setupBuffers(); drawScene(); alert( "Error: Your browser does not appear to" + "support WebGL. "); function setupWebGL() {  //set... null; function initWebGL() { canvas = document.getElementById("my-canvas"); 14 CHAPTER 1 ■ Setting the Scene try{ }catch(e){ } gl = canvas.getContext( "webgl" ) || canvas.getContext("experimental -webgl" ); if(gl) { setupWebGL(); initShaders(); setupBuffers(); drawScene(); }else{ alert( "Error: Your browser does not appear to" +    "support WebGL. "); } } function setupWebGL() {  //set the... $(document).ready(function(){ setupWebGL(); }); We may make use of these differing forms throughout the book With jQuery, we can also shorten our canvas element retrieval to: var canvas = $("#my-canvas").get(0); WebGL Components In this section we will give an overview of the drawing buffers, primitive types, and vertex storage mechanisms that WebGL provides The Drawing Buffers WebGL has a color buffer, depth... a WebGLProgram object with the API call: WebGLProgram createProgram() Next we attach each shader to our program with calls to: void attachShader(WebGLProgram program, WebGLShader shader) In an application, these two calls would look like: var glProgram = gl.createProgram(); gl.attachShader(glProgram, vertexShader); gl.attachShader(glProgram, fragmentShader); After this we link the program and tell WebGL. .. WebGL to use it with API calls to: void linkProgram(WebGLProgram program) and void useProgram(WebGLProgram program) Our code for this would be the following: gl.linkProgram(glProgram); gl.useProgram(glProgram); When we are finished with a shader or program, we can delete them with API calls to: void deleteShader(WebGLShader shader) and void deleteProgram(WebGLProgram program) respectively This will look... API calls (which can be found at http://www.khronos.org/files /webgl/ webglreference-card-1_0.pdf or at http://www.khronos.org/registry /webgl/ specs/latest/), to create a buffer, you call WebGLBuffer createBuffer()and store the returned object, like so: var myBuffer = gl.createBuffer(); Next you bind the buffer using void bindBuffer(GLenum target, WebGLBuffer buffer) like this: gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, . uniform within the WebGL program, we use these API calls: GLint getAttribLocation(WebGLProgram program, DOMString name) WebGLUniformLocation getUniformLocation(WebGLProgram. can still run WebGL. Of course, support for WebGL should improve drastically over the next couple of years. xxiii ■ INTrOduCTION Testing for WebGL Support To