Merge branch 'main' into prod
This commit is contained in:
commit
bb1c776162
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -121,9 +140,9 @@
|
|||
</div>
|
||||
<div id="controls">
|
||||
<div id="matrices">
|
||||
<div>
|
||||
<span></span>
|
||||
<div class="matrix projection">
|
||||
$$
|
||||
\color{red}
|
||||
\begin{pmatrix}
|
||||
1 & 0 & 0 & 0 \\
|
||||
0 & 1 & 0 & 0 \\
|
||||
|
|
@ -132,9 +151,9 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<div>
|
||||
<span>$$\dot{}$$</span>
|
||||
<div class="matrix projection">
|
||||
$$
|
||||
\color{red}
|
||||
\begin{pmatrix}
|
||||
\frac{2}{r-l} & 0 & 0 & 0 \\
|
||||
0 & \frac{2}{t-b} & 0 & 0 \\
|
||||
|
|
@ -143,9 +162,9 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<div>
|
||||
<span>$$\dot{}$$</span>
|
||||
<div class="matrix projection">
|
||||
$$
|
||||
\color{red}
|
||||
\begin{pmatrix}
|
||||
1 & 0 & 0 & - \frac{r+l}{2} \\
|
||||
0 & 1 & 0 & - \frac{t+b}{2} \\
|
||||
|
|
@ -154,9 +173,9 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<div>
|
||||
<span>$$\dot{}$$</span>
|
||||
<div class="matrix projection">
|
||||
$$
|
||||
\color{red}
|
||||
\begin{pmatrix}
|
||||
1 & 0 & 0 & 0 \\
|
||||
0 & 1 & 0 & 0 \\
|
||||
|
|
@ -165,9 +184,9 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<div>
|
||||
<span>$$\dot{}$$</span>
|
||||
<div class="matrix lookAt">
|
||||
$$
|
||||
\color{green}
|
||||
\begin{pmatrix}
|
||||
u_x & u_y & u_z & 0 \\
|
||||
v_x & v_y & v_z & 0 \\
|
||||
|
|
@ -176,9 +195,9 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<div>
|
||||
<span>$$\dot{}$$</span>
|
||||
<div class="matrix lookAt">
|
||||
$$
|
||||
\color{green}
|
||||
\begin{pmatrix}
|
||||
1 & 0 & 0 & -e_x \\
|
||||
0 & 1 & 0 & -e_y \\
|
||||
|
|
@ -187,6 +206,7 @@
|
|||
\end{pmatrix}
|
||||
$$
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
|
||||
<datalist id="steplist">
|
||||
|
|
@ -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,6 +624,7 @@ async function draw() {
|
|||
gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6);
|
||||
|
||||
// draw virtual camera
|
||||
if (displayMatricesVirtually && animation.isCameraDrawn()) {
|
||||
let virtualCameraModelView = [];
|
||||
mat4Identity(virtualCameraModelView);
|
||||
mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]);
|
||||
|
|
@ -635,7 +637,7 @@ async function draw() {
|
|||
|
||||
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);
|
||||
Loading…
Reference in New Issue