WebglInstance.js

/**
 * Object that contains the WebGl context and some utilities
 * @param {Element} canvas HTML Canvas object where our 3D scene will be drawn
 * @constructor
 * 	- Get WebGl context and store it in the attribute "gl"
 * 	- Set the clear color of the canvas
 * 	- Enable the depth test
 */
function WebglInstance(canvas) {
	this.gl = getWebGLContext(canvas);
	if (!this.gl)
		throw 'Failed to get the rendering context for WebglInstance';

	// Set the clear color and enable the depth test
	this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
	this.gl.enable(this.gl.DEPTH_TEST);
}

/**
 * Initialize and build the shader program based on the vertex and fragment shader
 * @param {string} vertexShader Containing the vertex shader
 * @param {string} fragmentShader Containing the fragment shader
 */
WebglInstance.prototype.initShaders = function(vertexShader, fragmentShader) {
	if (!initShaders(this.gl, vertexShader, fragmentShader))
		throw 'Failed to initialize shaders.';
};

/**
 * Write the vertex coordinates and colors to the buffer object
 * @param {YourLetter} shape Object containing 3 attributes: vertices, indices and colors (see YourLetter.js)
 */
WebglInstance.prototype.writeObject = function(shape) {
	// Pass the shape positions to the vertex shader
	this.writeArrayBuffer(new Float32Array([...shape.vertices]), 3, this.gl.FLOAT, 'a_Position');

	// Pass the colors to the vertex shader
	this.writeArrayBuffer(new Float32Array([...shape.colors]), 3, this.gl.FLOAT, 'a_Color');

	// Write the indices to the buffer object
	const indexBuffer = this.gl.createBuffer();
	if (!indexBuffer)
		throw 'Failed to createBuffer';

	// Write the indices to the buffer object
	this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
	this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint8Array([...shape.indices]), this.gl.STATIC_DRAW);

	this.indicesCount = shape.indices.length;
};

/**
 * Write array to the vertex object buffer
 * @param {Float32Array} array Data to write
 * @param {GLint} size Size of each vertex (3 in our case xyz for positions and rgb for colors
 * @param {GLenum} type Type of each value in the array
 * @param {string} attribute Attribute variable name
 */
WebglInstance.prototype.writeArrayBuffer = function(array, size, type, attribute) {
	const buffer = this.gl.createBuffer();   // Create a buffer object
	if (!buffer)
		throw 'Failed to create the buffer object';

	// Write date into the buffer object
	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
	this.gl.bufferData(this.gl.ARRAY_BUFFER, array, this.gl.STATIC_DRAW);
	// Assign the buffer object to the attribute variable
	const a_attribute = this.gl.getAttribLocation(this.gl.program, attribute);
	if (a_attribute < 0)
		throw 'Failed to get the storage location of ' + attribute;