Vao Abstraction

src/glWrapper.ts

@@ -83,3 +83,32 @@ export class GLProgram{
         gl.useProgram(null);
     }
 }
+
+export class VertexArray{
+    readonly vao:WebGLVertexArrayObject;
+    constructor(vao:WebGLVertexArrayObject){
+        this.vao = vao;
+    }
+    bind(gl:WebGL2RenderingContext){
+        gl.bindVertexArray(this.vao);
+    }
+    unbind(gl:WebGL2RenderingContext){
+        gl.bindVertexArray(null);
+    }
+    addBuffer(gl:WebGL2RenderingContext,va:VertexBuffer,loc:number,layout:{
+        /**count of one element */
+        count: GLint,
+        type: GLenum,
+        normalized: GLboolean,
+        stride: GLsizei,
+        offset: GLintptr
+    }){
+        this.bind(gl);
+        va.bind(gl);
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc,layout.count,layout.type,layout.normalized,layout.stride,layout.offset);
+    }
+}
+export function createVertexArray(gl:WebGL2RenderingContext){
+    return new VertexArray(gl.createVertexArray());
+}

src/renderer.ts

@@ -13,7 +13,7 @@ export class Renderer2D implements RenderProgram{
     uniforms : UniformSet;
     program: G.GLProgram;
     
-    vao: WebGLVertexArrayObject;
+    vao: G.VertexArray;
     positionBuffer: G.VertexBuffer;
     indexBuffer: G.IndexBuffer;
     constructor(gl: WebGL2RenderingContext){
@@ -45,17 +45,22 @@ export class Renderer2D implements RenderProgram{
             0,1,2,
             2,3,0
         ];
-        this.vao = gl.createVertexArray();
+        this.vao = G.createVertexArray(gl);
         const posLoc = this.program.getAttribLocation(gl,"pos");
-        gl.bindVertexArray(this.vao);
+        this.vao.bind(gl);
         
         this.positionBuffer = G.createVertexBuffer(gl,position);
-        this.positionBuffer.bind(gl);
+        this.vao.addBuffer(gl,this.positionBuffer,posLoc,{
-        gl.enableVertexAttribArray(posLoc);
+            count:2,
-        gl.vertexAttribPointer(posLoc,2,gl.FLOAT,false,0,0);
+            type:gl.FLOAT,
+            normalized:false,
+            stride:0,
+            offset:0
+        });
 
         this.indexBuffer = G.createIndexBuffer(gl,index);
         this.indexBuffer.bind(gl);
+        this.vao.unbind(gl);
         this.setUniform(this.uniforms);
     }
     useProgram(){
@@ -69,9 +74,9 @@ export class Renderer2D implements RenderProgram{
 
         const location = this.program.getUniformLocation(gl,"u_color");//u_color 변수 위치를 참조
         gl.uniform4f(location, this.uniforms.redcolor, 0.3, 0.8, 1.0); //해당 위치에 0.2, 0.3, 0.8, 1.0 데이터를 전달
+        this.vao.bind(gl);
 
-        gl.bindVertexArray(this.vao);
-        this.indexBuffer.bind(gl);
         gl.drawElements(gl.TRIANGLES,this.indexBuffer.count,gl.UNSIGNED_SHORT,0);
+        this.vao.unbind(gl);
     }
 }

src/triangle_renderer.ts

@@ -1,6 +1,6 @@
 import { RenderProgram } from "./program";
 import {createProgramFromSource, ProgramError, ShaderError} from "./gl_util";
-import { createIndexBuffer, createVertexBuffer, GLProgram, IndexBuffer, VertexBuffer } from "./glWrapper";
+import { createIndexBuffer, createVertexArray, createVertexBuffer, GLProgram, IndexBuffer, VertexArray, VertexBuffer } from "./glWrapper";
 
 const vertex_shader_code = `#version 300 es
 layout(location=0) in vec4 pos;
@@ -20,7 +20,7 @@ void main() {
 
 export class TriangleRenderer implements RenderProgram{
     readonly program : GLProgram;
-    vao : WebGLVertexArrayObject;
+    vao : VertexArray;
     indexBuffer : IndexBuffer;
     constructor(gl: WebGL2RenderingContext){try{
         this.program = new GLProgram(createProgramFromSource(gl,vertex_shader_code,frag_shader_code));
@@ -43,17 +43,22 @@ export class TriangleRenderer implements RenderProgram{
             0.0,0.75]);
         this.indexBuffer = createIndexBuffer(gl,[0,1,2]);
         const posLoc = this.program.getAttribLocation(gl,"pos");
-        this.vao = gl.createVertexArray();
+        this.vao = createVertexArray(gl);
-        gl.bindVertexArray(this.vao);
+        this.vao.bind(gl);
-        gl.enableVertexAttribArray(posLoc);
+        this.vao.addBuffer(gl,vertex,posLoc,{
-        vertex.bind(gl);
+            count: 2,
-        gl.vertexAttribPointer(posLoc,2,gl.FLOAT,false,0,0);
+            type: gl.FLOAT,
+            normalized: false,
+            stride: 0,
+            offset: 0
+        });
         this.indexBuffer.bind(gl);
+        this.vao.unbind(gl);
     }
     draw(gl: WebGL2RenderingContext): void {
         this.program.use(gl);
-        gl.bindVertexArray(this.vao);
+        this.vao.bind(gl);
-        this.indexBuffer.bind(gl);
+
         gl.drawElements(gl.TRIANGLES,this.indexBuffer.count,gl.UNSIGNED_SHORT,0);
     }
 }