From 0630970a8462c09976826d36a3b9cb8f41baabd4 Mon Sep 17 00:00:00 2001 From: monoid Date: Sat, 2 Oct 2021 20:06:37 +0900 Subject: [PATCH] wrap WebglProgram --- src/app.ts | 5 +++++ src/glWrapper.ts | 31 +++++++++++++++++++++++++++++++ src/gl_util.ts | 4 ++-- src/renderer.ts | 12 ++++++------ src/triangle_renderer.ts | 10 +++++----- 5 files changed, 49 insertions(+), 13 deletions(-) diff --git a/src/app.ts b/src/app.ts index 960d764..3b58496 100644 --- a/src/app.ts +++ b/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)); } }; \ No newline at end of file diff --git a/src/glWrapper.ts b/src/glWrapper.ts index 59e35d4..3be2651 100644 --- a/src/glWrapper.ts +++ b/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); + } } \ No newline at end of file diff --git a/src/gl_util.ts b/src/gl_util.ts index c6f2c5c..ac5ead7 100644 --- a/src/gl_util.ts +++ b/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); diff --git a/src/renderer.ts b/src/renderer.ts index 45fe998..309c15b 100644 --- a/src/renderer.ts +++ b/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); - gl.useProgram(this.program); + this.program = new G.GLProgram(createProgramFromSource(gl,vert_src,frag_src)); + 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(){ diff --git a/src/triangle_renderer.ts b/src/triangle_renderer.ts index 3a5b70f..f5dc246 100644 --- a/src/triangle_renderer.ts +++ b/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);