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>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

89
index.ts
View File

@ -2,47 +2,80 @@
import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util";
/// <reference path="./src/glsl.d.ts" />
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));
return gl;
}
class Renderer{
gl : WebGL2RenderingContextStrict;
constructor(gl: WebGL2RenderingContextStrict){
this.gl = gl;
try{
const program = createProgramFromSource(gl,vert_src,frag_src);
gl.useProgram(program);
}
else if(e instanceof ProgramError){
console.error(e.message,e.getProgramInfoLog(gl));
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;
}
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);
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.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);
gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES,0,3);
const floatPosition = new Float32Array(position);
gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
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();

24
src/gl_util.ts
View File

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