I try to create a square using programming called webgl. Webgl graphics for web browsers, mobile browsers.
This code you already familiar about .
you can use canvas tag for draw on web page.
document.getElementById used in js which a one param, in my case it is game. This tells where you take start.
initWebgl user defined function which is used to get canvas reference.
try catch is used because some browsers doesn't support webgl. If you web browser support then you initialize webgl like this var gl= canvas.getContext("webgl"); Now we have reference and our browser support webgl too.
this function need two parameters one is webgl reference and other is location where image will draw. For this task call gl.viewport function called
1. create a buffer
2. bindbuffer with array and newly create buffer called vertexBuffer.
3.set verts for your square {-1.0,1.0}
4.extract buffer data [gl.ARRAY_BUFFER {destination}, new Float32Array(param){source} and draw( i think this for animation )]
5. what to draw, how many vertex,total vertex, type
projectionMatrix means project 3d shape into 2d . [object project on camera]
vertexShaderSource take care projection on camera , 3d shape object
fragementShaderSource take care pixel color
clearColor or clear clear the screen before rendering
useProgram need shader
vertexAttribPointer take care vertex attribute on render
uniformMatrix4fv need projection and 3d model
