From 1de48fc66db5202f6e7fb3be055975ac6c258592 Mon Sep 17 00:00:00 2001 From: Nehc Date: Wed, 8 Nov 2023 12:06:52 +0300 Subject: [PATCH 1/5] change Camera controls on SketchFab stile --- main.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/main.js b/main.js index 7965c4f..99978a5 100644 --- a/main.js +++ b/main.js @@ -931,6 +931,8 @@ async function main() { activeKeys = []; }); + let startX, startY, down, d=4; + window.addEventListener( "wheel", (e) => { @@ -962,12 +964,20 @@ async function main() { (-10 * (e.deltaY * scale)) / innerHeight, ); inv[13] = preY; - } else { + } else if (e.altKey) { let d = 4; inv = translate4(inv, 0, 0, d); inv = rotate4(inv, -(e.deltaX * scale) / innerWidth, 0, 1, 0); inv = rotate4(inv, (e.deltaY * scale) / innerHeight, 1, 0, 0); inv = translate4(inv, 0, 0, -d); + } else { + inv = translate4( + inv, + 0, + 0, + (e.deltaY * scale) / innerHeight, + ); + d-=(e.deltaY * scale) / innerHeight } viewMatrix = invert4(inv); @@ -975,13 +985,12 @@ async function main() { { passive: false }, ); - let startX, startY, down; canvas.addEventListener("mousedown", (e) => { carousel = false; e.preventDefault(); startX = e.clientX; startY = e.clientY; - down = e.ctrlKey || e.metaKey ? 2 : 1; + down = e.ctrlKey || e.metaKey || e.button > 0 ? 2 : 1; }); canvas.addEventListener("contextmenu", (e) => { carousel = false; @@ -997,7 +1006,7 @@ async function main() { let inv = invert4(viewMatrix); let dx = (5 * (e.clientX - startX)) / innerWidth; let dy = (5 * (e.clientY - startY)) / innerHeight; - let d = 4; + //let d = 4; inv = translate4(inv, 0, 0, d); inv = rotate4(inv, dx, 0, 1, 0); @@ -1013,14 +1022,14 @@ async function main() { } else if (down == 2) { let inv = invert4(viewMatrix); // inv = rotateY(inv, ); - let preY = inv[13]; + //let preY = inv[13]; inv = translate4( inv, - (-10 * (e.clientX - startX)) / innerWidth, + (-3 * (e.clientX - startX)) / innerWidth, + (-3 * (e.clientY - startY)) / innerHeight, 0, - (10 * (e.clientY - startY)) / innerHeight, ); - inv[13] = preY; + //inv[13] = preY; viewMatrix = invert4(inv); startX = e.clientX; From 615befb3d1f5ce7a0dab1a4588ebf24c91671b02 Mon Sep 17 00:00:00 2001 From: Nehc Date: Wed, 8 Nov 2023 15:59:16 +0300 Subject: [PATCH 2/5] add Colection and my cheast, like default splat --- .gitignore | 2 +- index.html | 72 +++++++++++++++++++++++++++++++++++++++++++++++------- main.js | 14 ++++------- 3 files changed, 69 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 5ca0973..b8ebe3b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ .DS_Store - +splats diff --git a/index.html b/index.html index 7a77781..4a9ac58 100644 --- a/index.html +++ b/index.html @@ -173,6 +173,15 @@ border-radius: 10px; font-size: x-small; } + + #collections { + background: rgba(0,0,0,0.6); + white-space: pre-wrap; + padding: 10px; + border-radius: 10px; + font-size: x-small; + } + body.nohf .nohf { display: none; } @@ -184,6 +193,7 @@

WebGL 3D Gaussian Splat Viewer

@@ -199,15 +209,21 @@

WebGL 3D Gaussian Splat Viewer

Use mouse or arrow keys to navigate. -
movement (arrow keys) +
Main navigation (mouse+QE) +- click and drag to orbit +- middle click and drag up/down to move +- q/e to correct orbit (roll camera counterclockwise/clockwise) + +- press v to hash curent view to url string +- drag and drop .ply file to convert to .splat + +movement (arrow keys) - left/right arrow keys to strafe side to side - up/down arrow keys to move forward/back -- space to jump camera angle (wasd) - a/d to turn camera left/right - w/s to tilt camera up/down -- q/e to roll camera counterclockwise/clockwise - i/k and j/l to orbit trackpad @@ -216,10 +232,6 @@

WebGL 3D Gaussian Splat Viewer

- ctrl key + scroll to move forward/back - shift + scroll to move up/down or strafe -mouse -- click and drag to orbit -- right click (or ctrl/cmd key) and drag up/down to move - touch (mobile) - one finger to orbit - two finger pinch to move forward/back @@ -232,11 +244,53 @@

WebGL 3D Gaussian Splat Viewer

other - press 0-9 to switch to one of the pre-loaded camera views - press p to resume default animation -- drag and drop .ply file to convert to .splat
- +
+ My collections. + +
+ + +
diff --git a/main.js b/main.js index 99978a5..94e2e01 100644 --- a/main.js +++ b/main.js @@ -722,23 +722,19 @@ void main () { `.trim(); -let defaultViewMatrix = [ - 0.47, 0.04, 0.88, 0, -0.11, 0.99, 0.02, 0, -0.88, -0.11, 0.47, 0, 0.07, - 0.03, 6.55, 1, -]; +let defaultViewMatrix = [-0.02,-0.52,0.85,0,0.5,0.73,0.47,0,-0.87,0.44,0.24,0,0.07,-1.78,5.18,1]; let viewMatrix = defaultViewMatrix; async function main() { - let carousel = true; + let carousel = true; const params = new URLSearchParams(location.search); try { viewMatrix = JSON.parse(decodeURIComponent(location.hash.slice(1))); carousel = false; } catch (err) {} const url = new URL( - // "nike.splat", - // location.href, - params.get("url") || "train.splat", - "https://huggingface.co/cakewalk/splat-data/resolve/main/", + params.get("url") || "chest.splat", + //"https://huggingface.co/datasets/Nehc/splats/resolve/main/", + location.href+"splats/", ); const req = await fetch(url, { mode: "cors", // no-cors, *cors, same-origin From 889b90671c9844b6ae5d07fa15e92cd8b69ef774 Mon Sep 17 00:00:00 2001 From: Nehc Date: Wed, 8 Nov 2023 16:06:19 +0300 Subject: [PATCH 3/5] minor bagfix --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 4a9ac58..12a176e 100644 --- a/index.html +++ b/index.html @@ -193,7 +193,6 @@

WebGL 3D Gaussian Splat Viewer

From 1d4081a034f3e5c879f2d7a819501a12e79ce7e9 Mon Sep 17 00:00:00 2001 From: Dim Date: Fri, 10 Nov 2023 10:22:29 +0300 Subject: [PATCH 4/5] Add move to WS keys instead of pitch --- main.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 94e2e01..c4cda1f 100644 --- a/main.js +++ b/main.js @@ -1188,8 +1188,10 @@ async function main() { if (activeKeys.includes("KeyD")) inv = rotate4(inv, 0.01, 0, 1, 0); if (activeKeys.includes("KeyQ")) inv = rotate4(inv, 0.01, 0, 0, 1); if (activeKeys.includes("KeyE")) inv = rotate4(inv, -0.01, 0, 0, 1); - if (activeKeys.includes("KeyW")) inv = rotate4(inv, 0.005, 1, 0, 0); - if (activeKeys.includes("KeyS")) inv = rotate4(inv, -0.005, 1, 0, 0); + //if (activeKeys.includes("KeyW")) inv = rotate4(inv, 0.005, 1, 0, 0); + //if (activeKeys.includes("KeyS")) inv = rotate4(inv, -0.005, 1, 0, 0); + if (activeKeys.includes("KeyW")) inv = translate4(inv, 0, 0, 0.1); + if (activeKeys.includes("KeyS")) inv = translate4(inv, 0, 0, -0.1); const gamepads = navigator.getGamepads ? navigator.getGamepads() : []; let isJumping = activeKeys.includes("KeySpace"); From 8320e994c279edc16e9a19c6439beca90eca05b4 Mon Sep 17 00:00:00 2001 From: Nehc Date: Fri, 10 Nov 2023 14:32:21 +0300 Subject: [PATCH 5/5] same navigation fix --- index.html | 18 ++++++++------- main.js | 65 +++++++++++++++++++----------------------------------- 2 files changed, 33 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 12a176e..2ef15e0 100644 --- a/index.html +++ b/index.html @@ -209,20 +209,22 @@

WebGL 3D Gaussian Splat Viewer

Use mouse or arrow keys to navigate.
Main navigation (mouse+QE) -- click and drag to orbit +- click left and drag to orbit - middle click and drag up/down to move -- q/e to correct orbit (roll camera counterclockwise/clockwise) +- q/e to correct orbit - press v to hash curent view to url string - drag and drop .ply file to convert to .splat -movement (arrow keys) -- left/right arrow keys to strafe side to side -- up/down arrow keys to move forward/back +movement (WASD shuter like) +- a/d keys to strafe side to side +- w/s keys to move forward/back +- click right and drag to Look around -camera angle (wasd) -- a/d to turn camera left/right -- w/s to tilt camera up/down +camera angle (arrow key) +- left/right to turn camera left/right +- up/down to tilt camera up/down +- q/e to roll camera counterclockwise/clockwise - i/k and j/l to orbit trackpad diff --git a/main.js b/main.js index 94e2e01..f741c52 100644 --- a/main.js +++ b/main.js @@ -987,45 +987,46 @@ async function main() { startX = e.clientX; startY = e.clientY; down = e.ctrlKey || e.metaKey || e.button > 0 ? 2 : 1; + down = e.button == 2 ? 3 : down; }); canvas.addEventListener("contextmenu", (e) => { carousel = false; e.preventDefault(); - startX = e.clientX; - startY = e.clientY; - down = 2; }); canvas.addEventListener("mousemove", (e) => { e.preventDefault(); + let inv = invert4(viewMatrix); if (down == 1) { - let inv = invert4(viewMatrix); let dx = (5 * (e.clientX - startX)) / innerWidth; let dy = (5 * (e.clientY - startY)) / innerHeight; - //let d = 4; inv = translate4(inv, 0, 0, d); inv = rotate4(inv, dx, 0, 1, 0); inv = rotate4(inv, -dy, 1, 0, 0); inv = translate4(inv, 0, 0, -d); - // let postAngle = Math.atan2(inv[0], inv[10]) - // inv = rotate4(inv, postAngle - preAngle, 0, 0, 1) - // console.log(postAngle) viewMatrix = invert4(inv); startX = e.clientX; startY = e.clientY; + } else if (down == 2) { - let inv = invert4(viewMatrix); - // inv = rotateY(inv, ); - //let preY = inv[13]; inv = translate4( inv, (-3 * (e.clientX - startX)) / innerWidth, (-3 * (e.clientY - startY)) / innerHeight, 0, ); - //inv[13] = preY; + viewMatrix = invert4(inv); + + startX = e.clientX; + startY = e.clientY; + + } else if (down == 3) { + let dx = (5 * (e.clientX - startX)) / innerWidth; + let dy = (5 * (e.clientY - startY)) / innerHeight; + inv = rotate4(inv, dx, 0, 1, 0); + inv = rotate4(inv, -dy, 1, 0, 0); viewMatrix = invert4(inv); startX = e.clientX; @@ -1073,8 +1074,6 @@ async function main() { let d = 4; inv = translate4(inv, 0, 0, d); - // inv = translate4(inv, -x, -y, -z); - // inv = translate4(inv, x, y, z); inv = rotate4(inv, dx, 0, 1, 0); inv = rotate4(inv, -dy, 1, 0, 0); inv = translate4(inv, 0, 0, -d); @@ -1160,36 +1159,18 @@ async function main() { const frame = (now) => { let inv = invert4(viewMatrix); - if (activeKeys.includes("ArrowUp")) { - if (activeKeys.includes("Shift")) { - inv = translate4(inv, 0, -0.03, 0); - } else { - let preY = inv[13]; - inv = translate4(inv, 0, 0, 0.1); - inv[13] = preY; - } - } - if (activeKeys.includes("ArrowDown")) { - if (activeKeys.includes("Shift")) { - inv = translate4(inv, 0, 0.03, 0); - } else { - let preY = inv[13]; - inv = translate4(inv, 0, 0, -0.1); - inv[13] = preY; - } - } - if (activeKeys.includes("ArrowLeft")) - inv = translate4(inv, -0.03, 0, 0); - // - if (activeKeys.includes("ArrowRight")) - inv = translate4(inv, 0.03, 0, 0); - // inv = rotate4(inv, 0.01, 0, 1, 0); - if (activeKeys.includes("KeyA")) inv = rotate4(inv, -0.01, 0, 1, 0); - if (activeKeys.includes("KeyD")) inv = rotate4(inv, 0.01, 0, 1, 0); + if (activeKeys.includes("ArrowLeft")) inv = rotate4(inv, -0.01, 0, 1, 0); + if (activeKeys.includes("ArrowRight")) inv = rotate4(inv, 0.01, 0, 1, 0); + if (activeKeys.includes("ArrowUp")) inv = rotate4(inv, 0.005, 1, 0, 0); + if (activeKeys.includes("ArrowDown")) inv = rotate4(inv, -0.005, 1, 0, 0); + + if (activeKeys.includes("KeyW")) inv = translate4(inv, 0, 0, 0.1); + if (activeKeys.includes("KeyA")) inv = translate4(inv, -0.03, 0, 0); + if (activeKeys.includes("KeyS")) inv = translate4(inv, 0, 0, -0.1); + if (activeKeys.includes("KeyD")) inv = translate4(inv, 0.03, 0, 0); + if (activeKeys.includes("KeyQ")) inv = rotate4(inv, 0.01, 0, 0, 1); if (activeKeys.includes("KeyE")) inv = rotate4(inv, -0.01, 0, 0, 1); - if (activeKeys.includes("KeyW")) inv = rotate4(inv, 0.005, 1, 0, 0); - if (activeKeys.includes("KeyS")) inv = rotate4(inv, -0.005, 1, 0, 0); const gamepads = navigator.getGamepads ? navigator.getGamepads() : []; let isJumping = activeKeys.includes("KeySpace");