abstract-3d 4.0.0-beta.2 → 4.0.0-beta.7

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

@@ -1,5 +1,5 @@
 import { BatchedMesh, InstancedMesh, Matrix4, PerspectiveCamera, Raycaster, Vector2, Vector3, Vector4 } from "three";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 import type { Group, Scene } from "../../../abstract-3d.js";
 import { alignedDimension, box, culledLine, group, sphere, text, vec3, vec3Zero } from "../../../abstract-3d.js";
 import type { PaintState, StructureState } from "../appearance/appearance.js";
@@ -28,11 +28,18 @@ const rasterize = (): GlyphBitmap => {
 const idle: StructureState = { relationsActive: false };
 const scene = (groups: ReadonlyArray<Group>, rest: Partial<Scene> = {}): Scene => ({ size_deprecated: vec3(1, 1, 1), groups, ...rest });
 const part = (id: string, x: number, material = red): Group => group([box(vec3(10, 10, 10), material)], vec3(x, 0, 0), vec3Zero, [], { id });
+// Destructured, as the build's and lint's compiler options disagree on reading an index signature by dot or bracket
+const groupId = (g: Group): string => {
+  const { id = "" }: Record<string, string | undefined> = g.data ?? {};
+  return id;
+};
 const build = (s: Scene, structure = idle, activeRelations?: ReadonlyArray<string>): BuiltScene =>
-  buildScene(
-    compileScene(s, (g) => g.data?.id ?? ""),
-    { structure, activeRelations, geometries: new Map(), atlas: createGlyphAtlas(rasterize, 256) }
-  );
+  buildScene(compileScene(s, groupId), { structure, activeRelations, geometries: new Map(), atlas: createGlyphAtlas(rasterize, 256) });
+const firstBatch = (built: BuiltScene): BatchedMesh => {
+  const [batch] = batches(built);
+  assert(batch);
+  return batch;
+};
 const relation = (id: string): NonNullable<Scene["relations"]>[number] => ({ id, pos: vec3Zero, groups: [group([box(vec3(1, 1, 1), red)])] });
 const batches = (built: BuiltScene): ReadonlyArray<BatchedMesh> => built.root.children.filter((o): o is BatchedMesh => o instanceof BatchedMesh);
 
@@ -45,9 +52,10 @@ function pickId(built: BuiltScene, x: number): string | undefined {
   const raycaster = new Raycaster();
   raycaster.setFromCamera(new Vector2(0, 0), camera);
   const hits = raycaster.intersectObjects(getPickables(built), false);
-  const item = hits.length > 0 ? getPickedItem(built, hits[0]) : undefined;
+  const hit = hits.at(0);
+  const item = hit && getPickedItem(built, hit);
   const { compiled }: { readonly compiled: CompiledScene } = built;
-  const target = item === undefined ? undefined : compiled.targets[compiled.items[item].target];
+  const target = item === undefined ? undefined : compiled.targets[compiled.items.at(item)?.target ?? -1];
   return target?.kind === "group" || target?.kind === "dimension" ? target.id : undefined;
 }
 
@@ -71,7 +79,7 @@ describe("buildScene", () => {
 
   it("repaints the hovered and selected targets", () => {
     const built = build(scene([part("a", 0), part("b", 20)]));
-    const [batch] = batches(built);
+    const batch = firstBatch(built);
     const color = (instance: number): ReadonlyArray<number> =>
       batch
         .getColorAt(instance, new Vector4())
@@ -117,7 +125,7 @@ describe("buildScene", () => {
     const built = build(scene([group([box(vec3(1, 1, 1), red)], vec3(5, 0, 0), vec3Zero, [], {}, spin)]));
     expect(built.animatedItems).toHaveLength(1);
     animateScene(built, 0.5);
-    const position = new Vector3(1, 0, 0).applyMatrix4(batches(built)[0].getMatrixAt(0, new Matrix4()));
+    const position = new Vector3(1, 0, 0).applyMatrix4(firstBatch(built).getMatrixAt(0, new Matrix4()));
     expect(position.toArray().map((v) => Math.round(v * 1000) / 1000 + 0)).toEqual([5, 1, 0]);
   });
 
@@ -134,7 +142,7 @@ describe("buildScene", () => {
   it("disposes its batches and materials", () => {
     const built = build(scene([part("a", 0)]));
     const disposed: Array<string> = [];
-    batches(built)[0].material.addEventListener("dispose", () => disposed.push("material"));
+    firstBatch(built).material.addEventListener("dispose", () => disposed.push("material"));
     disposeScene(built);
     expect(disposed).toEqual(["material"]);
   });

package/src/renderers/three/build/build.ts

@@ -232,7 +232,10 @@ function createPart(
         return { geometry, local: shape.local };
       });
       if (first.role === "solid") {
-        return createSolidPart(entries, createClassMaterial(getMaterialClass(first, targetStates[first.target]!)));
+        const c = getMaterialClass(first, targetStates[first.target]!);
+        const part = createSolidPart(entries, createClassMaterial(c));
+        Object.assign(part.object, { castShadow: c.castShadow, receiveShadow: c.lit });
+        return part;
       }
       // Images are hidden until their texture loads
       const part = createImagePart(

package/src/renderers/three/build/materials.ts

@@ -8,12 +8,14 @@ import {
   LinearMipmapLinearFilter,
   type Material,
   MeshBasicMaterial,
+  MeshPhysicalMaterial,
+  type MeshPhysicalMaterialParameters,
   MeshStandardMaterial,
   SRGBColorSpace,
   type Texture,
   TextureLoader,
 } from "three";
-import type { Image } from "../../../abstract-3d.js";
+import type { Image, MaterialType } from "../../../abstract-3d.js";
 import type { MaterialClass, MaterialState } from "../appearance/appearance.js";
 import { ERROR_IMG_KEY } from "../appearance/appearance.js";
 
@@ -22,7 +24,96 @@ import { ERROR_IMG_KEY } from "../appearance/appearance.js";
 export function createClassMaterial(c: MaterialClass): Material {
   const side = c.side === "front" ? FrontSide : c.side === "back" ? BackSide : DoubleSide;
   const common = { side, transparent: c.transparent, depthWrite: !c.transparent };
-  return c.lit ? new MeshStandardMaterial({ ...common, metalness: c.metalness, roughness: c.roughness }) : new MeshBasicMaterial(common);
+  if (!c.lit) {
+    return new MeshBasicMaterial(common);
+  }
+  const material = c.type
+    ? new MeshPhysicalMaterial({ ...common, ...finishes[c.type] })
+    : new MeshStandardMaterial({ ...common, metalness: c.metalness, roughness: c.roughness });
+  return Object.assign(material, { onBeforeCompile: roundEdges });
+}
+
+/**
+ * The physical finish of each type of surface, in the material's color: metals reflect their color, brighter than physical, as product renders light
+ * metals, since the studio around them is dark; the others are dielectrics with a white reflection; painted sheet has a light clearcoat, fabric a
+ * soft sheen. Glass is a thin, smooth, mostly see-through surface, not refracting, which would render the scene once more each frame
+ */
+const finishes: Record<MaterialType, MeshPhysicalMaterialParameters> = {
+  painted: { metalness: 0, roughness: 0.45, clearcoat: 0.3, clearcoatRoughness: 0.25 },
+  galvanized: { metalness: 0.85, roughness: 0.55, envMapIntensity: 1.6 },
+  aluminum: { metalness: 0.9, roughness: 0.4, envMapIntensity: 1.6 },
+  stainless: { metalness: 1, roughness: 0.25, envMapIntensity: 1.5 },
+  copper: { metalness: 1, roughness: 0.3, envMapIntensity: 1.3 },
+  plastic: { metalness: 0, roughness: 0.55 },
+  rubber: { metalness: 0, roughness: 0.9 },
+  fabric: { metalness: 0, roughness: 1, sheen: 1, sheenRoughness: 0.8, sheenColor: 0x888888 },
+  glass: { metalness: 0, roughness: 0.05, specularIntensity: 1 },
+};
+
+/**
+ * Shades the edges of boxes with a radius as rounded by it, so they catch light and reflections: the normal of a rounded box of the same size, from
+ * the signed distance function of a rounded box (Inigo Quilez's sdRoundBox), is used at each point of the sharp one. No extra geometry, and the
+ * radius stays the same along every edge, as boxes are one unit cube scaled to their size. Only the outline stays sharp
+ */
+function roundEdges(shader: { vertexShader: string; fragmentShader: string }): void {
+  shader.vertexShader = shader.vertexShader
+    .replace(
+      "#include <common>",
+      `#include <common>
+attribute float bevel;
+varying float vBevel;
+varying vec3 vBoxPoint;
+varying vec3 vBoxHalf;
+varying mat3 vBoxRotation;`
+    )
+    .replace(
+      "#include <batching_vertex>",
+      `#include <batching_vertex>
+#ifdef USE_BATCHING
+  vec3 boxSize = vec3( length( batchingMatrix[ 0 ].xyz ), length( batchingMatrix[ 1 ].xyz ), length( batchingMatrix[ 2 ].xyz ) );
+  mat3 boxRotation = mat3( batchingMatrix[ 0 ].xyz / boxSize.x, batchingMatrix[ 1 ].xyz / boxSize.y, batchingMatrix[ 2 ].xyz / boxSize.z );
+#else
+  vec3 boxSize = vec3( 1.0 );
+  mat3 boxRotation = mat3( 1.0 );
+#endif
+  // From the box's own axes to view space, where the fragment shader's normal is
+  vBoxRotation = normalMatrix * boxRotation;
+  vBevel = bevel;
+  vBoxHalf = boxSize * 0.5;
+  vBoxPoint = position * boxSize;`
+    );
+  shader.fragmentShader = shader.fragmentShader
+    .replace(
+      "#include <common>",
+      `#include <common>
+varying float vBevel;
+varying vec3 vBoxPoint;
+varying vec3 vBoxHalf;
+varying mat3 vBoxRotation;`
+    )
+    .replace(
+      "#include <normal_fragment_maps>",
+      `#include <normal_fragment_maps>
+if ( vBevel > 0.0 ) {
+  // At least 2 pixels wide, so a rounded edge far away is a soft line instead of a jagged sub-pixel highlight, and at most half the box
+  vec3 pixel = fwidth( vBoxPoint );
+  float radius = min( max( vBevel, 2.0 * max( pixel.x, max( pixel.y, pixel.z ) ) ), min( vBoxHalf.x, min( vBoxHalf.y, vBoxHalf.z ) ) );
+  vec3 rounded = sign( vBoxPoint ) * max( abs( vBoxPoint ) - ( vBoxHalf - radius ), 0.0 );
+  if ( dot( rounded, rounded ) > 0.0 ) {
+    normal = normalize( vBoxRotation * normalize( rounded ) ) * faceDirection;
+  }
+}`
+    )
+    .replace(
+      "#include <clearcoat_normal_fragment_maps>",
+      `#include <clearcoat_normal_fragment_maps>
+#ifdef USE_CLEARCOAT
+  // A painted finish's clearcoat follows the rounded edge too
+  if ( vBevel > 0.0 ) {
+    clearcoatNormal = normal;
+  }
+#endif`
+    );
 }
 
 export function createImageMaterial(backfaceCulling: boolean | undefined, useAlphaTest: boolean): MeshBasicMaterial {

package/src/renderers/three/camera/gizmo.ts

@@ -59,7 +59,8 @@ export function createGizmo(
     size,
     placement: helper.props?.alignment ?? "bottom-right",
     offset: { left: mx - size / 2, right: mx - size / 2, top: my - size / 2, bottom: my - size / 2 },
-    font: { family, weight },
+    // A family without a generic fallback, e.g. a web font, would otherwise fall back to the browser's serif
+    font: { family: `${family}, sans-serif`, weight },
     ...(helper.type === "Viewcube" ? getViewcubeOptions(helper.viewcubeProps ?? {}) : getAxesOptions(helper.viewportProps ?? {})),
   });
   gizmo.enabled = !(helper.type === "Viewport" && helper.viewportProps?.disabled);

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

@@ -1,43 +1,56 @@
 import { Matrix4, Vector3 } from "three";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 import type { Group, Scene } from "../../../abstract-3d.js";
 import { alignedDimension, box, group, line, sphere, text, vec3, vec3Zero } from "../../../abstract-3d.js";
+import type { CompiledScene, Item } from "./compile.js";
 import { compileScene, getItemMatrix } from "./compile.js";
 
 const red = { normal: "rgb(255, 0, 0)" };
 const scene = (groups: ReadonlyArray<Group>, rest: Partial<Scene> = {}): Scene => ({ size_deprecated: vec3(1, 1, 1), groups, ...rest });
-const apply = (m: Matrix4, x: number, y: number, z: number): ReadonlyArray<number> =>
-  new Vector3(x, y, z)
+const apply = (m: Matrix4 | undefined, x: number, y: number, z: number): ReadonlyArray<number> => {
+  assert(m);
+  return new Vector3(x, y, z)
     .applyMatrix4(m)
     .toArray()
     .map((v) => Math.round(v * 1000) / 1000 + 0);
+};
+const getItem = (compiled: CompiledScene, index: number): Item => {
+  const item = compiled.items.at(index);
+  assert(item);
+  return item;
+};
+// Destructured, as the build's and lint's compiler options disagree on reading an index signature by dot or bracket
+const groupId = (g: Group): string => {
+  const { id = "" }: Record<string, string | undefined> = g.data ?? {};
+  return id;
+};
 
 describe("compileScene", () => {
   it("flattens nested groups into items with world matrices", () => {
     const inner = group([sphere(1, red)], vec3(0, 10, 0));
     const compiled = compileScene(scene([group([box(vec3(1, 1, 1), red)], vec3(100, 0, 0), vec3Zero, [inner])]));
     expect(compiled.items.map((i) => i.role)).toEqual(["solid", "solid"]);
-    expect(apply(compiled.items[0].matrix, 0, 0, 0)).toEqual([100, 0, 0]);
-    expect(apply(compiled.items[1].matrix, 0, 0, 0)).toEqual([100, 10, 0]);
+    expect(apply(compiled.items.at(0)?.matrix, 0, 0, 0)).toEqual([100, 0, 0]);
+    expect(apply(compiled.items.at(1)?.matrix, 0, 0, 0)).toEqual([100, 10, 0]);
   });
 
   it("applies group rotation before the group's position", () => {
     const compiled = compileScene(scene([group([box(vec3(1, 1, 1), red)], vec3(5, 0, 0), vec3(0, 0, Math.PI / 2))]));
-    expect(apply(compiled.items[0].matrix, 1, 0, 0)).toEqual([5, 1, 0]);
+    expect(apply(compiled.items.at(0)?.matrix, 1, 0, 0)).toEqual([5, 1, 0]);
   });
 
   it("rotates the scene by its deprecated rotation, then moves it by minus its deprecated center", () => {
     const g = group([box(vec3(1, 1, 1), red)], vec3(10, 0, 0));
     const centered = compileScene(scene([g], { center_deprecated: vec3(10, 0, 0) }));
-    expect(apply(centered.items[0].matrix, 0, 0, 0)).toEqual([0, 0, 0]);
+    expect(apply(centered.items.at(0)?.matrix, 0, 0, 0)).toEqual([0, 0, 0]);
     const rotated = compileScene(scene([g], { center_deprecated: vec3(-10, 0, 0), rotation_deprecated: vec3(0, Math.PI, 0) }));
-    expect(apply(rotated.items[0].matrix, 1, 0, 0)).toEqual([-1, 0, 0]);
+    expect(apply(rotated.items.at(0)?.matrix, 1, 0, 0)).toEqual([-1, 0, 0]);
   });
 
   it("gives every item of a top-level group that group's target, and the data of the group it's in", () => {
     const inner = group([sphere(1, red)], vec3Zero, vec3Zero, [], { part: "motor" });
     const fan = group([box(vec3(1, 1, 1), red)], vec3Zero, vec3Zero, [inner], { id: "fan" });
-    const compiled = compileScene(scene([fan, group([box(vec3(1, 1, 1), red)], vec3Zero, vec3Zero, [], { id: "coil" })]), (g) => g.data?.id ?? "");
+    const compiled = compileScene(scene([fan, group([box(vec3(1, 1, 1), red)], vec3Zero, vec3Zero, [], { id: "coil" })]), groupId);
     expect(compiled.targets).toEqual([
       { kind: "group", id: "fan", root: 0, rootData: { id: "fan" } },
       { kind: "group", id: "coil", root: 1, rootData: { id: "coil" } },
@@ -70,9 +83,9 @@ describe("compileScene", () => {
     );
     const compiled = compileScene(scene([group([], vec3(10, 0, 0), vec3Zero, [fan])]));
     expect(compiled.animations).toHaveLength(1);
-    expect(compiled.animations[0].speed).toEqual(vec3(0, 0, Math.PI));
-    expect(compiled.items[0].animation).toBe(0);
-    const world = (seconds: number): ReadonlyArray<number> => apply(getItemMatrix(compiled, compiled.items[0], seconds, new Matrix4()), 1, 0, 0);
+    expect(compiled.animations.at(0)?.speed).toEqual(vec3(0, 0, Math.PI));
+    expect(compiled.items.at(0)?.animation).toBe(0);
+    const world = (seconds: number): ReadonlyArray<number> => apply(getItemMatrix(compiled, getItem(compiled, 0), seconds, new Matrix4()), 1, 0, 0);
     expect(world(0)).toEqual([11, 5, 0]);
     expect(world(0.5)).toEqual([10, 6, 0]);
   });
@@ -82,8 +95,8 @@ describe("compileScene", () => {
     const inner = group([box(vec3(1, 1, 1), red)], vec3(1, 0, 0), vec3Zero, [], {}, spin);
     const compiled = compileScene(scene([group([], vec3Zero, vec3Zero, [inner], {}, spin)]));
     expect(compiled.animations.map((a) => a.parent)).toEqual([undefined, 0]);
-    expect(apply(getItemMatrix(compiled, compiled.items[0], 0.5, new Matrix4()), 0, 0, 0)).toEqual([0, 1, 0]);
-    expect(apply(getItemMatrix(compiled, compiled.items[0], 0.5, new Matrix4()), 1, 0, 0)).toEqual([-1, 1, 0]);
+    expect(apply(getItemMatrix(compiled, getItem(compiled, 0), 0.5, new Matrix4()), 0, 0, 0)).toEqual([0, 1, 0]);
+    expect(apply(getItemMatrix(compiled, getItem(compiled, 0), 0.5, new Matrix4()), 1, 0, 0)).toEqual([-1, 1, 0]);
   });
 
   it("converts aligned dimensions to dimension items with a target per dimension", () => {
@@ -92,22 +105,22 @@ describe("compileScene", () => {
     const items = compiled.items.filter((i) => i.style === "dimension");
     expect(items.length).toBeGreaterThan(0);
     expect(new Set(items.map((i) => i.role))).toEqual(new Set(["line", "text", "solid"]));
-    expect(compiled.targets[items[0].target]).toEqual({ kind: "dimension", id: "fan" });
+    expect(compiled.targets[items.at(0)?.target ?? -1]).toEqual({ kind: "dimension", id: "fan" });
   });
 
   it("adds relation shapes, with an outline around their boxes", () => {
     const relation = { id: "r1", pos: vec3Zero, groups: [group([box(vec3(10, 10, 10), red), sphere(1, red)], vec3(5, 0, 0))] };
     const compiled = compileScene(scene([], { relations: [relation] }));
     expect(compiled.items.map((i) => i.style)).toEqual(["relation", "outline", "relation"]);
-    expect(compiled.targets[compiled.items[0].target]).toEqual({ kind: "relation", relation });
-    const outline = compiled.items[1].mesh.geometry;
+    expect(compiled.targets[getItem(compiled, 0).target]).toEqual({ kind: "relation", relation });
+    const outline = getItem(compiled, 1).mesh.geometry;
     expect(outline.type === "Box" && outline.size).toEqual(vec3(10.125, 10.125, 10.125));
-    expect(apply(compiled.items[0].matrix, 0, 0, 0)).toEqual([5, 0, 0]);
+    expect(apply(compiled.items.at(0)?.matrix, 0, 0, 0)).toEqual([5, 0, 0]);
   });
 
   it("keeps the world matrix of each top-level group for its tooltips", () => {
     const compiled = compileScene(scene([group([], vec3(3, 0, 0))], { center_deprecated: vec3(1, 0, 0) }));
-    expect(apply(compiled.roots[0], 0, 0, 0)).toEqual([2, 0, 0]);
+    expect(apply(compiled.roots.at(0), 0, 0, 0)).toEqual([2, 0, 0]);
     expect(apply(compiled.matrix, 0, 0, 0)).toEqual([-1, 0, 0]);
   });
 });