greedy meshing

webclient/src/components/ObjectViewInternal.tsx

@@ -1,35 +1,23 @@
 import type { ObjectType, RuntimeGameObjectInstance, RuntimeObjectInstance } from "../types";
 import type { VoxelGroup } from "../types/runtime/voxelGroup";
-import { useEffect, useImperativeHandle, useLayoutEffect, useRef, type Ref, memo } from "react";
-import { Euler, Matrix4, Quaternion, type Group, type InstancedMesh } from "three";
+import { useEffect, useImperativeHandle, useRef, type Ref, memo, useMemo } from "react";
+import { Euler, Quaternion, type Group } from "three";
 import type { ThreeEvent } from "@react-three/fiber";
 import { ConvexHullCollider, RapierRigidBody } from "@react-three/rapier";
 import { SyncRigidBody } from "./SyncRigidBody";
 import { reaction, runInAction } from "mobx";
 import { v3toRapier } from "../utils";
 import { state } from "../state";
-
-const _m4 = new Matrix4();
+import { greedyMesh } from "../utils/graphics/greedyMesh";
 
 const VoxelGroupMesh = memo(function VoxelGroupMesh({ vg }: { vg: VoxelGroup }) {
-    const ref = useRef<InstancedMesh>(null);
-
-    useLayoutEffect(() => {
-        const mesh = ref.current;
-        if (!mesh)
-            return;
-        vg.positions.forEach(([x, y, z], i) => {
-            mesh.setMatrixAt(i, _m4.makeTranslation(x, y, z));
-        });
-        mesh.instanceMatrix.needsUpdate = true;
-        mesh.computeBoundingSphere();
-    }, [vg]);
+    const geo = useMemo(() => greedyMesh(vg.positions), [vg]);
+    useEffect(() => () => { geo.dispose(); }, [geo]);
 
     return (
-        <instancedMesh ref={ref} args={[undefined, undefined, vg.positions.length]}>
-            <boxGeometry args={[1, 1, 1]} />
+        <mesh geometry={geo}>
             <meshStandardMaterial color={vg.color} opacity={vg.opacity} transparent={vg.opacity < 1} />
-        </instancedMesh>
+        </mesh>
     );
 });