redraw on resize
This commit is contained in:
parent
bcef7a452f
commit
d0252f94c9
|
|
@ -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>
|
||||
95
index.ts
95
index.ts
|
|
@ -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));
|
||||
}
|
||||
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();
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue