From c66e129118030041fb126c4c4717593d4ecc9205 Mon Sep 17 00:00:00 2001
From: xvdp <xvdpahlen@gmail.com>
Date: Mon, 27 Nov 2023 03:40:37 -0800
Subject: [PATCH 1/3] added key press for camera cycling, added note on loading
 cameras.json

---
 README.md  |  2 ++
 index.html |  2 ++
 main.js    | 12 +++++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 37686f9..a4a9e63 100644
--- a/README.md
+++ b/README.md
@@ -46,8 +46,10 @@ touch (mobile)
 
 other
 - press 0-9 to switch to one of the pre-loaded camera views
+- press '-' or '+'key to cycle loaded cameras
 - press `p` to resume default animation
 - drag and drop .ply file to convert to .splat
+- drag and drop cameras.json to load cameras
 
 ## other features
 
diff --git a/index.html b/index.html
index 7a77781..287cf7a 100644
--- a/index.html
+++ b/index.html
@@ -231,8 +231,10 @@ <h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
 
 other
 - press 0-9 to switch to one of the pre-loaded camera views
+- press '-' or '+'key to cycle loaded cameras
 - press p to resume default animation
 - drag and drop .ply file to convert to .splat
+- drag and drop cameras.json to load cameras
 </div>
 
 		</details>
diff --git a/main.js b/main.js
index 7965c4f..6ab948f 100644
--- a/main.js
+++ b/main.js
@@ -905,15 +905,25 @@ async function main() {
     };
 
     let activeKeys = [];
+	let currentCameraIndex = 0;
 
     window.addEventListener("keydown", (e) => {
         // if (document.activeElement != document.body) return;
         carousel = false;
         if (!activeKeys.includes(e.code)) activeKeys.push(e.code);
         if (/\d/.test(e.key)) {
-            camera = cameras[parseInt(e.key)];
+            currentCameraIndex = parseInt(e.key)
+            camera = cameras[currentCameraIndex];
             viewMatrix = getViewMatrix(camera);
         }
+		if (['-', '_'].includes(e.key)){
+			currentCameraIndex = (currentCameraIndex + cameras.length - 1) % cameras.length;
+			viewMatrix = getViewMatrix(cameras[currentCameraIndex]);
+		}
+		if (['+', '='].includes(e.key)){
+			currentCameraIndex = (currentCameraIndex + 1) % cameras.length;
+			viewMatrix = getViewMatrix(cameras[currentCameraIndex]);
+		}
         if (e.code == "KeyV") {
             location.hash =
                 "#" +

From 51c5166edc3bdde0d3435a12b6022e1aa2c7472d Mon Sep 17 00:00:00 2001
From: xvdp <xvdpahlen@gmail.com>
Date: Mon, 27 Nov 2023 06:06:13 -0800
Subject: [PATCH 2/3] added camera number info

---
 index.html |  9 +++++++++
 main.js    | 17 +++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/index.html b/index.html
index 287cf7a..0609d84 100644
--- a/index.html
+++ b/index.html
@@ -156,6 +156,12 @@
 				right: 10px;
 			}
 
+			#caminfo {
+				position: absolute;
+				top: 10px;
+				z-index: 999;
+				right: 10px;
+			}
 			#canvas {
 				display: block;
 				position: absolute;
@@ -263,6 +269,9 @@ <h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
 		<div id="quality">
 			<span id="fps"></span>
 		</div>
+		<div id="caminfo">
+			<span id="camera"></span>
+		</div>
 		<script src="main.js"></script>
 	</body>
 </html>
diff --git a/main.js b/main.js
index 6ab948f..08ee977 100644
--- a/main.js
+++ b/main.js
@@ -184,6 +184,15 @@ function getViewMatrix(camera) {
     ].flat();
     return camToWorld;
 }
+// function translate4(a, x, y, z) {
+//     return [
+//         ...a.slice(0, 12),
+//         a[0] * x + a[4] * y + a[8] * z + a[12],
+//         a[1] * x + a[5] * y + a[9] * z + a[13],
+//         a[2] * x + a[6] * y + a[10] * z + a[14],
+//         a[3] * x + a[7] * y + a[11] * z + a[15],
+//     ];
+// }
 
 function multiply4(a, b) {
     return [
@@ -766,6 +775,8 @@ async function main() {
 
     const canvas = document.getElementById("canvas");
     const fps = document.getElementById("fps");
+    const camid = document.getElementById("camid");
+
     let projectionMatrix;
 
     const gl = canvas.getContext("webgl2", {
@@ -924,14 +935,17 @@ async function main() {
 			currentCameraIndex = (currentCameraIndex + 1) % cameras.length;
 			viewMatrix = getViewMatrix(cameras[currentCameraIndex]);
 		}
+        camid.innerText = "cam  " + currentCameraIndex;
         if (e.code == "KeyV") {
             location.hash =
                 "#" +
                 JSON.stringify(
                     viewMatrix.map((k) => Math.round(k * 100) / 100),
                 );
+                camid.innerText =""
         } else if (e.code === "KeyP") {
             carousel = true;
+            camid.innerText =""
         }
     });
     window.addEventListener("keyup", (e) => {
@@ -1337,6 +1351,9 @@ async function main() {
             document.getElementById("progress").style.display = "none";
         }
         fps.innerText = Math.round(avgFps) + " fps";
+        if (isNaN(currentCameraIndex)){
+            camid.innerText = "";
+        }
         lastFrame = now;
         requestAnimationFrame(frame);
     };

From ffaf668548b6b66a6282b116c949df82c2ff05d6 Mon Sep 17 00:00:00 2001
From: xvdp <xvdpahlen@gmail.com>
Date: Sat, 9 Dec 2023 06:40:04 -0800
Subject: [PATCH 3/3] fixed camra id log

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0609d84..c25c895 100644
--- a/index.html
+++ b/index.html
@@ -270,7 +270,7 @@ <h3 class="nohf">WebGL 3D Gaussian Splat Viewer</h3>
 			<span id="fps"></span>
 		</div>
 		<div id="caminfo">
-			<span id="camera"></span>
+			<span id="camid"></span>
 		</div>
 		<script src="main.js"></script>
 	</body>