abstract-3d 4.0.0-beta.8 → 4.0.0

package/src/renderers/three/geometry/geometry.test.ts

@@ -17,7 +17,12 @@ const bounds = (mesh: Mesh): ReadonlyArray<number> => {
   return [...geometry.boundingBox!.min.toArray(), ...geometry.boundingBox!.max.toArray()].map((v) => Math.round(v * 1000) / 1000 + 0);
 };
 
-const bevel = (mesh: Mesh): ReadonlyArray<number> => [...new Set(createSolidGeometry(mesh.geometry).getAttribute("bevel").array)];
+/** The radius and joined sides' bits, the same for every vertex */
+const bevel = (mesh: Mesh): ReadonlyArray<number> => {
+  const attribute = createSolidGeometry(mesh.geometry).getAttribute("bevel");
+  const pairs = new Set(Array.from({ length: attribute.count }, (_, i) => `${attribute.getX(i)} ${attribute.getY(i)}`));
+  return [...pairs].flatMap((pair) => pair.split(" ").map(Number));
+};
 
 describe("getSolidShape", () => {
   it("shares unit geometries between primitives of any size, scaled by the local matrix", () => {
@@ -81,15 +86,22 @@ describe("createSolidGeometry", () => {
   });
 
   it("gives boxes with a radius it as the radius their edges are shaded rounded by, with a geometry per radius", () => {
-    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4))).toEqual([4]);
+    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4))).toEqual([4, 2 ** 12 - 1]);
     expect(key(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4))).toBe(key(box(vec3(9, 9, 9), m, vec3Zero, vec3Zero, [], 4)));
     expect(key(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4))).not.toBe(key(box(vec3(1, 1, 1), m)));
   });
 
+  it("rounds all edges of boxes with a radius, or only their rounded edges, a bit each in the order of boxEdges, with a geometry per edges", () => {
+    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4, ["BottomBack", "FrontRight", "TopRight"]))).toEqual([4, 1 + 2 ** 7 + 2 ** 11]);
+    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4, []))).toEqual([4, 0]);
+    expect(key(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4, ["TopFront"]))).not.toBe(key(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], 4)));
+  });
+
   it("keeps boxes without a radius, with holes, and other shapes sharp", () => {
-    expect(bevel(box(vec3(1, 1, 1), m))).toEqual([0]);
-    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [roundHole(vec2(0, 0), 0.1)], 4))).toEqual([0]);
-    expect(bevel(sphere(1, m))).toEqual([0]);
+    expect(bevel(box(vec3(1, 1, 1), m))).toEqual([0, 0]);
+    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [], undefined, ["TopFront"]))).toEqual([0, 0]);
+    expect(bevel(box(vec3(1, 1, 1), m, vec3Zero, vec3Zero, [roundHole(vec2(0, 0), 0.1)], 4))).toEqual([0, 0]);
+    expect(bevel(sphere(1, m))).toEqual([0, 0]);
   });
 });
 

package/src/renderers/three/geometry/geometry.ts

@@ -16,7 +16,7 @@ import {
 } from "three";
 import { mergeGeometries } from "three/addons/utils/BufferGeometryUtils.js";
 import type { Hole, Mesh } from "../../../abstract-3d.js";
-import { isZero, vec3, vec3Zero } from "../../../abstract-3d.js";
+import { boxEdges, isZero, vec3, vec3Zero } from "../../../abstract-3d.js";
 import { addHoles, CircleCurve, CYLINDER_SEGMENTS, cylinderCutPositions, holeIsZero } from "../../shared/three-geometry.js";
 import { transform } from "../compile/compile.js";
 
@@ -42,7 +42,10 @@ export function getSolidShape(g: Mesh["geometry"]): SolidShape | undefined {
       const size = g.type === "Box" ? g.size : vec3(g.size.x, g.size.y, 1);
       return g.holes?.some((h) => !holeIsZero(h))
         ? { key: JSON.stringify([g.type, g.size, g.holes]), local: transform(g.pos, g.rot) }
-        : { key: g.type === "Box" && g.radius ? `Box ${g.radius}` : g.type, local: transform(g.pos, g.rot, undefined, size) };
+        : {
+            key: g.type === "Box" && g.radius ? `Box ${g.radius} ${g.roundedEdges?.join() ?? ""}` : g.type,
+            local: transform(g.pos, g.rot, undefined, size),
+          };
     }
     case "Image":
       return { key: "Plane", local: transform(g.pos, g.rot, undefined, vec3(g.size.x, g.size.y, 1)) };
@@ -86,9 +89,13 @@ export function createSolidGeometry(g: Mesh["geometry"]): BufferGeometry {
   if (!geometry.hasAttribute("uv")) {
     geometry.setAttribute("uv", new Float32BufferAttribute(new Float32Array(count * 2), 2));
   }
-  // The radius a unit box's edges are shaded as rounded by, 0 for sharp; every geometry has it, as a batch's geometries share their attributes
-  const radius = geometry instanceof BoxGeometry && g.type === "Box" ? (g.radius ?? 0) : 0;
-  geometry.setAttribute("bevel", new Float32BufferAttribute(new Float32Array(count).fill(radius), 1));
+  // The radius a unit box's edges are shaded as rounded by, 0 for sharp, and a bit per rounded edge, in the order of `boxEdges`; every geometry has
+  // it, as a batch's geometries share their attributes
+  const bevel =
+    geometry instanceof BoxGeometry && g.type === "Box" && g.radius
+      ? [g.radius, boxEdges.reduce((edges, edge, i) => ((g.roundedEdges?.includes(edge) ?? true) ? edges + 2 ** i : edges), 0)]
+      : [0, 0];
+  geometry.setAttribute("bevel", new Float32BufferAttribute(Array.from({ length: count }, () => bevel).flat(), 2));
   Object.keys(geometry.attributes).forEach((name) => {
     if (name !== "position" && name !== "normal" && name !== "uv" && name !== "bevel") {
       geometry.deleteAttribute(name);

package/src/renderers/three/shadow/key-light.ts

@@ -8,7 +8,7 @@ import { getShadowCasters } from "./shadow.js";
  */
 
 const direction = new Vector3(-1, 2, 1.2).normalize();
-const intensity = 2.5;
+const intensity = 1.6;
 const mapSize = 2048;
 /** Of the key light kept out of its shadows, so faces under an overhang, e.g. a recessed base frame, aren't black */
 const shadowIntensity = 0.6;

package/src/renderers/three/viewer/options.ts

@@ -43,8 +43,14 @@ export type ViewerOptions<Content> = {
   readonly gizmo?: ControlsHelper;
   /** Lights added to the photographed studio and key light that light the scene; none by default */
   readonly lights?: ReadonlyArray<Object3D> | ((scene: Scene) => ReadonlyArray<Object3D>);
-  /** Of the studio's light, 0.8 by default, the key light giving the rest */
+  /** Of the studio's light, or without the studio of its plain light, 0.6 by default, the key light giving the rest */
   readonly environmentIntensity?: number;
+  /**
+   * The photographed studio's light and reflections, on by default. Off, three-point lighting emulates it, a weak sky and floor light, the key light,
+   * a fill and a rim light, without reflections, so metals are satin at most; a first visit then shows the scene about 400 ms sooner, as its shaders
+   * compile without the reflection code. Changing it rebuilds the scene
+   */
+  readonly studio?: boolean;
   /** A soft shadow on the ground under the scene, rendered once per build; on by default */
   readonly groundShadow?: boolean;
   /** The solids' shadows on themselves, e.g. under a roof, cast by the key light from the upper left front; on by default */
@@ -90,6 +96,7 @@ export const effects: { readonly [K in keyof ViewerOptions<unknown>]-?: Readonly
   gizmo: ["gizmo"],
   lights: ["lights"],
   environmentIntensity: ["lights"],
+  studio: ["build", "lights"],
   groundShadow: ["shadow"],
   shadows: ["shadow"],
   quality: ["quality"],

package/src/renderers/three/viewer/viewer.ts

@@ -1,6 +1,8 @@
 import {
   type BufferGeometry,
+  DirectionalLight,
   Group,
+  HemisphereLight,
   NeutralToneMapping,
   OrthographicCamera,
   PerspectiveCamera,
@@ -71,6 +73,8 @@ export type Viewer<Content> = {
   structure: StructureState;
   compiled?: CompiledScene;
   built?: BuiltScene;
+  /** The previous build and ground shadow, out of the scene, disposed once the next frame has given their shader programs to the new ones */
+  readonly retired: { built?: BuiltScene; shadow?: GroundShadow };
   gizmo?: ViewportGizmo;
   shadow?: GroundShadow;
   /** The key light that casts the solids' shadows on themselves */
@@ -127,13 +131,16 @@ export function createViewer<Content>(container: HTMLElement, options: ViewerOpt
     stats: { frames: 0, frameMs: 0, drawCalls: 0, pickMs: 0, paintMs: 0 },
     structure: { activeComponents: options.activeComponents, relationsActive: options.activeRelations !== undefined },
     studio: {},
+    retired: {},
     loaded: false,
     fitted: false,
     disposed: false,
   };
   v.scene.add(v.lights);
   // Loaded while the first frame builds the scene
-  loadStudio(v).catch(() => undefined);
+  if (options.studio !== false) {
+    loadStudio(v).catch(() => undefined);
+  }
   const signal = { signal: v.listeners.signal };
   canvas.addEventListener("pointermove", (e) => onPointerMove(v, e), signal);
   canvas.addEventListener("pointerleave", (e) => setHovered(v, undefined, e), signal);
@@ -166,6 +173,7 @@ export function disposeViewer<Content>(v: Viewer<Content>): void {
   v.resizeObserver.disconnect();
   v.controls.orbit.dispose();
   v.gizmo?.dispose();
+  disposeRetired(v);
   if (v.built) {
     disposeScene(v.built);
   }
@@ -197,9 +205,12 @@ function apply<Content>(v: Viewer<Content>, changes: ReadonlySet<Change>): void
     rebuild(v);
   }
   if (changes.has("shadow") || changes.has("build")) {
-    if (v.shadow) {
-      disposeGroundShadow(v.shadow);
+    if (v.retired.shadow) {
+      disposeGroundShadow(v.retired.shadow);
     }
+    v.retired.shadow = v.shadow;
+    v.shadow?.mesh.removeFromParent();
+    v.shadow?.floor.removeFromParent();
     v.shadow = v.built && options.groundShadow !== false ? createGroundShadow(v.renderer, v.scene, v.built) : undefined;
     if (v.keyLight) {
       disposeKeyLight(v.keyLight);
@@ -255,9 +266,11 @@ function apply<Content>(v: Viewer<Content>, changes: ReadonlySet<Change>): void
 }
 
 function rebuild<Content>(v: Viewer<Content>): void {
-  if (v.built) {
-    disposeScene(v.built);
+  if (v.retired.built) {
+    disposeScene(v.retired.built);
   }
+  v.retired.built = v.built;
+  v.built?.root.removeFromParent();
   const { options, compiled } = v;
   v.built =
     compiled &&
@@ -273,7 +286,7 @@ function rebuild<Content>(v: Viewer<Content>): void {
     v.scene.add(v.built.root);
     v.built.dimensions.visible = options.showDimensions ?? true;
     // Compiled in parallel where the driver can, as three.js's compileAsync example, and after the studio arrived, which they use
-    loadStudio(v)
+    (options.studio === false ? Promise.resolve() : loadStudio(v))
       .catch(() => undefined)
       .then(() => v.renderer.compileAsync(v.scene, v.camera))
       .then(() => onLoaded(v))
@@ -281,6 +294,17 @@ function rebuild<Content>(v: Viewer<Content>): void {
   }
 }
 
+/** Three deletes a shader program once no material uses it, so the previous build's are disposed after the new build's took the programs over */
+function disposeRetired<Content>(v: Viewer<Content>): void {
+  if (v.retired.built) {
+    disposeScene(v.retired.built);
+  }
+  if (v.retired.shadow) {
+    disposeGroundShadow(v.retired.shadow);
+  }
+  Object.assign(v.retired, { built: undefined, shadow: undefined });
+}
+
 function onLoaded<Content>(v: Viewer<Content>): void {
   if (!v.disposed) {
     v.loaded = true;
@@ -317,6 +341,7 @@ function renderFrame<Content>(v: Viewer<Content>, now: number): void {
   }
   if (v.loaded) {
     renderer.render(v.scene, camera);
+    disposeRetired(v);
   }
   gizmo?.render();
   v.overlays.renderer.render(v.overlays.scene, camera);
@@ -496,12 +521,26 @@ function getGroupArgs<Content>(
   }
 }
 
-/** The scene is lit by a photographed studio as its environment; apps can add their own lights */
+/** The scene is lit by a photographed studio as its environment, or without it by a plain sky and floor light; apps can add their own lights */
 function updateLights<Content>(v: Viewer<Content>): void {
-  const { scene, lights, environmentIntensity = studioIntensity } = v.options;
+  const { scene, lights, environmentIntensity = studioIntensity, studio = true } = v.options;
   v.lights.clear();
   (typeof lights === "function" ? (scene ? lights(scene) : []) : (lights ?? [])).forEach((o) => v.lights.add(o));
   v.scene.environmentIntensity = environmentIntensity;
+  v.scene.environment = studio ? (v.studio.texture ?? null) : null;
+  if (studio) {
+    loadStudio(v).catch(() => undefined);
+  } else {
+    // The studio emulated by three-point lighting: a weak sky and floor light, so faces differ by which way they turn, the key light, a fill from
+    // the other side, so the key light's shadow side isn't flat, and a rim light from behind, which outlines edges
+    const [fill, rim] = [
+      new DirectionalLight(0xffffff, environmentIntensity * fillIntensity),
+      new DirectionalLight(0xffffff, environmentIntensity * rimIntensity),
+    ];
+    fill.position.copy(fillDirection);
+    rim.position.copy(rimDirection);
+    v.lights.add(new HemisphereLight(0xffffff, floorColor, environmentIntensity * skyIntensity), fill, rim);
+  }
 }
 
 /** The studio, loaded once, its own chunk; set when it arrives, so the scene's shaders are compiled after it, with it */
@@ -514,7 +553,7 @@ function loadStudio<Content>(v: Viewer<Content>): Promise<unknown> {
         return texture;
       }
       v.studio.texture = texture;
-      v.scene.environment = texture;
+      v.scene.environment = v.options.studio === false ? null : texture;
       invalidate(v);
       return texture;
     });
@@ -543,7 +582,15 @@ function updateOverlays<Content>(v: Viewer<Content>): void {
 }
 
 /** The studio's share of the light, the key light giving the rest, so the key light's shadows show */
-const studioIntensity = 0.8;
+const studioIntensity = 0.6;
+/** Without the studio, of its three-point lighting, by the environment's intensity; the key light is the studio's, the floor as the studio's */
+const skyIntensity = 1.5;
+const fillIntensity = 1.5;
+const rimIntensity = 2;
+const floorColor = 0xe6e6e6;
+/** From the right, opposite the key light from the upper left front, and lower; the rim light from behind and above */
+const fillDirection = new Vector3(1.5, 0.5, 1);
+const rimDirection = new Vector3(0.5, 1.5, -1.5);
 
 const raycaster = new Raycaster();
 const ndc = new Vector2();