layered three view

game object geometries layer

webclient/src/state/viewState.ts

@@ -0,0 +1,135 @@
+import * as THREE from 'three';
+import { action, makeAutoObservable, makeObservable, observable, reaction, type IReactionDisposer } from "mobx";
+import type { ObjectInstance, ObjectInstanceRigidBody, ObjectType, Scene, V3, Voxel, VoxelGroup } from "../types";
+import { state } from "./rootState";
+import { getObjectVoxelGroups } from "../utils/graphics/voxelGroup";
+import { buildVoxelGroupMesh } from "../utils/graphics/voxelMesh";
+import { buildObjectTrimesh } from '../utils/graphics/mesh';
+import { computeBoundingBox } from '../utils/runtime';
+import { MobxReconcilerMap } from '../utils/reconciler';
+
+export abstract class ViewItem {
+}
+
+export class ObjectTypeGeometryViewItem extends ViewItem {
+    public readonly objectType: ObjectType;
+
+    public voxelGroups: VoxelGroup[] | undefined;
+    public colliderMesh: [Float32Array, Uint32Array] | undefined;
+    public boundingBox: { min: V3; max: V3 } | undefined;
+    public meshes: THREE.InstancedMesh[] | undefined;
+
+    private readonly _disposeVoxelReaction: IReactionDisposer;
+
+    constructor(objectType: ObjectType) {
+        super();
+        this.objectType = objectType;
+        makeObservable(this, {
+            voxelGroups: observable.ref,
+            colliderMesh: observable.ref,
+            boundingBox: observable.ref,
+            meshes: observable.ref,
+            updateRuntimeData: action,
+        });
+        this._disposeVoxelReaction = reaction(
+            () => objectType.voxels.map(v => `${v.position}-${v.typeId}`).join('|'),
+            () => this.updateRuntimeData(),
+        );
+        this.updateRuntimeData();
+    }
+
+    public dispose(): void {
+        this._disposeVoxelReaction();
+    }
+
+    public addVoxel(voxel: Voxel): boolean {
+        const occupied = this.objectType.voxels.some(v =>
+            v.position[0] === voxel.position[0] &&
+            v.position[1] === voxel.position[1] &&
+            v.position[2] === voxel.position[2]
+        );
+        if (!occupied) {
+            this.objectType.voxels.push(voxel);
+            return true;
+        }
+        return false;
+    }
+
+    public removeVoxel(position: V3): Voxel | undefined {
+        const idx = this.objectType.voxels.findIndex(v =>
+            v.position[0] === position[0] &&
+            v.position[1] === position[1] &&
+            v.position[2] === position[2]
+        );
+        if (idx !== -1)
+            return this.objectType.voxels.splice(idx, 1)[0];
+    }
+
+    public updateRuntimeData(): void {
+        this.voxelGroups = getObjectVoxelGroups(this.objectType, state.world.data.voxelTypes);
+        this.meshes = [];
+        for (const vg of this.voxelGroups) {
+            const geo = buildVoxelGroupMesh(vg.positions);
+            const mat = new THREE.MeshStandardMaterial({
+                color: vg.color,
+                opacity: vg.opacity,
+                transparent: vg.opacity < 1,
+            });
+            const mesh = new THREE.InstancedMesh(geo, mat, 1000);
+            this.meshes.push(mesh);
+        }
+        this.colliderMesh = buildObjectTrimesh(this.objectType, state.world.data.voxelTypes);
+        this.boundingBox = computeBoundingBox(this.objectType);
+    }
+}
+
+export class ObjectGeometryViewItem extends ViewItem {
+    public readonly object: ObjectInstance;
+    public readonly objectTypeGeometry: ObjectTypeGeometryViewItem;
+
+    public rb: (() => ObjectInstanceRigidBody | null) | undefined;
+
+    constructor(object: ObjectInstance, objectTypeGeometry: ObjectTypeGeometryViewItem) {
+        super();
+        this.object = object;
+        this.objectTypeGeometry = objectTypeGeometry;
+    }
+}
+
+export class ViewState {
+    public objectTypeGeometries: MobxReconcilerMap<ObjectType, ObjectTypeGeometryViewItem>;
+    public objectGeometries: MobxReconcilerMap<ObjectInstance, ObjectGeometryViewItem>;
+
+    constructor(world: { data: { objectTypes: Record<string, ObjectType>; initialScene: Scene } }) {
+        makeAutoObservable(
+            this,
+        );
+        this.objectTypeGeometries = new MobxReconcilerMap<ObjectType, ObjectTypeGeometryViewItem>({
+            reaction: () => Object.values(world.data.objectTypes),
+            keyOf: (ot) => ot.id,
+            mapItem: (ot) => new ObjectTypeGeometryViewItem(ot),
+            updateItem: () => true,
+            disposeItem: (item) => { item.dispose(); },
+        });
+
+        this.objectGeometries = new MobxReconcilerMap<ObjectInstance, ObjectGeometryViewItem>({
+            reaction: () => Object.values(world.data.initialScene.objects)
+                .filter(obj => obj.visible)
+                .filter(obj => !!world.data.objectTypes[obj.typeId]),
+            keyOf: (obj) => obj.id,
+            mapItem: (obj) => new ObjectGeometryViewItem(obj, this.objectTypeGeometries.get(obj.typeId)!),
+        });
+    }
+
+    public dispose(): void {
+        this.objectTypeGeometries.dispose();
+        this.objectGeometries.dispose();
+    }
+
+    public get items(): ViewItem[] {
+        return [
+            ...this.objectTypeGeometries,
+            ...this.objectGeometries,
+        ];
+    }
+}