Gridwave test

index.html

@@ -85,6 +85,13 @@
                 gl_FragColor = vec4(color,1.0);
             }
         </script>
+    <script id="ndc-vs" type="x-shader/x-vertex">
+        attribute vec3 positionAttr;
+     
+        void main(void) {
+            gl_Position = vec4(positionAttr, 1.0);
+        }
+    </script>
     <script id="default-fs" type="x-shader/x-fragment">
         precision mediump float;
 
@@ -92,13 +99,14 @@
             gl_FragColor = vec4(0.0,0.0,1.0,1.0);
         }
     </script>
-    <script id="ndc-vs" type="x-shader/x-vertex">
+    <script id="default-vs" type="x-shader/x-vertex">
             attribute vec3 positionAttr;
 
             uniform mat4 MVP;
+            uniform float uTime;
          
             void main(void) {
-                gl_Position = MVP * vec4(positionAttr, 1.0);
+                gl_Position = MVP * vec4(positionAttr.x,positionAttr.y,positionAttr.z + cos(positionAttr.x*8. + uTime * 0.001), 1.0);
             }
         </script>
 </header>

src/main.ts

@@ -61,7 +61,7 @@ function generateGrid(N: number) {
 }
 var gridVAO: WebGLVertexArrayObject | null = null;
 function initGridVAO() {
-    generateGrid(2);
+    generateGrid(16);
 
     gridVAO = gl.createVertexArray();
     gl.bindVertexArray(gridVAO);
@@ -162,7 +162,7 @@ function initShaders() {
         gl.enableVertexAttribArray(positionAttr);
     }
     { //Get textueShaderProgram
-        let vertexShader = getShader("ndc-vs");
+        let vertexShader = getShader("default-vs");
         let fragmentShader = getShader("default-fs");
 
         if (vertexShader == null || fragmentShader == null) {
@@ -278,11 +278,23 @@ function drawScene() {
 
         var mvp = mat4.create();
         mat4.identity(mvp);
-        mat4.rotateY(mvp, mvp, timeSpent * 0.001);
+        mat4.perspective(mvp, 1.5, viewportWidth / viewportHeight, 0.1, 1000.);
 
+
+        // mat4.rotateY(mvp, mvp, timeSpent * 0.001);
+        //mat4.rotateX(mvp, mvp, 1.5);
+
+        let translation = vec3.create();
+        vec3.set(translation, -0.5, 0.0, -2.0);
+        mat4.translate(mvp, mvp, translation);
+        mat4.rotateX(mvp, mvp, 1.5);
+
+        
         gl.useProgram(textureProgram);
-        let loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "MVP");
-        gl.uniformMatrix4fv(loc, false, mvp);
+        let mvp_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "MVP");
+        gl.uniformMatrix4fv(mvp_loc, false, mvp);
+        let uTime_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "uTime");
+        gl.uniform1f(uTime_loc, timeSpent);
         gl.bindVertexArray(gridVAO);
         gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
     }