1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" type="text/css" href="presentation.css" /> 5 </head> 6 7 <body> 8 <div class="content"> 9 <div class="codeExample"> 10 </div> 11 <div> 12 <div class="canvasFigure"> 13 <span class="topCoordinate">(0,1)</span> 14 <!--A blank area we can draw on with Javascript. --> 15 <canvas id="drawingSurface" width="300" height="300"></canvas> 16 <span class="lowerLeftCoordinate">(-1,-1)</span> 17 <span class="lowerRightCoordinate">(1,-1)</span> 18 </div> 19 </div> 20 <script> 21 // Fetch a WebGL context from the identified canvas. 22 function getGLContext(elementID) 23 { 24 // Lookup the canvas just like any other element on a we page. 25 var drawingSurface = document.getElementById(elementID); 26 27 // Work with a canvas by getting a 2d or 3d context 28 // Here we get a 3d context, experimental-webgl. The context 29 // presents a javascript API that is used to draw into it. 30 // The webgl context API is very similar to OpenGL for Embedded Systems, 31 // or OpenGL ES. 32 var gl = drawingSurface.getContext('webgl') 33 || drawingSurface.getContext('experimental-webgl'); 34 35 if (!gl) 36 { 37 alert("Can not get WebGL context."); 38 } 39 40 return gl; 41 } 42 43 // Create and compile a vertex or fragment shader as given by the shader type. 44 function compileShader(gl, shaderSource, shaderType) 45 { 46 var shader = gl.createShader(shaderType); 47 gl.shaderSource(shader, shaderSource); 48 gl.compileShader(shader); 49 50 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 51 { 52 alert(gl.getShaderInfoLog(shader)); 53 shader = null; 54 } 55 56 return shader; 57 } 58 59 60 // Create a program from the shaders 61 function createProgram(gl, vertexShader, fragmentShader) 62 { 63 var program = gl.createProgram(); 64 // The program consists of our shaders 65 gl.attachShader(program, vertexShader); 66 gl.attachShader(program, fragmentShader); 67 68 // Create a runnable program for our graphics hardware. 69 // Allocates and assigns memory for attributes and uniforms (explained later) 70 // Shaders are checked for consistency. 71 gl.linkProgram(program); 72 73 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 74 { 75 alert("Could not initialise shaders"); 76 } 77 78 79 80 return program; 81 } 82 83 84 // Generate a buffer from a JS data array 85 function createBuffer(JSarray) 86 { 87 // This is a handle to what will be a buffer 88 var vertexBuffer = gl.createBuffer(); 89 // Binding an object in Open GL creates it, and makes it the target of subsequent manipulations. 90 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 91 // loads the current buffer, the vertexBuffer found above, with the vertex data. 92 // The gl bufer is strongly types with 32 bit floating data. 93 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(JSarray), gl.STATIC_DRAW); 94 95 return vertexBuffer; 96 } 97 98 // Bind a buffer to a vertex shader attribute, 99 // Each atttribute takes size elements of the given type. 100 // There are stride bytes separating the beginning of each element. 101 // Data begins offset bytes into the array. 102 // Note that zero stride indicates also indicates values are adjacent. 103 function bindBuffer(buffer, attribute, size, type, stride, offset) 104 { 105 // Lookup a shader attribute location 106 var vertexPositionLocation = gl.getAttribLocation(program, attribute); 107 // enable that attribute (location) to receive data from an array 108 // The vertexPositionBuffer, defined above, is used because it is the currently bound buffer. 109 gl.enableVertexAttribArray(vertexPositionLocation); 110 // Each element in the vector contains size floating point entries, they should not be normalized, 111 // there are stride bytes between the start of successive attribute values.and the first element is at position 112 // offset in the array. 113 gl.vertexAttribPointer(vertexPositionLocation, size, gl.FLOAT, false, stride, offset); 114 } 115 116 117 var gl = getGLContext('drawingSurface'); 118 119 // Like any three dimensional polygon, we specify the vertices. 120 var vertices = [ 121 -1.0, -1.0, 0.0, 122 1.0, -1.0, 0.0, 123 0, 1.0, 0.0 124 ]; 125 126 // Shaders are, usually small, C like programs that are loaded onto the graphics card and control 127 // how a 3D model is rendered, that is drawn to the scren. 128 129 // A Vertex shader does per vertex computations. Here we set the predefined variable 130 // gl_Position to the position of the vertex. We will see many uses for the vertex shader later. 131 // For example, vertices can be moved in the vertex shader, producing animation or motion. 132 // When you move through a 3D game, you are seeing the effects of a vertex shader moving the 133 // polygons around. 134 var vertexShaderSource = "attribute vec3 position;" 135 + "" 136 + "void main()" 137 + "{" 138 + " gl_Position = vec4(position, 1);" 139 + "}"; 140 141 // The fragment shader can be thought of for now as doing per pixel computations. It is the 142 // fragment shader the colors each pixel in a 3d scene. 143 var fragmentShaderSource = "precision mediump float;" 144 + "" 145 + "void main()" 146 + "{" 147 + " gl_FragColor = vec4(0.8,0.3,0.3,1);" 148 + "}"; 149 150 // Here we create and compile the vertex shader. This will compile to code for your specific 151 // graphics card. 152 var vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER); 153 154 // And then compile the fragment shader too. 155 var fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); 156 157 // As you might expect, we are going to run some code, so we need a program. 158 var program = createProgram(gl, vertexShader, fragmentShader); 159 160 // Make this the currently active program 161 gl.useProgram(program); 162 163 // This is a handle to what will be a buffer 164 var vertexPositionBuffer = createBuffer(vertices); 165 166 // Bind the buffer to a specific shader attribute 167 bindBuffer(vertexPositionBuffer, 'position', 3, gl.FLOAT, 12, 0); 168 169 // Finally run the program. Render, or draw, the data. Here we tell it to draw triangles starting 170 // with element zero of the vertexPositionBuffer, and that there are three vertices. So there is 171 // one triangle. 172 gl.drawArrays(gl.TRIANGLES, 0, 3); 173 </script> 174 </div> 175 </body> 176 </html>
This is the whole program on one page.