pouic long boiiiiiiii

frontend/static/js/3D/buffers.js

@@ -1,20 +1,69 @@
 function initBuffers(gl)
 {
-	const positionBuffer = initPositionBuffer(gl);
+	const vertexBuffer = initVertexBuffer(gl);
-
+	const indexBuffer = initIndexBuffer(gl);
-	return { position: positionBuffer };
+	const normalBuffer = initNormalBuffer(gl);
+	return { vertex: vertexBuffer, index : indexBuffer, normal: normalBuffer };
 }
 
-function initPositionBuffer(gl)
+function initVertexBuffer(gl)
 {
 	const positionBuffer = gl.createBuffer();
-
 	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
+	const positions = [
-	const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -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,
+		// 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
+	];
 	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 	return positionBuffer;
 }
 
+function initNormalBuffer(gl)
+{
+	const normalBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+	const vertexNormals = [
+		// Front
+		0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
+		// Back
+		0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
+		// Top
+		0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
+		// Bottom
+		0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
+		// Right
+		1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
+		// Left
+		-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
+	return normalBuffer;
+}
+
+function initIndexBuffer(gl)
+{
+	const indexBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+	const indices = [
+		0, 1, 2, 0, 2, 3, // front
+		4, 5, 6, 4, 6, 7, // back
+		8, 9, 10, 8, 10, 11, // top
+		12, 13, 14, 12, 14, 15, // bottom
+		16, 17, 18, 16, 18, 19, // right
+		20,  21, 22, 20, 22, 23, // left
+	];
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+	return indexBuffer;
+}
+
 export { initBuffers };

frontend/static/js/3D/shaders.js

@@ -1,25 +1,35 @@
 const vertex_shader_source = `
 	attribute vec4 aPos;
-	attribute vec4 aColor;
+	attribute vec3 aNormal;
 
 	uniform mat4 uModView;
 	uniform mat4 uProj;
+	uniform mat4 uNormalMat;
 
-	varying lowp vec4 vColor;
+	varying highp vec3 vLighting;
 
 	void main()
 	{
 		gl_Position = uProj * uModView * aPos;
-		vColor = aColor;
+
+		highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
+		highp vec3 directionalLightColor = vec3(1, 1, 1);
+		highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
+
+		highp vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);
+
+		highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+		vLighting = ambientLight + (directionalLightColor * directional);
 	}
 `;
 
 const fragment_shader_source = `
-	varying lowp vec4 vColor;
+	varying highp vec3 vLighting;
 
 	void main()
 	{
-		gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+		highp vec3 color = vec3(1.0, 1.0, 1.0);
+		gl_FragColor = vec4(color * vLighting, 1.0);
 	}
 `;
 
@@ -50,7 +60,7 @@ function loadShader(gl, type, source)
 
 	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
 	{
-		alert(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
+		alert(`An error occurred while compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
 		gl.deleteShader(shader);
 		return null;
 	}

frontend/static/js/views/GameView3D.js

@@ -17,6 +17,7 @@ export default class extends AbstractView
 		this.shader_prog = null;
 		this.buffers = null;
 		this.rotation = 0.0;
+		this.programInfo = null;
 	}
 
 	initGL()
@@ -32,6 +33,19 @@ export default class extends AbstractView
 
 		this.shader_prog = initShaderProgram(this.gl);
 		this.buffers = initBuffers(this.gl);
+
+		this.programInfo = {
+			program: this.shader_prog,
+			attribLocations: {
+				vertexPosition: this.gl.getAttribLocation(this.shader_prog, "aPos"),
+				vertexNormal: this.gl.getAttribLocation(this.shader_prog, "aNormal"),
+			},
+			uniformLocations: {
+				projectionMatrix: this.gl.getUniformLocation(this.shader_prog, "uProj"),
+				modelViewMatrix: this.gl.getUniformLocation(this.shader_prog, "uModView"),
+				normalMatrix: this.gl.getUniformLocation(this.shader_prog, "uNormalMat"),
+			},
+		};
 	}
 
 	async join_game()
@@ -57,20 +71,6 @@ export default class extends AbstractView
 		if(canvas === null)
 			return 1;
 
-		const programInfo = {
-			program: this.shader_prog,
-			attribLocations: {
-				vertexPosition: this.gl.getAttribLocation(this.shader_prog, "aPos"),
-			},
-			uniformLocations: {
-				projectionMatrix: this.gl.getUniformLocation(
-					this.shader_prog,
-					"uProj"
-				),
-				modelViewMatrix: this.gl.getUniformLocation(this.shader_prog, "uModView"),
-			},
-		};
-
 		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
 		this.gl.clearDepth(1.0);
 		this.gl.enable(this.gl.DEPTH_TEST);
@@ -85,63 +85,106 @@ export default class extends AbstractView
 
 		mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
 
-		const modelViewMatrix = mat4.create();
+		this.setPositionAttribute();
+		this.setNormalAttribute();
 
-		this.rotation += 0.1;
+		this.gl.useProgram(this.programInfo.program);
+
+		this.gl.uniformMatrix4fv(
+			this.programInfo.uniformLocations.projectionMatrix,
+			false,
+			projectionMatrix
+		);
+
+		this.rotation += 0.025;
+
+		this.renderCube(0.0, 0.0, -15.0, this.rotation);
+		this.renderCube(0.0, 1.0, -15.0, this.rotation + 0.1);
+		this.renderCube(-2.0, 0.0, -15.0, this.rotation + 4.3);
+		this.renderCube(2.0, 3.0, -15.0, this.rotation - 12.4, 5);
+	}
+
+	renderCube(x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
+	{
+		const modelViewMatrix = mat4.create();
 
 		mat4.translate(
 			modelViewMatrix,
 			modelViewMatrix,
-			[-0.0, 0.0, -6.0]
+			[x, y, z]
 		);
 
 		mat4.rotate(
 			modelViewMatrix,
 			modelViewMatrix,
-			this.rotation,
+			angle,
-			[1, 1, 1],
+			[0, 1, 1],
 		);
 
-		this.setPositionAttribute(programInfo);
+		mat4.scale(
-
+			modelViewMatrix,
-		this.gl.useProgram(programInfo.program);
+			modelViewMatrix,
-
+			[sx, sy, sz]
-		this.gl.uniformMatrix4fv(
-			programInfo.uniformLocations.projectionMatrix,
-			false,
-			projectionMatrix
 		);
+
+		const normalMatrix = mat4.create();
+		mat4.invert(normalMatrix, modelViewMatrix);
+		mat4.transpose(normalMatrix, normalMatrix);
+
 		this.gl.uniformMatrix4fv(
-			programInfo.uniformLocations.modelViewMatrix,
+			this.programInfo.uniformLocations.modelViewMatrix,
 			false,
 			modelViewMatrix
 		);
+		this.gl.uniformMatrix4fv(
+			this.programInfo.uniformLocations.normalMatrix,
+			false,
+			normalMatrix,
+		);
 
-		{
+		const vertexCount = 36;
-			const offset = 0;
+		const type = this.gl.UNSIGNED_SHORT;
-			const vertexCount = 4;
+		const offset = 0;
-			this.gl.drawArrays(this.gl.TRIANGLE_STRIP, offset, vertexCount);
+		this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
-		}
+	}
+
+	setNormalAttribute()
+	{
+		const numComponents = 3;
+		const type = this.gl.FLOAT;
+		const normalize = false;
+		const stride = 0;
+		const offset = 0;
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.normal);
+		this.gl.vertexAttribPointer(
+			this.programInfo.attribLocations.vertexNormal,
+			numComponents,
+			type,
+			normalize,
+			stride,
+			offset,
+		);
+		this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexNormal);
 	}
 
 	setPositionAttribute(programInfo)
 	{
-		const numComponents = 2;
+		const numComponents = 3;
 		const type = this.gl.FLOAT;
 		const normalize = false;
 		const stride = 0;
-
 		const offset = 0;
-		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position);
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.vertex);
+		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffers.index);
 		this.gl.vertexAttribPointer(
-			programInfo.attribLocations.vertexPosition,
+			this.programInfo.attribLocations.vertexPosition,
 			numComponents,
 			type,
 			normalize,
 			stride,
 			offset
 		);
-		this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+		this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
 	}
 
 	render_game()