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

pouic long boiiiiiiii

Browse Source
This commit is contained in:
Kbz-8 2024-01-24 23:49:04 +01:00
parent c429586dc7
commit d0b0d83209
3 changed files with 154 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/static/js/3D/buffers.js
View File

@ -1,20 +1,69 @@
function initBuffers(gl)
{
const positionBuffer = initPositionBuffer(gl);
return { position: positionBuffer };
const vertexBuffer = initVertexBuffer(gl);
const indexBuffer = initIndexBuffer(gl);
const normalBuffer = initNormalBuffer(gl);
return { vertex: vertexBuffer, index : indexBuffer, normal: normalBuffer };
}
function initPositionBuffer(gl)
function initVertexBuffer(gl)
{
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
const positions = [
// Front face
-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return positionBuffer;
}
function initNormalBuffer(gl)
{
const normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
const vertexNormals = [
// Front
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
// Back
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
// Top
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
// Bottom
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
// Right
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
// Left
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
return normalBuffer;
}
function initIndexBuffer(gl)
{
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
const indices = [
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // bottom
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23, // left
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
return indexBuffer;
}
export { initBuffers };

22
frontend/static/js/3D/shaders.js
View File

@ -1,25 +1,35 @@
const vertex_shader_source = `
attribute vec4 aPos;
attribute vec4 aColor;
attribute vec3 aNormal;
uniform mat4 uModView;
uniform mat4 uProj;
uniform mat4 uNormalMat;
varying lowp vec4 vColor;
varying highp vec3 vLighting;
void main()
{
gl_Position = uProj * uModView * aPos;
vColor = aColor;
highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
highp vec3 directionalLightColor = vec3(1, 1, 1);
highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
highp vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLighting = ambientLight + (directionalLightColor * directional);
}
`;
const fragment_shader_source = `
varying lowp vec4 vColor;
varying highp vec3 vLighting;
void main()
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
highp vec3 color = vec3(1.0, 1.0, 1.0);
gl_FragColor = vec4(color * vLighting, 1.0);
}
`;
@ -50,7 +60,7 @@ function loadShader(gl, type, source)
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
{
alert(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
alert(`An error occurred while compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
gl.deleteShader(shader);
return null;
}

119
frontend/static/js/views/GameView3D.js
View File

@ -17,6 +17,7 @@ export default class extends AbstractView
this.shader_prog = null;
this.buffers = null;
this.rotation = 0.0;
this.programInfo = null;
}
initGL()
@ -32,6 +33,19 @@ export default class extends AbstractView
this.shader_prog = initShaderProgram(this.gl);
this.buffers = initBuffers(this.gl);
this.programInfo = {
program: this.shader_prog,
attribLocations: {
vertexPosition: this.gl.getAttribLocation(this.shader_prog, "aPos"),
vertexNormal: this.gl.getAttribLocation(this.shader_prog, "aNormal"),
},
uniformLocations: {
projectionMatrix: this.gl.getUniformLocation(this.shader_prog, "uProj"),
modelViewMatrix: this.gl.getUniformLocation(this.shader_prog, "uModView"),
normalMatrix: this.gl.getUniformLocation(this.shader_prog, "uNormalMat"),
},
};
}
async join_game()
@ -57,20 +71,6 @@ export default class extends AbstractView
if(canvas === null)
return 1;
const programInfo = {
program: this.shader_prog,
attribLocations: {
vertexPosition: this.gl.getAttribLocation(this.shader_prog, "aPos"),
},
uniformLocations: {
projectionMatrix: this.gl.getUniformLocation(
this.shader_prog,
"uProj"
),
modelViewMatrix: this.gl.getUniformLocation(this.shader_prog, "uModView"),
},
};
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
this.gl.clearDepth(1.0);
this.gl.enable(this.gl.DEPTH_TEST);
@ -85,63 +85,106 @@ export default class extends AbstractView
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
const modelViewMatrix = mat4.create();
this.setPositionAttribute();
this.setNormalAttribute();
this.rotation += 0.1;
this.gl.useProgram(this.programInfo.program);
this.gl.uniformMatrix4fv(
this.programInfo.uniformLocations.projectionMatrix,
false,
projectionMatrix
);
this.rotation += 0.025;
this.renderCube(0.0, 0.0, -15.0, this.rotation);
this.renderCube(0.0, 1.0, -15.0, this.rotation + 0.1);
this.renderCube(-2.0, 0.0, -15.0, this.rotation + 4.3);
this.renderCube(2.0, 3.0, -15.0, this.rotation - 12.4, 5);
}
renderCube(x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
{
const modelViewMatrix = mat4.create();
mat4.translate(
modelViewMatrix,
modelViewMatrix,
[-0.0, 0.0, -6.0]
[x, y, z]
);
mat4.rotate(
modelViewMatrix,
modelViewMatrix,
this.rotation,
[1, 1, 1],
angle,
[0, 1, 1],
);
this.setPositionAttribute(programInfo);
this.gl.useProgram(programInfo.program);
this.gl.uniformMatrix4fv(
programInfo.uniformLocations.projectionMatrix,
false,
projectionMatrix
mat4.scale(
modelViewMatrix,
modelViewMatrix,
[sx, sy, sz]
);
const normalMatrix = mat4.create();
mat4.invert(normalMatrix, modelViewMatrix);
mat4.transpose(normalMatrix, normalMatrix);
this.gl.uniformMatrix4fv(
programInfo.uniformLocations.modelViewMatrix,
this.programInfo.uniformLocations.modelViewMatrix,
false,
modelViewMatrix
);
this.gl.uniformMatrix4fv(
this.programInfo.uniformLocations.normalMatrix,
false,
normalMatrix,
);
{
const offset = 0;
const vertexCount = 4;
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, offset, vertexCount);
}
const vertexCount = 36;
const type = this.gl.UNSIGNED_SHORT;
const offset = 0;
this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
}
setNormalAttribute()
{
const numComponents = 3;
const type = this.gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.normal);
this.gl.vertexAttribPointer(
this.programInfo.attribLocations.vertexNormal,
numComponents,
type,
normalize,
stride,
offset,
);
this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexNormal);
}
setPositionAttribute(programInfo)
{
const numComponents = 2;
const numComponents = 3;
const type = this.gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.vertex);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffers.index);
this.gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
this.programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset
);
this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
}
render_game()