monoid/computer-graphics-study
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

wrap WebglProgram

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app.ts
View file

@ -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));
}
};

31
src/glWrapper.ts
View file

@ -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);
}
}

4
src/gl_util.ts
View file

@ -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);

12
src/renderer.ts
View file

@ -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(){

10
src/triangle_renderer.ts
View file

@ -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);