diff --git a/src/index.html b/src/index.html index 5f6364c..294c3ea 100644 --- a/src/index.html +++ b/src/index.html @@ -58,6 +58,9 @@
  • Projection Matrix: +
  • Use virtual camera: diff --git a/src/script.js b/src/script.js index 1473344..e059098 100644 --- a/src/script.js +++ b/src/script.js @@ -31,6 +31,8 @@ let interpolateLookAt = 0; let displayMatricesVirtually = true; let virtualRealInterpolation = 1; +let invertZAxis = true; + let cameraPitch = 0.565; let cameraYaw = 0.375; let cameraDistance = 4; @@ -57,6 +59,9 @@ async function init() { document.getElementById("interpolateLookAt").disabled = "yes"; } }); + document.getElementById("invertZAxis").addEventListener("input", (e) => { + invertZAxis = e.target.checked; + }); document.getElementById("interpolateLookAt").addEventListener("input", (e) => { interpolateLookAt = e.target.value; if (interpolateLookAt >= 1) { @@ -67,6 +72,13 @@ async function init() { }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { displayMatricesVirtually = e.target.checked; + if (!displayMatricesVirtually) { + document.getElementById("invertZAxis").checked = true; + document.getElementById("invertZAxis").disabled = true; + } else { + document.getElementById("invertZAxis").checked = invertZAxis; + document.getElementById("invertZAxis").disabled = false; + } }); document.getElementById("backfaceCulling").addEventListener("input", (e) => { if (e.target.checked) { @@ -454,9 +466,6 @@ async function draw() { let realCameraPosition = [Math.cos(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch), Math.sin(cameraPitch) * smoothCameraDistance, Math.sin(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch)]; let realCameraLookAt = [0, 0, 0]; let realCameraUp = [0, 1, 0]; - // if (cameraPitch > -0.1) { - // realCameraUp = [Math.cos(cameraYaw), 0, Math.sin(cameraYaw)]; - // } mat4BuildLookAt(realViewMatrix, realCameraPosition, realCameraLookAt, realCameraUp); mat4Interpolate(realProjectionMatrix, identity, realProjectionMatrix, virtualRealInterpolation * virtualRealInterpolation); @@ -477,12 +486,14 @@ async function draw() { let virtualProjectionMatrix = []; - mat4BuildPerspective(virtualProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 1, 5); - if (displayMatricesVirtually) { - // virtualProjectionMatrix[8] *= -1; - // virtualProjectionMatrix[9] *= -1; - // virtualProjectionMatrix[10] *= -1; - // virtualProjectionMatrix[11] *= -1; + mat4BuildPerspective(virtualProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); + + if (!invertZAxis) { + let zAxisFlipMatrix = []; + mat4Identity(zAxisFlipMatrix); + zAxisFlipMatrix[10] = -1; + mat4Interpolate(zAxisFlipMatrix, identity, zAxisFlipMatrix, virtualRealInterpolation); + mat4Multiply(virtualProjectionMatrix, zAxisFlipMatrix, virtualProjectionMatrix); } let inverseVirtualProjectionMatrix = [];