add grid init method

src/main.ts

@@ -1,4 +1,4 @@
-var gl: WebGLRenderingContext;
+var gl: WebGL2RenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 
@@ -6,9 +6,9 @@ var viewportHeight = 0;
 function initGL(canvas: HTMLCanvasElement) {
     var gltemp;
     try {
-        gltemp = canvas.getContext("webgl");
+        gltemp = canvas.getContext("webgl2");
         if (!gltemp)
-            gltemp = canvas.getContext("experimental-webgl");
+            gltemp = canvas.getContext("experimental-webgl2");
         if (gltemp != null) {
             viewportWidth = canvas.width;
             viewportHeight = canvas.height;
@@ -21,42 +21,59 @@ function initGL(canvas: HTMLCanvasElement) {
     if (gltemp == null) {
         alert("Unable to initialize WebGL. Your browser or machine may not support it.");
     }
-    gl = <WebGLRenderingContext>gltemp;
+    gl = <WebGL2RenderingContext>gltemp;
 }
 
-var gridIndices = [];
-var gridVertices = [];
-function genereateGrid(N: number) {
-	for (let j = 0; j <= N; ++j)
-	{
-		for (let i = 0; i <= N; ++i)
-		{
-			//Generate Vertices
-			let x = i / N;
-			let y = j / N;
-			let z = 0;
+/** Grid for the watersurface */
+var gridIndices: number[] = [];
+var gridVertices: number[] = [];
+function generateGrid(N: number) {
+    for (let j = 0; j <= N; ++j) {
+        for (let i = 0; i <= N; ++i) {
+            //Generate Vertices
+            let x = i / N;
+            let y = j / N;
+            let z = 0;
             gridVertices.push(x);
             gridVertices.push(y);
             gridVertices.push(z);
 
-			//Generate Indices
-			if (i < N && j < N) //Skip edges
-			{
-				let row1 = j * (N + 1);
-				let row2 = (j + 1) * (N + 1);
+            //Generate Indices
+            if (i < N && j < N) //Skip edges
+            {
+                let row1 = j * (N + 1);
+                let row2 = (j + 1) * (N + 1);
 
-				// triangle 1
+                // triangle 1
                 gridIndices.push(row1 + i);
                 gridIndices.push(row1 + i + 1);
                 gridIndices.push(row2 + i + 1);
 
-				// triangle 2
+                // triangle 2
                 gridIndices.push(row1 + i);
                 gridIndices.push(row2 + i + 1);
                 gridIndices.push(row2 + i);
-			}
-		}
-	}
+            }
+        }
+    }
+}
+var gridVAO: WebGLVertexArrayObject | null = null;
+function initGridVAO() {
+    generateGrid(2);
+
+    gridVAO = gl.createVertexArray();
+    gl.bindVertexArray(gridVAO);
+
+    let vboGrid: WebGLBuffer | null = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridVertices), gl.STATIC_DRAW);
+
+    let iboGrid: WebGLBuffer | null = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(gridIndices), gl.STATIC_DRAW);
+
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
+    gl.enableVertexAttribArray(0);
 }
 
 /** Init Geomtry for an Triangle */
@@ -173,7 +190,7 @@ function initShaders() {
 
 /** Init an FBO used for the first render pass / perlin noise */
 var perlinNoiseFBO: WebGLFramebuffer | null = null;
-var textureFBO : WebGLTexture | null = null;
+var textureFBO: WebGLTexture | null = null;
 var perlinNoiseFBOWidth = 256;
 var ferlinNoiseFBOHeight = 256;
 function initFBO() {
@@ -249,7 +266,7 @@ function drawScene() {
     }
 
     //--- Second render pass -> Geomtry with displacement by perlin noise texture ---
-    { 
+    {
         gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
         gl.viewport(0, 0, viewportWidth, viewportHeight);
 
@@ -275,11 +292,11 @@ function drawScene() {
 
 function main() {
     const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
-
     initGL(canvas);
     initShaders();
     initGeometry();
     initFBO();
+    initGridVAO();
 
     if (gl.getError() != gl.NO_ERROR) {
         console.log("OpenGL Error!: ");