diff --git a/lab3.0/src/lab3.js b/lab3.0/src/lab3.js
index 522070b07727a50f60f5031d23cd19ef59df5d37..24f9a232a73c25df465e849b87115534e8c8d1c3 100644
--- a/lab3.0/src/lab3.js
+++ b/lab3.0/src/lab3.js
@@ -1,24 +1,37 @@
//author : QUentin Berthet
const VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
+ 'attribute vec3 a_normal;\n' +
'attribute vec4 a_Color;\n' +
- 'uniform mat4 u_mat;\n' +
+ 'uniform mat4 u_worldViewProjection;\n' +
+ 'uniform mat4 u_worldInverseTranspose;\n' +
+
+ 'varying vec3 v_normal;\n' +
'varying vec4 v_Color;\n' +
+
'void main() {\n' +
- ' gl_Position = u_mat * a_Position ;\n' +
+ ' gl_Position = u_worldViewProjection * a_Position ;\n' +
+ ' v_normal = mat3(u_worldInverseTranspose) * a_normal;\n' +
' v_Color = a_Color;\n' +
'}\n';
const FSHADER_SOURCE =
'precision mediump float;\n' +
+
'varying vec4 v_Color;\n' +
+ 'varying vec3 v_normal;\n' +
+ 'uniform vec3 u_reverseLightDirection;\n' +
'void main() {\n' +
+ ' vec3 normal = normalize(v_normal);\n' +
+ ' float light = dot(normal, u_reverseLightDirection);\n' +
+
' gl_FragColor = v_Color;\n' +
- '}\n';
+ ' gl_FragColor.rgb *= light;\n' +
+ '}\n'
function main() {
diff --git a/lab3.1/src/lab3.js b/lab3.1/src/lab3.js
index 0abd858533e7690c638021f204f973c611e8cd00..08d08dfcc941a9ebb8c1d094d8308ba8a2d2f0ee 100644
--- a/lab3.1/src/lab3.js
+++ b/lab3.1/src/lab3.js
@@ -52,10 +52,11 @@ const FSHADER_SOURCE =
function main() {
+ console.log("hello<");
const canvas = document.getElementById('my-canvas');
- const gl = getWebGLContext(canvas);
+ const gl = canvas.getContext('webgl');
if (!gl) {
console.log('Failed to get the displaying context for WebGL');
return;
@@ -399,64 +400,71 @@ const leftNormal = normalizedCrossWith3Points(-1, 1.5, -3, -2, -1.5, -2, -1, 1.5
function CreateNormals(gl, bottomNormal) {
var vertexNormals = new Float32Array(
[ //front
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+
// back
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
- 0, 0, -1,
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
// left
- -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
-
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
// right
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
// top
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
// ground
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
- 0, -1, 0,
-
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2]
]);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
}
\ No newline at end of file
diff --git a/lab3/src/lab3.js b/lab3/src/lab3.js
index 1ebbb0ad782ec6a39a64dd84482d94f0ce8d64b2..f65bab93736c6c376e3af79a78347e3fbe155cf4 100644
--- a/lab3/src/lab3.js
+++ b/lab3/src/lab3.js
@@ -33,128 +33,23 @@ const FSHADER_SOURCE =
' gl_FragColor.rgb *= light;\n' +
'}\n';
-let thetaLight = 1;
-let lightWorldPositionX = 1 * Math.cos(1);
-let lightWorldPositionY = 1;
-let lightWorldPositionZ = 1 * Math.sin(1);
-
-
-function normalizedCrossWith3Points(a0, a1, a2, b0, b1, b2, c0, c1, c2) {
- const u = [b0 - a0, b1 - a1, b2 - a2];
- const v = [c0 - a0, c1 - a1, c2 - a2];
- const rawnormal = [
- u[1] * v[2] - u[2] * v[1],
- u[2] * v[0] - u[0] * v[2],
- u[0] * v[1] - u[1] * v[0]
- ];
- const norm = Math.hypot(...rawnormal);
- return rawnormal.map((n) => n / norm);
-}
-
-const normal_f = normalizedCrossWith3Points(-1, 1.5, -1,
- 0, -1.5, 0,
- 1, 1.5, -1,
-
-);
-const normal_b = normalizedCrossWith3Points(-1, 1.5, -3,
- 0, -1.5, -4,
- 1, 1.5, -3,
-);
-const normal_t = normalizedCrossWith3Points(-1, 1.5, -3,
- 0, 1.5, -1,
- 1, 1.5, -3,
-);
-const normal_g = normalizedCrossWith3Points(-2, -1.5, -4,
- 0, -1.5, 0,
- 2, -1.5, -4,
-);
-const normal_r = normalizedCrossWith3Points(
- 1, 1.5, -3,
- 2, -1.5, -2,
- 1, 1.5, -1,
-);
-
-const normal_l = normalizedCrossWith3Points(-1, 1.5, -3, -2, -1.5, -2, -1, 1.5, -1);
-
-// const surfacenormal = normalizedCrossWith3Points(-2.5, -0.501, -2.5,
-// 2.5, -0.501, -2.5,
-// 2.5, -0.501, 2.5
-// );
-
-
-function Createnormals(gl) {
- var normales = new Float32Array(
- [ //front
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
-
- // back
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
- 0, 0, 1,
-
-
- // left
- 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
-
- // right
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
- 1, 0, 0,
-
- // top
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
-
- // ground
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
- 0, 1, 0,
-
- ]);
- gl.bufferData(gl.ARRAY_BUFFER, normales, gl.STATIC_DRAW);
-
-}
+let angleLight = 1;
+let angle = 1;
+let onOff = true;
+let lightWorldPositionX = 1 * Math.cos(angleLight);
+let lightWorldPositionY = 1;
+let lightWorldPositionZ = 1 * Math.sin(angleLight);
+let X = 15 * Math.cos(angle);
+let Y = 0;
+let Z = 15 * Math.sin(angle);
function main() {
const canvas = document.getElementById('my-canvas');
- const gl = getWebGLContext(canvas);
+ const gl = canvas.getContext('webgl');
if (!gl) {
console.log('Failed to get the displaying context for WebGL');
return;
@@ -177,8 +72,6 @@ function main() {
-
-
const vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
@@ -261,14 +154,9 @@ function main() {
var viewProjMatrix = new Matrix4();
var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
- var camera = [-100, -150, -200];
- var target = [0, 35, 0];
- var up = [0, 1, 0];
- let X = 100;
- let Y = 0;
- let Z = 100;
-
- viewProjMatrix.setPerspective(10.0, aspect, 1.0, 2000.0);
+
+
+ viewProjMatrix.setPerspective(1000.0, aspect, 1.0, 2000.0);
const cameraMatrix = new Matrix4();
viewProjMatrix.lookAt(X, Y, Z, 0, 0, 0, 0, 1, 100);
@@ -300,18 +188,14 @@ function main() {
var vals = [0.0, 0.0];
ObjectManager(vals);
- let lightWorldPositionX = 5 * Math.cos(1);
- let lightWorldPositionY = 1;
- let lightWorldPositionZ = 5 * Math.sin(1);
- gl.uniform3fv(reverseLightDirectionLocation, new Vector3([lightWorldPositionX, lightWorldPositionY, lightWorldPositionZ]).normalize().elements);
+ gl.uniform3fv(reverseLightDirectionLocation, new Vector3([lightWorldPositionX, lightWorldPositionY, lightWorldPositionZ]).normalize().elements);
var display = function() {
-
cameraMatrix.set(viewProjMatrix);
cameraMatrix.rotate(vals[0], 1.0, 0.0, 0.0);
cameraMatrix.rotate(vals[1], 0.0, 1.0, 0.0);
@@ -335,26 +219,101 @@ function main() {
};
display();
}
+let i = 0;
+
+function normalizedCrossWith3Points(a0, a1, a2, b0, b1, b2, c0, c1, c2) {
+ const u = [b0 - a0, b1 - a1, b2 - a2];
+ const v = [c0 - a0, c1 - a1, c2 - a2];
+ const rawnormal = [
+ u[1] * v[2] - u[2] * v[1],
+ u[2] * v[0] - u[0] * v[2],
+ u[0] * v[1] - u[1] * v[0]
+ ];
+ const norm = Math.hypot(...rawnormal);
+ return rawnormal.map((n) => n / norm);
+}
+
+
function ObjectManager(values) {
- document.onkeydown = (ev) => {
+ document.onkeydown = (event) => {
v = 1;
- switch (ev.key) {
+ switch (event.code) {
+ case "KeyA":
+ angle += 0.1;
+ onOff = true;
+ break;
+ case "KeyD":
+ angle -= 0.1;
+ onOff = true;
+ break;
+ case "KeyW":
+ Y -= 0.1;
+ X -= 0.1;
+ onOff = true;
+ break;
+ case "KeyS":
+ Y += 0.1;
+ X += 0.1;
+ onOff = true;
+ break;
+ case "KeyC":
+ i += 0.1;
+ if (i % 2 == 0) {
+ onOff = true;
+ console.log(onOff);
+ } else {
+ onOff = false;
+ console.log(onOff);
+ }
+ break;
+
+ case "KeyJ":
+ console.log("on");
+ lightWorldPositionX -= 0.1;
+ angleLight += 0.1;
+ onOff = true;
+ break;
+ case "KeyL":
+ lightWorldPositionX += 0.1;
+ angleLight -= 0.1;
+ onOff = true;
+ break;
+ case "KeyI":
+ lightWorldPositionY += 0.1;
+ onOff = true;
+ break;
+ case "KeyK":
+ lightWorldPositionY -= 0.1;
+ onOff = true;
+ break;
case 'ArrowDown':
values[0] += v;
+ onOff = false;
break;
case 'ArrowUp':
+ onOff = false;
values[0] -= v;
break;
case 'ArrowRight':
+ onOff = false;
values[1] += v;
break;
case 'ArrowLeft':
+ onOff = false;
values[1] -= v;
break;
}
- };
-}
+ if (onOff) {
+
+ requestAnimationFrame(main);
+ event.preventDefault();
+ }
+
+
+ }
+};
+
function initVertexBuffers(gl) {
@@ -434,4 +393,109 @@ function initVertexBuffers(gl) {
const len = vertices.length / 6;
return [len, vertices];
+}
+
+
+const normal_f = normalizedCrossWith3Points(-1, 1.5, -1,
+ 0, -1.5, 0,
+ 1, 1.5, -1,
+
+);
+const normal_b = normalizedCrossWith3Points(-1, 1.5, -3,
+ 0, -1.5, -4,
+ 1, 1.5, -3,
+);
+const normal_t = normalizedCrossWith3Points(-1, 1.5, -3,
+ 0, 1.5, -1,
+ 1, 1.5, -3,
+);
+const normal_g = normalizedCrossWith3Points(-2, -1.5, -4,
+ 0, -1.5, 0,
+ 2, -1.5, -4,
+);
+const normal_r = normalizedCrossWith3Points(
+ 1, 1.5, -3,
+ 2, -1.5, -2,
+ 1, 1.5, -1,
+);
+
+const normal_l = normalizedCrossWith3Points(-1, 1.5, -3, -2, -1.5, -2, -1, 1.5, -1);
+
+// const surfacenormal = normalizedCrossWith3Points(-2.5, -0.501, -2.5,
+// 2.5, -0.501, -2.5,
+// 2.5, -0.501, 2.5
+// );
+
+
+function Createnormals(gl) {
+ var normales = new Float32Array(
+ [ //front
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+
+
+ // back
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+ normal_b[0], normal_b[1], normal_b[2],
+
+
+ // left
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ normal_f[0], normal_f[1], normal_f[2],
+ // right
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+ normal_r[0], normal_r[1], normal_r[2],
+
+ // top
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+ normal_t[0], normal_t[1], normal_t[2],
+
+ // ground
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2],
+ normal_g[0], normal_g[1], normal_g[2]
+ ]);
+ gl.bufferData(gl.ARRAY_BUFFER, normales, gl.STATIC_DRAW);
+
}
\ No newline at end of file