Skip to content
Snippets Groups Projects
Commit f5388919 authored by jorge.josegonc's avatar jorge.josegonc
Browse files

push final mais ponctuelle ne fait pas de bonne persepectivité

parent b09cbc75
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
lab3/src/lab3.html
+ 6
− 0
View file @ f5388919
...@@ -11,6 +11,12 @@ ...@@ -11,6 +11,12 @@
<canvas width="400" height="600" id="my-canvas2"> <canvas width="400" height="600" id="my-canvas2">
Please use a browser that supports "canvas" Please use a browser that supports "canvas"
</canvas> </canvas>
<p id="light_x_dir">Light X directionnal : </p>
<p id="light_y_dir">Light Y directionnal : </p>
<p id="light_z_dir">Light Z directionnal : </p>
<p id="light_x_point">Light X point : </p>
<p id="light_y_point">Light Y point : </p>
<p id="light_z_point">Light Z point : </p>
<script src="../lib/webgl-utils.js"></script> <script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script> <script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script> <script src="../lib/cuon-utils.js"></script>
......
lab3/src/lab3.js
+ 71
− 119
View file @ f5388919
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
Author : Jorge José Goncalves Author : Jorge José Goncalves
*/ */
// variable for camera and light
var eyeX = 2; var eyeX = 2;
var eyeY = 4; var eyeY = 4;
var eyeZ = 6; var eyeZ = 6;
...@@ -9,23 +10,22 @@ const STEP = 0.1; ...@@ -9,23 +10,22 @@ const STEP = 0.1;
var lightDirectionnalX = 0.5; var lightDirectionnalX = 0.5;
var lightDirectionnalY = 3.0; var lightDirectionnalY = 3.0;
var lightDirectionnalZ = 4.0; var lightDirectionnalZ = 4.0;
var lightPositionX = 2.3; var lightPositionX = 0.0;
var lightPositionY = 4.0; var lightPositionY = 5.0;
var lightPositionZ = 3.5; var lightPositionZ = 0.0;
var VSHADER_SOURCE_DIRECTIONNAL_LIGHT = var VSHADER_SOURCE_DIRECTIONNAL_LIGHT =
'attribute vec4 a_Position;\n' + 'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' + 'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' + 'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' + 'uniform mat4 mMVP;\n' +
'uniform mat4 u_NormalMatrix;\n' + 'uniform mat4 mNormal;\n' +
'uniform vec3 u_LightDirection;\n' + 'uniform vec3 vLightDirection;\n' +
'uniform vec3 u_LightColor;\n' +
'varying vec4 v_Color;\n' + 'varying vec4 v_Color;\n' +
'void main() {\n' + 'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' + ' gl_Position = mMVP * a_Position;\n' +
' vec4 normal = u_NormalMatrix * a_Normal;\n' + ' vec4 normal = mNormal * a_Normal;\n' +
' float nDotL = max(dot(normalize(normal.xyz), u_LightDirection), 0.0);\n' + ' float nDotL = max(dot(normalize(normal.xyz), vLightDirection), 0.0);\n' +
' v_Color = vec4(a_Color.xyz * nDotL, a_Color.a);\n' + ' v_Color = vec4(a_Color.xyz * nDotL, a_Color.a);\n' +
'}\n'; '}\n';
...@@ -42,32 +42,22 @@ var VSHADER_SOURCE_PONCTUAL_LIGHT = ...@@ -42,32 +42,22 @@ var VSHADER_SOURCE_PONCTUAL_LIGHT =
'attribute vec4 a_Position;\n' + 'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' + 'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' + 'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' + 'uniform mat4 mMVP;\n' +
'uniform mat4 u_ModelMatrix;\n' + // Model matrix 'uniform mat4 mModel;\n' +
'uniform mat4 u_NormalMatrix;\n' + // Coordinate transformation matrix of the normal 'uniform mat4 mNormal;\n' +
'uniform vec3 u_LightColor;\n' + // Light color 'uniform vec3 vLightColor;\n' +
'uniform vec3 u_LightPosition;\n' + // Position of the light source 'uniform vec3 vLightPosition;\n' +
'uniform vec3 u_AmbientLight;\n' + // Ambient light color
'varying vec4 v_Color;\n' + 'varying vec4 v_Color;\n' +
'void main() {\n' + 'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' + ' gl_Position = mMVP * a_Position;\n' +
// Recalculate the normal based on the model matrix and make its length 1. ' vec3 normal = normalize(vec3(mNormal * a_Normal));\n' +
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + ' vec4 vertexPosition = mModel * a_Position;\n' +
// Calculate world coordinate of vertex ' vec3 vLightDirection = normalize(vLightPosition - vec3(vertexPosition));\n' +
' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' + ' float nDotL = max(dot(normal, vLightDirection), 0.0);\n' +
// Calculate the light direction and make it 1.0 in length ' vec3 diffuse = vLightColor * a_Color.rgb * nDotL;\n' +
' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' + ' v_Color = vec4(diffuse, a_Color.a);\n' +
// Calculate the dot product of the normal and light direction
' float nDotL = max(dot(normal, lightDirection), 0.0);\n' +
// Calculate the color due to diffuse reflection
' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' +
// Calculate the color due to ambient reflection
' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' +
// Add the surface colors due to diffuse reflection and ambient reflection
' v_Color = vec4(diffuse + ambient, a_Color.a);\n' +
'}\n'; '}\n';
// Fragment shader program
var FSHADER_SOURCE_PONCTUAL_LIGHT = var FSHADER_SOURCE_PONCTUAL_LIGHT =
'#ifdef GL_ES\n' + '#ifdef GL_ES\n' +
'precision mediump float;\n' + 'precision mediump float;\n' +
...@@ -128,6 +118,15 @@ function main() { ...@@ -128,6 +118,15 @@ function main() {
default: default:
break; break;
} }
// update html
document.getElementById("light_x_dir").textContent = "Light X directionnal : " + lightDirectionnalX
document.getElementById("light_y_dir").textContent = "Light Y directionnal : " + lightDirectionnalY
document.getElementById("light_z_dir").textContent = "Light Z directionnal : : " + lightDirectionnalZ
document.getElementById("light_x_point").textContent = "Light X point : " + lightPositionX
document.getElementById("light_y_point").textContent = "Light Y point : " + lightPositionY
document.getElementById("light_z_point").textContent = "Light Z point : " + lightPositionZ
}); });
} }
...@@ -151,11 +150,11 @@ function directionnal_light() { ...@@ -151,11 +150,11 @@ function directionnal_light() {
gl.clearColor(0, 0, 0, 1); gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
// Get the storage locations of uniform variables and so on // Get the storage locations
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); var mMVP = gl.getUniformLocation(gl.program, 'mMVP');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix'); var mNormal = gl.getUniformLocation(gl.program, 'mNormal');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection'); var vLightDirection = gl.getUniformLocation(gl.program, 'vLightDirection');
if (!u_MvpMatrix || !u_NormalMatrix || !u_LightDirection) { if (!mMVP || !mNormal || !vLightDirection) {
console.log('Failed to get the storage location'); console.log('Failed to get the storage location');
return; return;
} }
...@@ -167,17 +166,17 @@ function directionnal_light() { ...@@ -167,17 +166,17 @@ function directionnal_light() {
vpMatrix.setPerspective(50, canvas.width / canvas.height, 1, 100); vpMatrix.setPerspective(50, canvas.width / canvas.height, 1, 100);
vpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0); vpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0);
// Set the light direction (in the world coordinate) // Set the light direction
var lightDirection = new Vector3([lightDirectionnalX, lightDirectionnalY, lightDirectionnalZ]); var lightDirection = new Vector3([lightDirectionnalX, lightDirectionnalY, lightDirectionnalZ]);
lightDirection.normalize(); // Normalize lightDirection.normalize(); // Normalize
gl.uniform3fv(u_LightDirection, lightDirection.elements); gl.uniform3fv(vLightDirection, lightDirection.elements);
// Clear color and depth buffer // Clear color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Draw
drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, null, false); drawHourGlass(gl, vpMatrix, mMVP, mNormal, null, false);
drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, null, false); drawPlaneBase(gl, vpMatrix, mMVP, mNormal, null, false);
requestAnimationFrame(tick, canvas); requestAnimationFrame(tick, canvas);
}; };
...@@ -203,14 +202,13 @@ function ponctual_light() { ...@@ -203,14 +202,13 @@ function ponctual_light() {
gl.clearColor(0, 0, 0, 1); gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
// Get the storage locations of uniform variables and so on // Get the storage locations
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); var mModel = gl.getUniformLocation(gl.program, 'mModel');
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); var mMVP = gl.getUniformLocation(gl.program, 'mMVP');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix'); var mNormal = gl.getUniformLocation(gl.program, 'mNormal');
var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor'); var vLightColor = gl.getUniformLocation(gl.program, 'vLightColor');
var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition'); var vLightPosition = gl.getUniformLocation(gl.program, 'vLightPosition');
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight'); if (!mMVP || !mNormal || !vLightColor || !vLightPosition || !mModel) {
if (!u_MvpMatrix || !u_NormalMatrix || !u_LightColor || !u_LightPosition || !u_AmbientLight || !u_ModelMatrix) {
console.log('Failed to get the storage location'); console.log('Failed to get the storage location');
return; return;
} }
...@@ -223,25 +221,23 @@ function ponctual_light() { ...@@ -223,25 +221,23 @@ function ponctual_light() {
vpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0); vpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0);
// Set the light color (white) // Set the light color (white)
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0); gl.uniform3f(vLightColor, 1.0, 1.0, 1.0);
// Set the light direction (in the world coordinate) // Set the light position
gl.uniform3f(u_LightPosition, lightPositionX, lightPositionY, lightPositionZ); gl.uniform3f(vLightPosition, lightPositionX, lightPositionY, lightPositionZ);
// Set the ambient light
gl.uniform3f(u_AmbientLight, 0, 0, 0);
// Clear color and depth buffer // Clear color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, true); drawHourGlass(gl, vpMatrix, mMVP, mNormal, mModel, true);
drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, true); drawPlaneBase(gl, vpMatrix, mMVP, mNormal, mModel, true);
requestAnimationFrame(tick, canvas); requestAnimationFrame(tick, canvas);
}; };
tick(); tick();
} }
function drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, isPonct) { function drawPlaneBase(gl, vpMatrix, mMVP, mNormal, mModel, isPonct) {
var n = initVertexBuffersPlaneBase(gl); var n = initVertexBuffersPlaneBase(gl);
if (n < 0) { if (n < 0) {
console.log('Failed to set the vertex information'); console.log('Failed to set the vertex information');
...@@ -252,21 +248,20 @@ function drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, ...@@ -252,21 +248,20 @@ function drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix,
var mvpMatrix = new Matrix4(); var mvpMatrix = new Matrix4();
var normalMatrix = new Matrix4(); var normalMatrix = new Matrix4();
modelMatrixTranslate.setTranslate(0, -0.001, 0); modelMatrixTranslate.setTranslate(0, -0.001, 0);
if (isPonct) { if (isPonct) {
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrixTranslate.elements); gl.uniformMatrix4fv(mModel, false, modelMatrixTranslate.elements);
} }
mvpMatrix.set(vpMatrix).multiply(modelMatrixTranslate); mvpMatrix.set(vpMatrix).multiply(modelMatrixTranslate);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(modelMatrixTranslate); normalMatrix.setInverseOf(modelMatrixTranslate);
normalMatrix.transpose(); normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements); gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
} }
function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, isPonct) { function drawHourGlass(gl, vpMatrix, mMVP, mNormal, mModel, isPonct) {
var n = initVertexBuffersHourglass(gl); var n = initVertexBuffersHourglass(gl);
if (n < 0) { if (n < 0) {
console.log('Failed to set the vertex information'); console.log('Failed to set the vertex information');
...@@ -283,14 +278,14 @@ function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, ...@@ -283,14 +278,14 @@ function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix,
modelMatrixRotate.setRotate(0, 0, 1, 0); // Rotate around the y-axis modelMatrixRotate.setRotate(0, 0, 1, 0); // Rotate around the y-axis
if (isPonct) { if (isPonct) {
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrixRotate.elements); gl.uniformMatrix4fv(mModel, false, modelMatrixRotate.elements);
} }
mvpMatrix.set(vpMatrix).multiply(modelMatrixRotate); mvpMatrix.set(vpMatrix).multiply(modelMatrixRotate);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(modelMatrixRotate); normalMatrix.setInverseOf(modelMatrixRotate);
normalMatrix.transpose(); normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements); gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
...@@ -301,17 +296,13 @@ function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, ...@@ -301,17 +296,13 @@ function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix,
modelMatrixScale.setScale(-1, 1, -1); modelMatrixScale.setScale(-1, 1, -1);
var finalModelMatrix = modelMatrixRotate.multiply(modelMatrixTranslate).multiply(modelMatrixScale); var finalModelMatrix = modelMatrixRotate.multiply(modelMatrixTranslate).multiply(modelMatrixScale);
if (isPonct) { if (isPonct) {
console.log("ENTER") gl.uniformMatrix4fv(mModel, false, finalModelMatrix.elements);
gl.uniformMatrix4fv(u_ModelMatrix, false, finalModelMatrix.elements);
} }
mvpMatrix.set(vpMatrix).multiply(finalModelMatrix) mvpMatrix.set(vpMatrix).multiply(finalModelMatrix)
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(finalModelMatrix); normalMatrix.setInverseOf(finalModelMatrix);
normalMatrix.transpose(); normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements); gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
} }
...@@ -373,36 +364,13 @@ function initVertexBuffersHourglass(gl) { ...@@ -373,36 +364,13 @@ function initVertexBuffersHourglass(gl) {
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0
]); ]);
/*var normals = [];
for(let i = 0; i < vertices_position.length - 12; i += 12){
// calculate normal for each triangle (3 point vector/9 values)
let normal = calculateNormalSurface(
vertices_position[i],
vertices_position[i + 1],
vertices_position[i + 2],
vertices_position[i + 3],
vertices_position[i + 4],
vertices_position[i + 5],
vertices_position[i + 6],
vertices_position[i + 7],
vertices_position[i + 8]
)
// Store normal for 4 points
for(let k = 0; k < 4; k++){
normals.push(normal[0]);
normals.push(normal[1]);
normals.push(normal[2]);
}
}*/
var normals = new Float32Array([ var normals = new Float32Array([
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // front face 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, // front face
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // right face 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, // right face
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // up face 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // up face
-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 face -1.0, 1.0, 0.0, -1.0, 1.0, 0.0, -1.0, 1.0, 0.0, -1.0, 1.0, 0.0, // left face
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // down face 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // down face
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 face 0.0, 1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, -1.0, // back face
]); ]);
var indices = new Uint8Array([ var indices = new Uint8Array([
...@@ -412,7 +380,6 @@ function initVertexBuffersHourglass(gl) { ...@@ -412,7 +380,6 @@ function initVertexBuffersHourglass(gl) {
12, 13, 14, 12, 13, 15, // left face 12, 13, 14, 12, 13, 15, // left face
16, 17, 18, 16, 17, 19, // down face 16, 17, 18, 16, 17, 19, // down face
20, 21, 22, 20, 21, 23 // back face 20, 21, 22, 20, 21, 23 // back face
]); ]);
// Write the vertex property to buffers (positions, colors and normals) // Write the vertex property to buffers (positions, colors and normals)
...@@ -457,18 +424,3 @@ function initArrayBuffer(gl, attribute, data, num, type) { ...@@ -457,18 +424,3 @@ function initArrayBuffer(gl, attribute, data, num, type) {
return true; return true;
} }
\ No newline at end of file
// Calculate a surface normal by the pseudo code khronos.org
function calculateNormalSurface(ax, ay, az, bx, by, bz, cx, cy, cz) {
let x = 0;
let y = 1;
let z = 2;
let u = [bx - ax, by - ay, bz - az];
let v = [cx - ax, cy - ay, cz - az];
return [
u[y] * v[z] - u[z] * v[y],
u[z] * v[x] - u[x] * v[z],
u[x] * v[y] - u[y] * v[x]
];
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment