diff --git a/docker-compose.yml b/docker-compose.yml index 37ed0de..df33d99 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,7 +2,7 @@ services: cg1: image: nginx:alpine volumes: - - ./src:/usr/share/nginx/html:ro + - ./public:/usr/share/nginx/html:ro networks: - public restart: unless-stopped diff --git a/src/index.html b/public/index.html similarity index 80% rename from src/index.html rename to public/index.html index b6991b4..389debf 100644 --- a/src/index.html +++ b/public/index.html @@ -55,18 +55,18 @@ padding: var(--padding); display: block; border: solid 2px #11111b; - background-color: #31324480; border-radius: 20px; } #stats { + background-color: #31324480; right: var(--padding); position: absolute; top: var(--padding); } #controls { - + background-color: #313244; } #interpolate { @@ -75,14 +75,14 @@ #matrices { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px; grid-gap: var(--padding); padding-left: var(--padding); padding-right: var(--padding); } - #matrices > div { - background-color: rgba(255, 255, 255, 0.1); + .matrix { + background-color: #45475a; border-radius: 20px; display: flex; justify-content: center; @@ -92,7 +92,7 @@ overflow: hidden; } - #matrices > div::before { + .matrix::before { content: ''; position: absolute; border-radius: 20px; @@ -100,7 +100,26 @@ height: 100%; right: 0; top: 0; - background-color: rgba(255, 255, 255, 0.1); + background-color: #585b70; + transition: width linear 0.05s; + } + #matrices > span { + display: flex; + justify-content: center; + align-items: center; + } + + .matrix svg { + max-width: 100%; + height: auto; + } + + .projection { + color: #f38ba8; + } + + .lookAt { + color: #a6e3a1; } @@ -121,9 +140,9 @@
-
+ +
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ @@ -132,9 +151,9 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ - \color{red} \begin{pmatrix} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ @@ -143,9 +162,9 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & - \frac{r+l}{2} \\ 0 & 1 & 0 & - \frac{t+b}{2} \\ @@ -154,9 +173,9 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ @@ -165,9 +184,9 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ - \color{green} \begin{pmatrix} u_x & u_y & u_z & 0 \\ v_x & v_y & v_z & 0 \\ @@ -176,9 +195,9 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ - \color{green} \begin{pmatrix} 1 & 0 & 0 & -e_x \\ 0 & 1 & 0 & -e_y \\ @@ -187,6 +206,7 @@ \end{pmatrix} $$
+
diff --git a/src/matrix-math.js b/public/matrix-math.js similarity index 100% rename from src/matrix-math.js rename to public/matrix-math.js diff --git a/src/script.js b/public/script.js similarity index 91% rename from src/script.js rename to public/script.js index 9d6ba41..84767ec 100644 --- a/src/script.js +++ b/public/script.js @@ -1,5 +1,34 @@ "use strict"; +class Animation { + constructor() { + this.time = 0.0; + } + + interpolation(i) { + if (i > this.time) { + return 0.0; + } + if (i+1 > this.time) { + return this.time - Math.floor(this.time); + } + return 1.0; + } + + isZAxisInverted() { + return (this.time <= 5.0); + } + + isCameraDrawn() { + return (this.time <= 2.0); + } + + isOriginCubeDrawn() { + return (this.time != 0.0 && this.time < 5.0); + } + +} + let cv, gl; let program; @@ -25,14 +54,11 @@ let cameraVertexBuffer; let lastFrame = Date.now(); -let t = 0.0; -let interpolate = [0, 0, 0, 0, 0, 0]; +let animation = new Animation(); let displayMatricesVirtually = true; let virtualRealInterpolation = 1; -let invertZAxis = true; - let cameraPitch = 0.565; let cameraYaw = 0.375; let cameraDistance = 4; @@ -65,29 +91,9 @@ async function init() { // input handling document.getElementById("interpolate").addEventListener("input", (e) => { - t = 6.0 - e.target.value; - if (t <= 2.0) { - invertZAxis = false; - } - else if (t <= 5.0) { - invertZAxis = false; - } - else { - invertZAxis = true; - } + animation.time = 6.0 - e.target.value; for (let i = 0; i < 6; ++i) { - let v; - if (i > t) { - v = 0.0; - } - else if (i+1 > t) { - v = t - Math.floor(t); - } - else { - v = 1.0; - } - interpolate[i] = v; - document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); + document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { @@ -455,16 +461,11 @@ function updateStats(deltaTime) { frameCount = 0; } -let hue = 0; - async function draw() { let now = Date.now(); let deltaTime = (now - lastFrame) / 1000; let frameStart = performance.now(); - hue += deltaTime / 5; - if (hue > 1) hue = 0; - if (displayMatricesVirtually) { virtualRealInterpolation = Math.min(virtualRealInterpolation + deltaTime * 2, 1); } else { @@ -512,7 +513,7 @@ async function draw() { let virtualProjectionMatrix = []; mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); - if (!invertZAxis) { + if (animation.isZAxisInverted()) { let zAxisFlipMatrix = []; mat4Identity(zAxisFlipMatrix); zAxisFlipMatrix[10] = -1; @@ -535,11 +536,11 @@ async function draw() { // interpolated view matrix let virtualViewMatrix1 = []; mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); - mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]); + mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, animation.interpolation(0)); let virtualViewMatrix2 = []; mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); - mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]); + mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, animation.interpolation(1)); mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1); @@ -548,23 +549,23 @@ async function draw() { let virtualProjectionMatrix1 = []; mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); - mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]); + mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, animation.interpolation(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]); + mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, animation.interpolation(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]); + mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, animation.interpolation(4)); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix3, virtualProjectionMatrix); 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]); + mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, animation.interpolation(5)); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix); } @@ -623,19 +624,20 @@ async function draw() { gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6); // draw virtual camera - let virtualCameraModelView = []; - mat4Identity(virtualCameraModelView); - mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]); - mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]); + if (displayMatricesVirtually && animation.isCameraDrawn()) { + let virtualCameraModelView = []; + mat4Identity(virtualCameraModelView); + mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]); + mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]); - mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView); - mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView); + mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView); + mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView); + + gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView)); + + gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer); + setAttribPointers(); - gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView)); - - gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer); - setAttribPointers(); - if (displayMatricesVirtually && t <= 2.0) { gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6); } @@ -656,7 +658,7 @@ async function draw() { // draw origin let originMatrix = []; mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); - mat4Interpolate(originMatrix, identity, originMatrix, interpolate[5]); + mat4Interpolate(originMatrix, identity, originMatrix, animation.interpolation(5)); gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix)); gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity)); @@ -667,7 +669,7 @@ async function draw() { // draw origin cube - if (t != 0.0 && t < 5.0) { + if (animation.isOriginCubeDrawn()) { gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); setAttribPointers(); gl.uniform3fv(colorOverrideLocation, [1, 0, 0]); @@ -703,30 +705,5 @@ function hexToRgb(hex) { return [r, g, b]; } -function hslToRgb(h, s, l) { - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - let hue2rgb = function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; - } - - let q = l < 0.5 ? l * (1 + s) : l + s - l * s; - let p = 2 * l - q; - - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } - - return [r, g, b]; -} - -window.addEventListener("DOMContentLoaded", init); \ No newline at end of file +window.addEventListener("DOMContentLoaded", init); diff --git a/src/shader.js b/public/shader.js similarity index 100% rename from src/shader.js rename to public/shader.js diff --git a/src/shaders/floor-fragment.glsl b/public/shaders/floor-fragment.glsl similarity index 100% rename from src/shaders/floor-fragment.glsl rename to public/shaders/floor-fragment.glsl diff --git a/src/shaders/floor-vertex.glsl b/public/shaders/floor-vertex.glsl similarity index 100% rename from src/shaders/floor-vertex.glsl rename to public/shaders/floor-vertex.glsl diff --git a/src/shaders/fragment.glsl b/public/shaders/fragment.glsl similarity index 100% rename from src/shaders/fragment.glsl rename to public/shaders/fragment.glsl diff --git a/src/shaders/vertex.glsl b/public/shaders/vertex.glsl similarity index 100% rename from src/shaders/vertex.glsl rename to public/shaders/vertex.glsl