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";
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;
    }
    init(){
        const gl = this.gl;
        let program: WebGLProgram;
        try{
            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;
        }
        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);

        let location = gl.getUniformLocation(program, "u_color"); //u_color 변수 위치를 참조
        gl.uniform4f(location, 0.8, 0.3, 0.8, 1.0); //해당 위치에 0.2, 0.3, 0.8, 1.0 데이터를 전달

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