wrap WebglProgram

src/app.ts

@@ -19,10 +19,15 @@ export class CanvasApp{
         setTimeout((()=>{
             this.run();
         }).bind(this),delay);
+        this.drawScene();
     }
     loop(){
+        
+    }
+    drawScene(){
         this.gl.clearColor(0,0,0,0);
         this.gl.clear(this.gl.COLOR_BUFFER_BIT);
         this.renderer.draw();
+        requestAnimationFrame(this.drawScene.bind(this));
     }
 };

src/glWrapper.ts

@@ -1,3 +1,5 @@
+import * as util from "./gl_util";
+
 export class VertexBuffer{
     readonly id : WebGLBuffer;
 
@@ -51,4 +53,33 @@ export function createIndexBuffer(gl:WebGL2RenderingContext, data:number[]){
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,id);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(data),gl.STATIC_DRAW);
     return new IndexBuffer(id,data.length);
+}
+
+export class GLProgram{
+    readonly program: WebGLProgram;
+    constructor(program: WebGLProgram){
+        this.program = program;
+    }
+    getActiveUniforms(gl:WebGL2RenderingContext):WebGLActiveInfo[]{
+        const num = gl.getProgramParameter(this.program,gl.ACTIVE_UNIFORMS);
+        const info = [...new Array(num).keys()].map(i=>gl.getActiveUniform(this.program,i));
+        return info;
+    }
+    getActiveAttributes(gl:WebGL2RenderingContext):WebGLActiveInfo[]{
+        const num = gl.getProgramParameter(this.program,gl.ACTIVE_ATTRIBUTES);
+        const info = [...new Array(num).keys()].map(i=>gl.getActiveAttrib(this.program,i));
+        return info;
+    }
+    getAttribLocation(gl:WebGL2RenderingContext,name:string):number{
+        return gl.getAttribLocation(this.program,name);
+    }
+    getUniformLocation(gl:WebGL2RenderingContext,name:string):WebGLUniformLocation{
+        return gl.getUniformLocation(this.program,name);
+    }
+    use(gl:WebGL2RenderingContext):void{
+        gl.useProgram(this.program);
+    }
+    unuse(gl:WebGL2RenderingContext):void{
+        gl.useProgram(null);
+    }
 }

src/gl_util.ts

@@ -29,7 +29,7 @@ export function compileShader(gl:WebGL2RenderingContext, source:string, type: GL
     return shader;
 }
 
-export function createProgram(gl:WebGL2RenderingContext, vertex:WebGLShader,frag:WebGLShader){
+export function createProgram(gl:WebGL2RenderingContext, vertex:WebGLShader,frag:WebGLShader):WebGLProgram{
     const program = gl.createProgram();
     gl.attachShader(program,vertex);
     gl.attachShader(program,frag);
@@ -43,7 +43,7 @@ export function createProgram(gl:WebGL2RenderingContext, vertex:WebGLShader,frag
     }
     return program;
 }
-export function createProgramFromSource(gl:WebGL2RenderingContext, vert:string,frag:string){
+export function createProgramFromSource(gl:WebGL2RenderingContext, vert:string,frag:string):WebGLProgram{
     const vert_shader = compileShader(gl,vert,gl.VERTEX_SHADER);
     const frag_shader = compileShader(gl,frag,gl.FRAGMENT_SHADER);
     return createProgram(gl,vert_shader,frag_shader);

src/renderer.ts

@@ -11,7 +11,7 @@ import { getUniformDefaultValue, UniformSet } from "./uniform";
 export class Renderer2D implements RenderProgram{
     gl : WebGL2RenderingContext;
     uniforms : UniformSet;
-    program: WebGLProgram;
+    program: G.GLProgram;
     
     vao: WebGLVertexArrayObject;
     positionBuffer: G.VertexBuffer;
@@ -20,8 +20,8 @@ export class Renderer2D implements RenderProgram{
         this.gl = gl;
         this.uniforms = getUniformDefaultValue();
         try{
-            this.program = createProgramFromSource(gl,vert_src,frag_src);
+            this.program = new G.GLProgram(createProgramFromSource(gl,vert_src,frag_src));
-            gl.useProgram(this.program);
+            this.program.use(gl);
         }
         catch(e){
             if(e instanceof ShaderError){
@@ -46,7 +46,7 @@ export class Renderer2D implements RenderProgram{
             2,3,0
         ];
         this.vao = gl.createVertexArray();
-        const posLoc = gl.getAttribLocation(this.program,"pos");
+        const posLoc = this.program.getAttribLocation(gl,"pos"); 
         gl.bindVertexArray(this.vao);
         
         this.positionBuffer = G.createVertexBuffer(gl,position);
@@ -59,13 +59,13 @@ export class Renderer2D implements RenderProgram{
         this.settingUniform(this.uniforms);
     }
     useProgram(){
-        this.gl.useProgram(this.program);
+        this.program.use(this.gl);
     }
     settingUniform(u:UniformSet){
         const gl = this.gl;
         this.uniforms = u;
         this.useProgram();
-        const location = gl.getUniformLocation(this.program, "u_color"); //u_color 변수 위치를 참조
+        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 데이터를 전달
     }
     draw(){

src/triangle_renderer.ts

@@ -1,6 +1,6 @@
 import { RenderProgram } from "./program";
 import {createProgramFromSource, ProgramError, ShaderError} from "./gl_util";
-import { createIndexBuffer, createVertexBuffer, IndexBuffer, VertexBuffer } from "./glWrapper";
+import { createIndexBuffer, createVertexBuffer, GLProgram, IndexBuffer, VertexBuffer } from "./glWrapper";
 
 const vertex_shader_code = `#version 300 es
 layout(location=0) in vec4 pos;
@@ -19,11 +19,11 @@ void main() {
 `;
 
 export class TriangleRenderer implements RenderProgram{
-    readonly program : WebGLProgram;
+    readonly program : GLProgram;
     vao : WebGLVertexArrayObject;
     indexBuffer : IndexBuffer;
     constructor(gl: WebGL2RenderingContext){try{
-        this.program = createProgramFromSource(gl,vertex_shader_code,frag_shader_code);
+        this.program = new GLProgram(createProgramFromSource(gl,vertex_shader_code,frag_shader_code));
         //gl.useProgram(this.program);
     }
     catch(e){
@@ -42,7 +42,7 @@ export class TriangleRenderer implements RenderProgram{
             0.0,0.25,
             0.0,0.75]);
         this.indexBuffer = createIndexBuffer(gl,[0,1,2]);
-        const posLoc = gl.getAttribLocation(this.program,"pos");
+        const posLoc = this.program.getAttribLocation(gl,"pos");
         this.vao = gl.createVertexArray();
         gl.bindVertexArray(this.vao);
         gl.enableVertexAttribArray(posLoc);
@@ -51,7 +51,7 @@ export class TriangleRenderer implements RenderProgram{
         this.indexBuffer.bind(gl);
     }
     draw(gl: WebGL2RenderingContext): void {
-        gl.useProgram(this.program);
+        this.program.use(gl);
         gl.bindVertexArray(this.vao);
         this.indexBuffer.bind(gl);
         gl.drawElements(gl.TRIANGLES,this.indexBuffer.count,gl.UNSIGNED_SHORT,0);