From 65dbfcb004c34921d48225513298ce51394a8e26 Mon Sep 17 00:00:00 2001
From: ivan perez <ivan.perez@etu.hesge.ch>
Date: Sun, 11 Oct 2020 14:55:01 +0200
Subject: [PATCH] Finished letter B
---
lab1/src/lab1.js | 114 ++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 97 insertions(+), 17 deletions(-)
diff --git a/lab1/src/lab1.js b/lab1/src/lab1.js
index 0e4de78..7a7663e 100644
--- a/lab1/src/lab1.js
+++ b/lab1/src/lab1.js
@@ -1,14 +1,23 @@
// Vertex shader program
const VSHADER_SOURCE =
- '\n' +
- // TODO: Implement your vertex shader code here
- '\n';
+ 'attribute vec4 a_Position;\n' +
+ 'attribute vec4 a_Color;\n' + // Attribute variable color to bind the effective vertex color from the model data
+
+ 'varying vec4 v_Color;\n' + // Varying variable color to pass the vertex color to the fragment shader
+
+ 'void main() {\n' +
+ ' gl_Position = a_Position;\n' +
+ ' v_Color = a_Color;\n' + // Set the varying color value with the attribute color value
+ '}\n';
// Fragment shader program
const FSHADER_SOURCE =
- '\n' +
- // TODO: Implement your fragment shader code here
- '\n';
+ 'precision mediump float;\n' + // This determines how much precision the GPU uses when calculating floats
+ 'varying vec4 v_Color;\n' + // Varying variable color to get the vertex color from
+ // The vertex shader (!!same name as in the vertex shafer)
+ 'void main() {\n' +
+ ' gl_FragColor = v_Color;\n' + // Set the fragment color with the vertex shader
+ '}\n';
function main() {
// Retrieve <canvas> element
@@ -47,17 +56,88 @@ function main() {
function initVertexBuffers(gl) {
// This is the model
const vertices = new Float32Array([
- // TODO: Complete the vertex buffer with your model
+ // x y
+ -3/5, -5/7, 1.0, 0.0, 0.0,
+ -1/5, 5/7, 1.0, 0.0, 0.0,
+ -3/5, 5/7, 1.0, 0.0, 0.0,
+
+ -3/5, -5/7, 0.0, 1.0, 0.0,
+ -1/5, 5/7, 0.0, 1.0, 0.0,
+ -1/5, -5/7, 0.0, 1.0, 0.0,
+
+ -1/5, 5/7, 0.0, 0.0, 1.0,
+ 3/5, 5/7, 0.0, 0.0, 1.0,
+ 3/5, 3/7, 0.0, 0.0, 1.0,
+
+ -1/5, 5/7, 1.0, 0.0, 1.0,
+ -1/5, 3/7, 1.0, 0.0, 1.0,
+ 3/5, 3/7, 1.0, 0.0, 1.0,
+
+ -1/5, 1/7, 1.0, 1.0, 0.0,
+ 1/5, 1/7, 1.0, 1.0, 0.0,
+ 1/5, -1/7, 1.0, 1.0, 0.0,
+
+ -1/5, 1/7, 0.0, 1.0, 1.0,
+ -1/5, -1/7, 0.0, 1.0, 1.0,
+ 1/5, -1/7, 0.0, 1.0, 1.0,
+
+ -1/5, -3/7, 0.5, 0.7, 0.2,
+ 3/5, -3/7, 0.5, 0.7, 0.2,
+ 3/5, -5/7, 0.5, 0.7, 0.2,
+
+ -1/5, -3/7, 0.7, 0.2 , 0.5,
+ -1/5, -5/7, 0.7, 0.2 , 0.5,
+ 3/5, -5/7, 0.7, 0.2 , 0.5,
+
+ 1/5, 3/7, 0.2, 0.3, 0.8,
+ 1/5, -3/7, 0.2, 0.3, 0.8,
+ 3/5, -3/7, 0.2, 0.3, 0.8,
+
+ 1/5, 3/7, 0.8, 0.1, 0.2,
+ 3/5, -3/7, 0.8, 0.1, 0.2,
+ 3/5, 3/7, 0.8, 0.1, 0.2
]);
+ const n = vertices.length / 5; // The number of vertices
+ // 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);
+
+ // Get the storage location of a_Position, assign buffer and enable
+ const 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;
+ }
+ // Assign the buffer object to a_Position variable
+ // Read 2 elements of type gl.FLOAT, starting at the offset 0.
+ // Next offset will be 20: after 5 elements (x, y, r, g, and b) of 4 bytes (32 bits) each
+ gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 20, 0);
+ // Enable the assignment to a_Position variable
+ gl.enableVertexAttribArray(a_Position);
+
+ // Get the storage location of a_Color, 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;
+ }
+ // Assign the buffer object to a_Color variable
+ // Read 3 elements of type gl.FLOAT, starting at the offset 8 (after 2 elements (x and z) of 4 bytes each).
+ // Next offset will be 20: after 5 elements (x, y, r, g, and b) of 4 bytes (32 bits) each
+ gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 20, 8);
+ // Enable the assignment to a_Color variable
+ gl.enableVertexAttribArray(a_Color);
+
+ // Unbind the buffer object
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
- /*
- 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;
}
--
GitLab