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

fixing 3D

Browse Source
This commit is contained in:
Kbz-8 2024-05-07 18:31:14 +02:00
parent 16bcf88544
commit c2aafe9a42
2 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/static/js/3D/cube.js
View File

@ -23,12 +23,6 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
[sx, sy, sz]
);
mat4.translate(
modelMatrix,
modelMatrix,
[-1, 0, 0] // wtf, this works ?
);
const normalMatrix = mat4.create();
mat4.invert(normalMatrix, modelMatrix);
mat4.transpose(normalMatrix, normalMatrix);

51
frontend/static/js/views/PongOfflineView.js
View File

@ -2,6 +2,7 @@ import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js"
import "../3D/maths/gl-matrix-min.js"
import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
import { initBuffers } from "../3D/buffers.js"
import { renderCube } from "../3D/cube.js"
export class PongOfflineView extends AbstractAuthenticatedView {
constructor(params) {
@ -23,8 +24,6 @@ export class PongOfflineView extends AbstractAuthenticatedView {
this.round = -1;
this.game_mode = 1; // 1 is 2D, 2 is 3D
}
async getHtml() {
@ -171,20 +170,20 @@ export class PongOfflineView extends AbstractAuthenticatedView {
player2 = this.player2;
}
if (this.game == null) {
this.game = new Game(this, player1, player2);
this.game = new Game(this.game_mode, this, player1, player2);
this.createButton();
}
else {
this.app.removeChild(this.game.canvas);
this.app.removeChild(this.game.scoresDisplay);
this.game.cleanup();
this.game = new Game(this, player1, player2);
this.game = new Game(this.game_mode, this, player1, player2);
this.createButton();
}
if (this.round >= 0) {
await this.display_tree_tournament();
}
}
document.getElementById('startTournament').hidden = 1;
document.getElementById('startGameButton').hidden = 1;
document.getElementById('stopGameButton').hidden = 0;
@ -267,7 +266,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
}
class Game {
constructor(this_pong, player_name1, player_name2) {
constructor(game_mode, this_pong, player_name1, player_name2) {
this.pong = this_pong;
@ -324,11 +323,11 @@ class Game {
// stufs for 3D
this.shader_prog = null;
this.buffers = null;
this.cam_pos = [0, 400, 0];
this.cam_pos = [0, 150, -10];
this.cam_target = [0, 0, 0];
this.cam_up = [0, 0, -1];
this.initGame(1);
this.initGame(game_mode);
}
initGame(mode)
@ -342,12 +341,14 @@ class Game {
initWebGL()
{
this.canvas = document.createElement("canvas");
this.canvas.height = this.config.MAP_SIZE_X;
this.canvas.width = this.config.MAP_SIZE_Y;
this.canvas.width = this.def.CANVASWIDTH;
this.canvas.height = this.def.CANVASHEIGHT;
this.canvas.id = "gameCanvas";
this.canvas.style.border = '1px solid #d3d3d3';
this.canvas.style.backgroundColor = '#f1f1f1';
this.app.appendChild(this.canvas);
this.context = canva.getContext("webgl");
this.context = this.canvas.getContext("webgl");
if(this.context === null)
{
@ -355,11 +356,11 @@ class Game {
return;
}
this.shader_prog = initShaderProgram(this.ctx);
this.buffers = initBuffers(this.ctx);
this.shader_prog = initShaderProgram(this.context);
this.buffers = initBuffers(this.context);
this.ctx.enable(this.ctx.CULL_FACE);
this.ctx.cullFace(this.ctx.BACK);
this.context.enable(this.context.CULL_FACE);
this.context.cullFace(this.context.BACK);
}
init2D()
@ -575,7 +576,7 @@ class Game {
setPositionAttribute()
{
const numComponents = 3;
const type = this.ctx.FLOAT;
const type = this.context.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
@ -599,6 +600,7 @@ class Paddle {
this.height = def.PADDLEHEIGHT;
this.x = paddleSide;
this.y = def.CANVASHEIGHT / 2 - this.height / 2;
this.def = def;
this.update();
}
@ -610,11 +612,9 @@ class Paddle {
}
else if(ctx instanceof WebGLRenderingContext)
{
// const size = this.game.config.BALL_SIZE * 2;
// const sizex = this.len() / 2;
// const posx = (this.x - this.game.config.MAP_CENTER_X);
// const posy = (this.y - this.game.config.MAP_CENTER_Y);
// renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
const posx = (this.x - this.def.CANVASWIDTH / 2);
const posy = (this.y - this.def.CANVASHEIGHT / 3);
renderCube(ctx, posx, 0, posy, 0, this.width, this.width, this.height / 2);
}
}
@ -637,6 +637,7 @@ class Ball {
this.vx = -this.speed;
else
this.vx = this.speed;
this.def = def;
this.update();
}
@ -650,10 +651,10 @@ class Ball {
}
else if(ctx instanceof WebGLRenderingContext)
{
//const size = this.size * 3;
//const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2;
//const posy = (this.position.location.y - this.size / 2) - this.game.config.MAP_SIZE_Y / 2;
//renderCube(ctx, posx, 0, posy, 0, size, size, size);
const size = this.radius;
const posx = (this.x - this.radius / 2) - this.def.CANVASWIDTH / 2;
const posy = (this.y - this.radius / 2) - this.def.CANVASHEIGHT / 2;
renderCube(ctx, posx, 0, posy, 0, size, size, size);
}
}
}