diff --git a/lab3/src/lab3.js b/lab3/src/lab3.js
index 09bd02ee0cf77bbc69249e65635fb7dff3200bf9..653303d96b9520a1bedebcbe4eff01827f0ddfdf 100644
--- a/lab3/src/lab3.js
+++ b/lab3/src/lab3.js
@@ -157,7 +157,7 @@ function main() {
// Light
let lightPosition = [0.0, 0.0, 3.0];
- gl.uniform3fv(lightColorUniform, [1.0, 1.0, 1.0]);
+ gl.uniform3fv(lightColorUniform, [0.5, 0.5, 0.5]);
gl.uniform1f(shininessUniform, gl.FALSE, 64);
gl.uniform3fv(ambientUniform, [0.4, 0.4, 0.4]);
gl.uniform3fv(lightPositionUniform, lightPosition);
@@ -261,49 +261,49 @@ function initVertexBuffers(gl) {
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,
+ -1/6, 3/6,-0.5 , 0.0,0.0,1.0,
+ 1/6, 3/6,-0.5 , 0.0,0.0,1.0,
+ -3/6, -2/6,-0.75, 0.0,0.0,1.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,
+ -3/6, -2/6, -0.75 , 0.0,0.0,1.0,
+ 3/6, -2/6, -0.75 , 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.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,
+ -1/6, 3/6,-0.25, 0.0,0.0,1.0,
+ 1/6, 3/6,-0.25, 0.0,0.0,1.0,
+ 1/6, 3/6,-0.5, 0.0,0.0,1.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,
+ -1/6, 3/6,-0.5, 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ -1/6, 3/6,-0.25, 0.0,0.0,1.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,
+ -3/6, -2/6,0, 0.0,0.0,1.0,
+ 3/6, -2/6,0 , 0.0,0.0,1.0,
+ 3/6, -2/6,-0.75, 0.0,0.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,
+ -3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ 3/6, -2/6, -0.75, 0.0,0.0,1.0,
+ -3/6, -2/6, 0, 0.0,0.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,
+ -1/6, 3/6, -0.25, 0.0,0.0,1.0,
+ -1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ -3/6, -2/6,-0.75, 0.0,0.0,1.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,
+ -3/6, -2/6, 0, 0.0,0.0,1.0,
+ -3/6, -2/6, -0.75, 0.0,0.0,1.0,
+ -1/6, 3/6,-0.25, 0.0,0.0,1.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,
+ 1/6, 3/6, -0.25, 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ 3/6, -2/6,-0.75, 0.0,0.0,1.0,
// 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,
+ 3/6, -2/6, -0.75, 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,
]);
const normal = new Float32Array([
// ====== Front ============
diff --git a/lab4/src/lab4.html b/lab4/src/lab4.html
index 2bb37bcbd21a70f6bb9acddb83953d93aa5bf516..14df1ddf470c6d7fa3766040408a7eac64875ea5 100644
--- a/lab4/src/lab4.html
+++ b/lab4/src/lab4.html
@@ -5,12 +5,25 @@
<title>Lab 4</title>
</head>
<body onload="main()">
-<canvas width="400" height="600" id="my-canvas">
- Please use a browser that supports "canvas"
-</canvas>
+
+<div id="canvas-wrap" style="float:left;">
+ <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-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
+<script src="../lib/cuon-matrix.js"></script>
<script src="lab4.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lab4/src/lab4.js b/lab4/src/lab4.js
index 105a227db9e7e4d4abde40b5002e7c75eb860fb4..653303d96b9520a1bedebcbe4eff01827f0ddfdf 100644
--- a/lab4/src/lab4.js
+++ b/lab4/src/lab4.js
@@ -1,18 +1,546 @@
// Vertex shader program
const VSHADER_SOURCE =
- '\n' +
- // TODO: Implement your vertex shader code here
- '\n';
+'\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
const FSHADER_SOURCE =
- '\n' +
- // TODO: Implement your fragment shader code here
- '\n';
+'\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() {
// Retrieve <canvas> element
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, [0.5, 0.5, 0.5]);
+ 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,0.0,1.0,
+ 1/6, 3/6,-0.5 , 0.0,0.0,1.0,
+ -3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ // Triangle 2
+ -3/6, -2/6, -0.75 , 0.0,0.0,1.0,
+ 3/6, -2/6, -0.75 , 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ // =========== Top ===============
+ // 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,
+ 1/6, 3/6,-0.5, 0.0,0.0,1.0,
+ // Triangle 2
+ -1/6, 3/6,-0.5, 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ -1/6, 3/6,-0.25, 0.0,0.0,1.0,
+ // =========== Bottom ===============
+ // Triangle 1
+ -3/6, -2/6,0, 0.0,0.0,1.0,
+ 3/6, -2/6,0 , 0.0,0.0,1.0,
+ 3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ // Triangle 2
+ -3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ 3/6, -2/6, -0.75, 0.0,0.0,1.0,
+ -3/6, -2/6, 0, 0.0,0.0,1.0,
+ // =========== Left ===============
+ // Triangle 1
+ -1/6, 3/6, -0.25, 0.0,0.0,1.0,
+ -1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ -3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ // Triangle 2
+ -3/6, -2/6, 0, 0.0,0.0,1.0,
+ -3/6, -2/6, -0.75, 0.0,0.0,1.0,
+ -1/6, 3/6,-0.25, 0.0,0.0,1.0,
+ // =========== Right ===============
+ // Triangle 1
+ 1/6, 3/6, -0.25, 0.0,0.0,1.0,
+ 1/6, 3/6, -0.5, 0.0,0.0,1.0,
+ 3/6, -2/6,-0.75, 0.0,0.0,1.0,
+ // Triangle 2
+ 3/6, -2/6, -0.75, 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,
+ ]);
+ 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
-}
\ No newline at end of file
+ // Unbind the buffer object
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+ return n;
+}