feat(debug): add filters to octree visualization

Default visualization was unreadable because every node from depth 0 to
maxDepth was rendered with rainbow-coloured edges. Add three filters
exposed in the Debug folder:

- Octree Leaves Only (default true): skip internal nodes
- Octree Min Depth (default 4): hide the largest enclosing boxes
- Octree Opacity (default 0.35): tone down line density

Also skip nodes without triangles, drop the per-depth HSL palette in
favour of a uniform cyan, and bump default Octree Max Depth to 8.

src/hooks/debug/useDebugVisualsDebug.ts

@@ -3,10 +3,14 @@ import { useDebugVisualsStore } from "@/managers/stores/useDebugVisualsStore";
 
 export function useDebugVisualsDebug(): void {
   useDebugFolder("Debug", (folder) => {
+    const state = useDebugVisualsStore.getState();
     const controls = {
-      showPlayerModel: useDebugVisualsStore.getState().showPlayerModel,
-      showOctree: useDebugVisualsStore.getState().showOctree,
-      octreeMaxDepth: useDebugVisualsStore.getState().octreeMaxDepth,
+      showPlayerModel: state.showPlayerModel,
+      showOctree: state.showOctree,
+      octreeMinDepth: state.octreeMinDepth,
+      octreeMaxDepth: state.octreeMaxDepth,
+      octreeLeavesOnly: state.octreeLeavesOnly,
+      octreeOpacity: state.octreeOpacity,
     };
 
     folder
@@ -23,11 +27,32 @@ export function useDebugVisualsDebug(): void {
         useDebugVisualsStore.getState().setShowOctree(value);
       });
 
+    folder
+      .add(controls, "octreeLeavesOnly")
+      .name("Octree Leaves Only")
+      .onChange((value: boolean) => {
+        useDebugVisualsStore.getState().setOctreeLeavesOnly(value);
+      });
+
+    folder
+      .add(controls, "octreeMinDepth", 0, 10, 1)
+      .name("Octree Min Depth")
+      .onChange((value: number) => {
+        useDebugVisualsStore.getState().setOctreeMinDepth(value);
+      });
+
     folder
       .add(controls, "octreeMaxDepth", 0, 10, 1)
       .name("Octree Max Depth")
       .onChange((value: number) => {
         useDebugVisualsStore.getState().setOctreeMaxDepth(value);
       });
+
+    folder
+      .add(controls, "octreeOpacity", 0.05, 1, 0.05)
+      .name("Octree Opacity")
+      .onChange((value: number) => {
+        useDebugVisualsStore.getState().setOctreeOpacity(value);
+      });
   });
 }