v1

lab1/src/lab1.js

 // Vertex shader program
-const VSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your vertex shader code here
-  '\n';
+var VSHADER_SOURCE =
+  'attribute vec4 a_Position;\n' +
+  'attribute vec4 a_Color;\n' +
+  'varying vec4 v_Color;\n' + // varying variable
+  'void main() {\n' +
+  '  gl_Position = a_Position;\n' +
+  '  gl_PointSize = 10.0;\n' +
+  '  v_Color = a_Color;\n' +  // Pass the data to the fragment shader
+  '}\n';
 
 // Fragment shader program
-const FSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your fragment shader code here
-  '\n';
+var FSHADER_SOURCE =
+  'precision mediump float;\n' + // Precision qualifier (See Chapter 6)
+  'varying vec4 v_Color;\n' +    // Receive the data from the vertex shader
+  'void main() {\n' +
+  '  gl_FragColor = v_Color;\n' +
+  '}\n';
 
 function main() {
-  // Retrieve <canvas> element
-  const canvas = document.getElementById('my-canvas');
+  // Retrieve <canvas> elementa
+  var canvas = document.getElementById('my-canvas');
 
   // Get the rendering context for WebGL
-  const gl = getWebGLContext(canvas);
+  var gl = getWebGLContext(canvas);
   if (!gl) {
     console.log('Failed to get the rendering context for WebGL');
     return;
@@ -27,37 +34,82 @@ function main() {
     return;
   }
 
-  // Write the positions of vertices to a vertex shader
-  const n = initVertexBuffers(gl);
+  //
+  var n = initVertexBuffers(gl);
   if (n < 0) {
-    console.log('Failed to set the positions of the vertices');
+    console.log('Failed to set the vertex information');
     return;
   }
 
   // Specify the color for clearing <canvas>
-  gl.clearColor(0, 0, 0, 1);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
   // Clear <canvas>
   gl.clear(gl.COLOR_BUFFER_BIT);
 
-  // Draw the vertext buffer using triangles
+  // Draw three points
   gl.drawArrays(gl.TRIANGLES, 0, n);
 }
 
 function initVertexBuffers(gl) {
-  // This is the model
-  const vertices = new Float32Array([
-   // TODO: Complete the vertex buffer with your model
+  var verticesColors = new Float32Array([
+ 
+   -0.6,  -0.6, 1.0,  0.0,  0.0,  //rouge
+   -0.3,  0.6,   1.0,  0.0,  0.0,
+   -0.6,  0.6, 1.0,  0.0,  0.0,
+
+   -0.6,  -0.6, 0.0,  1.0,  0.0,   //vert
+   -0.3,  0.6, 0.0,  1.0,  0.0, 
+   -0.3,  -0.6,0.0,  1.0,  0.0, 
+
+   0.4,  -0.6, 1.0,  1.0,  0.0,  //bleu
+   0.7,  0.6,   1.0,  1.0,  0.0,
+   0.4,  0.6, 1.0,  1.0,  0.0,
+
+    0.4,  -0.6, 0.0,  0.0,  1.0,   //jaune
+    0.7,  0.6, 0.0,  0.0,  1.0,
+   0.7,  -0.6,0.0,  0.0,  1.0,
+
+   -0.3,  0.1, 1.0,  0.5,  0.0, //orange
+   0.4,  0.1, 1.0,  0.5,  0.0,
+   0.4,  -0.1, 1.0,  0.5,  0.0,
+
+   -0.3,  0.1, 1.0,  0.0,  1.0, //magenta
+   -0.3,  -0.1, 1.0,  0.0,  1.0,
+   0.4,  -0.1, 1.0,  0.0,  1.0,
+
   ]);
+  var n = verticesColors.length/5; // The number of vertices
+
+  // Create a buffer object
+  var vertexColorBuffer = gl.createBuffer();
+  if (!vertexColorBuffer) {
+    console.log('Failed to create the buffer object');
+    return false;
+  }
+
+  // Write the vertex coordinates and colors to the buffer object
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
+
+  var FSIZE = verticesColors.BYTES_PER_ELEMENT;
+  //Get the storage location of a_Position, assign and enable buffer
+  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
+  if (a_Position < 0) {
+    console.log('Failed to get the storage location of a_Position');
+    return -1;
+  }
+  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
+  gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object
+
+  // Get the storage location of a_Position, assign buffer and enable
+  var 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;
+  }
+  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
+  gl.enableVertexAttribArray(a_Color);  // Enable the assignment of the buffer object
 
-  /*
-  TODO:
-   1. Create a WebGL buffer object
-   2. Bind the created buffer object
-   3. Write data into the buffer object
-   4. Bind shader programs attributes with javascript variables.
-      example: if you have an attribute named "a_color", you should
-      call "const varName = gl.getAttribLocation(gl.program, 'a_color');"
-      then "gl.vertexAttribPointer" and "gl.enableVertexAttribArray"
-   */
+  return n;
 }

lab2/src/lab2.html

@@ -5,12 +5,17 @@
   <title>Simple model</title>
 </head>
 <body onload="main()">
+  -Utilisez la souris pour faire tourner la camera<br>
+  -Utiliser les flèches pour déplacer la camera (haut, bas , gauche, droite)<br>
+  -Utilisez Entrer/Esc pour controler le zoom (+ ou -)<br>
 <canvas width="400" height="600" id="my-canvas">
-  Please use a browser that supports "canvas"
+  Please use a browser that supports "canvas" \n
+
 </canvas>
 <script src="../lib/webgl-utils.js"></script>
 <script src="../lib/webgl-debug.js"></script>
 <script src="../lib/cuon-utils.js"></script>
+<script src="../lib/cuon-matrix.js"></script>
 <script src="lab2.js"></script>
 </body>
 </html>
\ No newline at end of file

lab2/src/lab2.js

+
 // Vertex shader program
-const VSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your vertex shader code here
-  '\n';
+var VSHADER_SOURCE =
+  'attribute vec4 a_Position;\n' +
+  'attribute vec4 a_Color;\n' +
+  'uniform mat4 u_MvpMatrix;\n' +
+  'varying vec4 v_Color;\n' +
+  'void main() {\n' +
+  '  gl_Position = u_MvpMatrix * a_Position;\n' +
+  '  v_Color = a_Color;\n' +
+  '}\n';
 
 // Fragment shader program
-const FSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your fragment shader code here
-  '\n';
+var FSHADER_SOURCE =
+  '#ifdef GL_ES\n' +
+  'precision mediump float;\n' +
+  '#endif\n' +
+  'varying vec4 v_Color;\n' +
+  'void main() {\n' +
+  '  gl_FragColor = v_Color;\n' +
+  '}\n';
 
-function main() {
   // Retrieve <canvas> element
-  const canvas = document.getElementById('my-canvas');
+var canvas = document.getElementById('my-canvas');
+function main() {
+  draw(3,3,12,0,0);
+  //activer les "event listener "nécessaires pour visualiser le sablier 
+  //souris, flèches, touches (Entrer,Esc) 
+  controler()
+
+}
+
+function normaliser(val){
+  return -15 + ((val*30) /canvas.height);
+}
+function draw(x,y,z,up,left)
+{
+  // Get the rendering context for WebGL
+  var gl = getWebGLContext(canvas);
+  if (!gl) {
+    console.log('Failed to get the rendering context for WebGL');
+    return;
+  }
+
+  // Initialize shaders
+  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
+    console.log('Failed to intialize shaders.');
+    return;
+  }
+
+  // Set the vertex information
+  var n = initVertexBuffers(gl);
+  if (n < 0) {
+    console.log('Failed to set the vertex information');
+    return;
+  }
+
+  var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
+  if (!u_MvpMatrix) {
+    console.log('Failed to get the storage location of u_MvpMatrix');
+    return;
+  }
+
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.enable(gl.DEPTH_TEST);
+  var rotateMatrix = new Matrix4(); 
+  var viewMatrix = new Matrix4();  
+  var projMatrix = new Matrix4();  
+  var tranMatrix = new Matrix4();  
+  var mvpMatrix = new Matrix4();
+  var inverseMatrix = new Matrix4();
+
+  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
+  mvpMatrix.setPerspective(30, 1, 1, 100);
+  mvpMatrix.lookAt(-x, -y, -z, left, up, 1, 0, 1, 0);
+  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
+  rotateMatrix.setRotate(180,1,0,0);
+  tranMatrix.setTranslate(0, 0.4, 0.5);
+  viewMatrix.lookAt(-x, -y, -z, left, up, 1, 0, 1, 0);
+  projMatrix.setPerspective(30, 1, 1, 100);
+  inverseMatrix.setInverseOf(rotateMatrix);
+  mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(tranMatrix).multiply(rotateMatrix);
+  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
+  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
+}
+
+function radToDeg(r) {
+  return r * 180 / Math.PI;
+}
+
+function degToRad(d) {
+  return d * Math.PI / 180;
+}
+
+function initVertexBuffers(gl) {
+
+  var vertices = new Float32Array([   // Vertex 
+    0.5, 0.2, 0.5,  0, 0.2, 0.5,  -0.5,-1.0, 1.0,   1,-1.0, 1.0,  
+    0.5, 0.2, 0.5,   1.0,-1.0, 1.0,   1.0,-1.0,-0.5,   0.5, 0.2,0,  
+    0.5, 0.2, 0.5,   0.5, 0.2,0,  0, 0.2,0,  0, 0.2, 0.5,  
+   0.0, 0.2, 0.5,  0.0, 0.2,0,  -0.5,-1.0,-0.5,  -0.5,-1.0, 1.0,  
+   -0.5,-1.0,-0.5,   1.0,-1.0,-0.5,   1.0,-1.0, 1.0,  -0.5,-1.0, 1.0,  
+   1.0,-1.0,-0.5,  -0.5,-1.0,-0.5,  0, 0.2,0,   0.5, 0.2,0   
+  ]);
+
+  var colors = new Float32Array([     // Couleurs
+    0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0, 
+    0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  
+    1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0, 
+    1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  
+    1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,
+    0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0  
+  ]);
+
+  var indices = new Uint8Array([       // Indices 
+     0, 1, 2,   0, 2, 3,   
+     4, 5, 6,   4, 6, 7,   
+     8, 9,10,   8,10,11,    
+    12,13,14,  12,14,15,    
+    16,17,18,  16,18,19,  
+    20,21,22,  20,22,23    
+  ]);
+
+
+  // Create a buffer object
+  var indexBuffer = gl.createBuffer();
+  if (!indexBuffer) 
+    return -1;
+
+  // Write the vertex coordinates and color to the buffer object
+  if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position'))
+    return -1;
+
+  if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color'))
+    return -1;
+
+
+  // Write the indices to the buffer object
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+
+  return indices.length;
+}
+
+function initArrayBuffer(gl, data, num, type, attribute) {
+  var buffer = gl.createBuffer();   // Create a buffer object
+  if (!buffer) {
+    console.log('Failed to create the buffer object');
+    return false;
+  }
+  // Write date into the buffer object
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  // Assign the buffer object to the attribute variable
+  var a_attribute = gl.getAttribLocation(gl.program, attribute);
+  if (a_attribute < 0) {
+    console.log('Failed to get the storage location of ' + attribute);
+    return false;
+  }
+  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
+  // Enable the assignment of the buffer object to the attribute variable
+  gl.enableVertexAttribArray(a_attribute);
+
+  return true;
+}
+function controler(){
+  var distance=15;
+  var up=0.0;
+  var left=0;
+  let clicked=false;
+  canvas.addEventListener('mousedown', event =>clicked=true);
+  canvas.addEventListener('mouseup', event =>clicked=false);
+  canvas.addEventListener('mousemove', event =>
+  {
+      bound = canvas.getBoundingClientRect();
+       x = event.clientX - bound.left - canvas.clientLeft;
+       y = event.clientY - bound.top - canvas.clientTop      
+      if (clicked===true)
+      {
+        draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+      }   
+
+  });
+
+  window.addEventListener('keydown', function (event) {
+    if (event.defaultPrevented) {
+      return; 
+    }
+  
+    switch (event.key) {
+      case 'ArrowDown':
+       up-=0.5;
+       console.log(up,left);
+       draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        break;
+      case 'ArrowUp':
+        draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        up+=0.5;
+        break;
+      case 'ArrowLeft':
+        console.log("test");
+       left++;
+       console.log(up,left);
+       draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        break;
+      case "ArrowRight":
+        left--;
+        console.log(up,left);
+        draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        break;
+      case 'Enter':
+        distance--;
+        draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        break;
+      case "Escape":
+       distance++;
+       draw(distance * Math.sin(normaliser(x/4)),normaliser(y),distance * Math.cos(normaliser(x/4)),up,left);
+        break;
+      default:
+        return; 
+    }
 
-  // TODO: Complete with your code here
+    event.preventDefault();
+  }, true);
 }