AAAAAAAAAAAAAAAAAAAAAAAAH

frontend/static/js/3D/cube.js

@@ -0,0 +1,44 @@
+import { shaderInfos } from "../3D/shaders.js"
+
+function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
+{
+	const modelMatrix = mat4.create();
+
+	mat4.translate(
+		modelMatrix,
+		modelMatrix,
+		[x, y, z]
+	);
+
+	mat4.rotate(
+		modelMatrix,
+		modelMatrix,
+		angle,
+		[0, 1, 1],
+	);
+
+	mat4.scale(
+		modelMatrix,
+		modelMatrix,
+		[sx, sy, sz]
+	);
+
+	const normalMatrix = mat4.create();
+	mat4.invert(normalMatrix, modelMatrix);
+	mat4.transpose(normalMatrix, normalMatrix);
+
+	ctx.uniformMatrix4fv(
+		shaderInfos.uniformLocations.modelMatrix,
+		false,
+		modelMatrix
+	);
+	ctx.uniformMatrix4fv(
+		shaderInfos.uniformLocations.normalMatrix,
+		false,
+		normalMatrix,
+	);
+
+	ctx.drawElements(ctx.TRIANGLES, 36, ctx.UNSIGNED_SHORT, 0);
+}
+
+export { renderCube };

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

@@ -2,7 +2,8 @@ const vertex_shader_source = `
 	attribute vec4 aPos;
 	attribute vec3 aNormal;
 
-	uniform mat4 uModView;
+	uniform mat4 uMod;
+	uniform mat4 uView;
 	uniform mat4 uProj;
 	uniform mat4 uNormalMat;
 
@@ -33,7 +34,7 @@ const vertex_shader_source = `
 */
 	void main()
 	{
-		gl_Position = uProj * uModView * aPos;
+		gl_Position = uView * uProj * uMod * aPos;
 
 		highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
 		highp vec3 directionalLightColor = vec3(1, 1, 1);
@@ -63,17 +64,32 @@ function initShaderProgram(gl)
 	const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertex_shader_source);
 	const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
 
-	const shaderProgram = gl.createProgram();
+	const shader_prog = gl.createProgram();
-	gl.attachShader(shaderProgram, vertexShader);
+	gl.attachShader(shader_prog, vertexShader);
-	gl.attachShader(shaderProgram, fragmentShader);
+	gl.attachShader(shader_prog, fragmentShader);
-	gl.linkProgram(shaderProgram);
+	gl.linkProgram(shader_prog);
 
