diff --git a/lab3/src/lab3.html b/lab3/src/lab3.html index ddba225658b97178eb6f96a378b8ea331db7f0f4..930d07178301c27b87e90113d5e2c3af728057be 100644 --- a/lab3/src/lab3.html +++ b/lab3/src/lab3.html @@ -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> diff --git a/lab3/src/lab3.js b/lab3/src/lab3.js index 0fd18b5f8550075d92514b71d6866f0450e372b0..cbfb6c950abcd3d10fb293d90dd0495b6d33c492 100644 --- a/lab3/src/lab3.js +++ b/lab3/src/lab3.js @@ -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, 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 - 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, // 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, 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, -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) @@ -456,19 +423,4 @@ function initArrayBuffer(gl, attribute, data, num, type) { gl.enableVertexAttribArray(a_attribute); return true; -} - -// 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] - ]; -} +} \ No newline at end of file