layered geometries

webclient/src/App.scss

@@ -1,3 +1,8 @@
+.editor-layout {
+  width: 100vw;
+  height: 100vh;
+}
+
 .counter {
   font-size: 16px;
   padding: 5px 10px;

webclient/src/App.tsx

@@ -92,11 +92,11 @@ function HomePage() {
 
 function EditorLayout() {
     return (
-        <>
+        <div className="editor-layout">
             <Outlet />
             <LayeredThreeView />
             <Panels />
-        </>
+        </div>
     );
 }
 

webclient/src/components/Panels.scss

@@ -1,5 +1,5 @@
 .overlay-panels {
-    z-index: 15000;
+    z-index: 9000;
     position: fixed;
     top: 0;
     left: 0;

webclient/src/components/SceneEditorView.tsx

@@ -5,48 +5,31 @@ import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
 import { MOUSE, type OrthographicCamera, type PerspectiveCamera } from 'three';
-import { CameraSync } from './tools/CameraSync';
+import { useSyncCamera } from '../utils/hooks/useSyncCamera';
 import { Physics } from '@react-three/rapier';
 
 
 export const SceneEditorView = observer(function () {
     const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
 
-    const cameraAtStart = useRef<string>('');
-
-    function cameraSnapshot(camera: OrthographicCamera | PerspectiveCamera): string {
-        return JSON.stringify({
-            position: camera.position,
-            rotation: camera.rotation,
-        });
-    }
-
-    const handleStart = () => {
-        const controls = controlsRef.current;
-        if (!controls)
-            return;
-        cameraAtStart.current = cameraSnapshot(controls.object);
-    };
+    useSyncCamera(() => state.view.camera.camera);
 
     const handleEnd = () => {
         const controls = controlsRef.current;
         if (!controls)
             return;
-        const snapshot = cameraSnapshot(controls.object);
-        if (snapshot === cameraAtStart.current)
-            return;
+
         const [x, y, z] = controls.object.rotation.toArray();
-        state.worldEditor.setCamera({
+        state.view.camera.camera = {
             position: controls.object.position.toArray(),
             look: [x, y, z],
-        });
+        };
     };
 
     return (<>
         <Suspense>
             <OrbitControls
                 ref={controlsRef}
-                onStart={handleStart}
                 onEnd={handleEnd}
                 makeDefault
                 mouseButtons={{
@@ -57,7 +40,6 @@ export const SceneEditorView = observer(function () {
                 rotateSpeed={0.2}
                 enableDamping={false}
             />
-            <CameraSync camera={state.worldEditor.camera} />
             {/* <Grid
                 sectionThickness={0.5}
                 cellThickness={0}

webclient/src/components/layers/GameraLayer.tsx

@@ -1,27 +0,0 @@
-import { useFrame } from "@react-three/fiber";
-import type { Pos3 } from "../../types";
-import { Euler, Quaternion, Vector3 } from "three";
-
-const _q = new Quaternion();
-const _e = new Euler(0, 0, 0, 'YXZ');
-const _offset = new Vector3();
-const _charPos = new Vector3();
-const _lookAt = new Vector3();
-
-type Props = {
-    camera: Pos3;
-};
-
-export function CameraLayer({ camera: cameraPos }: Props) {
-
-    useFrame(({ camera }) => {
-        // const t = rb.translation();
-        // _charPos.set(t.x, t.y, t.z);
-        // _offset.copy(shoulderOffset).applyEuler(_e.set(pitchRef.current, yawRef.current, 0, 'YXZ'));
-        // camera.position.copy(_charPos).add(_offset);
-        // _lookAt.set(t.x, t.y + lookAtY, t.z);
-        camera.lookAt(_lookAt);
-    });
-
-    return null;
-}

webclient/src/components/layers/LayeredThreeView.tsx

@@ -1,23 +1,19 @@
 import { observer } from "mobx-react-lite";
 import { ObjectGeometriesLayer } from "./ObjectGeometriesLayer";
 import { Canvas } from "@react-three/fiber";
-import { Perf } from "r3f-perf";
-import { state } from "../../state";
-import { CameraLayer } from "./GameraLayer";
+import { SceneEditorCameraLayer } from "./SceneEditorGameraLayer";
+import { LightsLayer } from "./LighsLayer";
+import { StatsLayer } from './StatsLayer';
 
 export const LayeredThreeView = observer(function () {
 
     return <>
-        <Canvas
-        // camera={state.world.character.camera}
-        >
-            <ambientLight intensity={0.5} />
-            <directionalLight position={[5, 5, 5]} intensity={1} />
-
-            <Perf position="bottom-right" />
-
-            <CameraLayer camera={state.worldEditor.camera} />
+        <Canvas>
+            <LightsLayer />
+            {/* <Perf position="bottom-right" /> */}
+            <SceneEditorCameraLayer />
             <ObjectGeometriesLayer />
+            <StatsLayer />
         </Canvas>
     </>;
 });

webclient/src/components/layers/LighsLayer.tsx

@@ -0,0 +1,8 @@
+import { observer } from "mobx-react-lite";
+
+export const LightsLayer = observer(function () {
+    return <>
+        <ambientLight intensity={0.5} />
+        <directionalLight position={[5, 5, 5]} intensity={1} />
+    </>;
+});

webclient/src/components/layers/ObjectGeometriesLayer.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef } from "react";
-import { useThree, useFrame } from "@react-three/fiber";
+import { useThree } from "@react-three/fiber";
 import { ObjectGeometryList } from "../../rendering/ObjectGeometryList";
 import { observer } from "mobx-react-lite";
 import { state } from "../../state";
+import { useLayerFrame } from "../../utils/hooks/useLayerFrame";
 
 export const ObjectGeometriesLayer = observer(function () {
 
@@ -20,7 +21,7 @@ export const ObjectGeometriesLayer = observer(function () {
         };
     }, [threeScene, geometries]);
 
-    useFrame(() => list.current?.tick());
+    useLayerFrame("ObjectGeometries", () => list.current?.tick());
 
     return null;
 });

webclient/src/components/layers/SceneEditorGameraLayer.tsx

@@ -0,0 +1,41 @@
+import { OrbitControls } from "@react-three/drei";
+import { state } from "../../state";
+import { useRef } from "react";
+import { useSyncCamera } from "../../utils/hooks/useSyncCamera";
+import { MOUSE } from "three";
+import { observer } from "mobx-react-lite";
+import type { V3 } from "../../types";
+
+export const SceneEditorCameraLayer = observer(function () {
+    const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
+
+    useSyncCamera(() => state.view.camera?.camera);
+
+    const handleEnd = () => {
+        const controls = controlsRef.current;
+        const camera = state.view.camera;
+        if (!controls || !camera)
+            return;
+
+        camera.camera = {
+            position: controls.object.position.toArray(),
+            look: controls.object.rotation.toArray().slice(0, 3) as V3,
+        };
+    };
+
+    if (!state.view.camera)
+        return null;
+
+    return <OrbitControls
+        ref={controlsRef}
+        onEnd={handleEnd}
+        makeDefault
+        mouseButtons={{
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN,
+        }}
+        rotateSpeed={0.2}
+        enableDamping={false}
+    />;
+});

webclient/src/components/layers/StatsLayer.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { layerTimings } from "../../utils/layerTimings";
+
+export const StatsLayer = function () {
+    const divRef = useRef<HTMLDivElement | null>(null);
+    const fpsFrames = useRef(0);
+    const fpsLastTime = useRef(0);
+    const renderAcc = useRef(0);
+
+    useEffect(() => {
+        fpsLastTime.current = performance.now();
+
+        const div = document.createElement("div");
+        Object.assign(div.style, {
+            position: "absolute",
+            bottom: "8px",
+            right: "8px",
+            color: "#0f0",
+            fontSize: "14px",
+            fontFamily: "monospace",
+            zIndex: "9999",
+            pointerEvents: "none",
+            whiteSpace: "pre",
+        });
+        document.body.appendChild(div);
+        divRef.current = div;
+
+        return () => {
+            document.body.removeChild(div);
+        };
+    }, []);
+
+    useFrame(({ gl, scene, camera }) => {
+        const renderStart = performance.now();
+        gl.render(scene, camera);
+        renderAcc.current += performance.now() - renderStart;
+
+        fpsFrames.current++;
+        const now = performance.now();
+        const elapsed = now - fpsLastTime.current;
+        if (elapsed >= 1000) {
+            const frames = fpsFrames.current;
+            const fps = Math.round(frames * 1000 / elapsed);
+            const renderAvg = (renderAcc.current / frames).toFixed(3);
+
+            const lines: string[] = [
+                `${fps} FPS  gl.render ${renderAvg} ms`,
+            ];
+
+            for (const [name, entry] of Object.entries(layerTimings)) {
+                if (entry.frames > 0) {
+                    const avg = (entry.acc / entry.frames).toFixed(3);
+                    lines.push(`${name} ${avg} ms`);
+                }
+                entry.acc = 0;
+                entry.frames = 0;
+            }
+
+            if (divRef.current) {
+                divRef.current.textContent = lines.join("\n");
+            }
+
+            fpsFrames.current = 0;
+            renderAcc.current = 0;
+            fpsLastTime.current = now;
+        }
+    }, 1);
+
+    return null;
+};

webclient/src/components/tools/CameraSync.tsx

@@ -1,16 +0,0 @@
-import { useThree } from "@react-three/fiber";
-import type { Pos3 } from "../../types";
-import { useLayoutEffect } from "react";
-import { observer } from "mobx-react-lite";
-
-export const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
-    const { camera: threeCamera } = useThree();
-
-    useLayoutEffect(() => {
-        threeCamera.position.set(camera.position[0], camera.position[1], camera.position[2]);
-        threeCamera.rotation.set(camera.look[0], camera.look[1], camera.look[2]);
-        threeCamera.updateProjectionMatrix();
-    });
-
-    return null;
-});

webclient/src/state/viewLayers/base.ts

@@ -0,0 +1,2 @@
+export abstract class ViewItem {
+}

webclient/src/state/viewLayers/camera.ts

@@ -0,0 +1,26 @@
+import type { Pos3 } from "../../types";
+import { state } from "../rootState";
+import { ViewItem } from "./base";
+
+export abstract class CameraViewItem extends ViewItem {
+    public abstract get camera(): Pos3;
+    public abstract set camera(value: Pos3);
+}
+
+export class ControlledCameraViewItem extends CameraViewItem {
+
+    constructor() {
+        super();
+    }
+
+    public get camera(): Pos3 {
+        return state.worldEditor.camera;
+    }
+
+    public set camera(value: Pos3) {
+        state.worldEditor.setCamera(value);
+    }
+}
+
+export abstract class ThirdPersonCameraViewItem extends CameraViewItem {
+}

webclient/src/state/viewLayers/index.ts

@@ -0,0 +1,4 @@
+export * from './base';
+export * from './objectTypeGeometry';
+export * from './objectGeometry';
+export * from './camera';

webclient/src/state/viewLayers/objectGeometry.ts

@@ -0,0 +1,16 @@
+import type { ObjectInstance, ObjectInstanceRigidBody } from "../../types";
+import { ViewItem } from "./base";
+import type { ObjectTypeGeometryViewItem } from './objectTypeGeometry';
+
+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;
+    }
+}

webclient/src/state/viewLayers/objectTypeGeometry.ts

@@ -0,0 +1,81 @@
+import * as THREE from 'three';
+import type { ObjectType, V3, Voxel, VoxelGroup } from "../../types";
+import { ViewItem } from "./base";
+import { action, makeObservable, observable, reaction, type IReactionDisposer } from 'mobx';
+import { getObjectVoxelGroups } from '../../utils/graphics/voxelGroup';
+import { buildVoxelGroupMesh } from '../../utils/graphics/voxelMesh';
+import { state } from '../rootState';
+import { buildObjectTrimesh } from '../../utils/graphics/mesh';
+import { computeBoundingBox } from '../../utils/runtime';
+
+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);
+    }
+}

