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

fixing WebGL warnings

Browse Source
This commit is contained in:
Kbz-8
2024-05-14 15:34:08 +02:00
parent 05e83152b8
commit 13314e11ba
6 changed files with 29 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
django/frontend/static/js/3D/cube.js
View File

@ -1,6 +1,4 @@
import { shaderInfos } from "../3D/shaders.js" function renderCube(ctx, shader_infos, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
{ {
const modelMatrix = mat4.create(); const modelMatrix = mat4.create();
@ -23,18 +21,12 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
[sx, sy, sz] [sx, sy, sz]
); );
mat4.translate(
modelMatrix,
modelMatrix,
[-1, 0, 0] // wtf, this works ?
);
const normalMatrix = mat4.create(); const normalMatrix = mat4.create();
mat4.invert(normalMatrix, modelMatrix); mat4.invert(normalMatrix, modelMatrix);
mat4.transpose(normalMatrix, normalMatrix); mat4.transpose(normalMatrix, normalMatrix);
ctx.uniformMatrix4fv(shaderInfos.uniformLocations.modelMatrix, false, modelMatrix); ctx.uniformMatrix4fv(shader_infos.uniformLocations.modelMatrix, false, modelMatrix);
ctx.uniformMatrix4fv(shaderInfos.uniformLocations.normalMatrix, false, normalMatrix); ctx.uniformMatrix4fv(shader_infos.uniformLocations.normalMatrix, false, normalMatrix);
ctx.drawElements(ctx.TRIANGLES, 36, ctx.UNSIGNED_SHORT, 0); ctx.drawElements(ctx.TRIANGLES, 36, ctx.UNSIGNED_SHORT, 0);
} }

6
django/frontend/static/js/3D/shaders.js
View File

@ -44,7 +44,7 @@ export function initShaderProgram(gl)
gl.attachShader(prog, fragmentShader); gl.attachShader(prog, fragmentShader);
gl.linkProgram(prog); gl.linkProgram(prog);
shaderInfos = { const shaderInfos = {
program: prog, program: prog,
attribLocations: { attribLocations: {
vertexPosition: gl.getAttribLocation(prog, "aPos"), vertexPosition: gl.getAttribLocation(prog, "aPos"),
@ -64,7 +64,7 @@ export function initShaderProgram(gl)
return null; return null;
} }
return prog; return shaderInfos;
} }
function loadShader(gl, type, source) function loadShader(gl, type, source)
@ -83,5 +83,3 @@ function loadShader(gl, type, source)
return shader; return shader;
} }
export let shaderInfos;

16
django/frontend/static/js/api/game/pong/PongBall.js
View File

