ohzi-core 13.3.0 → 15.0.0

package/src/components/Line.ts

@@ -1,36 +1,31 @@
-import line_fs from '../shaders/basic_line/basic_line.frag';
-import line_vs from '../shaders/basic_line/basic_line.vert';
+import { LineMaterial } from '../materials/LineMaterial';
 
-import type { Vector3 } from 'three';
-import { BufferAttribute, BufferGeometry, Color, Mesh, ShaderMaterial } from 'three';
+import type { Color, ColorRepresentation, Vector3 } from 'three';
+import { BufferAttribute, BufferGeometry, Mesh } from 'three';
+
+// An empty geometry with every attribute LineMaterial reads.
+function create_line_geometry(): BufferGeometry
+{
+  const geometry = new BufferGeometry();
+  geometry.setAttribute('position',           new BufferAttribute(new Float32Array([]), 3));
+  geometry.setAttribute('next_position',      new BufferAttribute(new Float32Array([]), 3));
+  geometry.setAttribute('previous_position',  new BufferAttribute(new Float32Array([]), 3));
+  geometry.setAttribute('orientation',        new BufferAttribute(new Float32Array([]), 1));
+  geometry.setAttribute('coverage',           new BufferAttribute(new Float32Array([]), 1));
+
+  return geometry;
+}
 
 class Line extends Mesh
 {
   _length: number;
   accumulated_length: number;
-  material: ShaderMaterial
+  material: LineMaterial;
 
   constructor(points?: Vector3[])
   {
-    const geometry = new BufferGeometry();
-    geometry.setAttribute('position',           new BufferAttribute(new Float32Array([]), 3));
-    geometry.setAttribute('next_position',      new BufferAttribute(new Float32Array([]), 3));
-    geometry.setAttribute('previous_position',  new BufferAttribute(new Float32Array([]), 3));
-    geometry.setAttribute('orientation',        new BufferAttribute(new Float32Array([]), 1));
-    geometry.setAttribute('coverage',           new BufferAttribute(new Float32Array([]), 1));
-
-    const material = new ShaderMaterial({
-      uniforms: {
-        _Thickness: { value: 0.2 },
-        _Length: { value: 0 },
-        _ElapsedTime: { value: 0 },
-        _Color: { value: new Color('#FF0000') }
-      },
-      vertexShader: line_vs,
-      fragmentShader: line_fs,
-      transparent: true,
-      depthWrite: false
-    });
+    const geometry = create_line_geometry();
+    const material = new LineMaterial();
 
     super(geometry, material);
     this.material = material;
@@ -106,7 +101,18 @@ class Line extends Mesh
       indices.push(index + 1);
     }
 
-    this.geometry.setIndex(indices);
+    // WebGPURenderer sizes each GPU buffer at its first upload and later only writes
+    // into it, and it frees a geometry's buffers on its first dispose() only. So a new
+    // point count moves the line to a new geometry, which the next render uploads at
+    // the new size, and frees the old one. The index depends only on the point count,
+    // so it is kept otherwise.
+    if (vertexList.length / 3 !== this.geometry.getAttribute('position').count)
+    {
+      const previous_geometry = this.geometry;
+      this.geometry = create_line_geometry();
+      this.geometry.setIndex(indices);
+      previous_geometry.dispose();
+    }
     (this.geometry.getAttribute('position') as BufferAttribute).copy(new BufferAttribute(vertexList, 3));
     (this.geometry.getAttribute('next_position') as BufferAttribute).copy(new BufferAttribute(nextPositionList, 3));
     (this.geometry.getAttribute('previous_position') as BufferAttribute).copy(new BufferAttribute(previousPositionList, 3));
@@ -180,14 +186,16 @@ class Line extends Mesh
     {
       this.parent.remove(this);
     }
+
+    super.dispose();
   }
 
-  set color(col)
+  set color(col: ColorRepresentation)
   {
     this.material.uniforms._Color.value.set(col);
   }
 
-  get color()
+  get color(): Color
   {
     return this.material.uniforms._Color.value;
   }

package/src/components/PlaneHelper.ts

@@ -27,7 +27,7 @@ class PlaneHelper extends Object3D
 
   dispose()
   {
-
+    super.dispose();
   }
 }
 

package/src/components/Text2D.ts

