lesson-6/index.html

<!DOCTYPE html>
<html>
<head>
  <title>WebGL crumbs</title>
</head>
<body>

  <h1>Lesson 6</h1>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script>
    // 1: Create the rendering context
    {
      // 1.1: Initialize the context
      {
        // Get a canvas
        var canvas = document.getElementById('canvas');
        // Create a 3D rendering context
        var gl = canvas.getContext('webgl');
        // Check errors
        if (!gl) {
          throw new Error('WebGL not supported!')
        }
      }

      // 1.2: Initialize the data
      {
        // vertex shader source code
        var vertex_shader_source = `
          attribute vec2 vertex;
          attribute vec3 color;

          varying vec3 _color;

          void main(void) {
            gl_Position = vec4(vertex, 0.0, 1.0);
            gl_PointSize = 10.0;
            _color = color;
          }
        `;

        // fragment shader source code
        var fragment_shader_source =  `
          precision mediump float;

          varying vec3 _color;

          void main(void) {
            gl_FragColor = vec4(_color, 1.0);
          }
        `;

        // vertices
        var vertices = [
          -1.0, -1.0, 1.0, 0.0, 0.0,
           1.0, -1.0, 0.0, 1.0, 0.0,
           0.0, 1.0, 0.0, 0.0, 1.0
        ];
      }
    }

    // 2: Create the shaders and the shader program
    {

      // 2.1: Create the vertex shader
      {
        // Create a vertex shader object
        var vertex_shader = gl.createShader(gl.VERTEX_SHADER);
        // Attach vertex shader source code
        gl.shaderSource(vertex_shader, vertex_shader_source);
        // Compile the vertex shader
        gl.compileShader(vertex_shader);
        // Check errors
        {
          let compiled = gl.getShaderParameter(vertex_shader, gl.COMPILE_STATUS);
          if (!compiled) {
            let log = gl.getShaderInfoLog(vertex_shader)
            throw new Error(log)
          }
        }
      }

      // 2.2: Create the fragment shader
      {
        // Create fragment shader object
        var fragment_shader = gl.createShader(gl.FRAGMENT_SHADER);
        // Attach fragment shader source code
        gl.shaderSource(fragment_shader, fragment_shader_source);
        // Compile the fragmentt shader
        gl.compileShader(fragment_shader);
        // Check errors
        {
          let compiled = gl.getShaderParameter(fragment_shader, gl.COMPILE_STATUS);
          if (!compiled) {
            let log = gl.getShaderInfoLog(fragment_shader)
            throw new Error(log)
          }
        }
      }

      // 2.3: Create the shader program
      {
        // Create a shader program object
        var shader_program = gl.createProgram();
        // Attach the vertex shader
        gl.attachShader(shader_program, vertex_shader);
        // Attach the fragment shader
        gl.attachShader(shader_program, fragment_shader);
        // Link both programs
        gl.linkProgram(shader_program);
        // Use the combined shader program object
        gl.useProgram(shader_program);
      }
    }

    // 3: Create the buffer objects
    {
      // 3.1: Create the vertex buffer
      {
        // Create an empty buffer object to store the vertex buffer
        var vertex_buffer = gl.createBuffer();
        //Bind appropriate array buffer to it
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        // Pass the vertex data to the buffer
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        // Unbind the buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
      }
    }

    // 4: Bind the buffer objects to the shaders
    {
      // 4.1: Bind the vertex buffer to the vertex attribute
      {
        // Bind the vertex buffer object (VBO)
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        // Point an attribute to the currently bound VBO
        let attribute = gl.getAttribLocation(shader_program, 'vertex');

        // define the offset in bytes between the beginning of consecutive vertex attributes
        // 5 values (x, y, r, g, b) * 4 bytes per value (float) = 20 bytes
        let stride = 5 * Float32Array.BYTES_PER_ELEMENT
        // define the offset in bytes of the first component in the vertex attribute array
        // (x, y) starts from 0
        let offset = 0 * Float32Array.BYTES_PER_ELEMENT
        gl.vertexAttribPointer(attribute, 2, gl.FLOAT, false, stride, offset);
        // Enable the attribute
        gl.enableVertexAttribArray(attribute);

        gl.bindBuffer(gl.ARRAY_BUFFER, null);
      }

      // 4.1: Bind the vertex buffer to the vertex attribute
      {
        // Bind the vertex buffer object (VBO)
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        // Point an attribute to the currently bound VBO
        let attribute = gl.getAttribLocation(shader_program, 'color');
        // define the offset in bytes between the beginning of consecutive vertex attributes
        // 5 values (x, y, r, g, b) * 4 bytes per value (float) = 20 bytes
        let stride = 5 * Float32Array.BYTES_PER_ELEMENT
        // define the offset in bytes of the first component in the vertex attribute array
        // (r, g, b) starts after (x, y)
        // 2 values (x, y) * 4 bytes per value (float) = 8
        let offset = 2 * Float32Array.BYTES_PER_ELEMENT
        gl.vertexAttribPointer(attribute, 3, gl.FLOAT, false, stride, offset);
        // Enable the attribute
        gl.enableVertexAttribArray(attribute);

        gl.bindBuffer(gl.ARRAY_BUFFER, null);
      }

    }

    // 5: Draw
    {
      // 5.1: Clear
      {
        // Clear the canvas
        gl.clearColor(0.5, 0.5, 0.5, 1);
        // Clear the color buffer bit
        gl.clear(gl.COLOR_BUFFER_BIT);
        // Set the view port
        gl.viewport(0, 0, canvas.width, canvas.height);
      }

      // 5.2: Draw
      {
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        // Draw the triangle
        gl.drawArrays(gl.TRIANGLES, 0, 3);
      }
    }
  </script>
</body>
</html>