-	if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
+	if(!gl.getProgramParameter(shader_prog, gl.LINK_STATUS))
 	{
 		alert(`Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
 		return null;
 	}
-	return shaderProgram;
+
+	shaderInfos = {
+		program: shader_prog,
+		attribLocations: {
+			vertexPosition: gl.getAttribLocation(shader_prog, "aPos"),
+			vertexNormal: gl.getAttribLocation(shader_prog, "aNormal"),
+		},
+		uniformLocations: {
+			projectionMatrix: gl.getUniformLocation(shader_prog, "uProj"),
+			modelMatrix: gl.getUniformLocation(shader_prog, "uMod"),
+			viewMatrix: gl.getUniformLocation(shader_prog, "uView"),
+			normalMatrix: gl.getUniformLocation(shader_prog, "uNormalMat"),
+		},
+	};
+
+	return shader_prog;
 }
 
 function loadShader(gl, type, source)
@@ -93,5 +109,5 @@ function loadShader(gl, type, source)
 	return shader;
 }
 
-export let shaderInfos = null;
+export let shaderInfos;
 export { initShaderProgram };

frontend/static/js/api/game/Ball.js

@@ -1,6 +1,6 @@
 import { Game } from "./Game.js";
 import { Point } from "./Point.js";
-
+import { renderCube } from "../../3D/cube.js"
 
 class Ball
 {
@@ -38,12 +38,23 @@ class Ball
 
     /**
      * 
-     * @param {CanvasRenderingContext2D} ctx 
+     * @param {CanvasRenderingContext2D} ctx ou pas ptdr
      */
     draw(ctx)
     {
-        ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size);
+		if(ctx instanceof CanvasRenderingContext2D)
-    }
+		{
+			ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size);
+		}
+		else if(ctx instanceof WebGLRenderingContext)
+		{
+			renderCube(ctx, this.position_x, 0, this.position_y, 0, this.game.config.ball_size, this.game.config.ball_size, this.game.config.ball_size);
+		}
+		else
+		{
+			alert('Unknown rendering context type (wtf)');
+		}
+	}
 
     render()
     {

frontend/static/js/api/game/Game.js

@@ -74,7 +74,10 @@ class Game
      */
     draw(ctx)
     {
-        ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
+		if(ctx instanceof CanvasRenderingContext2D)
+		{
+			ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
+		}
         this.draw_sides(ctx);
         this.ball.draw(ctx);
     }

frontend/static/js/api/game/Player.js

@@ -79,23 +79,33 @@ class Player
      */  
     draw(ctx)
     {
-        if (this.is_connected === false)
+		if(ctx instanceof CanvasRenderingContext2D)
-        {
+		{
-            ctx.moveTo(this.rail.start.x, this.rail.start.y);
+			if (this.is_connected === false)
-            ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
+			{
-            return;
+				ctx.moveTo(this.rail.start.x, this.rail.start.y);
-        }
+				ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
-        let paddle_pos = new Point(this.rail.start.x + this.diff_x * this.position,
+				return;
-                                   this.rail.start.y + this.diff_y * this.position);
+			}
+			let paddle_pos = new Point(this.rail.start.x + this.diff_x * this.position,
+									   this.rail.start.y + this.diff_y * this.position);
 			
+			let start_x = paddle_pos.x - (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+				start_y = paddle_pos.y - (this.diff_y * (this.paddle_size / 2 / this.rail_size)),
+				stop_x = paddle_pos.x + (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+				stop_y = paddle_pos.y + (this.diff_y * (this.paddle_size / 2 / this.rail_size));
 
-        let start_x = paddle_pos.x - (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+			ctx.moveTo(start_x, start_y);
-            start_y = paddle_pos.y - (this.diff_y * (this.paddle_size / 2 / this.rail_size)),
+			ctx.lineTo(stop_x, stop_y);
-            stop_x = paddle_pos.x + (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+		}
-            stop_y = paddle_pos.y + (this.diff_y * (this.paddle_size / 2 / this.rail_size));
+		else if(ctx instanceof WebGLRenderingContext)
+		{
 
-        ctx.moveTo(start_x, start_y);
+		}
-        ctx.lineTo(stop_x, stop_y);
+		else
+		{
+			alert('Unknown rendering context type (wtf)');
+		}
     }
 
     from_json(data)

frontend/static/js/api/game/Segment.js

@@ -1,4 +1,5 @@
 import { Point } from "./Point.js"
+import { renderCube } from "../../3D/cube.js"
 
 class Segment
 {
@@ -17,16 +18,19 @@ class Segment
      */
     draw(ctx)
     {
-		if(this.gl instanceof CanvasRenderingContext2D)
+		if(ctx instanceof CanvasRenderingContext2D)
 		{
 			ctx.moveTo(this.start.x, this.start.y);
 			ctx.lineTo(this.stop.x, this.stop.y);
 		}
-		else if(this.gl instanceof WebGLRenderingContext)
+		else if(ctx instanceof WebGLRenderingContext)
 		{
+			renderCube(ctx, this.start.x, -3, this.start.y, 0, 0.5, 0.5, 0.5);
 		}
 		else
+		{
 			alert('Unknown rendering context type');
+		}
     }
 
     from_json(data)

frontend/static/js/api/game/Wall.js

@@ -14,8 +14,8 @@ class Wall
     }
 
     draw(ctx)
-    {
+	{
-        this.rail.draw(ctx);
+		this.rail.draw(ctx);
     }
 
     from_json(data)

frontend/static/js/views/GameView3D.js

@@ -1,10 +1,10 @@
 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 { initShaderProgram, shaderInfos } from "../3D/shaders.js"
-import shaderInfos from "../3D/shaders.js"
 import { initBuffers } from "../3D/buffers.js"
 import "../3D/maths/gl-matrix-min.js"
+import { renderCube } from "../3D/cube.js"
 
 export default class extends AbstractView
 {
@@ -17,6 +17,8 @@ export default class extends AbstractView
 		this.gl = null;
 		this.shader_prog = null;
 		this.buffers = null;
+		this.cam_pos = [0, 10, 0];
+		this.cam_target = [0, 0, 0];
 	}
 
 	initGL()
@@ -33,19 +35,6 @@ export default class extends AbstractView
 		this.shader_prog = initShaderProgram(this.gl);
 		this.buffers = initBuffers(this.gl);
 
-		shaderInfos = {
-			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"),
-			},
-		};
-
 		this.gl.enable(this.gl.CULL_FACE);
 		this.gl.cullFace(this.gl.BACK);
 	}
@@ -84,8 +73,10 @@ export default class extends AbstractView
 		const zNear = 0.1;
 		const zFar = 100.0;
 		const projectionMatrix = mat4.create();
+		const viewMatrix = mat4.create();
 
 		mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+		mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, [0, 1, 0]);
 
 		this.setPositionAttribute();
 		this.setNormalAttribute();
@@ -98,52 +89,14 @@ export default class extends AbstractView
 			projectionMatrix
 		);
 
-		//this.game.draw(this.gl);
-		//this.renderCube(1, 0, -15);
-	}
-
-	renderCube(x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
-	{
-		const modelViewMatrix = mat4.create();
-
-		mat4.translate(
-			modelViewMatrix,
-			modelViewMatrix,
-			[x, y, z]
-		);
-
-		mat4.rotate(
-			modelViewMatrix,
-			modelViewMatrix,
-			angle,
-			[0, 1, 1],
-		);
-
-		mat4.scale(
-			modelViewMatrix,
-			modelViewMatrix,
-			[sx, sy, sz]
-		);
-
-		const normalMatrix = mat4.create();
-		mat4.invert(normalMatrix, modelViewMatrix);
-		mat4.transpose(normalMatrix, normalMatrix);
-
 		this.gl.uniformMatrix4fv(
-			shaderInfos.uniformLocations.modelViewMatrix,
+			shaderInfos.uniformLocations.viewMatrix,
 			false,
-			modelViewMatrix
+			viewMatrix
-		);
-		this.gl.uniformMatrix4fv(
-			shaderInfos.uniformLocations.normalMatrix,
-			false,
-			normalMatrix,
 		);
 
-		const vertexCount = 36;
+		this.game.draw(this.gl);
-		const type = this.gl.UNSIGNED_SHORT;
+		renderCube(this.gl, 0, 0, 0);
-		const offset = 0;
-		this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
 	}
 
 	setNormalAttribute()