@opsydyn/effect-three 0.1.0 → 0.3.0

package/dist/{index-ef8pbv9g.js → index-8cf8t6by.js}

@@ -67,6 +67,10 @@ var writeRotation2 = (target, rotation, elapsedSeconds) => {
     target.set(rotation.euler[0], rotation.euler[1], rotation.euler[2]);
     return;
   }
+  if (rotation._tag === "Billboard") {
+    target.set(0, 0, 0);
+    return;
+  }
   const angle = spinAngle2(rotation, elapsedSeconds);
   switch (rotation.axis) {
     case "x":
@@ -251,6 +255,13 @@ import {
 
 // src/kernel/equality.ts
 var vec3Equals2 = (a, b) => a === b || Object.is(a[0], b[0]) && Object.is(a[1], b[1]) && Object.is(a[2], b[2]);
+var detailEquals = (a, b) => {
+  if (a === b)
+    return true;
+  if (a === null || b === null)
+    return false;
+  return Object.is(a.hysteresis, b.hysteresis) && a.distances.length === b.distances.length && a.distances.every((distance, index) => Object.is(distance, b.distances[index]));
+};
 var rotationEquals2 = (a, b) => {
   if (a === b)
     return true;
@@ -259,6 +270,9 @@ var rotationEquals2 = (a, b) => {
   if (a._tag === "Spin" && b._tag === "Spin") {
     return a.axis === b.axis && Object.is(a.radiansPerSecond, b.radiansPerSecond) && Object.is(a.phase, b.phase);
   }
+  if (a._tag === "Billboard" && b._tag === "Billboard") {
+    return a.lockX === b.lockX && a.lockY === b.lockY && a.lockZ === b.lockZ;
+  }
   return false;
 };
 var shapeEquals2 = (a, b) => {
@@ -283,6 +297,10 @@ var shapeEquals2 = (a, b) => {
       return b._tag === "Ring" && Object.is(a.innerRadius, b.innerRadius) && Object.is(a.outerRadius, b.outerRadius) && a.thetaSegments === b.thetaSegments;
     case "Circle":
       return b._tag === "Circle" && Object.is(a.radius, b.radius) && a.segments === b.segments;
+    case "RoundedBox":
+      return b._tag === "RoundedBox" && Object.is(a.width, b.width) && Object.is(a.height, b.height) && Object.is(a.depth, b.depth) && Object.is(a.radius, b.radius) && a.smoothness === b.smoothness && a.bevelSegments === b.bevelSegments && a.steps === b.steps && Object.is(a.creaseAngle, b.creaseAngle);
+    case "Backdrop":
+      return b._tag === "Backdrop" && Object.is(a.floor, b.floor) && a.segments === b.segments;
     case "Text":
       return b._tag === "Text" && a.text === b.text && a.font === b.font && Object.is(a.size, b.size) && Object.is(a.depth, b.depth) && a.curveSegments === b.curveSegments && a.center === b.center && Object.is(a.letterSpacing, b.letterSpacing) && Object.is(a.lineHeight, b.lineHeight) && a.align === b.align && bevelEquals(a.bevel, b.bevel);
   }
@@ -340,11 +358,12 @@ var materialRefEquals2 = (a, b) => {
   }
   return sameFlatRecord(a, b);
 };
+var cameraShakeEquals = (a, b) => a === b || a !== null && b !== null && Object.is(a.intensity, b.intensity) && a.decay === b.decay && Object.is(a.decayRate, b.decayRate) && Object.is(a.maxYaw, b.maxYaw) && Object.is(a.maxPitch, b.maxPitch) && Object.is(a.maxRoll, b.maxRoll) && Object.is(a.yawFrequency, b.yawFrequency) && Object.is(a.pitchFrequency, b.pitchFrequency) && Object.is(a.rollFrequency, b.rollFrequency) && Object.is(a.trigger, b.trigger);
 var cameraEquals2 = (a, b) => {
   if (a === b)
     return true;
   const sameLens = a._tag === "Perspective" && b._tag === "Perspective" && Object.is(a.fov, b.fov) || a._tag === "Orthographic" && b._tag === "Orthographic" && Object.is(a.zoom, b.zoom);
-  return sameLens && Object.is(a.near, b.near) && Object.is(a.far, b.far) && Object.is(a.damping, b.damping) && Object.is(a.autoRotate, b.autoRotate) && vec3Equals2(a.position, b.position) && vec3Equals2(a.lookAt, b.lookAt);
+  return sameLens && Object.is(a.near, b.near) && Object.is(a.far, b.far) && Object.is(a.damping, b.damping) && Object.is(a.autoRotate, b.autoRotate) && cameraShakeEquals(a.shake, b.shake) && vec3Equals2(a.position, b.position) && vec3Equals2(a.lookAt, b.lookAt);
 };
 var renderSettingsEquals2 = (a, b) => a === b || a.frames === b.frames && Object.is(a.resolution, b.resolution) && a.shadows === b.shadows && a.toneMapping === b.toneMapping && Object.is(a.exposure, b.exposure) && a.colorSpace === b.colorSpace && effectsEqual2(a.effects, b.effects);
 var effectsEqual2 = (a, b) => {
@@ -651,6 +670,12 @@ var spin2 = (options) => ({
   radiansPerSecond: options.radiansPerSecond,
   phase: options.phase ?? 0
 });
+var billboard2 = (options = {}) => ({
+  _tag: "Billboard",
+  lockX: options.lockX ?? false,
+  lockY: options.lockY ?? false,
+  lockZ: options.lockZ ?? false
+});
 var box2 = (size = {}) => ({
   _tag: "Box",
   width: size.width ?? 1,
@@ -691,6 +716,22 @@ var capsule2 = (options = {}) => ({
   capSegments: options.capSegments ?? 4,
   radialSegments: options.radialSegments ?? 8
 });
+var roundedBox2 = (options = {}) => ({
+  _tag: "RoundedBox",
+  width: options.width ?? 1,
+  height: options.height ?? 1,
+  depth: options.depth ?? 1,
+  radius: options.radius ?? 0.05,
+  smoothness: options.smoothness ?? 4,
+  bevelSegments: options.bevelSegments ?? 4,
+  steps: options.steps ?? 1,
+  creaseAngle: options.creaseAngle ?? 0.4
+});
+var backdrop2 = (options = {}) => ({
+  _tag: "Backdrop",
+  floor: options.floor ?? 0.25,
+  segments: options.segments ?? 20
+});
 var ring2 = (options = {}) => ({
   _tag: "Ring",
   innerRadius: options.innerRadius ?? 0.5,
@@ -846,8 +887,10 @@ var group2 = (options) => ({
   interactive: options.interactive ?? false,
   children: options.children ?? [],
   body: options.body ?? null,
-  follow: options.follow ?? null
+  follow: options.follow ?? null,
+  detail: options.detail ?? null
 });
+var detailed2 = (options) => ({ distances: options.distances, hysteresis: options.hysteresis ?? 0 });
 var headSpace2 = () => ({ _tag: "Head" });
 var jointSpace2 = (hand, joint) => ({
   _tag: "Joint",
@@ -1032,7 +1075,9 @@ var borrowed2 = (options) => ({
   transition: options.transition ?? instantTransition,
   behaviour: options.behaviour ?? null,
   interactive: options.interactive ?? false,
-  body: options.body ?? null
+  body: options.body ?? null,
+  castShadow: options.castShadow ?? false,
+  receiveShadow: options.receiveShadow ?? false
 });
 var noColorRanges = [];
 var label2 = (options) => ({
@@ -1124,7 +1169,8 @@ var perspectiveCamera2 = (options = {}) => ({
   position: options.position ?? [0, 0, 5],
   lookAt: options.lookAt ?? origin,
   damping: options.damping ?? 0,
-  autoRotate: options.autoRotate ?? 0
+  autoRotate: options.autoRotate ?? 0,
+  shake: options.shake ?? null
 });
 var orthographicCamera2 = (options = {}) => ({
   _tag: "Orthographic",
@@ -1134,7 +1180,20 @@ var orthographicCamera2 = (options = {}) => ({
   position: options.position ?? [0, 0, 5],
   lookAt: options.lookAt ?? origin,
   damping: options.damping ?? 0,
-  autoRotate: options.autoRotate ?? 0
+  autoRotate: options.autoRotate ?? 0,
+  shake: options.shake ?? null
+});
+var cameraShake2 = (options = {}) => ({
+  intensity: options.intensity ?? 1,
+  decay: options.decay ?? false,
+  decayRate: options.decayRate ?? 0.65,
+  maxYaw: options.maxYaw ?? 0.1,
+  maxPitch: options.maxPitch ?? 0.1,
+  maxRoll: options.maxRoll ?? 0.1,
+  yawFrequency: options.yawFrequency ?? 0.1,
+  pitchFrequency: options.pitchFrequency ?? 0.1,
+  rollFrequency: options.rollFrequency ?? 0.1,
+  trigger: options.trigger ?? 0
 });
 var noEffects = [];
 var bloom2 = (options = {}) => ({
@@ -1419,6 +1478,8 @@ var changedFields2 = (prev, next) => {
         fields.push("body");
       if (!xrSpaceEquals(prev.follow, next.follow))
         fields.push("follow");
+      if (!detailEquals(prev.detail, next.detail))
+        fields.push("detail");
       return fields;
     }
     case "Mesh": {
@@ -1498,6 +1559,10 @@ var changedFields2 = (prev, next) => {
         fields.push("interactive");
       if (!bodyEquals2(prev.body, next.body))
         fields.push("body");
+      if (prev.castShadow !== next.castShadow)
+        fields.push("castShadow");
+      if (prev.receiveShadow !== next.receiveShadow)
+        fields.push("receiveShadow");
       return fields;
     }
     case "Label": {
@@ -1744,14 +1809,18 @@ import {
   CircleGeometry,
   ConeGeometry,
   CylinderGeometry,
+  Euler as Euler2,
   ExtrudeGeometry,
   Material,
   PlaneGeometry,
+  Quaternion as Quaternion2,
   RingGeometry,
+  Shape,
   ShapeGeometry as ShapeGeometry3,
   SphereGeometry,
   TorusGeometry
 } from "three";
+import { toCreasedNormals } from "three/addons/utils/BufferGeometryUtils.js";
 
 // src/kernel/textLayout.ts
 import { Vector2 } from "three";
@@ -1846,6 +1915,45 @@ var buildText = (shape, font) => {
     geometry.center();
   return geometry;
 };
+var roundedEpsilon = 0.00001;
+var buildRoundedBox = (shape) => {
+  const { width, height, depth, radius } = shape;
+  const outline = new Shape;
+  const inset = radius - roundedEpsilon;
+  const e = roundedEpsilon;
+  outline.absarc(e, e, e, -Math.PI / 2, -Math.PI, true);
+  outline.absarc(e, height - inset * 2, e, Math.PI, Math.PI / 2, true);
+  outline.absarc(width - inset * 2, height - inset * 2, e, Math.PI / 2, 0, true);
+  outline.absarc(width - inset * 2, e, e, 0, -Math.PI / 2, true);
+  const geometry = new ExtrudeGeometry(outline, {
+    depth: depth - radius * 2,
+    bevelEnabled: true,
+    bevelSegments: shape.bevelSegments * 2,
+    steps: shape.steps,
+    bevelSize: radius - roundedEpsilon,
+    bevelThickness: radius,
+    curveSegments: shape.smoothness
+  });
+  geometry.center();
+  return toCreasedNormals(geometry, shape.creaseAngle);
+};
+var backdropTurn = new Quaternion2().setFromEuler(new Euler2(-Math.PI / 2, 0, Math.PI / 2));
+var easeInExpo = (x) => x === 0 ? 0 : 2 ** (10 * x - 10);
+var buildBackdrop = (shape) => {
+  const { segments, floor } = shape;
+  const geometry = new PlaneGeometry(1, 1, segments, segments);
+  const position = geometry.getAttribute("position");
+  const offset = 0.5;
+  let vertex = 0;
+  for (let x = 0;x < segments + 1; x++) {
+    for (let y = 0;y < segments + 1; y++) {
+      position.setXYZ(vertex++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
+    }
+  }
+  position.needsUpdate = true;
+  geometry.computeVertexNormals();
+  return geometry.applyQuaternion(backdropTurn);
+};
 var buildShape = (shape, fontOf) => {
   switch (shape._tag) {
     case "Text":
@@ -1868,6 +1976,10 @@ var buildShape = (shape, fontOf) => {
       return new RingGeometry(shape.innerRadius, shape.outerRadius, shape.thetaSegments);
     case "Circle":
       return new CircleGeometry(shape.radius, shape.segments);
+    case "RoundedBox":
+      return buildRoundedBox(shape);
+    case "Backdrop":
+      return buildBackdrop(shape);
   }
 };
 var notLent = new BufferGeometry;
@@ -2586,9 +2698,9 @@ var placeOverlays2 = (graph) => {
 };
 // src/kernel/physics.ts
 import {
-  Euler as Euler2,
+  Euler as Euler3,
   Matrix4 as Matrix43,
-  Quaternion as Quaternion2,
+  Quaternion as Quaternion3,
   Vector3 as Vector35
 } from "three";
 var interactionBits2 = (groups) => {
@@ -2666,8 +2778,8 @@ var colliderFor2 = (geometry, collider, scale) => {
   const { shape, offset } = shapeFor(geometry, collider, scale);
   return { shape, translation: toVec32(offset), rotation: [0, 0, 0, 1] };
 };
-var turn3 = new Quaternion2;
-var turnEuler = new Euler2;
+var turn3 = new Quaternion3;
+var turnEuler = new Euler3;
 var largest = (a, b) => Math.max(Math.abs(a), Math.abs(b));
 var scaledShape = (shape, scale) => {
   switch (shape._tag) {
@@ -2704,11 +2816,11 @@ function describedCollider(collider, scale) {
 var relative = new Matrix43;
 var bodyInverse = new Matrix43;
 var where = new Vector35;
-var turn = new Quaternion2;
+var turn = new Quaternion3;
 var relativeScale = new Vector35;
 var worldScale = new Vector35;
 var worldPosition = new Vector35;
-var worldTurn = new Quaternion2;
+var worldTurn = new Quaternion3;
 var isMesh = (object) => ("isMesh" in object) && object.isMesh === true;
 function placedCollider2(child, collider, body) {
   child.matrixWorld.decompose(worldPosition, worldTurn, worldScale);
@@ -2995,6 +3107,12 @@ var pathOf = (graph, object) => {
   }
   return path;
 };
+var shown = (object) => {
+  for (let at = object;at !== null; at = at.parent)
+    if (!at.visible)
+      return false;
+  return true;
+};
 var createPicker2 = (graph) => {
   const raycaster = new Raycaster2;
   const ndc = new Vector23;
@@ -3030,6 +3148,8 @@ var createPicker2 = (graph) => {
   const rayDirection = new Vector36;
   const nearestHit = (view) => {
     for (const intersection of raycaster.intersectObjects(graph.interactiveObjects(), true)) {
+      if (!shown(intersection.object))
+        continue;
       const owner = keyedOwner(graph, intersection.object);
       const key = owner === undefined ? undefined : graph.keyOf(owner);
       if (owner !== undefined && key !== undefined) {
@@ -3569,24 +3689,26 @@ import {
   OrthographicCamera as OrthographicCamera4,
   PerspectiveCamera as PerspectiveCamera3,
   PointLight,
+  Quaternion as Quaternion6,
   Scene,
   SpotLight,
   Vector3 as Vector39
 } from "three";
+import { clone as cloneSkinned } from "three/addons/utils/SkeletonUtils.js";
 
 // src/kernel/bodies.ts
-import { Euler as Euler4, Quaternion as Quaternion4 } from "three";
+import { Euler as Euler5, Quaternion as Quaternion5 } from "three";
 
 // src/kernel/bodySources.ts
-import { Euler as Euler3, Matrix4 as Matrix44, Quaternion as Quaternion3, Vector3 as Vector37 } from "three";
+import { Euler as Euler4, Matrix4 as Matrix44, Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
 var bodyId = (key, instance) => instance === null ? key : `${key}\x00${instance}`;
 var position3 = new Vector37;
-var quaternion2 = new Quaternion3;
+var quaternion2 = new Quaternion4;
 var scale2 = new Vector37;
 var matrix2 = new Matrix44;
 var local = new Matrix44;
 var inverse = new Matrix44;
-var euler2 = new Euler3;
+var euler2 = new Euler4;
 var ownScale = new Vector37;
 var toPose = (from) => {
   from.decompose(position3, quaternion2, scale2);
@@ -3600,7 +3722,7 @@ var worldScale2 = (from) => {
   return ownScale;
 };
 var scaleText = (from) => worldScale2(from).toArray().map((value) => (Math.round(value * 1e5) / 1e5 || 0).toString()).join(",");
-var rotationText = (rotation) => rotation._tag === "Fixed" ? rotation.euler.join(",") : "spin";
+var rotationText = (rotation) => rotation._tag === "Fixed" ? rotation.euler.join(",") : rotation._tag;
 var placeObject = (object, pose) => {
   object.matrixWorld.decompose(position3, quaternion2, scale2);
   matrix2.compose(position3.fromArray(pose.position), quaternion2.fromArray(pose.quaternion), scale2);
@@ -3717,9 +3839,9 @@ var createPhysicsDebug = (scene) => {
 };
 
 // src/kernel/bodies.ts
-var from = new Quaternion4;
-var to = new Quaternion4;
-var euler3 = new Euler4;
+var from = new Quaternion5;
+var to = new Quaternion5;
+var euler3 = new Euler5;
 var quatOf = (angles) => {
   from.setFromEuler(euler3.fromArray([...angles]));
   return [from.x, from.y, from.z, from.w];
@@ -4075,9 +4197,58 @@ var createCameraMotion = () => {
         return;
       position4.setFromSpherical(goal.spherical).add(goal.target);
       return [position4.x, position4.y, position4.z];
+    },
+    target: () => current.target
+  };
+};
+
+// src/kernel/cameraShake.ts
+import { SimplexNoise } from "three/addons/math/SimplexNoise.js";
+var seeded = (seed) => {
+  let state = seed >>> 0;
+  return {
+    random: () => {
+      state = state + 1831565813 >>> 0;
+      let t = state;
+      t = Math.imul(t ^ t >>> 15, t | 1);
+      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
     }
   };
 };
+var yawNoise = new SimplexNoise(seeded(1));
+var pitchNoise = new SimplexNoise(seeded(2));
+var rollNoise = new SimplexNoise(seeded(3));
+var shakeIntensity = (shake, seconds) => {
+  const decayed = shake.decay ? shake.intensity - shake.decayRate * seconds : shake.intensity;
+  return Math.min(1, Math.max(0, decayed));
+};
+var createCameraShaker = () => {
+  let current = null;
+  let since = 0;
+  let offset = false;
+  return {
+    describe: (shake, now) => {
+      if (shake !== null && (current === null || !cameraShakeEquals(current, shake)))
+        since = now;
+      current = shake;
+    },
+    apply: (camera, target, now, animating) => {
+      const shake = current;
+      const strength = shake === null || !animating ? 0 : shakeIntensity(shake, Math.max(0, now - since)) ** 2;
+      if (shake === null || strength === 0) {
+        if (offset)
+          camera.lookAt(target);
+        offset = false;
+        return;
+      }
+      camera.lookAt(target);
+      camera.rotation.set(camera.rotation.x + shake.maxPitch * strength * pitchNoise.noise(now * shake.pitchFrequency, 1), camera.rotation.y + shake.maxYaw * strength * yawNoise.noise(now * shake.yawFrequency, 1), camera.rotation.z + shake.maxRoll * strength * rollNoise.noise(now * shake.rollFrequency, 1));
+      offset = true;
+    },
+    shaking: (now) => offset || current !== null && shakeIntensity(current, Math.max(0, now - since)) > 0
+  };
+};
 
 // src/kernel/sceneGraph.ts
 var isPlaced = (entry) => entry._tag === "Group" || entry._tag === "Mesh" || entry._tag === "Instances" || entry._tag === "Borrowed" || entry._tag === "Label";
@@ -4165,6 +4336,7 @@ var applyLens = (camera, description) => {
 };
 var noInstances = [];
 var emptyScene = scene2({});
+var cloneLoan = (lent) => lent.getObjectByProperty("isSkinnedMesh", true) === undefined ? lent.clone() : cloneSkinned(lent);
 var createSceneGraph2 = (options = {}) => {
   const store = options.store ?? createResourceStore2();
   const ownsStore = options.store === undefined;
@@ -4202,7 +4374,23 @@ var createSceneGraph2 = (options = {}) => {
     hostedSky = undefined;
   }
   const cameraMotion = createCameraMotion();
+  const cameraShaker = createCameraShaker();
   const viewMotions = new Map;
+  const viewShakers = new Map;
+  const shaking = () => {
+    if (cameraShaker.shaking(elapsed))
+      return true;
+    for (const shaker of viewShakers.values())
+      if (shaker.shaking(elapsed))
+        return true;
+    return false;
+  };
+  const shakeView = (view) => {
+    const motion = viewMotions.get(view.key);
+    if (motion === undefined)
+      return;
+    viewShakers.get(view.key)?.apply(view.camera, motion.target(), elapsed, animating);
+  };
   const viewsMoving = () => {
     for (const motion of viewMotions.values())
       if (motion.moving())
@@ -4233,6 +4421,9 @@ var createSceneGraph2 = (options = {}) => {
     applyLens(hostedCamera, description.camera);
     const motion = viewMotions.get(description.key) ?? createCameraMotion();
     viewMotions.set(description.key, motion);
+    const shaker = viewShakers.get(description.key) ?? createCameraShaker();
+    viewShakers.set(description.key, shaker);
+    shaker.describe(description.camera.shake, elapsed);
     motion.aim(hostedCamera, description.camera, elapsed, hostedCamera !== previous || !animating);
     const area = areaOf(description.rect);
     fitCamera(hostedCamera, area);
@@ -4246,10 +4437,20 @@ var createSceneGraph2 = (options = {}) => {
       if (!described.some((description) => description.key === key))
         viewMotions.delete(key);
     }
+    for (const key of viewShakers.keys()) {
+      if (!described.some((description) => description.key === key))
+        viewShakers.delete(key);
+    }
   };
   const entries = new Map;
   const keys = new WeakMap;
   const spinning = new Set;
+  const facing = new Set;
+  const cameraTurn = new Quaternion6;
+  const parentTurn = new Quaternion6;
+  const detailing = new Set;
+  const cameraPlace = new Vector39;
+  const groupPlace = new Vector39;
   const playing = new Set;
   const registry = {
     ...builtinBehaviours2,
@@ -4307,6 +4508,77 @@ var createSceneGraph2 = (options = {}) => {
       spinning.add(entry);
     else
       spinning.delete(entry);
+    if (node.rotation._tag === "Billboard")
+      facing.add(entry);
+    else
+      facing.delete(entry);
+  };
+  const faceCamera = (entry) => {
+    if (!isPlaced(entry) || entry.node.rotation._tag !== "Billboard")
+      return;
+    const { lockX, lockY, lockZ } = entry.node.rotation;
+    const object = entry.object;
+    parentTurn.identity();
+    object.parent?.getWorldQuaternion(parentTurn);
+    object.quaternion.copy(cameraTurn).premultiply(parentTurn.invert());
+    if (lockX)
+      object.rotation.x = 0;
+    if (lockY)
+      object.rotation.y = 0;
+    if (lockZ)
+      object.rotation.z = 0;
+  };
+  const childObject = (node, index) => {
+    const child = node.children[index];
+    return child === undefined ? undefined : entries.get(child.key)?.object;
+  };
+  const showLevel = (entry) => {
+    if (entry._tag !== "Group")
+      return;
+    const { node } = entry;
+    const { detail } = node;
+    if (detail === null)
+      return;
+    const { distances, hysteresis } = detail;
+    const count = node.children.length;
+    if (count < 2)
+      return;
+    entry.object.getWorldPosition(groupPlace);
+    const distance = cameraPlace.distanceTo(groupPlace) / camera.zoom;
+    const first = childObject(node, 0);
+    if (first !== undefined)
+      first.visible = true;
+    let level = 1;
+    for (;level < count; level++) {
+      const object = childObject(node, level);
+      const from = distances[level] ?? Number.NaN;
+      const reach = object?.visible === true ? from - from * hysteresis : from;
+      if (!(distance >= reach))
+        break;
+      const previous = childObject(node, level - 1);
+      if (previous !== undefined)
+        previous.visible = false;
+      if (object !== undefined)
+        object.visible = true;
+    }
+    for (;level < count; level++) {
+      const object = childObject(node, level);
+      if (object !== undefined)
+        object.visible = false;
+    }
+  };
+  const trackDetail = (entry, node) => {
+    if (node.detail !== null) {
+      detailing.add(entry);
+      return;
+    }
+    if (detailing.delete(entry)) {
+      for (let index = 0;index < node.children.length; index++) {
+        const object = childObject(node, index);
+        if (object !== undefined)
+          object.visible = true;
+      }
+    }
   };
   const build = (node) => {
     switch (node._tag) {
@@ -4319,6 +4591,7 @@ var createSceneGraph2 = (options = {}) => {
         trackInteractive(entry.object, node.interactive);
         if (node.follow !== null)
           entry.object.visible = false;
+        trackDetail(entry, node);
         return entry;
       }
       case "Mesh": {
@@ -4363,7 +4636,7 @@ var createSceneGraph2 = (options = {}) => {
         return entry;
       }
       case "Label": {
-        const hosted = options.kit?.drawsLabels === false ? undefined : options.labels?.create(node, invalidate);
+        const hosted = options.kit?.shading === "tsl" ? options.labels?.createTsl?.(node, invalidate) : options.labels?.create(node, invalidate);
         const material = node.material === null ? undefined : store.acquireMaterial(node.material);
         hosted?.setMaterial(material);
         const entry = { _tag: "Label", node, object: new Group, hosted, material };
@@ -4418,11 +4691,22 @@ var createSceneGraph2 = (options = {}) => {
     const lent = store.lent(entry.node.id);
     if (lent === undefined)
       return;
-    const shown = lent.parent === null ? lent : lent.clone();
+    const shown = lent.parent === null ? lent : cloneLoan(lent);
     entry.object.add(shown);
     entry.shown = shown;
+    castShadows(shown, entry.node);
     startPlayer(entry);
   };
+  const castShadows = (shown, node) => {
+    if (!node.castShadow && !node.receiveShadow)
+      return;
+    shown.traverse((part) => {
+      if (part instanceof Mesh && node.castShadow)
+        part.castShadow = true;
+      if (part instanceof Mesh && node.receiveShadow)
+        part.receiveShadow = true;
+    });
+  };
   const stopPlayer = (entry) => {
     if (entry.player === undefined)
       return;
@@ -4556,6 +4840,8 @@ var createSceneGraph2 = (options = {}) => {
     if (isPlaced(entry))
       behaving.delete(entry);
     spinning.delete(entry);
+    facing.delete(entry);
+    detailing.delete(entry);
     moving.delete(entry);
     reparented.delete(entry);
     trackInteractive(entry.object, false);
@@ -4685,6 +4971,10 @@ var createSceneGraph2 = (options = {}) => {
         showLoan(entry);
       else if (fields.includes("animation"))
         startPlayer(entry);
+      if (fields.includes("castShadow") || fields.includes("receiveShadow")) {
+        if (entry.shown !== undefined)
+          castShadows(entry.shown, next);
+      }
       return;
     }
     if (entry._tag === "Label" && next._tag === "Label") {
@@ -4713,6 +5003,8 @@ var createSceneGraph2 = (options = {}) => {
         trackBehaviour(entry, next);
       if (fields.includes("interactive"))
         trackInteractive(entry.object, next.interactive);
+      if (fields.includes("detail"))
+        trackDetail(entry, next);
       if (fields.includes("follow")) {
         entry.object.visible = next.follow === null;
         if (next.follow === null) {
@@ -4785,6 +5077,7 @@ var createSceneGraph2 = (options = {}) => {
         camera = cameraFor(camera, op.camera);
         applyLens(camera, op.camera);
         cameraMotion.aim(camera, op.camera, elapsed, camera !== previous || !animating);
+        cameraShaker.describe(op.camera.shake, elapsed);
         fitCamera(camera, viewport);
         return;
       }
@@ -4994,7 +5287,17 @@ var createSceneGraph2 = (options = {}) => {
     cameraMotion.step(camera, elapsed);
     for (const view of views)
       viewMotions.get(view.key)?.step(view.camera, elapsed);
+    cameraShaker.apply(camera, cameraMotion.target(), elapsed, animating);
+    views.forEach(shakeView);
     bodyHost.tick(elapsed, animating);
+    if (facing.size > 0) {
+      camera.getWorldQuaternion(cameraTurn);
+      facing.forEach(faceCamera);
+    }
+    if (detailing.size > 0) {
+      camera.getWorldPosition(cameraPlace);
+      detailing.forEach(showLevel);
+    }
   };
   const finishTween = (tween, entry) => {
     applyTween2(entry.object, tween, Number.POSITIVE_INFINITY);
@@ -5080,7 +5383,7 @@ var createSceneGraph2 = (options = {}) => {
     tick,
     elapsedSeconds: () => elapsed,
     renderSettings: () => settings,
-    needsFrame: () => dirty || textureList.some((texture) => texture.graph.needsFrame()) || animating && (spinning.size > 0 || moving.size > 0 || behaving.size > 0 || clipsRunning() || cameraMotion.moving() || viewsMoving() || bodyHost.needsFrame()),
+    needsFrame: () => dirty || textureList.some((texture) => texture.graph.needsFrame()) || animating && (spinning.size > 0 || moving.size > 0 || behaving.size > 0 || clipsRunning() || cameraMotion.moving() || viewsMoving() || shaking() || bodyHost.needsFrame()),
     drawn: () => {
       dirty = false;
     },
@@ -5112,7 +5415,7 @@ var createSceneGraph2 = (options = {}) => {
     dispose
   };
 };
-export { handJoints2, clipTime2, clipRunning2, createPose2, resetPose2, float2, builtinBehaviours2, spinAngle2, writeRotation2, buildMaterial2, updateMaterial2, vec3Equals2, rotationEquals2, shapeEquals2, geometryRefEquals2, instanceEquals2, instancesEqual2, behaviourEquals2, animationEquals2, transitionEquals2, materialRefEquals2, cameraEquals2, renderSettingsEquals2, effectsEqual2, viewsEqual2, resourcesEqual2, overlaysEqual2, environmentEquals2, skyEquals2, contactShadowsEquals2, bodyEquals2, physicsEquals2, xrEquals2, capacityFor2, createPerformanceMonitor2, easeProgress2, startTween2, applyTween2, fixed2, spin2, box2, sphere2, plane2, cylinder2, torus2, cone2, capsule2, ring2, circle2, text2, instant2, ease2, basic2, lambert2, phong2, standard2, physical2, normalMaterial2, shadowMaterial2, grid2, shaderGrid2, sharedGeometry2, lentGeometry2, sharedMaterial2, group2, headSpace2, jointSpace2, controllerSpace2, anchorSpace2, planeSpace2, meshSpace2, xrMeshGeometryId2, xrMesh2, xrAnchor2, mesh2, body2, interactionGroups2, cuboidCollider2, ballCollider2, capsuleCollider2, cylinderCollider2, coneCollider2, velocityMotor2, positionMotor2, physics2, bodyRef2, joint2, fixedJoint2, sphericalJoint2, revoluteJoint2, prismaticJoint2, ropeJoint2, springJoint2, glide2, xr2, instance2, instances2, behave2, play2, borrowed2, label2, colorRange2, ambientLight2, directionalLight2, pointLight2, spotLight2, hemisphereLight2, perspectiveCamera2, orthographicCamera2, bloom2, vignette2, film2, renderSettings2, view2, renderTexture2, environment2, sunPositionFromAngles2, sky2, contactShadows2, overlay2, scene2, emptyIndex2, indexScene2, changedFields2, diff2, createResourceStore2, createSceneClock2, createManualFrames2, createGatedFrames2, createFramePacer2, defaultOrbit2, orbitOptions2, rotateCamera2, dollyCamera2, panCamera2, dollyCameraToward2, orbit2, orbitKey2, autoRotated2, fitCamera2, clipCamera2, placeOverlays2, interactionBits2, colliderFor2, describedColliders2, collidersFor2, colliderSignature2, locomote2, teleport2, glided2, createXrTracker2, environmentPresets2, environmentPresetUrl2, stagePresets2, stage2, centerOffset2, stageBounds2, noModifiers2, pointOnPlane2, createPicker2, createPointerTracker2, createSceneLoop2, recordingRendererFactory2, createSceneGraph2 };
+export { handJoints2, clipTime2, clipRunning2, createPose2, resetPose2, float2, builtinBehaviours2, spinAngle2, writeRotation2, buildMaterial2, updateMaterial2, vec3Equals2, rotationEquals2, shapeEquals2, geometryRefEquals2, instanceEquals2, instancesEqual2, behaviourEquals2, animationEquals2, transitionEquals2, materialRefEquals2, cameraEquals2, renderSettingsEquals2, effectsEqual2, viewsEqual2, resourcesEqual2, overlaysEqual2, environmentEquals2, skyEquals2, contactShadowsEquals2, bodyEquals2, physicsEquals2, xrEquals2, capacityFor2, createPerformanceMonitor2, easeProgress2, startTween2, applyTween2, fixed2, spin2, billboard2, box2, sphere2, plane2, cylinder2, torus2, cone2, capsule2, roundedBox2, backdrop2, ring2, circle2, text2, instant2, ease2, basic2, lambert2, phong2, standard2, physical2, normalMaterial2, shadowMaterial2, grid2, shaderGrid2, sharedGeometry2, lentGeometry2, sharedMaterial2, group2, detailed2, headSpace2, jointSpace2, controllerSpace2, anchorSpace2, planeSpace2, meshSpace2, xrMeshGeometryId2, xrMesh2, xrAnchor2, mesh2, body2, interactionGroups2, cuboidCollider2, ballCollider2, capsuleCollider2, cylinderCollider2, coneCollider2, velocityMotor2, positionMotor2, physics2, bodyRef2, joint2, fixedJoint2, sphericalJoint2, revoluteJoint2, prismaticJoint2, ropeJoint2, springJoint2, glide2, xr2, instance2, instances2, behave2, play2, borrowed2, label2, colorRange2, ambientLight2, directionalLight2, pointLight2, spotLight2, hemisphereLight2, perspectiveCamera2, orthographicCamera2, cameraShake2, bloom2, vignette2, film2, renderSettings2, view2, renderTexture2, environment2, sunPositionFromAngles2, sky2, contactShadows2, overlay2, scene2, emptyIndex2, indexScene2, changedFields2, diff2, createResourceStore2, createSceneClock2, createManualFrames2, createGatedFrames2, createFramePacer2, defaultOrbit2, orbitOptions2, rotateCamera2, dollyCamera2, panCamera2, dollyCameraToward2, orbit2, orbitKey2, autoRotated2, fitCamera2, clipCamera2, placeOverlays2, interactionBits2, colliderFor2, describedColliders2, collidersFor2, colliderSignature2, locomote2, teleport2, glided2, createXrTracker2, environmentPresets2, environmentPresetUrl2, stagePresets2, stage2, centerOffset2, stageBounds2, noModifiers2, pointOnPlane2, createPicker2, createPointerTracker2, createSceneLoop2, recordingRendererFactory2, createSceneGraph2 };
 
-//# debugId=45D70156AEB5E57864756E2164756E21
-//# sourceMappingURL=index-ef8pbv9g.js.map
+//# debugId=DD15A712F87B1C4C64756E2164756E21
+//# sourceMappingURL=index-8cf8t6by.js.map