diff --git a/src/index.html b/src/index.html index 0d50e63..b6991b4 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,7 @@ @@ -82,8 +118,9 @@ Backface Culling: - -
+
+
+
$$ \color{red} @@ -93,24 +130,43 @@ 0 & 0 & -1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ 0 & 0 & \frac{2}{f-n} & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} 1 & 0 & 0 & - \frac{r+l}{2} \\ 0 & 1 & 0 & - \frac{t+b}{2} \\ 0 & 0 & 1 & \frac{n+f}{2} \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 + \frac{f}{n} & f \\ 0 & 0 & - \frac{1}{n} & 0 \end{pmatrix} + $$ +
+
+ $$ \color{green} \begin{pmatrix} u_x & u_y & u_z & 0 \\ @@ -118,6 +174,11 @@ n_x & n_y & n_z & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{green} \begin{pmatrix} 1 & 0 & 0 & -e_x \\ 0 & 1 & 0 & -e_y \\ @@ -125,19 +186,16 @@ 0 & 0 & 0 & 1 \end{pmatrix} $$ - - - - - - - - -
-
-
+ + + + + + + +
\ No newline at end of file diff --git a/src/script.js b/src/script.js index 8055b8d..9d6ba41 100644 --- a/src/script.js +++ b/src/script.js @@ -76,15 +76,18 @@ async function init() { invertZAxis = true; } for (let i = 0; i < 6; ++i) { + let v; if (i > t) { - interpolate[i] = 0.0; + v = 0.0; } else if (i+1 > t) { - interpolate[i] = t - Math.floor(t); + v = t - Math.floor(t); } else { - interpolate[i] = 1.0; + v = 1.0; } + interpolate[i] = v; + document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { @@ -541,22 +544,30 @@ async function draw() { mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1); // interpolated projection matrix + mat4Identity(virtualProjectionMatrix); + let virtualProjectionMatrix1 = []; mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]); + mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix1, virtualProjectionMatrix); let virtualProjectionMatrix2 = []; mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, interpolate[3]); + mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix2, virtualProjectionMatrix); let virtualProjectionMatrix3 = []; mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, interpolate[4]); + mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix3, virtualProjectionMatrix); - mat4Identity(virtualProjectionMatrix); - mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix3); - mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix2); - mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix1); + if (!displayMatricesVirtually) { + let virtualProjectionMatrix4 = []; + mat4BuildPerspective4(virtualProjectionMatrix4, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); + mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, interpolate[5]); + mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix); + + } gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix));