rotating cube

src/client/main.ts

@@ -140,10 +140,36 @@ function initBuffers(gl: any) {
 	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 	// Now create an array of positions for the square.
 	const positions = [
-		-1.0, 1.0,
+		// 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,
+		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,
 	];
 	// Now pass the list of positions into WebGL to build the
 	// shape. We do this by creating a Float32Array from the
@@ -153,20 +179,54 @@ function initBuffers(gl: any) {
 		new Float32Array(positions),
 		gl.STATIC_DRAW);
 
-	const colors = [
+	const faceColors = [
-		1.0, 1.0, 1.0, 1.0,
+		[1.0, 1.0, 1.0, 1.0],
-		1.0, 0.0, 0.0, 1.0,
+		[1.0, 0.0, 0.0, 1.0],
-		0.0, 1.0, 0.0, 1.0,
+		[0.0, 1.0, 0.0, 1.0],
-		0.0, 0.0, 1.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],
 	];
 
+	// 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[j];
+		// Repeat each color four times for the four vertices of the face
+		colors = colors.concat(c, c, c, c);
+	}
+
 	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 indices = [
+		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,
+	];
+
+	// 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,
 	};
 }
 
@@ -225,7 +285,7 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
 	// Tell WebGL how to pull out the positions from the position
 	// buffer into the vertexPosition attribute.
 	{
-		const numComponents = 2;
+		const numComponents = 3;
 		const type = gl.FLOAT;
 		const normalize = false;
 		const stride = 0;
@@ -262,6 +322,9 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
 			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
@@ -280,5 +343,12 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
 		gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
 	}
 
+	{
+		const vertexCount = 36;
+		const type = gl.UNSIGNED_SHORT;
+		const offset = 0;
+		gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+	}
+
 	squareRotation += deltaTime;
 }