webclient/src/state/viewState.ts

@@ -1,109 +1,21 @@
-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 { makeAutoObservable } from "mobx";
+import type { ObjectInstance, ObjectType } from "../types";
 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;
-    }
-}
+import { ObjectGeometryViewItem, ObjectTypeGeometryViewItem, ControlledCameraViewItem, ViewItem } from './viewLayers';
+import type { WorldState } from "./worldState";
 
 export class ViewState {
     public objectTypeGeometries: MobxReconcilerMap<ObjectType, ObjectTypeGeometryViewItem>;
     public objectGeometries: MobxReconcilerMap<ObjectInstance, ObjectGeometryViewItem>;
+    public camera?: ControlledCameraViewItem;
 
-    constructor(world: { data: { objectTypes: Record<string, ObjectType>; initialScene: Scene } }) {
+    constructor(world: WorldState) {
         makeAutoObservable(
             this,
         );
+
+        this.camera = new ControlledCameraViewItem();
+
         this.objectTypeGeometries = new MobxReconcilerMap<ObjectType, ObjectTypeGeometryViewItem>({
             reaction: () => Object.values(world.data.objectTypes),
             keyOf: (ot) => ot.id,
@@ -130,6 +42,7 @@ export class ViewState {
         return [
             ...this.objectTypeGeometries,
             ...this.objectGeometries,
+            ...[this.camera ? [this.camera] : []],
         ];
     }
 }

webclient/src/state/worldEditorState.ts

@@ -66,6 +66,8 @@ export class WorldEditorState {
     }
 
     public setCamera(value: Pos3): void {
+        if (JSON.stringify(value) === JSON.stringify(this.world.data.editorCamera))
+            return;
         this.world.data.editorCamera = value;
     }
 

webclient/src/state/worldState.ts

@@ -1,6 +1,6 @@
 import { autorun, makeAutoObservable, toJS } from "mobx";
 import { WorldFactory } from "../model/worldFactory";
-import { type ObjectInstance, type ObjectType, type World, type VoxelType, type RuntimeWorld } from "../types";
+import { type ObjectInstance, type ObjectType, type World, type VoxelType } from "../types";
 import { state } from "./rootState";
 import { DEFAULT_VOXEL_TYPES } from "../model/defaultVoxelTypes";
 import { wolf } from "../model/objectPrefabs/wolf";
@@ -8,7 +8,7 @@ import { terrainXZ } from "../model/objectPrefabs/terrain";
 import { populateRuntimeWorld } from "../utils/runtime";
 
 export class WorldState {
-    public data: RuntimeWorld = WorldFactory.create();
+    public data: World = WorldFactory.create();
 
     private _buildSave(): World {
         const d = this.data;

webclient/src/types/model/world.ts

@@ -1,6 +1,6 @@
 import type { GameRules } from "./gameRules";
 import type { ObjectType } from "./object";
-import type { RuntimeScene, Scene } from "./scene";
+import type { Scene } from "./scene";
 import type { Pos3 } from "../3d";
 import type { VoxelType } from "./voxel";
 
@@ -11,7 +11,3 @@ export type World = {
     initialScene: Scene;
     gameRules: GameRules;
 }
-
-export type RuntimeWorld = World & {
-    initialScene: RuntimeScene;
-}

webclient/src/utils/hooks/useLayerFrame.tsx

@@ -0,0 +1,16 @@
+import { useFrame, type RootState } from "@react-three/fiber";
+import { layerTimings } from "../layerTimings";
+
+export function useLayerFrame(
+    name: string,
+    callback: (state: RootState, delta: number) => void,
+    priority?: number,
+) {
+    useFrame((state, delta) => {
+        const start = performance.now();
+        callback(state, delta);
+        const entry = layerTimings[name] ??= { acc: 0, frames: 0 };
+        entry.acc += performance.now() - start;
+        entry.frames++;
+    }, priority);
+}

webclient/src/utils/hooks/useSyncCamera.tsx

@@ -0,0 +1,17 @@
+import { useThree } from "@react-three/fiber";
+import type { Pos3 } from "../../types";
+import { useLayoutEffect } from "react";
+import { autorun } from "mobx";
+
+export function useSyncCamera(getCamera: () => Pos3 | undefined) {
+    const { camera: threeCamera } = useThree();
+
+    useLayoutEffect(() => autorun(() => {
+        const camera = getCamera();
+        if (camera) {
+            threeCamera.position.set(camera.position[0], camera.position[1], camera.position[2]);
+            threeCamera.rotation.set(camera.look[0], camera.look[1], camera.look[2]);
+            threeCamera.updateProjectionMatrix();
+        }
+    }), [getCamera, threeCamera]);
+}

webclient/src/utils/layerTimings.ts

@@ -0,0 +1 @@
+export const layerTimings: Record<string, { acc: number; frames: number }> = {};