webglの初期化

main.ts

let VSHADER_SRC = `void main(){
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 10.0;
}`;

let FSHADER_SRC = `void main(){
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);   
}`;

function main(){
    var canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("webgl");
    
    if(!canvas){
        alert("No Canvas");
        return;
    }

    var gl = getWebGLContext(canvas);

    if(!initShaders(gl, VSHADER_SRC, FSHADER_SRC)){
        alert("can't initialize shader");
        return;
    }

    gl.clearColor(0,0,0,1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.POINTS, 0, 1);
}

function getWebGLContext(canvas: HTMLCanvasElement): WebGLRenderingContext{
    var gl: WebGLRenderingContext = null;
        
    gl = <WebGLRenderingContext>canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

    if(!gl){
        alert("cant support webgl")
    }
    return gl;
}

function initShaders(gl: WebGLRenderingContext, vs: string, fs: string): boolean{
    var v_shader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(v_shader, vs);
    gl.compileShader(v_shader);
    // TODO Errorチェック
    var f_shader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(f_shader, fs);
    gl.compileShader(f_shader);

    var program = gl.createProgram();
    gl.attachShader(program, v_shader);
    gl.attachShader(program, f_shader);
    gl.linkProgram(program);
    // TODO linkチェック
    gl.useProgram(program);
    return true;
}

main();