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
Branches
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 @@
<canvas width="400" height="600" id="my-canvas2">
Please use a browser that supports "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-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
......
lab3/src/lab3.js
+ 71
− 119
View file @ f5388919
......@@ -2,6 +2,7 @@
Author : Jorge José Goncalves
*/
// variable for camera and light
var eyeX = 2;
var eyeY = 4;
var eyeZ = 6;
......@@ -9,23 +10,22 @@ const STEP = 0.1;
var lightDirectionnalX = 0.5;
var lightDirectionnalY = 3.0;
var lightDirectionnalZ = 4.0;
var lightPositionX = 2.3;
var lightPositionY = 4.0;
var lightPositionZ = 3.5;
var lightPositionX = 0.0;
var lightPositionY = 5.0;
var lightPositionZ = 0.0;
var VSHADER_SOURCE_DIRECTIONNAL_LIGHT =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform mat4 u_NormalMatrix;\n' +
'uniform vec3 u_LightDirection;\n' +
'uniform vec3 u_LightColor;\n' +
'uniform mat4 mMVP;\n' +
'uniform mat4 mNormal;\n' +
'uniform vec3 vLightDirection;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
' vec4 normal = u_NormalMatrix * a_Normal;\n' +
' float nDotL = max(dot(normalize(normal.xyz), u_LightDirection), 0.0);\n' +
' gl_Position = mMVP * a_Position;\n' +
' vec4 normal = mNormal * a_Normal;\n' +
' float nDotL = max(dot(normalize(normal.xyz), vLightDirection), 0.0);\n' +
' v_Color = vec4(a_Color.xyz * nDotL, a_Color.a);\n' +
'}\n';
......@@ -42,32 +42,22 @@ var VSHADER_SOURCE_PONCTUAL_LIGHT =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform mat4 u_ModelMatrix;\n' + // Model matrix
'uniform mat4 u_NormalMatrix;\n' + // Coordinate transformation matrix of the normal
'uniform vec3 u_LightColor;\n' + // Light color
'uniform vec3 u_LightPosition;\n' + // Position of the light source
'uniform vec3 u_AmbientLight;\n' + // Ambient light color
'uniform mat4 mMVP;\n' +
'uniform mat4 mModel;\n' +
'uniform mat4 mNormal;\n' +
'uniform vec3 vLightColor;\n' +
'uniform vec3 vLightPosition;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
// Recalculate the normal based on the model matrix and make its length 1.
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
// Calculate world coordinate of vertex
' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' +
// Calculate the light direction and make it 1.0 in length
' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\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' +
' gl_Position = mMVP * a_Position;\n' +
' vec3 normal = normalize(vec3(mNormal * a_Normal));\n' +
' vec4 vertexPosition = mModel * a_Position;\n' +
' vec3 vLightDirection = normalize(vLightPosition - vec3(vertexPosition));\n' +
' float nDotL = max(dot(normal, vLightDirection), 0.0);\n' +
' vec3 diffuse = vLightColor * a_Color.rgb * nDotL;\n' +
' v_Color = vec4(diffuse, a_Color.a);\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE_PONCTUAL_LIGHT =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
......@@ -128,6 +118,15 @@ function main() {
default:
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() {
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
// Get the storage locations of uniform variables and so on
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
if (!u_MvpMatrix || !u_NormalMatrix || !u_LightDirection) {
// Get the storage locations
var mMVP = gl.getUniformLocation(gl.program, 'mMVP');
var mNormal = gl.getUniformLocation(gl.program, 'mNormal');
var vLightDirection = gl.getUniformLocation(gl.program, 'vLightDirection');
if (!mMVP || !mNormal || !vLightDirection) {
console.log('Failed to get the storage location');
return;
}
......@@ -167,17 +166,17 @@ function directionnal_light() {
vpMatrix.setPerspective(50, canvas.width / canvas.height, 1, 100);
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]);
lightDirection.normalize(); // Normalize
gl.uniform3fv(u_LightDirection, lightDirection.elements);
gl.uniform3fv(vLightDirection, lightDirection.elements);
// Clear color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, null, false);
drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, null, false);
// Draw
drawHourGlass(gl, vpMatrix, mMVP, mNormal, null, false);
drawPlaneBase(gl, vpMatrix, mMVP, mNormal, null, false);
requestAnimationFrame(tick, canvas);
};
......@@ -203,14 +202,13 @@ function ponctual_light() {
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
// Get the storage locations of uniform variables and so on
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition');
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
if (!u_MvpMatrix || !u_NormalMatrix || !u_LightColor || !u_LightPosition || !u_AmbientLight || !u_ModelMatrix) {
// Get the storage locations
var mModel = gl.getUniformLocation(gl.program, 'mModel');
var mMVP = gl.getUniformLocation(gl.program, 'mMVP');
var mNormal = gl.getUniformLocation(gl.program, 'mNormal');
var vLightColor = gl.getUniformLocation(gl.program, 'vLightColor');
var vLightPosition = gl.getUniformLocation(gl.program, 'vLightPosition');
if (!mMVP || !mNormal || !vLightColor || !vLightPosition || !mModel) {
console.log('Failed to get the storage location');
return;
}
......@@ -223,25 +221,23 @@ function ponctual_light() {
vpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0);
// Set the light color (white)
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
// Set the light direction (in the world coordinate)
gl.uniform3f(u_LightPosition, lightPositionX, lightPositionY, lightPositionZ);
// Set the ambient light
gl.uniform3f(u_AmbientLight, 0, 0, 0);
gl.uniform3f(vLightColor, 1.0, 1.0, 1.0);
// Set the light position
gl.uniform3f(vLightPosition, lightPositionX, lightPositionY, lightPositionZ);
// Clear color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, true);
drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, true);
drawHourGlass(gl, vpMatrix, mMVP, mNormal, mModel, true);
drawPlaneBase(gl, vpMatrix, mMVP, mNormal, mModel, true);
requestAnimationFrame(tick, canvas);
};
tick();
}
function drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix, isPonct) {
function drawPlaneBase(gl, vpMatrix, mMVP, mNormal, mModel, isPonct) {
var n = initVertexBuffersPlaneBase(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
......@@ -252,21 +248,20 @@ function drawPlaneBase(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix,
var mvpMatrix = new Matrix4();
var normalMatrix = new Matrix4();
modelMatrixTranslate.setTranslate(0, -0.001, 0);
if (isPonct) {
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrixTranslate.elements);
gl.uniformMatrix4fv(mModel, false, modelMatrixTranslate.elements);
}
mvpMatrix.set(vpMatrix).multiply(modelMatrixTranslate);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(modelMatrixTranslate);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
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);
if (n < 0) {
console.log('Failed to set the vertex information');
......@@ -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
if (isPonct) {
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrixRotate.elements);
gl.uniformMatrix4fv(mModel, false, modelMatrixRotate.elements);
}
mvpMatrix.set(vpMatrix).multiply(modelMatrixRotate);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(modelMatrixRotate);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
......@@ -301,17 +296,13 @@ function drawHourGlass(gl, vpMatrix, u_MvpMatrix, u_NormalMatrix, u_ModelMatrix,
modelMatrixScale.setScale(-1, 1, -1);
var finalModelMatrix = modelMatrixRotate.multiply(modelMatrixTranslate).multiply(modelMatrixScale);
if (isPonct) {
console.log("ENTER")
gl.uniformMatrix4fv(u_ModelMatrix, false, finalModelMatrix.elements);
gl.uniformMatrix4fv(mModel, false, finalModelMatrix.elements);
}
mvpMatrix.set(vpMatrix).multiply(finalModelMatrix)
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
gl.uniformMatrix4fv(mMVP, false, mvpMatrix.elements);
normalMatrix.setInverseOf(finalModelMatrix);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
gl.uniformMatrix4fv(mNormal, false, normalMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}
......@@ -373,36 +364,13 @@ function initVertexBuffersHourglass(gl) {
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([
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
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
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, 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
-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, 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([
......@@ -412,7 +380,6 @@ function initVertexBuffersHourglass(gl) {
12, 13, 14, 12, 13, 15, // left face
16, 17, 18, 16, 17, 19, // down face
20, 21, 22, 20, 21, 23 // back face
]);
// Write the vertex property to buffers (positions, colors and normals)
......@@ -457,18 +424,3 @@ function initArrayBuffer(gl, attribute, data, num, type) {
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