computer-graphics-study/index.ts

/// <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.vert";
import frag_src from "./src/fragment.frag";

function main(){
    const canvas = document.querySelector("canvas");
    if(canvas === null){
        console.error("couldn't find canvas");
        return;
    }
    let gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null;
    if(gl === null){
        console.error("webgl2 is not supported!");
        return;
    }
    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);

    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);
}
main();