diff --git a/docker-compose.yml b/docker-compose.yml index 38684ad..03a99c0 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,6 +2,6 @@ services: cg1: image: nginx:alpine volumes: - - ./src:/usr/share/nginx/html:ro + - ./public:/usr/share/nginx/html:ro ports: - "8080:80" \ No newline at end of file diff --git a/src/index.html b/public/index.html similarity index 100% rename from src/index.html rename to public/index.html 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 89% rename from src/script.js rename to public/script.js index 82850dd..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.getElementsByClassName("matrix")[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,31 +536,39 @@ 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); // 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]); + 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); - 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, animation.interpolation(5)); + mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix); + + } gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix)); @@ -615,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); } @@ -648,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)); @@ -659,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]); @@ -695,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