rpgedit/src/index.ts

import {mat4} from 'gl-matrix';


(() => {
	const body = document.getElementsByTagName('body')[0];

	const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
	if (!canvas)
		return;

	const gl = canvas.getContext('webgl') as WebGLRenderingContext;
	if (!gl)
		return;

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);


	function compileShader(type: number, src: string): WebGLShader|null {
		let shader = gl.createShader(type);
		if (!shader) {
			console.error('Unable to create shader');
			return null;
		}

		gl.shaderSource(shader, src);
		gl.compileShader(shader);

		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
			console.error('Unable to compile shader');
			return null;
		}

		return shader;
	}


	let shaderVertexPositionAttribute: number;
	let shaderPMatrixUniform: WebGLUniformLocation|null;
	let shaderVMatrixUniform: WebGLUniformLocation|null;

	function initShaders(): void {
		let shaderProgram = gl.createProgram();

		let vertexShader = compileShader(gl.VERTEX_SHADER, require('./default.vs'));

		let fragmentShaderSrc = require('./default.fs');
		let fragmentShader = compileShader(gl.FRAGMENT_SHADER, require('./default.fs'));

		if (!vertexShader || !fragmentShader)
			return;

		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);

		gl.linkProgram(shaderProgram);
		if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
			console.error('Unable to link shader');
			return;
		}

		gl.useProgram(shaderProgram);

		shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
		gl.enableVertexAttribArray(shaderVertexPositionAttribute);

		shaderPMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
		shaderVMatrixUniform = gl.getUniformLocation(shaderProgram, "uVMatrix");
	}


	const triangleVertexPositionBuffer = gl.createBuffer();
	const squareVertexPositionBuffer = gl.createBuffer();

	function initScene(): void {
		gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
		const triangleVertices = [
			0.0,  1.0,  0.0,
			-1.0, -1.0,  0.0,
			1.0, -1.0,  0.0
		];
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
		const squareVertices = [
			1.0,  1.0,  0.0,
			-1.0,  1.0,  0.0,
			1.0, -1.0,  0.0,
			-1.0, -1.0,  0.0
		];
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(squareVertices), gl.STATIC_DRAW);
	}

	initShaders();
	initScene();

	const pMatrix = mat4.create();
	const vMatrix = mat4.create();

	function drawScene(): void {
		if (!shaderPMatrixUniform || !shaderVMatrixUniform)
			return;

		let width = canvas.width, height = canvas.height

		gl.viewport(0, 0, width, height);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

		mat4.perspective(pMatrix, 45, width / height, 0.1, 100.0);
	        gl.uniformMatrix4fv(shaderPMatrixUniform, false, pMatrix);

		mat4.identity(vMatrix);
		mat4.translate(vMatrix, vMatrix, [-1.5, 0.0, -7.0]);
	        gl.uniformMatrix4fv(shaderVMatrixUniform, false, vMatrix);

		gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
		gl.vertexAttribPointer(shaderVertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
		gl.drawArrays(gl.TRIANGLES, 0, 3);

		mat4.translate(vMatrix, vMatrix, [3.0, 0.0, 0.0]);
	        gl.uniformMatrix4fv(shaderVMatrixUniform, false, vMatrix);

		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
		gl.vertexAttribPointer(shaderVertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
	}

	function setSize(): void {
                var e = document.documentElement;
                var w = window.innerWidth || e.clientWidth || body.clientWidth;
                var h = window.innerHeight || e.clientHeight || body.clientHeight;

                canvas.width = w;
                canvas.height = h;

                drawScene()
        }

	window.addEventListener('resize', () => setSize());
	setSize();
})();