91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
/// <reference path="node_modules/webgl-strict-types/index.d.ts" />
|
|
import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util";
|
|
|
|
/// <reference path="./src/glsl.d.ts" />
|
|
import vert_src from "./src/vertex";
|
|
import frag_src from "./src/fragment";
|
|
|
|
function findCanvas(){
|
|
const canvas = document.querySelector("canvas");
|
|
if(canvas === null){
|
|
console.error("couldn't find canvas");
|
|
throw new Error("canvas is 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!");
|
|
throw new Error("webgl2 not supported");
|
|
}
|
|
return gl;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
init(){
|
|
const gl = this.gl;
|
|
const position = [
|
|
-0.5,-0.5,
|
|
0.5,-0.5,
|
|
0.5,0.5,
|
|
-0.5,0.5
|
|
];
|
|
const index = [
|
|
0,1,2,
|
|
2,3,0
|
|
];
|
|
const positionBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(position),gl.STATIC_DRAW);
|
|
|
|
const indexBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(index),gl.STATIC_DRAW);
|
|
|
|
}
|
|
draw(){
|
|
const gl = this.gl;
|
|
gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
|
|
|
|
gl.enableVertexAttribArray(0);
|
|
gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
|
|
|
|
gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0);
|
|
}
|
|
}
|
|
|
|
function main(){
|
|
const canvas = findCanvas();
|
|
const gl = getGLContext(canvas);
|
|
const renderer = new Renderer(gl);
|
|
renderer.init()
|
|
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(); |