# Basics Of WebGL (Drawing A Cube) • Obsidian Garden

# Basics Of WebGL (Drawing A Cube)

## Helpful documentation

- https://open.gl/
- This youtube series: Basics, Making a cube, applying transformations, Texturing

## Vertices and Indices

Vertices are points with specific coordinates `{x,y,z}` in a 3D-space. We can build any figure by connecting vertices in triangles with indices.

## Shaders

Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card.

Vertex Shaders describe vertice positions, so Graphic Card can position them by connecting with indices and project to 2D canvas.

Fragment Shaders describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.

Shaders can have parameters passed from Javascript code (`uniforms`, `varyings` and `attributes`). Fragment Shaders can also access data from Vertex Shaders (that ones called `varyings`).

## Program

Program, as far as I understand, is a scene, that's described with Vertices, Indices, specific Vertex Shaders and Fragment Shaders.

## Applying transformations

The best way to change positions inside Vertex Shaders or color in Fragment Shaders is to pass parameters (also called `uniforms` and `varyings`).

Read about that at open.gl and at Vertex Shaders.

## Source code with explanations

    // render-a-cube.tsimport { createShader } from "./create-shader";import vxShader from "./vertex.glsl?raw";import fgShader from "./fragment.glsl?raw";const canvas = document.getElementyId('view');const ctx = canvas.getRenderingContext('webgl');// should be put inside requestAnimationFramedrawCube(ctx)(); function drawCube (  gl: WebGL2RenderingContext,   width: number,  height: number) {  // Initializing viewport  gl.viewport(0, width, height);  gl.clearColor(0, 0, 0);  gl.clear(gl.COLOR_BUFFER_BIT);  const prg = gl.createProgram();  if (!prg) {    throw new Error("Can't init programm");  }  // Setting up VERTEX and FRAGMENT shaders  const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);  gl.attachShader(prg, vx);  const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);  gl.attachShader(prg, fx);  gl.linkProgram(prg);  if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {    throw new Error("Could not initialise shaders");  }  // Cube's vertices Array<[x,y,z]>, 8 items  const vertices = [    -1, -1, -1, // 0    1, -1, -1,  // 1    1, 1, -1,   // 2    -1, 1, -1,  // 3    -1, -1, 1,  // 4    1, -1, 1,   // 5    1, 1, 1,    // 6    -1, 1, 1,   // 7  ];  // indices, that form triangles, that form cube sides  const indices = [    2, 1, 0, // side 0 (first triangle)    0, 3, 2, // side 0 (second triangle)    0, 4, 7, // side 1 (first triangle)    7, 3, 0, // side 1 (second triangle)    0, 1, 5, // ...    5, 4, 0,     1, 2, 6,     6, 5, 1,     2, 3, 7,     7, 6, 2,     4, 5, 6,     6, 7, 4,  ];  // createe a vertex buffer and bind vertices to it  const squareVertexBuffer = gl.createBuffer();  gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);  gl.bindBuffer(gl.ARRAY_BUFFER, null);  // create a vertex buffer and bind indices to it  const squareIndexBuffer = gl.createBuffer();  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);  gl.bufferData(    gl.ELEMENT_ARRAY_BUFFER,    new Uint16Array(indices),    gl.STATIC_DRAW  );  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);  // initial drawing  gl.clearColor(0.0, 0.0, 0.0);  gl.enable(gl.DEPTH_TEST);  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  gl.viewport(0, width, height);  // bind squareVertexBuffer as vertex positions buffer  gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);    // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle  gl.vertexAttribPointer(      gl.getAttribLocation(prg, "aVertexPosition"),       3, // 3 bytes-long      gl.FLOAT,      false, // don't normalize (int to float)      0,       0  );  // send vertice buffer as `aVertexPosition` attribute inside vertex shader  gl.enableVertexAttribArray(      gl.getAttribLocation(prg, "aVertexPosition")  );  let i = 0;  let speed = 0.01;  // that's the main rendering callback  return () => {    gl.useProgram(prg);    const scale = i *  0.25;    // used for scaling inside Vertex Shader    gl.uniform1f(gl.getUniformLocation(prg, "slide"), scale);    // GL Screen is square, so we need to fix it's aspect ration    gl.uniform1f(gl.getUniformLocation(prg, "aspect"), height / width);    gl.bindBuffer(        gl.ELEMENT_ARRAY_BUFFER,         squareIndexBuffer    );        gl.drawElements(        gl.TRIANGLES,         indices        gl.UNSIGNED_SHORT,         0,    );    if (i > || 0) {      speed = -speed;    }    i += speed;  };};

## Shader compiler

    // create-shader.tsexport const createShader = (  gl: WebGL2RenderingContext,  sourceCode: string,  type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER) => {  const shader = gl.createShader(type);  if (!shader) {    throw new Error(`Can't init shader`);  }  gl.shaderSource(shader, sourceCode);  gl.compileShader(shader);  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {    const info = gl.getShaderInfoLog(shader);    throw `Could not compile WebGL program. \n\n${info}`;  }  return shader;};

## Vertex Shader Example

Read more at Vertex Shaders

    // current vertice position {x,y,z,w}attribute vec4 aVertexPosition;// final vertice position with all transformations applied,// that will be passed to Fragment Shadervarying vec4 v_positionWithOffset;// Parameters passed from Javascript loopuniform float slide;uniform float aspect;void main(){  // float array of 4 elements, same as [slide,slide,slide,1]  vec4 scale=vec4(vec3(slide),1);  // float array of 4 elements, same as [aspect,1,1,1]  vec4 aspectRatioFix=vec4(aspect,vec3(1));  // vertice position, multiplied with matrices of scale and aspect ratio  gl_Position=aVertexPosition*scale*aspectRatioFix,  // vertice offset, that will be passed to fragment shader  v_positionWithOffset=gl_Position+vec4(1,1,1,1);}

## Fragment Shader Example

Read more at Fragment Shaders.

    precision highp float;// parameter from Vertex Shadervarying vec4 v_positionWithOffset;void main(void){  // color, attached to current verticle {r,g,b,alpha}  // same a[  //   v_positionWithOffset.x,  //   v_positionWithOffset.y,   //   v_positionWithOffset.z,   //   1  //  ]  gl_FragColor=vec4(v_positionWithOffset.xyz,1);}