Drawing the Serpinski Gasket with WebGL: Part 1, the HTML file

I want to keep programming so I am moving to 2.8, The Gasket Program.
I am using my own code, so it is different from that in the book (somewhat)
Ultimately we want the code posted here
This is much easier if you have a collection of utilities to go with webGL.
- The authors have made this available on the book code git project (see the Common folder)
- I have a local copy here.
- I extracted it and placed it in the top level of my working directory.
  - IE I am working in ~bennett/f360-18
  - I suppose you could link to that if you wish.
- This contains four files.
  - MV.js
    - This is a collection of helper functions.
    - In my code today I will use add and scale
    - Note it also defines vec2, vec3, and vec4: vector creation functions
  - initShaders.js and initShaders2.js
    - These are utilities to compile and load shaders.
    - More on these later.
    - But we need them for our program to run now.
  - webgl-utils.js
    - Utility functions for webGL that make life much easier.
The HTML file first.
- Shaders
  - Shaders are programs that run on GPU
  - You must supply two shaders
    - The vertex shader
    - The fragment shader.
  - Shader placement
    - The "best" way do do shaders for non-web based programs is in the HTML file.
    - They are first.
    - There is a way to move them out, but that is problematic.
    - So we will do it this way.
  - We will learn how to interact with shaders in the future.
  - But for now we will just use two default shaders.
  - The vertex shader
    - This shader is handed each vertex.
    - It performs a computation on it and moves it along.
    - ```
    <script id="vertex-shader" type="x-shader/x-vertex" src="vshader.js">
    attribute vec4 vPosition;
    
    void main() {
        gl_PointSize = 3.0;
        gl_Position = vPosition;
    }
    </script>
```
- It declares an input variable (from the CPU program)
- This shader sets the pixel size to be 3.
- And passes the input on to the next shader.
- The fragment shader
  - This is called on a per pixel basis.
  - ```
  <script id="fragment-shader" type="x-shader/x-fragment">
  precision mediump float;
  
  void main() {
      gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
  }
  </script>
```
  - This just sets the color for the pixel.
  - Note that these are both C like.
  - MUCH more on shaders later.
- Next include all of the utilitiy files and the canvas class.
  - ```
  <script type="text/javascript" src="../Common/webgl-utils.js"></script>
  <script type="text/javascript" src="../Common/initShaders.js"></script>
  <script type="text/javascript" src="../Common/MV.js"></script>
  <script type="text/javascript" src="GLCanvas.js"></script>
```
- Finally make the canvas
  - ```
  <body>
  <h1>A Serpinski Gasket With OpenGL</h1>
  <script>
      var WIDTH = 500;
      var HEIGHT = 500;
      var canvas = new Canvas(WIDTH, HEIGHT);
      canvas.Redisplay();
  </script>
  </body>
```