From 13314e11ba928d07c8fe4f368e4c2a4119407f68 Mon Sep 17 00:00:00 2001 From: Kbz-8 Date: Tue, 14 May 2024 15:34:08 +0200 Subject: [PATCH] fixing WebGL warnings --- django/frontend/static/js/3D/cube.js | 14 ++------ django/frontend/static/js/3D/shaders.js | 6 ++-- .../static/js/api/game/pong/PongBall.js | 18 ++--------- .../static/js/api/game/pong/Segment.js | 19 ++--------- .../frontend/static/js/api/game/pong/Wall.js | 21 ++---------- .../static/js/views/PongOfflineView.js | 32 ++++++++++--------- 6 files changed, 29 insertions(+), 81 deletions(-) diff --git a/django/frontend/static/js/3D/cube.js b/django/frontend/static/js/3D/cube.js index 6bfb80d..55dd211 100644 --- a/django/frontend/static/js/3D/cube.js +++ b/django/frontend/static/js/3D/cube.js @@ -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); } diff --git a/django/frontend/static/js/3D/shaders.js b/django/frontend/static/js/3D/shaders.js index 638ebbb..f1bc814 100644 --- a/django/frontend/static/js/3D/shaders.js +++ b/django/frontend/static/js/3D/shaders.js @@ -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; diff --git a/django/frontend/static/js/api/game/pong/PongBall.js b/django/frontend/static/js/api/game/pong/PongBall.js index 76a478b..204f1ac 100644 --- a/django/frontend/static/js/api/game/pong/PongBall.js +++ b/django/frontend/static/js/api/game/pong/PongBall.js @@ -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); } -} \ No newline at end of file +} diff --git a/django/frontend/static/js/api/game/pong/Segment.js b/django/frontend/static/js/api/game/pong/Segment.js index be76380..c9b9545 100644 --- a/django/frontend/static/js/api/game/pong/Segment.js +++ b/django/frontend/static/js/api/game/pong/Segment.js @@ -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); } /** diff --git a/django/frontend/static/js/api/game/pong/Wall.js b/django/frontend/static/js/api/game/pong/Wall.js index 0296d83..279c7e5 100644 --- a/django/frontend/static/js/api/game/pong/Wall.js +++ b/django/frontend/static/js/api/game/pong/Wall.js @@ -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); } -} \ No newline at end of file +} diff --git a/django/frontend/static/js/views/PongOfflineView.js b/django/frontend/static/js/views/PongOfflineView.js index f85cf61..70215a3 100644 --- a/django/frontend/static/js/views/PongOfflineView.js +++ b/django/frontend/static/js/views/PongOfflineView.js @@ -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); } } }