diff --git a/index.html b/index.html index 241b9e2..c9efe47 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@ - + \ No newline at end of file diff --git a/index.ts b/index.ts index 8f3d0e5..1e53a76 100644 --- a/index.ts +++ b/index.ts @@ -2,47 +2,80 @@ import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util"; /// -import vert_src from "./src/vertex.vert"; -import frag_src from "./src/fragment.frag"; +import vert_src from "./src/vertex"; +import frag_src from "./src/fragment"; -function main(){ +function findCanvas(){ const canvas = document.querySelector("canvas"); if(canvas === null){ console.error("couldn't find canvas"); - return; + throw new Error("canvas is null"); } - let gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null; + return canvas; +} + +function getGLContext(canvas : HTMLCanvasElement){ + const gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null; if(gl === null){ console.error("webgl2 is not supported!"); - return; + throw new Error("webgl2 not supported"); } - try{ - const program = createProgramFromSource(gl,vert_src,frag_src); - gl.useProgram(program); - } - catch(e){ - if(e instanceof ShaderError){ - console.error(e.message,e.getShaderInfoLog(gl)); - } - else if(e instanceof ProgramError){ - console.error(e.message,e.getProgramInfoLog(gl)); - } - throw e; - } - const position = [ - -0.5,-0.5, - 0.0,0.5, - 0.5,-0.5 - ]; - let positionBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); + return gl; +} - gl.enableVertexAttribArray(0); +class Renderer{ + gl : WebGL2RenderingContextStrict; + constructor(gl: WebGL2RenderingContextStrict){ + this.gl = gl; + try{ + const program = createProgramFromSource(gl,vert_src,frag_src); + gl.useProgram(program); + } + catch(e){ + if(e instanceof ShaderError){ + console.log(e.message,"\n",e.info); + } + else if(e instanceof ProgramError){ + console.log(e.message,"\n",e.info); + } + else throw e; + } + } + draw(){ + const gl = this.gl; + gl.viewport(0,0,gl.canvas.width,gl.canvas.height); + const position = [ + -0.5,-0.5, + 0.0,0.5, + 0.5,-0.5 + ]; + let positionBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); - gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0); + gl.enableVertexAttribArray(0); + + gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0); + + const floatPosition = new Float32Array(position); + gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW); + gl.drawArrays(gl.TRIANGLES,0,3); + gl.deleteBuffer(positionBuffer); + } +} - const floatPosition = new Float32Array(position); - gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW); - gl.drawArrays(gl.TRIANGLES,0,3); +function main(){ + const canvas = findCanvas(); + const gl = getGLContext(canvas); + const renderer = new Renderer(gl); + + window.addEventListener("resize",(e)=>{ + e.preventDefault(); + canvas.width = document.body.clientWidth; + canvas.height = document.body.clientHeight; + renderer.draw(); + }); + canvas.width = document.body.clientWidth; + canvas.height = document.body.clientHeight; + renderer.draw(); } main(); \ No newline at end of file diff --git a/src/gl_util.ts b/src/gl_util.ts index 49d0ad4..cbdc19b 100644 --- a/src/gl_util.ts +++ b/src/gl_util.ts @@ -3,23 +3,17 @@ import GL2 = WebGL2RenderingContextStrict; export class ShaderError extends Error{ constructor( - readonly shader:WebGLShader - ,msg?:string){ - super(msg); - } - getShaderInfoLog(gl:GL2){ - return gl.getShaderInfoLog(this.shader); + readonly info:string + ){ + super("Could not compile shader!"); } } export class ProgramError extends Error{ constructor( - readonly program:WebGLProgram - ,msg?:string){ - super(msg); - } - getProgramInfoLog(gl:GL2){ - return gl.getProgramInfoLog(this.program); + readonly info:string + ){ + super("Could not link program"); } } @@ -32,7 +26,8 @@ export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGL gl.compileShader(shader); const status = gl.getShaderParameter(shader,gl.COMPILE_STATUS); if(!status){ - throw new ShaderError(shader,"Could not compile shader!"); + const info = gl.getShaderInfoLog(shader); + throw new ShaderError(info); } return shader; } @@ -46,7 +41,8 @@ export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){ const status = gl.getProgramParameter(program,gl.LINK_STATUS); if(!status){ - throw new ProgramError(program,"Coudl not link program!"); + const info = gl.getProgramInfoLog(program); + throw new ProgramError(info); } return program; }