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

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

@@ -46,7 +46,9 @@ export type ViewerOptions<Content> = {
   /** Lights faces by which way they turn and gives metal reflections: `studio` by default, `room` for three's RoomEnvironment, or null for none */
   readonly environment?: Texture | "studio" | "room" | null;
   readonly environmentIntensity?: number;
-  /** `low` by default, without ambient occlusion */
+  /** A soft shadow on the ground under the scene, rendered once per build; on by default */
+  readonly groundShadow?: boolean;
+  /** The resolution: `low` 1, `medium` up to 1.5 and `high` up to 2 pixels per CSS pixel; `auto` by default, high until moving gets slow */
   readonly quality?: Quality;
   readonly useAlphaTest?: boolean;
   readonly materialStateImages?: Record<string, string>;
@@ -61,10 +63,12 @@ export type ViewerOptions<Content> = {
   readonly onHoverGroup?: (id: string | undefined, rootData: Data, data: Data, event: SceneEvent) => void;
   readonly onContextMenuGroup?: (id: string, rootData: Data, data: Data, left: number, top: number, event: SceneEvent) => void;
   readonly onClickRelation?: (relation: Relation, event: SceneEvent) => void;
+  /** A click, not a drag, on nothing clickable, e.g. the background; r3f's Canvas event of the same name */
+  readonly onPointerMissed?: (event: MouseEvent) => void;
 };
 
 /** What an update has to redo, in the order it's redone */
-export type Change = "compile" | "build" | "camera" | "controls" | "gizmo" | "lights" | "quality" | "paint" | "dimensions" | "overlays";
+export type Change = "compile" | "build" | "shadow" | "camera" | "controls" | "gizmo" | "lights" | "quality" | "paint" | "dimensions" | "overlays";
 
 /** What passing each option redoes; callbacks and what's read later need nothing */
 export const effects: { readonly [K in keyof ViewerOptions<unknown>]-?: ReadonlyArray<Change> } = {
@@ -86,6 +90,7 @@ export const effects: { readonly [K in keyof ViewerOptions<unknown>]-?: Readonly
   lights: ["lights"],
   environment: ["lights"],
   environmentIntensity: ["lights"],
+  groundShadow: ["shadow"],
   quality: ["quality"],
   popovers: ["overlays"],
   getTooltips: ["overlays"],
@@ -95,4 +100,5 @@ export const effects: { readonly [K in keyof ViewerOptions<unknown>]-?: Readonly
   onHoverGroup: [],
   onContextMenuGroup: [],
   onClickRelation: [],
+  onPointerMissed: [],
 };

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

@@ -32,8 +32,10 @@ import { configureControls, createControls, setPose } from "../camera/controls.j
 import { createGizmo } from "../camera/gizmo.js";
 import type { CompiledScene } from "../compile/compile.js";
 import { compileScene } from "../compile/compile.js";
-import type { RenderPath, TierGovernor } from "../quality/quality.js";
-import { createRenderPath, disposeRenderPath, recordFrame, renderPath } from "../quality/quality.js";
+import type { TierGovernor } from "../quality/quality.js";
+import { getPixelRatio, recordFrame } from "../quality/quality.js";
+import type { GroundShadow } from "../shadow/shadow.js";
+import { createGroundShadow, disposeGroundShadow } from "../shadow/shadow.js";
 import type { GlyphAtlas } from "../text/text.js";
 import { createGlyphAtlas } from "../text/text.js";
 import type { Change, ViewerOptions } from "./options.js";
@@ -77,7 +79,7 @@ export type Viewer<Content> = {
   compiled?: CompiledScene;
   built?: BuiltScene;
   gizmo?: ViewportGizmo;
-  path?: RenderPath;
+  shadow?: GroundShadow;
   governor?: TierGovernor;
   readonly environments: Partial<Record<"studio" | "room", Texture>>;
   /** The scene is built and its shaders compiled */
@@ -164,12 +166,12 @@ export function disposeViewer<Content>(v: Viewer<Content>): void {
   v.resizeObserver.disconnect();
   v.controls.orbit.dispose();
   v.gizmo?.dispose();
-  if (v.path) {
-    disposeRenderPath(v.path);
-  }
   if (v.built) {
     disposeScene(v.built);
   }
+  if (v.shadow) {
+    disposeGroundShadow(v.shadow);
+  }
   Object.values(v.environments).forEach((e) => e.dispose());
   v.geometries.forEach((g) => g.dispose());
   v.atlas.texture.dispose();
@@ -191,6 +193,12 @@ function apply<Content>(v: Viewer<Content>, changes: ReadonlySet<Change>): void
     v.structure = { activeComponents: options.activeComponents, relationsActive: options.activeRelations !== undefined };
     rebuild(v);
   }
+  if (changes.has("shadow") || changes.has("build")) {
+    if (v.shadow) {
+      disposeGroundShadow(v.shadow);
+    }
+    v.shadow = v.built && options.groundShadow !== false ? createGroundShadow(v.renderer, v.scene, v.built) : undefined;
+  }
   if (changes.has("camera")) {
     const { near = 0.1, far = 2000, ...rest } = options.camera ?? { type: "Perspective" };
     v.camera = v.cameras[rest.type];
@@ -211,11 +219,9 @@ function apply<Content>(v: Viewer<Content>, changes: ReadonlySet<Change>): void
     updateLights(v);
   }
   if (changes.has("quality")) {
-    const quality = options.quality ?? "low";
-    v.governor = { quality, tier: quality === "auto" ? "medium" : quality, sum: 0, count: 0 };
-  }
-  if (changes.has("quality") || changes.has("camera")) {
-    updateRenderPath(v);
+    const quality = options.quality ?? "auto";
+    v.governor = { quality, tier: quality === "auto" ? "high" : quality, sum: 0, count: 0 };
+    v.renderer.setPixelRatio(getPixelRatio(v.governor.tier, window.devicePixelRatio));
   }
   if ((changes.has("paint") || changes.has("build")) && v.built) {
     const start = performance.now();
@@ -284,7 +290,7 @@ function renderFrame<Content>(v: Viewer<Content>, now: number): void {
   renderer.info.reset();
   const moving = v.controls.orbit.update(Math.min(interval / 1000, 0.1)) || !!gizmo?.animating;
   if (moving && loop.wasMoving && v.governor && recordFrame(v.governor, interval)) {
-    updateRenderPath(v);
+    renderer.setPixelRatio(getPixelRatio(v.governor.tier, window.devicePixelRatio));
   }
   loop.wasMoving = moving;
   const animated = !!built && built.animatedItems.length > 0;
@@ -296,11 +302,13 @@ function renderFrame<Content>(v: Viewer<Content>, now: number): void {
   if (built) {
     cullScene(built, camera.position);
   }
-  const fading = v.loaded && v.path ? renderPath(v.path, renderer, v.scene, camera, moving || animated) : false;
+  if (v.loaded) {
+    renderer.render(v.scene, camera);
+  }
   gizmo?.render();
   v.overlays.renderer.render(v.overlays.scene, camera);
   Object.assign(v.stats, { frames: v.stats.frames + 1, frameMs: performance.now() - start, drawCalls: renderer.info.render.calls });
-  if (moving || animated || fading) {
+  if (moving || animated) {
     invalidate(v);
   } else {
     loop.last = 0;
@@ -310,7 +318,6 @@ function renderFrame<Content>(v: Viewer<Content>, now: number): void {
 function onResize<Content>(v: Viewer<Content>, rect: DOMRectReadOnly): void {
   Object.assign(v.size, { width: rect.width, height: rect.height });
   v.renderer.setSize(rect.width, rect.height, false);
-  v.path?.composer?.setSize(rect.width, rect.height);
   v.overlays.renderer.setSize(rect.width, rect.height);
   v.gizmo?.update();
   fitPose(v);
@@ -369,13 +376,16 @@ function hoverAtPointer<Content>(v: Viewer<Content>): void {
 
 function onClick<Content>(v: Viewer<Content>, event: MouseEvent): void {
   const { down } = v.pointer;
-  const hit = down && Math.hypot(event.clientX - down.x, event.clientY - down.y) <= clickTolerance ? pick(v, event) : undefined;
+  const clicked = !!down && Math.hypot(event.clientX - down.x, event.clientY - down.y) <= clickTolerance;
+  const hit = clicked ? pick(v, event) : undefined;
   const target = hit && v.compiled!.targets[hit.target];
   const args = hit && getGroupArgs(v, hit);
   if (hit && target?.kind === "relation") {
     v.options.onClickRelation?.(target.relation, { nativeEvent: event, point: hit.point });
   } else if (hit && args) {
     v.options.onClickGroup?.(...args, { nativeEvent: event, point: hit.point });
+  } else if (clicked) {
+    v.options.onPointerMissed?.(event);
   }
 }
 
@@ -529,12 +539,5 @@ function updateOverlays<Content>(v: Viewer<Content>): void {
   setOverlays(v.overlays, overlays, options.onOverlays);
 }
 
-function updateRenderPath<Content>(v: Viewer<Content>): void {
-  if (v.path) {
-    disposeRenderPath(v.path);
-  }
-  v.path = createRenderPath(v.renderer, v.scene, v.camera, v.governor?.tier ?? "low");
-}
-
 const raycaster = new Raycaster();
 const ndc = new Vector2();

package/src/custom_typings/n8ao.d.ts

@@ -1,11 +0,0 @@
-declare module "n8ao" {
-  import type { Camera, Scene, WebGLRenderTarget } from "three";
-  import type { Pass } from "three/addons/postprocessing/Pass.js";
-
-  type AOPass = Pass & {
-    readonly configuration: Record<string, unknown> & { intensity: number };
-    readonly beautyRenderTarget: WebGLRenderTarget;
-  };
-
-  export const N8AOPass: new (scene: Scene, camera: Camera, width?: number, height?: number) => AOPass;
-}