diff --git a/frontend/static/js/3D/cube.js b/frontend/static/js/3D/cube.js index 3544d4f..84aa5f3 100644 --- a/frontend/static/js/3D/cube.js +++ b/frontend/static/js/3D/cube.js @@ -4,6 +4,8 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1) { const modelMatrix = mat4.create(); + console.log("test") + mat4.translate( modelMatrix, modelMatrix, diff --git a/frontend/static/js/3D/shaders.js b/frontend/static/js/3D/shaders.js index 19be146..641364b 100644 --- a/frontend/static/js/3D/shaders.js +++ b/frontend/static/js/3D/shaders.js @@ -8,33 +8,10 @@ const vertex_shader_source = ` uniform mat4 uNormalMat; varying highp vec3 vLighting; -/* - vec3 lightColor = vec3(1.0, 0.8, 0.8); - vec3 lightDir = normalize(vec3(-0.2, -1.0, -0.3)); - vec3 viewPos = vec3(0.0, 0.0, 0.0); - - vec3 calculateLighting() - { - vec3 norm = normalize(aNormal); - // ambient - vec3 ambient = 0.3 * lightColor; - // diffuse - float diff = max(dot(lightDir, norm), 0.0); - vec3 diffuse = diff * lightColor; - // specular - vec3 viewDir = normalize(viewPos - vec3(aPos.xyz)); - vec3 reflectDir = reflect(-lightDir, norm); - vec3 halfwayDir = normalize(lightDir + viewDir); - float spec = pow(max(dot(norm, halfwayDir), 0.0), 32.0); - vec3 specular = vec3(0.3) * spec; // assuming bright white light color - - return (ambient + diffuse + specular); - } -*/ void main() { - gl_Position = uView * uProj * uMod * aPos; + gl_Position = uProj * uView * uMod * aPos; highp vec3 ambientLight = vec3(0.3, 0.3, 0.3); highp vec3 directionalLightColor = vec3(1, 1, 1); @@ -44,8 +21,6 @@ const vertex_shader_source = ` highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0); vLighting = ambientLight + (directionalLightColor * directional); - -// vLighting = calculateLighting(); } `; @@ -59,37 +34,37 @@ const fragment_shader_source = ` } `; -function initShaderProgram(gl) +export function initShaderProgram(gl) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertex_shader_source); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source); - const shader_prog = gl.createProgram(); - gl.attachShader(shader_prog, vertexShader); - gl.attachShader(shader_prog, fragmentShader); - gl.linkProgram(shader_prog); - - if(!gl.getProgramParameter(shader_prog, gl.LINK_STATUS)) - { - alert(`Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgram)}`); - return null; - } + const prog = gl.createProgram(); + gl.attachShader(prog, vertexShader); + gl.attachShader(prog, fragmentShader); + gl.linkProgram(prog); shaderInfos = { - program: shader_prog, + program: prog, attribLocations: { - vertexPosition: gl.getAttribLocation(shader_prog, "aPos"), - vertexNormal: gl.getAttribLocation(shader_prog, "aNormal"), + vertexPosition: gl.getAttribLocation(prog, "aPos"), + vertexNormal: gl.getAttribLocation(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"), + projectionMatrix: gl.getUniformLocation(prog, "uProj"), + modelMatrix: gl.getUniformLocation(prog, "uMod"), + viewMatrix: gl.getUniformLocation(prog, "uView"), + normalMatrix: gl.getUniformLocation(prog, "uNormalMat"), }, }; - return shader_prog; + if(!gl.getProgramParameter(prog, gl.LINK_STATUS)) + { + alert(`Unable to initialize the shader program: ${gl.getProgramInfoLog(prog)}`); + return null; + } + + return prog; } function loadShader(gl, type, source) @@ -110,4 +85,3 @@ function loadShader(gl, type, source) } export let shaderInfos; -export { initShaderProgram }; diff --git a/frontend/static/js/views/GameView3D.js b/frontend/static/js/views/GameView3D.js index 7d69671..84f6b68 100644 --- a/frontend/static/js/views/GameView3D.js +++ b/frontend/static/js/views/GameView3D.js @@ -17,7 +17,7 @@ export default class extends AbstractView this.gl = null; this.shader_prog = null; this.buffers = null; - this.cam_pos = [0, 10, 0]; + this.cam_pos = [0, 1, 0]; this.cam_target = [0, 0, 0]; } @@ -68,16 +68,14 @@ export default class extends AbstractView this.gl.depthFunc(this.gl.LEQUAL); this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT); - const fieldOfView = (90 * Math.PI) / 180; - const aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight; - const zNear = 0.1; - const zFar = 100.0; const projectionMatrix = mat4.create(); const viewMatrix = mat4.create(); - mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); + mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.gl.canvas.clientWidth / this.gl.canvas.clientHeight, 0.1, 1000.0); mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, [0, 1, 0]); + mat4.invert(viewMatrix, viewMatrix); + this.setPositionAttribute(); this.setNormalAttribute(); @@ -95,8 +93,8 @@ export default class extends AbstractView viewMatrix ); - this.game.draw(this.gl); - renderCube(this.gl, 0, 0, 0); + renderCube(this.gl, -2, -3, -10, 0, 5); + //this.game.draw(this.gl); } setNormalAttribute() @@ -147,7 +145,6 @@ export default class extends AbstractView this.my_player.update_paddle(this.keys_pressed); this.draw(); this.game?.time.new_frame(); - // 1 sec fps }, 1000 / 60); }