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, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
function renderCube(ctx, shader_infos, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
{
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]
);
mat4.translate(
modelMatrix,
modelMatrix,
[-1, 0, 0] // wtf, this works ?
);
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.uniformMatrix4fv(shader_infos.uniformLocations.modelMatrix, false, modelMatrix);
ctx.uniformMatrix4fv(shader_infos.uniformLocations.normalMatrix, false, normalMatrix);
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.linkProgram(prog);
shaderInfos = {
const shaderInfos = {
program: prog,
attribLocations: {
vertexPosition: gl.getAttribLocation(prog, "aPos"),
@ -64,7 +64,7 @@ export function initShaderProgram(gl)
return null;
}
return prog;
return shaderInfos;
}
function loadShader(gl, type, source)
@ -83,5 +83,3 @@ function loadShader(gl, type, source)
return shader;
}
export let shaderInfos;

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

@ -50,21 +50,7 @@ export class PongBall extends AExchangeable
*/
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);
}
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');
}
ctx.rect(this.position.location.x - this.size / 2, this.position.location.y - this.size / 2, this.size, this.size);
}
/**
@ -80,4 +66,4 @@ export class PongBall extends AExchangeable
this.draw(ctx);
}
}
}

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

@ -49,23 +49,8 @@ class Segment extends AExchangeable
draw(ctx)
{
if(ctx instanceof CanvasRenderingContext2D)
{
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');
}
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.stop.x, this.stop.y);
}
/**

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

@ -23,22 +23,7 @@ export class Wall extends Segment
draw(ctx)
{
if(ctx instanceof CanvasRenderingContext2D)
{
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');
}
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.stop.x, this.stop.y);
}
}
}

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

@ -1,6 +1,6 @@
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.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 { renderCube } from "../3D/cube.js"
@ -481,18 +481,18 @@ class Game {
this.setPositionAttribute();
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(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix);
this.context.uniformMatrix4fv(this.shader_prog.uniformLocations.projectionMatrix, false, projectionMatrix);
this.context.uniformMatrix4fv(this.shader_prog.uniformLocations.viewMatrix, false, viewMatrix);
}
else
{
alert('Unknown rendering context type');
}
this.players[0].paddle.update(this.context);
this.players[1].paddle.update(this.context);
this.ball.update(this.context);
this.players[0].paddle.update(this.context, this.shader_prog);
this.players[1].paddle.update(this.context, this.shader_prog);
this.ball.update(this.context, this.shader_prog);
}
updateScore(p1Score, p2Score) {
@ -559,14 +559,14 @@ class Game {
const offset = 0;
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal);
this.context.vertexAttribPointer(
shaderInfos.attribLocations.vertexNormal,
this.shader_prog.attribLocations.vertexNormal,
numComponents,
type,
normalize,
stride,
offset,
);
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal);
this.context.enableVertexAttribArray(this.shader_prog.attribLocations.vertexNormal);
}
setPositionAttribute()
@ -579,14 +579,14 @@ class Game {
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex);
this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index);
this.context.vertexAttribPointer(
shaderInfos.attribLocations.vertexPosition,
this.shader_prog.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset
);
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
this.context.enableVertexAttribArray(this.shader_prog.attribLocations.vertexPosition);
}
}
@ -600,7 +600,7 @@ class Paddle {
this.update();
}
update(ctx) {
update(ctx, shader_infos) {
if(ctx instanceof CanvasRenderingContext2D)
{
ctx.fillStyle = 'black';
@ -610,7 +610,8 @@ class Paddle {
{
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);
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);
}
update(ctx) {
update(ctx, shader_infos) {
if(ctx instanceof CanvasRenderingContext2D)
{
ctx.fillStyle = 'black';
@ -650,7 +651,8 @@ class Ball {
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);
if(shader_infos !== undefined)
renderCube(ctx, shader_infos, posx, 0, posy, 0, size, size, size);
}
}
}