@ -50,21 +50,7 @@ export class PongBall extends AExchangeable
*/ */
draw(ctx) draw(ctx)
{ {
if(ctx instanceof CanvasRenderingContext2D) ctx.rect(this.position.location.x - this.size / 2, this.position.location.y - this.size / 2, this.size, this.size);
{
ctx.rect(this.position.location.x - this.size / 2, this.position.location.y - this.size / 2, this.size, this.size);
}
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);
}
else
{
alert('Unknown rendering context type');
}
} }
/** /**

19
django/frontend/static/js/api/game/pong/Segment.js
View File

@ -49,23 +49,8 @@ class Segment extends AExchangeable
draw(ctx) draw(ctx)
{ {
if(ctx instanceof CanvasRenderingContext2D) ctx.moveTo(this.start.x, this.start.y);
{ ctx.lineTo(this.stop.x, this.stop.y);
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.stop.x, this.stop.y);
}
else if(ctx instanceof WebGLRenderingContext)
{
const size = this.game.config.BALL_SIZE * 2;
const sizex = this.len() / 2;
const posx = (this.start.x - this.game.config.MAP_CENTER_X);
const posy = (this.start.y - this.game.config.MAP_CENTER_Y);
renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
}
else
{
alert('Unknown rendering context type');
}
} }
/** /**

19
django/frontend/static/js/api/game/pong/Wall.js
View File

@ -23,22 +23,7 @@ export class Wall extends Segment
draw(ctx) draw(ctx)
{ {
if(ctx instanceof CanvasRenderingContext2D) ctx.moveTo(this.start.x, this.start.y);
{ ctx.lineTo(this.stop.x, this.stop.y);
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.stop.x, this.stop.y);
}
else if(ctx instanceof WebGLRenderingContext)
{
const size = this.game.config.BALL_SIZE * 2;
const sizeX = this.len() / 2;
const posX = (this.start.x - this.game.config.MAP_CENTER_X);
const posY = (this.start.y - this.game.config.MAP_CENTER_Y);
renderCube(ctx, posX, 0, posY, -this.angle(), sizeX, size, size);
}
else
{
alert('Unknown rendering context type');
}
} }
} }

32
django/frontend/static/js/views/PongOfflineView.js
View File

@ -1,6 +1,6 @@
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js"; import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
import "../3D/maths/gl-matrix-min.js" import "../3D/maths/gl-matrix-min.js"
import { initShaderProgram, shaderInfos } from "../3D/shaders.js" import { initShaderProgram } from "../3D/shaders.js"
import { initBuffers } from "../3D/buffers.js" import { initBuffers } from "../3D/buffers.js"
import { renderCube } from "../3D/cube.js" import { renderCube } from "../3D/cube.js"
@ -481,18 +481,18 @@ class Game {
this.setPositionAttribute(); this.setPositionAttribute();
this.setNormalAttribute(); this.setNormalAttribute();
this.context.useProgram(shaderInfos.program); this.context.useProgram(this.shader_prog.program);
this.context.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix); this.context.uniformMatrix4fv(this.shader_prog.uniformLocations.projectionMatrix, false, projectionMatrix);
this.context.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix); this.context.uniformMatrix4fv(this.shader_prog.uniformLocations.viewMatrix, false, viewMatrix);
} }
else else
{ {
alert('Unknown rendering context type'); alert('Unknown rendering context type');
} }
this.players[0].paddle.update(this.context); this.players[0].paddle.update(this.context, this.shader_prog);
this.players[1].paddle.update(this.context); this.players[1].paddle.update(this.context, this.shader_prog);
this.ball.update(this.context); this.ball.update(this.context, this.shader_prog);
} }
updateScore(p1Score, p2Score) { updateScore(p1Score, p2Score) {
@ -559,14 +559,14 @@ class Game {
const offset = 0; const offset = 0;
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal); this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal);
this.context.vertexAttribPointer( this.context.vertexAttribPointer(
shaderInfos.attribLocations.vertexNormal, this.shader_prog.attribLocations.vertexNormal,
numComponents, numComponents,
type, type,
normalize, normalize,
stride, stride,
offset, offset,
); );
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal); this.context.enableVertexAttribArray(this.shader_prog.attribLocations.vertexNormal);
} }
setPositionAttribute() setPositionAttribute()
@ -579,14 +579,14 @@ class Game {
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex); this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex);
this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index); this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index);
this.context.vertexAttribPointer( this.context.vertexAttribPointer(
shaderInfos.attribLocations.vertexPosition, this.shader_prog.attribLocations.vertexPosition,
numComponents, numComponents,
type, type,
normalize, normalize,
stride, stride,
offset offset
); );
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition); this.context.enableVertexAttribArray(this.shader_prog.attribLocations.vertexPosition);
} }
} }
@ -600,7 +600,7 @@ class Paddle {
this.update(); this.update();
} }
update(ctx) { update(ctx, shader_infos) {
if(ctx instanceof CanvasRenderingContext2D) if(ctx instanceof CanvasRenderingContext2D)
{ {
ctx.fillStyle = 'black'; ctx.fillStyle = 'black';
@ -610,7 +610,8 @@ class Paddle {
{ {
const posx = (this.x - this.def.CANVASWIDTH / 2); const posx = (this.x - this.def.CANVASWIDTH / 2);
const posy = (this.y - this.def.CANVASHEIGHT / 3); const posy = (this.y - this.def.CANVASHEIGHT / 3);
renderCube(ctx, posx, 0, posy, 0, this.width, this.width, this.height / 2); if(shader_infos !== undefined)
renderCube(ctx, shader_infos, posx, 0, posy, 0, this.width, this.width, this.height / 2);
} }
} }
@ -637,7 +638,7 @@ class Ball {
this.update(ctx); this.update(ctx);
} }
update(ctx) { update(ctx, shader_infos) {
if(ctx instanceof CanvasRenderingContext2D) if(ctx instanceof CanvasRenderingContext2D)
{ {
ctx.fillStyle = 'black'; ctx.fillStyle = 'black';
@ -650,7 +651,8 @@ class Ball {
const size = this.radius; const size = this.radius;
const posx = (this.x - this.radius / 2) - this.def.CANVASWIDTH / 2; const posx = (this.x - this.radius / 2) - this.def.CANVASWIDTH / 2;
const posy = (this.y - this.radius / 2) - this.def.CANVASHEIGHT / 2; const posy = (this.y - this.radius / 2) - this.def.CANVASHEIGHT / 2;
renderCube(ctx, posx, 0, posy, 0, size, size, size); if(shader_infos !== undefined)
renderCube(ctx, shader_infos, posx, 0, posy, 0, size, size, size);
} }
} }
} }