lesson-0/index.html

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

  <h1>Lesson 0</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 = `
          void main(void) {
            //nothing todo yet
          }
        `;

        // fragment shader source code
        var fragment_shader_source =  `
          void main(void) {
            //nothing todo yet
          }
        `;

        var clear_color = [0.5, 0.5, 0.5, 1];
      }
    }

    // 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: Draw
    {
      // 3.1: Clear canvas
      {
        gl.clearColor(1, 0, 0, 0.5);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.clearColor(1, 0, 0, 0.2);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // Set the view port
        gl.viewport(0, 0, canvas.width, canvas.height);
      }
      // 3.2: Draw
      {

        //...
      }
    }
  </script>
</body>
</html>