From 66326bca06c01af02a89b7c8072e8c96e11d880e Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Sun, 5 Sep 2021 16:23:37 +0900
Subject: [PATCH] draw from index

---
 index.ts | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/index.ts b/index.ts
index 1e53a76..8793d81 100644
--- a/index.ts
+++ b/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.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
-        gl.drawArrays(gl.TRIANGLES,0,3);
-        gl.deleteBuffer(positionBuffer);
+
+        gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0);
     }
 }
 
@@ -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;