webgl/src/client/main.ts

// @ts-ignore
import mat4 from 'gl-mat4';

let squareRotation = 0.0;

main();

/**
 * The program purpose is encapsulated in a main function
 */
function main() {
	const canvas: any = document.querySelector('#glCanvas')!;
	const gl = canvas.getContext('webgl');

	if (gl == null) {
		canvas.parentNode.removeChild(canvas);
		document.getElementById('root')!.insertAdjacentHTML('beforeend',
			`<p>Unable to initialize WebGL. Your browser or machine may not
			support it.</p>`);
	}

	const vsSource = `
		attribute vec4 aVertexPosition;
		attribute vec4 aVertexColor;

		uniform mat4 uModelViewMatrix;
		uniform mat4 uProjectionMatrix;

		varying lowp vec4 vColor;

		void main() {
			gl_Position = uProjectionMatrix *
				uModelViewMatrix *
				aVertexPosition;
			vColor = aVertexColor;
		}
	`;
	const fsSource = `
		varying lowp vec4 vColor;

		void main() {
			gl_FragColor = vColor;
		}
	`;


	const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

	const programInfo: any = {
		program: shaderProgram,
		attribLocations: {
			vertexPosition: gl.getAttribLocation(shaderProgram,
				'aVertexPosition'),
			vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
		},
		uniformLocations: {
			projectionMatrix: gl.getUniformLocation(
				shaderProgram, 'uProjectionMatrix'),
			modelViewMatrix: gl.getUniformLocation(
				shaderProgram, 'uModelViewMatrix'),
		},
	};

	const buffers = initBuffers(gl);
	let then = 0;

	/**
	 * Draws the scene repeatedly
	 * @param {number} now the current time
	 */
	function render(now: any) {
		now *= 0.001;
		const deltaTime = now - then;
		then = now;
		drawScene(gl, programInfo, buffers, deltaTime);
		requestAnimationFrame(render);
	}
	requestAnimationFrame(render);
}

/**
 * Initialize a shader program, so WebGL knows how to draw our data
 * @param {any} gl the WebGL context
 * @param {string} vsSource the vertex shader source
 * @param {string} fsSource the fragment shader source
 * @return {any} the shader program
 */
function initShaderProgram(gl: any, vsSource: string, fsSource: string) {
	const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
	const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

	// Create the shader program
	const shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	// If creating the shader program failed, alert
	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		alert('Unable to initialize the shader program: ' +
			gl.getProgramInfoLog(shaderProgram));
		return null;
	}
	return shaderProgram;
}

/**
 * load a GL shader
 * @param {any} gl the WebGL context
 * @param {any} type type of shader to load
 * @param {string} source source code of shader
 * @return {any} the loaded shader
 */
function loadShader(gl: any, type: any, source: string) {
	const shader = gl.createShader(type);
	// Send the source to the shader object
	gl.shaderSource(shader, source);
	// Compile the shader program
	gl.compileShader(shader);
	// See if it compiled successfully
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		alert('An error occurred compiling the shaders: ' +
			gl.getShaderInfoLog(shader));
		gl.deleteShader(shader);
		return null;
	}
	return shader;
}

/**
 * init buffers to create a square
 * @param {any} gl the web gl context
 * @return {any} the buffer
 */
function initBuffers(gl: any) {
	// Create a buffer for the square's positions.
	const positionBuffer = gl.createBuffer();
	// Select the positionBuffer as the one to apply buffer
	// operations to from here out.
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	// Now create an array of positions for the square.
	const cube = [
		// Front face
		-1.0, -1.0, 1.0,
		1.0, -1.0, 1.0,
		1.0, 1.0, 1.0,
		-1.0, 1.0, 1.0,
		// Back face
		-1.0, -1.0, -1.0,
		-1.0, 1.0, -1.0,
		1.0, 1.0, -1.0,
		1.0, -1.0, -1.0,
		// Top face
		-1.0, 1.0, -1.0,
		-1.0, 1.0, 1.0,
		1.0, 1.0, 1.0,
		1.0, 1.0, -1.0,
		// Bottom face
		-1.0, -1.0, -1.0,
		1.0, -1.0, -1.0,
		1.0, -1.0, 1.0,
		-1.0, -1.0, 1.0,
		// Right face
		1.0, -1.0, -1.0,
		1.0, 1.0, -1.0,
		1.0, 1.0, 1.0,
		1.0, -1.0, 1.0,
		// Left face
		-1.0, -1.0, -1.0,
		-1.0, -1.0, 1.0,
		-1.0, 1.0, 1.0,
		-1.0, 1.0, -1.0,
	];

	const positions = [];

	for (let j = -2; j < 3; j++) {
		for (let i = 0; i < cube.length; i++) {
			positions.push(cube[i] + j * 3);
		}
	}
	for (let k = -1; k < 3; k++) {
		for (let j = -2; j < 3; j++) {
			if (j != 0) {
				for (let i = 0; i < cube.length; i++) {
					if (i % 3 != k) {
						positions.push(cube[i] + j * 3);
					} else {
						positions.push(cube[i]);
					}
				}
				for (let i = 0; i < cube.length; i++) {
					if (i % 3 == k) {
						positions.push(cube[i] + j * 3);
					} else {
						positions.push(cube[i]);
					}
				}
				for (let i = 0; i < cube.length; i++) {
					if (i % 3 == k) {
						positions.push(cube[i] + j * 3);
					} else {
						positions.push(cube[i] - j * 3);
					}
				}
				for (let i = 0; i < cube.length; i++) {
					if (i % 3 == k) {
						positions.push(cube[i] + j * 3);
					} else {
						positions.push(cube[i] - j * 3);
					}
				}
			}
		}
	}
	// Now pass the list of positions into WebGL to build the
	// shape. We do this by creating a Float32Array from the
	// JavaScript array, then use it to fill the current buffer.
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array(positions),
		gl.STATIC_DRAW);

	const myColors = [
		[1.0, 1.0, 1.0, 1.0],
		[1.0, 0.0, 0.0, 1.0],
		[0.0, 1.0, 0.0, 1.0],
		[0.0, 0.0, 1.0, 1.0],
		[1.0, 1.0, 0.0, 1.0],
		[1.0, 0.0, 1.0, 1.0],
		[0.0, 0.0, 0.0, 1.0],
		[0.0, 1.0, 1.0, 1.0],
	];

	let faceColors: any = [];

	for (let i = 0; i < 70; i++) {
		faceColors = faceColors.concat(myColors);
	}
	// Convert the array of colors into a table for all the vertices.

	let colors: any = [];

	for (let j = 0; j < faceColors.length; ++j) {
		const c = [
			faceColors[Math.floor(Math.random() * 8)],
			faceColors[Math.floor(Math.random() * 8)],
			faceColors[Math.floor(Math.random() * 8)],
			faceColors[Math.floor(Math.random() * 8)],
		];
		// Repeat each color four times for the four vertices of the face
		colors = colors.concat(c[0], c[1], c[2], c[3]);
	}

	const colorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

	const indexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

	// This array defines each face as two triangles, using the
	// indices into the vertex array to specify each triangle's
	// position.

	const indicesTemplates = [
		0, 1, 2, 0, 2, 3,
		4, 5, 6, 4, 6, 7,
		8, 9, 10, 8, 10, 11,
		12, 13, 14, 12, 14, 15,
		16, 17, 18, 16, 18, 19,
		20, 21, 22, 20, 22, 23,
	];

	const indices = [];

	for (let j = 0; j < 70; j++) {
		for (let i = 0; i < indicesTemplates.length; i++) {
			indices.push(indicesTemplates[i] + 24 * j);
		}
	}

	// Now send the element array to GL

	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
		new Uint16Array(indices), gl.STATIC_DRAW);

	return {
		position: positionBuffer,
		color: colorBuffer,
		indices: indexBuffer,
	};
}

