Литература по webGL на TS

import { Scene } from "./Scene";
 
export class Program {
    public static main() {
        let scene = new Scene("renderCanvas");
    }
}
 
Program.main();

import { Triangle } from "./Triangle";
import { ShaderProgram } from "./ShaderProgram";
 
export class Scene {
    private triangle: Triangle;
    private gl: WebGLRenderingContext;
 
    public constructor(canvasID: string) {
 
        // Get reference to canvas element
        let canvas = <HTMLCanvasElement>document.getElementById(canvasID);
        if (canvas === null) {
            console.log("Failed to get canvas element, canvasID = " + canvasID);
            return;
        }
 
        // Get WebGL context
        this.gl = canvas.getContext("webgl");
 
        let shaderProgram = new ShaderProgram(this.gl);
        this.triangle = new Triangle(this.gl, shaderProgram.program);
 
        console.log("Scene was created");
        this.Draw();
    }
 
    private Draw(): void {
        this.gl.clear(this.gl.COLOR_BUFFER_BIT)
        this.triangle.Draw();
    }
}

export class ShaderProgram {
    public program: WebGLProgram;
 
    public constructor(private gl: WebGLRenderingContext) {
        let vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;
 
        let fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(0.4, 0.7, 0.4, 1.0);
            }`;
 
        let vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        let fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        this.program = gl.createProgram();
        gl.attachShader(this.program, vShader);
        gl.attachShader(this.program, fShader);
        gl.linkProgram(this.program);
        gl.useProgram(this.program);
    }
}

export class Triangle {
    private gl: WebGLRenderingContext;
    private program: WebGLProgram;
    private points: number[];
 
    public constructor(gl: WebGLRenderingContext, shaderProgram: WebGLProgram) {
        console.log("Triangle was created");
        this.gl = gl;
        this.program = shaderProgram;
        this.points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.points), gl.STATIC_DRAW);
 
        var a_Position = gl.getAttribLocation(this.program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
    }
 
    public Draw(): void {
        console.log("Triangle was drawn");
        this.gl.drawArrays(this.gl.TRIANGLES, 0, this.points.length / 2);
    }
}

require(['Program'], (Program) => {
 
});