draw from index

index.ts

@@ -41,25 +41,35 @@ class Renderer{
             else throw e;
         }
     }
+    init(){
+        const gl = this.gl;
+        const position = [
+            -0.5,-0.5,
+            0.5,-0.5,
+            0.5,0.5,
+            -0.5,0.5
+        ];
+        const index = [
+            0,1,2,
+            2,3,0
+        ];
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(position),gl.STATIC_DRAW);
+
+        const indexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(index),gl.STATIC_DRAW);
+        
+    }
     draw(){
         const gl = this.gl;
         gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
-        const position = [
-            -0.5,-0.5,
-            0.0,0.5,
-            0.5,-0.5
-        ];
-        let positionBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
 
         gl.enableVertexAttribArray(0);
-    
         gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
 
-        const floatPosition = new Float32Array(position);
+        gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0);
-        gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
-        gl.drawArrays(gl.TRIANGLES,0,3);
-        gl.deleteBuffer(positionBuffer);
     }
 }
 
@@ -67,7 +77,7 @@ function main(){
     const canvas = findCanvas();
     const gl = getGLContext(canvas);
     const renderer = new Renderer(gl);
-
+    renderer.init()
     window.addEventListener("resize",(e)=>{
         e.preventDefault();
         canvas.width = document.body.clientWidth;