html head head body canvas id canvas width 640 height 480 canvas script Get the WebGL context from the canvas const canvas document getElementById canvas const gl canvas getContext webgl Setup the shader program with the vertex shader and the fragment shader vertex shader var vssrc The only attribute set for the vertices is the position We could also set normals color texture etc attribute vec2 a position void main gl Position vec4 a position 0 0 1 0 fragment shader var pssrc precision mediump float uniform vec3 u color void main gl FragColor vec4 u color 1 0 const vs gl createShader gl VERTEX SHADER gl shaderSource vs vssrc gl compileShader vs error checking if gl getShaderParameter vs gl COMPILE STATUS console log shader error gl getShaderInfoLog vs const ps gl createShader gl FRAGMENT SHADER gl shaderSource ps pssrc gl compileShader ps error checking if gl getShaderParameter ps gl COMPILE STATUS console log shader error gl getShaderInfoLog ps const prog gl createProgram gl attachShader prog vs gl attachShader prog ps gl linkProgram prog gl useProgram prog if gl getProgramParameter prog gl LINK STATUS console log Could not link the shader program Draw the object given a set of 2D points in this case a square const coordDimensions 2 const objColor 0 333 0 666 0 999 const vertexCoords 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 Create a buffer and put a single clipspace rectangle in it 2 triangles var buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER buffer Set this buffer as the current one for the next buffer operations Fill the buffer with the triangles STATIC DRAW states that we are only going to write to this buffer very infrequently so the system can optimise for this situation gl bufferData gl ARRAY BUFFER new Float32Array vertexCoords gl STATIC DRAW Get a reference to the a position variable of the vertex shader which we ll connect with the 3D vertex data now stored in the current WebGL buffer var shPosition gl getAttribLocation prog a position Enable the a position vertex attribute for rendering All client side capabilities are disabled by default including all vertex attribute arrays gl enableVertexAttribArray shPosition Specify the data structure of the array that will be used to store the vertex position data The parameters indicate that the vertexPos attribute is a list of elements with 2 components each 2D vertices of type gl Float and they should be un normalized The final two parameters are rarely used The first specifies the stride of the data i e the amount of storage allocated to each element and the second specifies the offset i e where the data starts For standard JavaScript arrays both are set to zero to indicate tight packing and no offset gl vertexAttribPointer shPosition coordDimensions gl FLOAT false 0 0 Get a reference to the u color variable of the vertex shader which we ll connect with the color parameter sent to this function var shColor gl getUniformLocation prog u color gl uniform3f shColor objColor 0 objColor 1 objColor 2 Set black as the background color gl clearColor 0 1 0 1 defaults to white 1 1 1 Manually clear the canvas gl clear gl COLOR BUFFER BIT draw the array set as current by the bindBuffer command parameter 1 how the vertices are to be grouped into geometric primitives TRIANGLES requires a full set of 3 vertices for each triangle so the common vertices need to be repeated TRIANGLE STRIP reuses the last 3 vertices so if the triangles are connected this only requires each vertex to be specified once Parameter 2 on what index to start Parameter 3 how many vertices to draw gl drawArrays gl TRIANGLE STRIP 0 vertexCoords length coordDimensions script body html
vertexCoords gl STATIC DRAW Get a reference to the a position variable of the vertex shader which we ll connect with the 3D vertex data now stored in the current WebGL buffer var shPosition gl getAttribLocation prog a position Enable the a position vertex attribute for rendering All client side capabilities are disabled by default including all vertex attribute arrays gl enableVertexAttribArray shPosition Specify the data structure of the array that will be used to store the vertex position data The parameters indicate that the vertexPos attribute is a list of elements with 2 components each 2D vertices of type gl Float and they should be un normalized The final two parameters are rarely used The first specifies the stride of the data i e the amount of storage allocated to each element and the second specifies the offset i e where the data starts For standard JavaScript arrays both are set to zero to indicate tight packing and no offset gl vertexAttribPointer shPosition coordDimensions gl FLOAT false 0 0 Get a reference to the u color variable of the vertex shader which we ll connect with the color parameter sent to this function var shColor gl getUniformLocation prog u color gl uniform3f shColor objColor 0 objColor 1 objColor 2 Set black as the background color gl clearColor 0 1 0 1 defaults to white 1 1 1 Manually clear the canvas gl clear gl COLOR BUFFER BIT draw the array set as current by the bindBuffer command parameter 1 how the vertices are to be grouped into geometric primitives TRIANGLES requires a full set of 3 vertices for each triangle so the common vertices need to be repeated TRIANGLE STRIP reuses the last 3 vertices so if the triangles are connected this only requires each vertex to be specified once Parameter 2 on what index to start Parameter 3 how many vertices to draw gl drawArrays gl TRIANGLE STRIP 0 vertexCoords length coordDimensions script body html