3D GO BRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

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

@@ -19,7 +19,7 @@ const fragment_shader_source = `
 
 	void main()
 	{
-		gl_FragColor = vColor;
+		gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
 	}
 `;
 

frontend/static/js/views/GameView3D.js

@@ -2,6 +2,8 @@ import { client } from "../index.js";
 import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
 import { initShaderProgram } from "../3D/shaders.js"
+import { initBuffers } from "../3D/buffers.js"
+import "../3D/maths/gl-matrix-min.js"
 
 export default class extends AbstractView
 {
@@ -13,11 +15,13 @@ export default class extends AbstractView
 		this.my_player = undefined;
 		this.gl = null;
 		this.shader_prog = null;
+		this.buffers = null;
+		this.rotation = 0.0;
 	}
 
 	initGL()
 	{
-        const canvas = document.getElementById('glcanva');
+		const canvas = document.getElementById('glcanva');
 		this.gl = canvas.getContext("webgl");
 
 		if(this.gl === null)
@@ -27,6 +31,7 @@ export default class extends AbstractView
 		}
 
 		this.shader_prog = initShaderProgram(this.gl);
+		this.buffers = initBuffers(this.gl);
 	}
 
 	async join_game()
@@ -52,11 +57,91 @@ export default class extends AbstractView
 		if(canvas === null)
 			return 1;
 
-		this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
+		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);
 		this.gl.depthFunc(this.gl.LEQUAL);
 		this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+		const fieldOfView = (45 * Math.PI) / 180;
+		const aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+		const zNear = 0.1;
+		const zFar = 100.0;
+		const projectionMatrix = mat4.create();
+
+		mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+
+		const modelViewMatrix = mat4.create();
+
+		this.rotation += 0.1;
+
+		mat4.translate(
+			modelViewMatrix,
+			modelViewMatrix,
+			[-0.0, 0.0, -6.0]
+		);
+
+		mat4.rotate(
+			modelViewMatrix,
+			modelViewMatrix,
+			this.rotation,
+			[1, 1, 1],
+		);
+
+		this.setPositionAttribute(programInfo);
+
+		this.gl.useProgram(programInfo.program);
+
+		this.gl.uniformMatrix4fv(
+			programInfo.uniformLocations.projectionMatrix,
+			false,
+			projectionMatrix
+		);
+		this.gl.uniformMatrix4fv(
+			programInfo.uniformLocations.modelViewMatrix,
+			false,
+			modelViewMatrix
+		);
+
+		{
+			const offset = 0;
+			const vertexCount = 4;
+			this.gl.drawArrays(this.gl.TRIANGLE_STRIP, offset, vertexCount);
+		}
+	}
+
+	setPositionAttribute(programInfo)
+	{
+		const numComponents = 2;
+		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.vertexAttribPointer(
+			programInfo.attribLocations.vertexPosition,
+			numComponents,
+			type,
+			normalize,
+			stride,
+			offset
+		);
+		this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
 	}
 
 	render_game()