starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AAAAAAAAAAAAAAAAAAAAAAAAH

Browse Source
This commit is contained in:
Kbz-8 2024-02-10 19:38:56 +01:00
parent f9e9538159
commit 54c4ae77f2
8 changed files with 134 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/static/js/3D/cube.js Normal file
View File

@ -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 };

34
frontend/static/js/3D/shaders.js
View File

@ -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();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
const shader_prog = gl.createProgram();
gl.attachShader(shader_prog, vertexShader);
gl.attachShader(shader_prog, fragmentShader);
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 };

21
frontend/static/js/api/game/Ball.js
View File

@ -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()
{
@ -79,4 +90,4 @@ class Ball
}
}
export { Ball }
export { Ball }

5
frontend/static/js/api/game/Game.js
View File

@ -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);
}

42
frontend/static/js/api/game/Player.js
View File

@ -79,23 +79,33 @@ class Player
*/
draw(ctx)
{
if (this.is_connected === false)
{
ctx.moveTo(this.rail.start.x, this.rail.start.y);
ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
return;
}
let paddle_pos = new Point(this.rail.start.x + this.diff_x * this.position,
this.rail.start.y + this.diff_y * this.position);
if(ctx instanceof CanvasRenderingContext2D)
{
if (this.is_connected === false)
{
ctx.moveTo(this.rail.start.x, this.rail.start.y);
ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
return;
}
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)),
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));
ctx.moveTo(start_x, start_y);
ctx.lineTo(stop_x, stop_y);
}
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)
@ -149,4 +159,4 @@ class Player
}
}
export { Player }
export { Player }

8
frontend/static/js/api/game/Segment.js
View File

@ -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)

6
frontend/static/js/api/game/Wall.js
View File

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

67
frontend/static/js/views/GameView3D.js
View File

@ -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 shaderInfos from "../3D/shaders.js"
import { initShaderProgram, 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
);
this.gl.uniformMatrix4fv(
shaderInfos.uniformLocations.normalMatrix,
false,
normalMatrix,
viewMatrix
);
const vertexCount = 36;
const type = this.gl.UNSIGNED_SHORT;
const offset = 0;
this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
this.game.draw(this.gl);
renderCube(this.gl, 0, 0, 0);
}
setNormalAttribute()