Untitled

<html>

   <head>
   <title>Learning WebGL &mdash; lesson 1</title>
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

   <script type="text/javascript" src="gl-matrix-min.js"></script>
   <script type="text/javascript" src="webgl-utils.js"></script>

   <style>
       body {
           margin: 100px;
       }
   </style>

   <script id="shader-fs" type="x-shader/x-fragment">
       precision mediump float;
       varying vec4 vColor;
       void main(void) {
           gl_FragColor = vColor;
       }
   </script>

   <script id="shader-vs" type="x-shader/x-vertex">
       attribute vec3 aVertexPosition;
       attribute vec4 aVertexColor;

       uniform mat4 uMVMatrix;
       uniform mat4 uPMatrix;

       varying vec4 vColor;

       void main(void) {
           gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
           vColor = aVertexColor;
       }
   </script>

   <script type="text/javascript">
       let gl;

       function initGL(canvas) {
           try {
               gl = canvas.getContext("experimental-webgl");
               gl.viewportWidth = canvas.width;
               gl.viewportHeight = canvas.height;
           } catch (e) {
           }
           if (!gl) {
               alert("Could not initialise WebGL, sorry :-(");
           }
       }
       function getShader(gl, id) {
           let shaderScript = document.getElementById(id);
           if (!shaderScript) {
               return null;
           }
           let str = "";
           let k = shaderScript.firstChild;
           while (k) {
               if (k.nodeType == 3) {
                   str += k.textContent;
               }
               k = k.nextSibling;
           }
           let shader;
           if (shaderScript.type == "x-shader/x-fragment") {
               shader = gl.createShader(gl.FRAGMENT_SHADER);
           } else if (shaderScript.type == "x-shader/x-vertex") {
               shader = gl.createShader(gl.VERTEX_SHADER);
           } else {
               return null;
           }
           gl.shaderSource(shader, str);
           gl.compileShader(shader);
           if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
               alert(gl.getShaderInfoLog(shader));
               return null;
           }
           return shader;
       }

       let shaderProgram;

       function initShaders() {
           let fragmentShader = getShader(gl, "shader-fs");

           let vertexShader = getShader(gl, "shader-vs");

           shaderProgram = gl.createProgram();
           gl.attachShader(shaderProgram, vertexShader);
           gl.attachShader(shaderProgram, fragmentShader);
           gl.linkProgram(shaderProgram);
           if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
               alert("Could not initialise shaders");
           }
           gl.useProgram(shaderProgram);

           shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
           gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

           shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
           gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

           shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
           shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
       }

       //already defined in webgl-utils.js
       // let mvMatrix = mat4.create();
       // let pMatrix = mat4.create();

       function setMatrixUniforms() {
           gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
           gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
       }

       let pyramidVertexPositionBuffer;
       let pyramidVertexColorBuffer;


       const numOfElements = 10;


       function Pyramid() {
         this.vertices = [
               // Front face
               0.0,  1.0,  0.0,
               -1.0, -1.0,  1.0,
               1.0, -1.0,  1.0,
               // Right face
               0.0,  1.0,  0.0,
               1.0, -1.0,  1.0,
               1.0, -1.0, -1.0,
               // Back face
               0.0,  1.0,  0.0,
               1.0, -1.0, -1.0,
               -1.0, -1.0, -1.0,
               // Left face
               0.0,  1.0,  0.0,
               -1.0, -1.0, -1.0,
               -1.0, -1.0,  1.0,

               //floor
               1.0,  -1.0,  1.0,
               -1.0, -1.0, 1.0,
               -1.0, -1.0,  -1.0,

               -1.0,  -1.0,  -1.0,
               1.0, -1.0, -1.0,
               1.0, -1.0,  1.0
           ];

           this.colors = [
               // Front face
               1.0, 0.0, 0.0, 1.0,
               1.0, 0.0, 0.0, 1.0,
               1.0, 0.0, 0.0, 1.0,
               // Right face
               0.0, 1.0, 0.0, 1.0,
               0.0, 1.0, 0.0, 1.0,
               0.0, 1.0, 0.0, 1.0,
               // Back face
               0.0, 0.0, 1.0, 1.0,
               0.0, 0.0, 1.0, 1.0,
               0.0, 0.0, 1.0, 1.0,
               // Left face
               0.0, 0.0, 0.0, 1.0,
               0.0, 0.0, 0.0, 1.0,
               0.0, 0.0, 0.0, 1.0,

               // Floor
               1.0, 1.0, 1.0, 1.0,
               1.0, 1.0, 1.0, 1.0,
               1.0, 1.0, 1.0, 1.0,
               1.0, 1.0, 1.0, 1.0,
               1.0, 1.0, 1.0, 1.0,
               1.0, 1.0, 1.0, 1.0,
           ];
       };

       function initBuffer(gl, elements) {
           console.log(gl);
          let buffer = gl.createBuffer();
          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(elements), gl.STATIC_DRAW);
          return buffer;
       }

       Pyramid.prototype.makeBuffers = function(gl) {
          this.vertexBuffer = initBuffer(gl, this.vertices);
          this.vertexBuffer.itemSize = 3;
          this.vertexBuffer.numItems = this.vertices.length / this.vertexBuffer.itemSize;

          this.colorBuffer = initBuffer(gl, this.colors);
          this.colorBuffer.itemSize = 4;
          this.colorBuffer.numItems = this.colors.length / this.colorBuffer.itemSize;
       }

       let pyramid = new Pyramid();
       pyramid.makeBuffers(gl);

       var pyramidRotation = -20;

       function drawScene() {
           gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
           gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


           mat4.perspective(pMatrix, degree2radian(90), gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

           mat4.identity(mvMatrix);

           mat4.translate(mvMatrix, mvMatrix, [0, 0.0, -10.0]);

           mvPushMatrix();
           mat4.rotate(mvMatrix, mvMatrix, degToRad(pyramidRotation), [0, 1, 0]);

           gl.bindBuffer(gl.ARRAY_BUFFER, pyramid.vertexBuffer);
           gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramid.vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

           gl.bindBuffer(gl.ARRAY_BUFFER, pyramid.colorBuffer);
           gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramid.colorBuffer.itemSize, gl.FLOAT, false, 0, 0);

           setMatrixUniforms();
           gl.drawArrays(gl.TRIANGLES, 0, pyramid.vertexBuffer.numItems);

           mvPopMatrix();
       }

       var lastTime = 0;
       function animate() {
           var timeNow = new Date().getTime();
           if (lastTime != 0) {
               var elapsed = timeNow - lastTime;
               pyramidRotation += (90 * elapsed) / 1000.0;
           }
           lastTime = timeNow;
       }

       function tick() {
           drawScene();
           // animate();
           // requestAnimationFrame(tick);
       }

       function webGLStart() {
           let canvas = document.getElementById("lesson01-canvas");
           initGL(canvas);
           initShaders();
           pyramid.makeBuffers(gl);
           gl.clearColor(0.7, 0.7, 0.7, 1.0);
           gl.enable(gl.DEPTH_TEST);

           tick();
       }


       const degree2radian = degrees => degrees * Math.PI / 180;
   </script>


   </head>


   <body onload="webGLStart();">
       <canvas id="lesson01-canvas" style="border: none;" width="800" height="800"></canvas>
   </body>

   </html>