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