@@ -2,7 +2,7 @@ import { SimpleTextDrawer } from '../canvas_drawer/SimpleTextDrawer';
 import { WorldImage } from './WorldImage';
 
 import type { CanvasTexture, Vector2 } from 'three';
-import { LinearFilter, LinearMipMapLinearFilter } from 'three';
+import { LinearFilter, LinearMipMapLinearFilter, SRGBColorSpace } from 'three';
 
 class Text2D extends WorldImage
 {
@@ -22,6 +22,8 @@ class Text2D extends WorldImage
 
     canvas_texture.minFilter = LinearMipMapLinearFilter;
     canvas_texture.minFilter = LinearFilter;
+    // Canvas colors are CSS colors, so sRGB. Tagged, they render as the given color.
+    canvas_texture.colorSpace = SRGBColorSpace;
     canvas_texture.needsUpdate = true;
     super(canvas_texture, pivot);
 

package/src/components/WorldImage.ts

@@ -1,31 +1,20 @@
-import basic_texture_frag from '../shaders/basic_texture/basic_texture.frag';
-import basic_texture_vert from '../shaders/basic_texture/basic_texture.vert';
+import { WorldImageMaterial } from '../materials/WorldImageMaterial';
 
 import type { Texture } from 'three';
-import { DoubleSide, Mesh, PlaneGeometry, ShaderMaterial, Vector2, Vector3 } from 'three';
+import { Mesh, PlaneGeometry, Vector2, Vector3 } from 'three';
 
 class WorldImage extends Mesh
 {
   current_scale: number;
+  sized_texture: Texture;
+  texture_size: Vector2;
   tmp_bb_size: Vector3;
-  material: ShaderMaterial;
+  material: WorldImageMaterial;
   
   constructor(texture: Texture, pivot: Vector2)
   {
     pivot = pivot || new Vector2(0, 0);
-    const material = new ShaderMaterial({
-      uniforms: {
-        _MainTex: { value: texture },
-        _ScreenAligned: { value: 0 },
-        _Scale: { value: 1 },
-        _Opacity: { value: 1 }
-      },
-      vertexShader: basic_texture_vert,
-      fragmentShader: basic_texture_frag,
-      transparent: true,
-      depthWrite: false,
-      side: DoubleSide
-    });
+    const material = new WorldImageMaterial(texture);
     const geometry = new PlaneGeometry(1, 1, 1);
     geometry.translate(-pivot.x / 2, -pivot.y / 2, 0);
     // @ts-expect-error -- threejs issue
@@ -33,6 +22,9 @@ class WorldImage extends Mesh
     geometry.scale(current_scale, 1, 1);
     super(geometry, material);
     this.current_scale = current_scale;
+    this.sized_texture = texture;
+    // @ts-expect-error -- threejs issue
+    this.texture_size = new Vector2(texture.image.width, texture.image.height);
     this.geometry.computeBoundingBox();
 
     this.tmp_bb_size = new Vector3();
@@ -42,8 +34,21 @@ class WorldImage extends Mesh
 
   update_texture()
   {
-    this.material.uniforms._MainTex.value.needsUpdate = true;
-    const img = this.material.uniforms._MainTex.value.image;
+    const texture = this.material.uniforms._MainTex.value;
+    const img = texture.image as { width: number, height: number };
+
+    // WebGPURenderer allocates the GPU texture at the image size once and later only
+    // uploads into it, so an image that changed size needs a new one. A texture swapped
+    // into _MainTex may be shared, so it is only measured, never freed.
+    const resized = img.width !== this.texture_size.x || img.height !== this.texture_size.y;
+
+    if (texture === this.sized_texture && resized)
+    {
+      texture.dispose();
+    }
+    this.sized_texture = texture;
+    this.texture_size.set(img.width, img.height);
+    texture.needsUpdate = true;
 
     this.geometry.scale(1 / this.current_scale, 1, 1);
     this.current_scale = img.width / img.height;
@@ -60,7 +65,7 @@ class WorldImage extends Mesh
   set size(value)
   {
     this.scale.copy(value);
-    this.material.uniforms._Scale.value = value;
+    this.material.uniforms._Scale.value.copy(value);
   }
 
   set screen_aligned(boolean)
@@ -89,6 +94,8 @@ class WorldImage extends Mesh
     this.parent.remove(this);
     this.material.uniforms._MainTex.value.dispose();
     this.material.dispose();
+
+    super.dispose();
   }
 }
 

package/src/components/sdf_text/SDFTextBatch.ts

@@ -5,13 +5,17 @@ import { SDFText } from './SDFText';
 import {
   DynamicDrawUsage,
   Float32BufferAttribute,
-  InstancedBufferAttribute,
   InstancedBufferGeometry,
+  InstancedInterleavedBuffer,
+  InterleavedBufferAttribute,
   Mesh,
   PlaneGeometry,
   Vector2
 } from 'three';
 
+// The per glyph attributes, four floats each, in the order they sit in an instance.
+const GLYPH_ATTRIBUTES = ['transformsCol0', 'transformsCol1', 'transformsCol2', 'transformsCol3', 'glyph_bounds', 'plane_bounds', 'color'];
+
 class SDFTextBatch extends Mesh
 {
   font_layout: any;
@@ -33,32 +37,16 @@ class SDFTextBatch extends Mesh
     instanced_geometry.setAttribute('uv',        new Float32BufferAttribute(geometry.getAttribute('uv').array, 2));
     instanced_geometry.index = geometry.index;
 
-    const transformsCol0 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-    const transformsCol1 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-    const transformsCol2 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-    const transformsCol3 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-
-    const glyph_bounds = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-    const plane_bounds = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-
-    const color = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
-
-    transformsCol0.usage  = DynamicDrawUsage;
-    transformsCol1.usage  = DynamicDrawUsage;
-    transformsCol2.usage  = DynamicDrawUsage;
-    transformsCol3.usage  = DynamicDrawUsage;
-    glyph_bounds.usage    = DynamicDrawUsage;
-    plane_bounds.usage    = DynamicDrawUsage;
-    color.usage           = DynamicDrawUsage;
+    // One interleaved buffer holds every per glyph attribute. WebGPU allows 8 vertex
+    // buffers per pipeline, and one buffer per attribute would take 9 with position
+    // and uv.
+    const glyphs = new InstancedInterleavedBuffer(new Float32Array(max_allocations * GLYPH_ATTRIBUTES.length * 4), GLYPH_ATTRIBUTES.length * 4);
+    glyphs.setUsage(DynamicDrawUsage);
 
-    instanced_geometry.setAttribute('transformsCol0', transformsCol0);
-    instanced_geometry.setAttribute('transformsCol1', transformsCol1);
-    instanced_geometry.setAttribute('transformsCol2', transformsCol2);
-    instanced_geometry.setAttribute('transformsCol3', transformsCol3);
-
-    instanced_geometry.setAttribute('glyph_bounds', glyph_bounds);
-    instanced_geometry.setAttribute('plane_bounds', plane_bounds);
-    instanced_geometry.setAttribute('color',        color);
+    GLYPH_ATTRIBUTES.forEach((name, i) =>
+    {
+      instanced_geometry.setAttribute(name, new InterleavedBufferAttribute(glyphs, 4, i * 4));
+    });
 
     super(instanced_geometry, new SDFTextMaterial(atlas_texture));
 
@@ -195,6 +183,8 @@ class SDFTextBatch extends Mesh
   {
     this.geometry.dispose();
     this.material.dispose();
+
+    super.dispose();
   }
 }
 

package/src/dev_bridge/CameraBridge.ts

@@ -0,0 +1,363 @@
+import type { InspectableObject } from './SceneInspector';
+
+const PRECISION = 10000;
+
+export interface OrbitalController
+{
+  current_tilt: number;
+  current_orientation: number;
+  current_azimuth: number;
+  normalized_zoom: number;
+  min_zoom: number;
+  max_zoom: number;
+  reference_position: { x: number; y: number; z: number };
+  get_current_tilt(): number;
+  get_current_orientation(): number;
+  get_current_azimuth(): number;
+  set_normalized_zoom(zoom: number): void;
+  set_rotation(tilt?: number, orientation?: number, azimuth?: number): void;
+  focus_on_bounding_box(box: unknown, scale?: number): void;
+}
+
+export interface BridgeCamera
+{
+  position: { x: number; y: number; z: number };
+  fov?: number;
+  near?: number;
+  far?: number;
+  clear_color?: { getHexString?: () => string };
+  clear_alpha?: number;
+  updateProjectionMatrix?: () => void;
+}
+
+export interface ControllerState
+{
+  tilt: number;
+  orientation: number;
+  azimuth: number;
+  zoom: number;
+  min_zoom: number;
+  max_zoom: number;
+  target: number[];
+}
+
+export interface CameraState
+{
+  position: number[];
+  fov: number | null;
+  near: number | null;
+  far: number | null;
+  clear_color: string | null;
+  clear_alpha: number | null;
+  controller: ControllerState | null;
+  changed?: string[];
+}
+
+// Changes arrive off the dev-bridge wire and are therefore untrusted.
+export interface CameraChanges
+{
+  tilt?: unknown;
+  orientation?: unknown;
+  azimuth?: unknown;
+  zoom?: unknown;
+  fov?: unknown;
+  target?: unknown;
+  position?: unknown;
+}
+
+export interface FrameRequest
+{
+  uuid?: unknown;
+  name?: unknown;
+  scale?: unknown;
+}
+
+// Speaks the CameraController's own idiom. The controller is orbital, driven by
+// tilt, orientation, azimuth and a normalised zoom in degrees, and it rewrites
+// the camera transform every update. Assigning camera.position directly while a
+// controller is active would simply be overwritten on the next frame.
+class CameraBridge
+{
+  get(camera: BridgeCamera, controller: OrbitalController | null): CameraState
+  {
+    return this.describe(this.require_camera(camera), controller);
+  }
+
+  set(camera: BridgeCamera, controller: OrbitalController | null, changes: CameraChanges): CameraState
+  {
+    const target_camera = this.require_camera(camera);
+    const changed: string[] = [];
+
+    if (controller !== null)
+    {
+      this.apply_orbit(controller, changes, changed);
+    }
+
+    this.apply_position(target_camera, controller, changes, changed);
+    this.apply_fov(target_camera, changes, changed);
+
+    const state = this.describe(target_camera, controller);
+    state.changed = changed;
+
+    return state;
+  }
+
+  frame(
+    camera: BridgeCamera,
+    controller: OrbitalController | null,
+    root: InspectableObject,
+    request: FrameRequest,
+    make_bounds: (object: InspectableObject) => unknown
+  ): CameraState
+  {
+    const target_camera = this.require_camera(camera);
+
+    if (controller === null)
+    {
+      throw this.error('no_controller', 'The active scene has no camera_controller, so framing is unavailable.');
+    }
+
+    const uuid = typeof request.uuid === 'string' ? request.uuid : null;
+    const name = typeof request.name === 'string' ? request.name : null;
+
+    if (uuid === null && name === null)
+    {
+      throw this.error('not_found', 'Pass a uuid or a name to identify the object to frame.');
+    }
+
+    const found = this.find(root, uuid, name);
+
+    if (found === null)
+    {
+      const label = uuid === null ? `name '${name === null ? '' : name}'` : `uuid '${uuid}'`;
+
+      throw this.error('not_found', `No object matching ${label} in the current scene.`);
+    }
+
+    const scale = typeof request.scale === 'number' && Number.isFinite(request.scale) ? request.scale : 1;
+
+    controller.focus_on_bounding_box(make_bounds(found), scale);
+
+    const state = this.describe(target_camera, controller);
+    state.changed = ['framed'];
+
+    return state;
+  }
+
+  // Angles go through set_rotation, which is nullish-checked, so an omitted
+  // value keeps the current angle and an explicit 0 is applied. It also records
+  // old_orientation, which assigning the fields directly would skip.
+  private apply_orbit(controller: OrbitalController, changes: CameraChanges, changed: string[]): void
+  {
+    const tilt = this.number(changes.tilt);
+    const orientation = this.number(changes.orientation);
+    const azimuth = this.number(changes.azimuth);
+
+    if (tilt !== null || orientation !== null || azimuth !== null)
+    {
+      if (tilt !== null)
+      {
+        changed.push('tilt');
+      }
+
+      if (orientation !== null)
+      {
+        changed.push('orientation');
+      }
+
+      if (azimuth !== null)
+      {
+        changed.push('azimuth');
+      }
+
+      controller.set_rotation(
+        tilt === null ? undefined : tilt,
+        orientation === null ? undefined : orientation,
+        azimuth === null ? undefined : azimuth
+      );
+    }
+
+    const zoom = this.number(changes.zoom);
+
+    if (zoom !== null)
+    {
+      controller.set_normalized_zoom(zoom);
+      changed.push('zoom');
+    }
+
+    const target = this.triple(changes.target);
+
+    if (target !== null)
+    {
+      controller.reference_position.x = target[0];
+      controller.reference_position.y = target[1];
+      controller.reference_position.z = target[2];
+      changed.push('target');
+    }
+  }
+
+  private apply_position(
+    camera: BridgeCamera,
+    controller: OrbitalController | null,
+    changes: CameraChanges,
+    changed: string[]
+  ): void
+  {
+    const position = this.triple(changes.position);
+
+    if (position === null)
+    {
+      return;
+    }
+
+    if (controller !== null)
+    {
+      throw this.error(
+        'controller_owns_camera',
+        'A CameraController is driving this camera and would overwrite a raw position on the next frame. Use tilt, orientation, azimuth, zoom and target instead.'
+      );
+    }
+
+    camera.position.x = position[0];
+    camera.position.y = position[1];
+    camera.position.z = position[2];
+    changed.push('position');
+  }
+
+  private apply_fov(camera: BridgeCamera, changes: CameraChanges, changed: string[]): void
+  {
+    const fov = this.number(changes.fov);
+
+    if (fov === null)
+    {
+      return;
+    }
+
+    camera.fov = fov;
+    changed.push('fov');
+
+    if (typeof camera.updateProjectionMatrix === 'function')
+    {
+      camera.updateProjectionMatrix();
+    }
+  }
+
+  private describe(camera: BridgeCamera, controller: OrbitalController | null): CameraState
+  {
+    return {
+      position: [this.round(camera.position.x), this.round(camera.position.y), this.round(camera.position.z)],
+      fov: typeof camera.fov === 'number' ? camera.fov : null,
+      near: typeof camera.near === 'number' ? camera.near : null,
+      far: typeof camera.far === 'number' ? camera.far : null,
+      clear_color: this.hex(camera.clear_color),
+      clear_alpha: typeof camera.clear_alpha === 'number' ? camera.clear_alpha : null,
+      controller: controller === null ? null : {
+        tilt: controller.get_current_tilt(),
+        orientation: controller.get_current_orientation(),
+        azimuth: controller.get_current_azimuth(),
+        zoom: controller.normalized_zoom,
+        min_zoom: controller.min_zoom,
+        max_zoom: controller.max_zoom,
+        target: [
+          this.round(controller.reference_position.x),
+          this.round(controller.reference_position.y),
+          this.round(controller.reference_position.z)
+        ]
+      }
+    };
+  }
+
+  private find(node: InspectableObject, uuid: string | null, name: string | null): InspectableObject | null
+  {
+    const matches = uuid !== null ? node.uuid === uuid : node.name === name;
+
+    if (matches)
+    {
+      return node;
+    }
+
+    const children = Array.isArray(node.children) ? node.children : [];
+
+    for (const child of children)
+    {
+      const found = this.find(child, uuid, name);
+
+      if (found !== null)
+      {
+        return found;
+      }
+    }
+
+    return null;
+  }
+
+  private require_camera(camera: BridgeCamera): BridgeCamera
+  {
+    if (typeof camera !== 'object' || camera === null || typeof camera.position !== 'object')
+    {
+      throw this.error('no_camera', 'No camera is active. CameraManager.current is not set yet.');
+    }
+
+    return camera;
+  }
+
+  private hex(color: { getHexString?: () => string } | undefined): string | null
+  {
+    if (typeof color !== 'object' || color === null || typeof color.getHexString !== 'function')
+    {
+      return null;
+    }
+
+    return `#${color.getHexString()}`;
+  }
+
+  private number(value: unknown): number | null
+  {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+  }
+
+  private triple(value: unknown): number[] | null
+  {
+    if (!Array.isArray(value))
+    {
+      return null;
+    }
+
+    const supplied = value as unknown[];
+    const out: number[] = [];
+
+    for (let i = 0; i < 3; i++)
+    {
+      const entry = this.number(supplied[i]);
+
+      if (entry === null)
+      {
+        return null;
+      }
+
+      out.push(entry);
+    }
+
+    return out;
+  }
+
+  private round(value: unknown): number
+  {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+    {
+      return 0;
+    }
+
+    return Math.round(value * PRECISION) / PRECISION;
+  }
+
+  private error(code: string, message: string): Error
+  {
+    const error: Error & { code?: string } = new Error(message);
+    error.code = code;
+
+    return error;
+  }
+}
+
+export { CameraBridge };