/**
 * Draw a webgl scene
 * @param {any} gl the WebGL context
 * @param {any} programInfo WebGL program information
 * @param {any} buffers the buffers to draw
 * @param {number} deltaTime the difference in time since last call
 */
function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clearDepth(1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.depthFunc(gl.LEQUAL);
	// Clear the canvas before we start drawing on it.
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	// Create a perspective matrix, a special matrix that is
	// used to simulate the distortion of perspective in a camera.
	// Our field of view is 45 degrees, with a width/height
	// ratio that matches the display size of the canvas
	// and we only want to see objects between 0.1 units
	// and 100 units away from the camera.
	const fieldOfView = 45 * Math.PI / 180;
	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
	const zNear = 0.1;
	const zFar = 100.0;
	const projectionMatrix = mat4.create();

	// note: glmatrix.js always has the first argument
	// as the destination to receive the result.
	mat4.perspective(
		projectionMatrix,
		fieldOfView,
		aspect,
		zNear,
		zFar);

	// Set the drawing position to the "identity" point, which is
	// the center of the scene.
	const modelViewMatrix = mat4.create();

	// Now move the drawing position a bit to where we want to
	// start drawing the square.
	mat4.rotate(modelViewMatrix,
		modelViewMatrix,
		Math.PI,
		[0, 1, 0]);

	mat4.translate(
		modelViewMatrix,
		modelViewMatrix,
		[0.0, 0.0, 48]);


	mat4.rotate(modelViewMatrix,
		modelViewMatrix,
		squareRotation,
		[Math.abs(squareRotation % 1.0 - 0.5), 1, 1]);

	// Tell WebGL how to pull out the positions from the position
	// buffer into the vertexPosition attribute.
	{
		const numComponents = 3;
		const type = gl.FLOAT;
		const normalize = false;
		const stride = 0;
		const offset = 0;
		gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
		gl.vertexAttribPointer(
			programInfo.attribLocations.vertexPosition,
			numComponents,
			type,
			normalize,
			stride,
			offset);
		gl.enableVertexAttribArray(
			programInfo.attribLocations.vertexPosition);
	}

	// Tell WebGL how to pull out the positions from the position
	// buffer into the vertexPosition attribute.
	{
		const numComponents = 4;
		const type = gl.FLOAT;
		const normalize = false;
		const stride = 0;
		const offset = 0;
		gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
		gl.vertexAttribPointer(
			programInfo.attribLocations.vertexColor,
			numComponents,
			type,
			normalize,
			stride,
			offset);
		gl.enableVertexAttribArray(
			programInfo.attribLocations.vertexColor);
	}

	// Tell WebGL which indices to use to index the vertices
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

	// Tell WebGL to use our program when drawing
	gl.useProgram(programInfo.program);
	// Set the shader uniforms
	gl.uniformMatrix4fv(
		programInfo.uniformLocations.projectionMatrix,
		false,
		projectionMatrix);
	gl.uniformMatrix4fv(
		programInfo.uniformLocations.modelViewMatrix,
		false,
		modelViewMatrix);

	{
		const offset = 0;
		const vertexCount = 4;
		gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
	}

	{
		const vertexCount = 36 * 69;
		const type = gl.UNSIGNED_SHORT;
		const offset = 0;
		gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
	}

	squareRotation += deltaTime;
}