Skip to content
Snippets Groups Projects
Commit 6152acad authored by marwan.keraim's avatar marwan.keraim
Browse files

Lab3 terminé

parent dcaeb52d
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
lab2/src/lab2.js
+ 1
− 1
View file @ 6152acad
...@@ -61,7 +61,7 @@ function main() { ...@@ -61,7 +61,7 @@ function main() {
let viewMatrix = new Matrix4(); let viewMatrix = new Matrix4();
let projMatrix = new Matrix4(); let projMatrix = new Matrix4();
let eyeMatrix = [3 ,0]; let eyeMatrix = [3 ,0];
viewMatrix.setLookAt(eyeMatrix[0], eyeMatrix[1], 4, 0,0,0, 0,1,0); viewMatrix.setLookAt(eyeMatrix[0], eyeMatrix[1], 4, 0,0,0, 0,1,0);
projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100); projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
......
lab3/lib/cuon-matrix.js 0 → 100644
+ 741
− 0
View file @ 6152acad
This diff is collapsed.
lab3/src/lab3.html
+ 17
− 4
View file @ 6152acad
...@@ -5,12 +5,25 @@ ...@@ -5,12 +5,25 @@
<title>Lab 3</title> <title>Lab 3</title>
</head> </head>
<body onload="main()"> <body onload="main()">
<canvas width="400" height="600" id="my-canvas">
Please use a browser that supports "canvas" <div id="canvas-wrap" style="float:left;">
</canvas> <canvas width="900" height="590" id="my-canvas">
Please use a browser that supports "canvas"
</canvas>
<div id="overlay"></div>
</div>
<div style="float:right;">
<p>Déplacement caméra : </br> ZQSD
</p>
<p>Déplacement lumière : </br> x: gauche droite ; y : haut, bas ; z: w, x
</p>
</div>
<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>
<script src="../lib/cuon-matrix.js"></script>
<script src="lab3.js"></script> <script src="lab3.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
lab3/src/lab3.js
+ 536
− 8
View file @ 6152acad
// Vertex shader program // Vertex shader program
const VSHADER_SOURCE = const VSHADER_SOURCE =
'\n' + '\n' +
// TODO: Implement your vertex shader code here
'\n'; // Vertex Shader
'precision mediump int; \n'+
'precision mediump float; \n'+
// Scene transformations
'uniform mat4 u_Proj;\n'+
'uniform mat4 u_View;\n'+
'uniform mat4 u_Model;\n'+
// Light model
'uniform vec3 u_Light_position; \n'+
'uniform vec3 u_Light_color; \n'+
'uniform float u_Shininess; \n'+
'uniform vec3 u_Ambient_color; \n'+
// Original model data
'attribute vec3 a_Vertex;\n' +
'attribute vec3 a_Vertex_normal;\n' +
'attribute vec3 a_Color;\n' +
// Data (to be interpolated) that is passed on to the fragment shader
'varying vec3 v_Vertex;\n' +
'varying vec4 v_Color;\n' +
'varying vec3 v_Normal;\n' +
'void main() {\n' +
// Perform the model and view transformations on the vertex and pass this
// location to the fragment shader.
'v_Vertex = vec3( (u_View * u_Model) * vec4(a_Vertex, 1.0) ); \n'+
// Perform the model and view transformations on the vertex's normal vector
// and pass this normal vector to the fragment shader.
'v_Normal = vec3( (u_View * u_Model) * vec4(a_Vertex_normal, 0.0) ); \n'+
// Pass the vertex's color to the fragment shader.
'v_Color = vec4(a_Color, 1.0); \n'+
// Transform the location of the vertex for the rest of the graphics pipeline
'gl_Position = (u_Proj * u_View * u_Model) * vec4(a_Vertex, 1.0); \n'+
'}\n' +
'\n';
// Fragment shader program // Fragment shader program
const FSHADER_SOURCE = const FSHADER_SOURCE =
'\n' + '\n' +
// TODO: Implement your fragment shader code here
'\n'; // Vertex Shader
'precision mediump int;\n'+
'precision mediump float;\n'+
// Light model
'uniform vec3 u_Light_position; \n'+
'uniform vec3 u_Light_color; \n'+
'uniform float u_Shininess; \n'+
'uniform vec3 u_Ambient_color; \n'+
// Data coming from the vertex shader
'varying vec3 v_Vertex;\n'+
'varying vec4 v_Color;\n'+
'varying vec3 v_Normal;\n'+
'void main() { \n' +
' vec3 to_light;\n'+
' vec3 vertex_normal;\n'+
' vec3 reflection;\n'+
' vec3 to_camera;\n'+
' float cos_angle;\n'+
' vec3 diffuse_color;\n'+
' vec3 specular_color;\n'+
' vec3 ambient_color;\n'+
' vec3 color;\n'+
' ambient_color = u_Ambient_color * vec3(v_Color);\n'+
' to_light = u_Light_position - v_Vertex;\n'+
' to_light = normalize( to_light );\n'+
' vertex_normal = normalize( v_Normal );\n'+
' cos_angle = dot(vertex_normal, to_light);\n'+
' cos_angle = clamp(cos_angle, 0.0, 1.0);\n'+
' diffuse_color = vec3(v_Color) * cos_angle;\n'+
' reflection = 2.0 * dot(vertex_normal,to_light) * vertex_normal - to_light;\n'+
' to_camera = -1.0 * v_Vertex;\n'+
' reflection = normalize( reflection );\n'+
' to_camera = normalize( to_camera );\n'+
' cos_angle = dot(reflection, to_camera);\n'+
' cos_angle = clamp(cos_angle, 0.0, 1.0);\n'+
' cos_angle = pow(cos_angle, u_Shininess);\n'+
' if (cos_angle > 0.0) {\n'+
' specular_color = u_Light_color * cos_angle;\n'+
' diffuse_color = diffuse_color * (1.0 - cos_angle);\n'+
' } else {\n'+
' specular_color = vec3(0.0, 0.0, 0.0);\n'+
' }\n'+
' color = ambient_color + diffuse_color + specular_color;\n'+
' gl_FragColor = vec4(color, v_Color.a);\n'+
'}\n' +
'\n';
function main() { function main() {
// Retrieve <canvas> element // Retrieve <canvas> element
const canvas = document.getElementById('my-canvas'); const canvas = document.getElementById('my-canvas');
// Get the rendering context for WebGL
const gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
gl.enable(gl.DEPTH_TEST);
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Write the positions of vertices to a vertex shader
let n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// Model
let projUniform = gl.getUniformLocation(gl.program , 'u_Proj');
let viewUniform = gl.getUniformLocation(gl.program , 'u_View');
let modelUniform = gl.getUniformLocation(gl.program , 'u_Model');
// Ligth
let lightPositionUniform = gl.getUniformLocation(gl.program , 'u_Light_position');
let lightColorUniform = gl.getUniformLocation(gl.program , 'u_Light_color');
let shininessUniform = gl.getUniformLocation(gl.program , 'u_Shininess');
let ambientUniform = gl.getUniformLocation(gl.program , 'u_Ambient_color');
// Model
let modelMatrix = new Matrix4();
let viewMatrix = new Matrix4();
let projMatrix = new Matrix4();
let eyeMatrix = [0 , 4];
projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
// Light
let lightPosition = [0.0, 0.0, 3.0];
gl.uniform3fv(lightColorUniform, [1.0, 1.0, 1.0]);
gl.uniform1f(shininessUniform, gl.FALSE, 64);
gl.uniform3fv(ambientUniform, [0.4, 0.4, 0.4]);
gl.uniform3fv(lightPositionUniform, lightPosition);
gl.uniformMatrix4fv(modelUniform, false, modelMatrix.elements);
gl.uniformMatrix4fv(viewUniform, false, viewMatrix.elements);
gl.uniformMatrix4fv(projUniform, false, projMatrix.elements);
let ANGLE = 180.0; // The rotation angle
let callback = function() {
// ==== TOP =====
modelMatrix.setTranslate(0,-0.85,0);
gl.uniformMatrix4fv(modelUniform, false, modelMatrix.elements);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, n);
// Draw plateform
n = drawPlateform(gl);
// ==== Bottom =====
modelMatrix.setRotate(ANGLE, 0, 0, 1); // Set rotation matrix
modelMatrix.translate(0,-0.15,0);
gl.uniformMatrix4fv(modelUniform, false, modelMatrix.elements);
gl.drawArrays(gl.TRIANGLES, 0, n);
// Detect key
detectKey(eyeMatrix, lightPosition);
// update Camera
viewMatrix.setLookAt(eyeMatrix[0], eyeMatrix[1], 9, 0,0,0, 0,1,0);
gl.uniformMatrix4fv(viewUniform, false, viewMatrix.elements);
// update light position
gl.uniform3fv(lightPositionUniform, lightPosition);
console.log(eyeMatrix);
console.log(lightPosition);
requestAnimationFrame(callback);
}
requestAnimationFrame(callback);
}
function detectKey(eyeMatrix, lightPosition) {
const vitesseCamera = 1;
const vitesseLight = 3;
document.onkeydown = function(event) {
switch (event.keyCode) {
case 81: // Q
eyeMatrix[0] -= vitesseCamera;
break;
case 90: // Z
eyeMatrix[1] += vitesseCamera;
break;
case 68: // D
eyeMatrix[0] += vitesseCamera;
break;
case 83: // S
eyeMatrix[1] -= vitesseCamera;
break;
// x: gauche droite ; y : haut, bas ; z: w, x
case 37: // gauche
lightPosition[0] -= vitesseLight;
break;
case 38: // up
lightPosition[1] += vitesseLight;
break;
case 39: // droite
lightPosition[0] += vitesseLight;
break;
case 40: // down
lightPosition[1] -= vitesseLight;
break;
case 90: // w
lightPosition[2] -= vitesseLight;
break;
case 88: // x
lightPosition[2] += vitesseLight;
break;
}
};
}
function initVertexBuffers(gl) {
// This is the model
const vertices = new Float32Array([
// ====== Front ============
// x , y , z, R , G , B
// Triangle 1
-1/6, 3/6,-0.25, 0.0,0.0,1.0,
1/6, 3/6,-0.25, 0.0,0.0,1.0,
-3/6, -2/6,0, 0.0,0.0,1.0,
// Triangle 2
-3/6, -2/6, 0 , 0.0,0.0,1.0,
3/6, -2/6, 0 , 0.0,0.0,1.0,
1/6, 3/6, -0.25, 0.0,0.0,1.0,
// =========== Back ===============
// Triangle 1
-1/6, 3/6,-0.5 , 0.0,1.0,0.0,
1/6, 3/6,-0.5 , 0.0,1.0,0.0,
-3/6, -2/6,-0.75, 0.0,1.0,0.0,
// Triangle 2
-3/6, -2/6, -0.75 , 0.0,1.0,0.0,
3/6, -2/6, -0.75 , 0.0,1.0,0.0,
1/6, 3/6, -0.5, 0.0,1.0,0.0,
// =========== Top ===============
// Triangle 1
-1/6, 3/6,-0.25, 0.0,0.5,0.0,
1/6, 3/6,-0.25 , 0.0,0.5,0.0,
1/6, 3/6,-0.5, 0.0,0.5,0.0,
// Triangle 2
-1/6, 3/6,-0.5, 0.0,0.5,0.0,
1/6, 3/6, -0.5, 0.0,0.5,0.0,
-1/6, 3/6,-0.25, 0.0,0.5,0.0,
// =========== Bottom ===============
// Triangle 1
-3/6, -2/6,0, 1.0,1.0,1.0,
3/6, -2/6,0 , 1.0,1.0,1.0,
3/6, -2/6,-0.75, 1.0,1.0,1.0,
// Triangle 2
-3/6, -2/6,-0.75, 1.0,1.0,1.0,
3/6, -2/6, -0.75, 1.0,1.0,1.0,
-3/6, -2/6, 0, 1.0,1.0,1.0,
// =========== Left ===============
// Triangle 1
-1/6, 3/6, -0.25, 1.0,0.0,0.0,
-1/6, 3/6, -0.5, 1.0,0.0,0.0,
-3/6, -2/6,-0.75, 1.0,0.0,0.0,
// Triangle 2
-3/6, -2/6, 0, 1.0,0.0,0.0,
-3/6, -2/6, -0.75, 1.0,0.0,0.0,
-1/6, 3/6,-0.25, 1.0,0.0,0.0,
// =========== Right ===============
// Triangle 1
1/6, 3/6, -0.25, 1.0,0.0,0.5,
1/6, 3/6, -0.5, 1.0,0.0,0.5,
3/6, -2/6,-0.75, 1.0,0.0,0.5,
// Triangle 2
3/6, -2/6, -0.75, 1.0,0.0,0.5,
3/6, -2/6, 0, 1.0,0.0,0.5,
1/6, 3/6,-0.25, 1.0,0.0,0.5,
]);
const normal = new Float32Array([
// ====== Front ============
// x , y , z, R , G , B
// Triangle 1
0, 0, 1,
0, 0, 1,
0, 0, 1,
// Triangle 2
0, 0, 1,
0, 0, 1,
0, 0, 1,
// =========== Back ===============
// Triangle 1
0, 0, -1,
0, 0, -1,
0, 0, -1,
// Triangle 2
0, 0, -1,
0, 0, -1,
0, 0, -1,
// =========== Top ===============
// Triangle 1
0, 1, 0,
0, 1, 0,
0, 1, 0,
// Triangle 2
0, 1, 0,
0, 1, 0,
0, 1, 0,
// =========== Bottom ===============
// Triangle 1
0, -1, 0,
0, -1, 0,
0, -1, 0,
// Triangle 2
0, -1, 0,
0, -1, 0,
0, -1, 0,
// =========== Left ===============
// Triangle 1
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
// Triangle 2
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
// =========== Right ===============
// Triangle 1
1, 0, 0,
1, 0, 0,
1, 0, 0,
// Triangle 2
1, 0, 0,
1, 0, 0,
1, 0, 0,
]);
const n = vertices.length / 6; // The number of vertices
// ==================== Bind : a_Vertex_normal ==============================
// Create a buffer object
const vertexNormalBuffer = gl.createBuffer();
if (!vertexNormalBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexNormalBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, normal, gl.STATIC_DRAW);
const a_Vertex_normal = gl.getAttribLocation(gl.program, 'a_Vertex_normal');
if (a_Vertex_normal < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Vertex_normal, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Vertex_normal);
// ==================== Bind : a_Vertex ==============================
// Create a buffer object
const vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Vertex = gl.getAttribLocation(gl.program, 'a_Vertex');
if (a_Vertex < 0) {
console.log('Failed to get the storage location of a_Vertex');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Vertex, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Vertex);
// ==================== Bind : a_color ==============================
const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if (a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Color);
// ===============================================================
// Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return n;
}
function drawPlateform(gl) {
// Write the positions of vertices to a vertex shader
const n = initVertexBuffersPlateform(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
gl.drawArrays(gl.TRIANGLES, 0, n);
// Write the positions of vertices to a vertex shader
const n_new = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
return n_new;
}
function initVertexBuffersPlateform(gl) {
// This is the model
const vertices = new Float32Array([
// =========== Plateform ===============
// Triangle 1
2, -2/6, 1, 1.0,0.5,0.5,
-2, -2/6, 1, 1.0,0.5,0.5,
2, -2/6, -2, 1.0,0.5,0.5,
// Triangle 2
-2, -2/6, 1, 1.0,0.5,0.5,
-2, -2/6, -2, 1.0,0.5,0.5,
2, -2/6, -2, 1.0,0.5,0.5,
]);
const normal = new Float32Array([
// =========== Plateform ===============
// Triangle 1
0, 1, 0,
0, 1, 0,
0, 1, 0,
// Triangle 2
0, 1, 0,
0, 1, 0,
0, 1, 0,
]);
const n = vertices.length / 6; // The number of vertices
// ==================== Bind : a_Vertex_normal ==============================
// Create a buffer object
const vertexNormalBuffer = gl.createBuffer();
if (!vertexNormalBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexNormalBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, normal, gl.STATIC_DRAW);
const a_Vertex_normal = gl.getAttribLocation(gl.program, 'a_Vertex_normal');
if (a_Vertex_normal < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Vertex_normal, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Vertex_normal);
// ==================== Bind : a_Vertex ==============================
// Create a buffer object
const vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Vertex = gl.getAttribLocation(gl.program, 'a_Vertex');
if (a_Vertex < 0) {
console.log('Failed to get the storage location of a_Vertex');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Vertex, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Vertex);
// ==================== Bind : a_color ==============================
const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if (a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Color);
// ===============================================================
// TODO: Complete with your code here // Unbind the buffer object
} gl.bindBuffer(gl.ARRAY_BUFFER, null);
\ No newline at end of file
return n;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment