wrap WebglProgram

This commit is contained in:
monoid 2021-10-02 20:06:37 +09:00
parent ac7b2f400a
commit 0630970a84
5 changed files with 49 additions and 13 deletions

View File

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

View File

@ -1,3 +1,5 @@
import * as util from "./gl_util";
export class VertexBuffer{ export class VertexBuffer{
readonly id : WebGLBuffer; readonly id : WebGLBuffer;
@ -52,3 +54,32 @@ export function createIndexBuffer(gl:WebGL2RenderingContext, data:number[]){
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(data),gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(data),gl.STATIC_DRAW);
return new IndexBuffer(id,data.length); 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);
}
}

View File

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

View File

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

View File

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