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

redraw on resize

Browse source
This commit is contained in:
monoid 2021-09-05 15:46:06 +09:00
parent bcef7a452f
commit d0252f94c9
3 changed files with 75 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,6 +8,6 @@
<script src="./index.ts" defer></script> <script src="./index.ts" defer></script>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
</body> </body>
</html> </html>

89
index.ts
View file

@ -2,47 +2,80 @@
import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util"; import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util";
/// <reference path="./src/glsl.d.ts" /> /// <reference path="./src/glsl.d.ts" />
import vert_src from "./src/vertex.vert"; import vert_src from "./src/vertex";
import frag_src from "./src/fragment.frag"; import frag_src from "./src/fragment";
function main(){ function findCanvas(){
const canvas = document.querySelector("canvas"); const canvas = document.querySelector("canvas");
if(canvas === null){ if(canvas === null){
console.error("couldn't find canvas"); 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){ if(gl === null){
console.error("webgl2 is not supported!"); console.error("webgl2 is not supported!");
return; throw new Error("webgl2 not supported");
} }
try{ return gl;
const program = createProgramFromSource(gl,vert_src,frag_src); }
gl.useProgram(program);
} class Renderer{
catch(e){ gl : WebGL2RenderingContextStrict;
if(e instanceof ShaderError){ constructor(gl: WebGL2RenderingContextStrict){
console.error(e.message,e.getShaderInfoLog(gl)); this.gl = gl;
try{
const program = createProgramFromSource(gl,vert_src,frag_src);
gl.useProgram(program);
} }
else if(e instanceof ProgramError){ catch(e){
console.error(e.message,e.getProgramInfoLog(gl)); 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;
} }
throw e;
} }
const position = [ draw(){
-0.5,-0.5, const gl = this.gl;
0.0,0.5, gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
0.5,-0.5 const position = [
]; -0.5,-0.5,
let positionBuffer = gl.createBuffer(); 0.0,0.5,
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); 0.5,-0.5
];
let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.enableVertexAttribArray(0); gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0); gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
const floatPosition = new Float32Array(position); const floatPosition = new Float32Array(position);
gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES,0,3); gl.drawArrays(gl.TRIANGLES,0,3);
gl.deleteBuffer(positionBuffer);
}
}
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(); main();

24
src/gl_util.ts
View file

@ -3,23 +3,17 @@ import GL2 = WebGL2RenderingContextStrict;
export class ShaderError extends Error{ export class ShaderError extends Error{
constructor( constructor(
readonly shader:WebGLShader readonly info:string
,msg?:string){ ){
super(msg); super("Could not compile shader!");
}
getShaderInfoLog(gl:GL2){
return gl.getShaderInfoLog(this.shader);
} }
} }
export class ProgramError extends Error{ export class ProgramError extends Error{
constructor( constructor(
readonly program:WebGLProgram readonly info:string
,msg?:string){ ){
super(msg); super("Could not link program");
}
getProgramInfoLog(gl:GL2){
return gl.getProgramInfoLog(this.program);
} }
} }
@ -32,7 +26,8 @@ export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGL
gl.compileShader(shader); gl.compileShader(shader);
const status = gl.getShaderParameter(shader,gl.COMPILE_STATUS); const status = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
if(!status){ if(!status){
throw new ShaderError(shader,"Could not compile shader!"); const info = gl.getShaderInfoLog(shader);
throw new ShaderError(info);
} }
return shader; return shader;
} }
@ -46,7 +41,8 @@ export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){
const status = gl.getProgramParameter(program,gl.LINK_STATUS); const status = gl.getProgramParameter(program,gl.LINK_STATUS);
if(!status){ if(!status){
throw new ProgramError(program,"Coudl not link program!"); const info = gl.getProgramInfoLog(program);
throw new ProgramError(info);
} }
return program; return program;
} }