Initial setup (Webpack, TypeScript, WebGL)

src/default.fs

@@ -0,0 +1,3 @@
+void main(void) {
+	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+}

src/default.vs

@@ -0,0 +1,8 @@
+attribute vec3 aVertexPosition;
+
+uniform mat4 uVMatrix;
+uniform mat4 uPMatrix;
+
+void main(void) {
+	gl_Position = uPMatrix * uVMatrix * vec4(aVertexPosition, 1.0);
+}

src/index.ts

@@ -0,0 +1,141 @@
+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();
+})();