mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-25 02:46:39 +07:00
e120071e6a
Author: Fedor Katurov <gotham48@gmail.com>
Date: Sun Jan 1 15:50:55 2023 +0600
vault backup: 2023-01-01 15:50:55
1 line
No EOL
151 KiB
JSON
1 line
No EOL
151 KiB
JSON
{"_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basics Of WebGL (Drawing A Cube)","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-affc7b"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beac51"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beac51"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-378ec3"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// Setting up VERTEX and FRAGMENT shaders"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-378ec3"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// Cube's vertices Array<[x,y,z]>, 8 items"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// indices, that form triangles, that form cube sides"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// createe a vertex buffer and bind vertices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-378ec3"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3249ba"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// create a vertex buffer and bind indices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-378ec3"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3249ba"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// bind squareVertexBuffer as vertex positions buffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3249ba"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// don't normalize (int to float)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// that's the main rendering callback"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// used for scaling inside Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// GL Screen is square, so we need to fix it's aspect ration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-affc7b"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beac51"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1058"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-edae54"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beac51"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-42608a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-20f05e"},"children":[{"type":"text","value":"// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-378ec3"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a275b0"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7dec"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-beb06b"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6d6a57"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42638b"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-47e72e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f333b0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-648978"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-151988"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43a7ac"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7f7dec{color:#79C0FF}.ct-20f05e{color:#8B949E}.ct-3249ba{color:#79C0FF}.ct-378ec3{color:#79C0FF}.ct-151988{color:#79C0FF}.ct-beac51{color:#79C0FF}.ct-affc7b{color:#FFA657}.ct-edae54{color:#FF7B72}.ct-bf1058{color:#FFA657}.ct-42608a{color:#C9D1D9}.ct-f333b0{color:#D2A8FF}.ct-a275b0{color:#79C0FF}.ct-6d6a57{color:#FF7B72}.ct-beb06b{color:#A5D6FF}.ct-648978{color:#C9D1D9}.ct-43a7ac{color:#C9D1D9}.ct-47e72e{color:#FF7B72}.ct-42638b{color:#8B949E}.light .ct-42638b{color:#93A1A1}.light .ct-47e72e{color:#859900}.light .ct-43a7ac{color:#657B83}.light .ct-648978{color:#268BD2}.light .ct-beb06b{color:#2AA198}.light .ct-6d6a57{color:#073642}.light .ct-a275b0{color:#268BD2}.light .ct-f333b0{color:#268BD2}.light .ct-42608a{color:#657B83}.light .ct-bf1058{color:#657B83}.light .ct-edae54{color:#859900}.light .ct-affc7b{color:#268BD2}.light .ct-beac51{color:#859900}.light .ct-151988{color:#D33682}.light .ct-378ec3{color:#859900}.light .ct-3249ba{color:#B58900}.light .ct-20f05e{color:#93A1A1}.light .ct-7f7dec{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"helpful-documentation","depth":2,"text":"Helpful documentation"},{"id":"vertices-and-indices","depth":2,"text":"Vertices and Indices"},{"id":"shaders","depth":2,"text":"Shaders"},{"id":"program","depth":2,"text":"Program"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"},{"id":"source-code-with-explanations","depth":2,"text":"Source code with explanations"},{"id":"shader-compiler","depth":2,"text":"Shader compiler"},{"id":"vertex-shader-example","depth":2,"text":"Vertex Shader Example"},{"id":"fragment-shader-example","depth":2,"text":"Fragment Shader Example"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md","_source":"content","_file":"Frontend/WebGL/Basics of WebGL (Drawing a Cube).md","_extension":"md"} |