melonjs 20.7.0 → 20.9.0

package/skills/melonjs-3d/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: melonjs-3d
-description: "Use this skill for anything 3D or 2.5D in melonJS — Camera3d, Mesh, InstancedMesh, Sprite3d billboards, Light3d, ground shadows, glTF/GLB scenes, and depth sorting. Covers the Y-down/+Z-forward convention that is the inverse of OpenGL, the cameraClass opt-in, clip planes, and what does not work on the Canvas fallback. Triggers on: Camera3d, Mesh, InstancedMesh, Sprite3d, Light3d, billboard, glTF, glb, 3D, 2.5D, depth, cameraClass, fov, setClipPlanes, setFog, fog, distance fog, height fog, heightFalloff, transparent, transparency, alpha, blendMode, fade, castGroundShadow, lit."
+description: "Use this skill for anything 3D or 2.5D in melonJS — Camera3d, Mesh, InstancedMesh, Sprite3d billboards, Light3d, ground shadows, glTF/GLB scenes, and depth sorting. Covers the Y-down/+Z-forward convention that is the inverse of OpenGL, the cameraClass opt-in, clip planes, and what does not work on the Canvas fallback. Triggers on: Camera3d, Mesh, InstancedMesh, Sprite3d, Trail3d, ribbon, exhaust trail, Light3d, billboard, glTF, glb, 3D, 2.5D, depth, cameraClass, fov, setClipPlanes, setFog, fog, distance fog, height fog, heightFalloff, transparent, transparency, alpha, blendMode, fade, castGroundShadow, lit, setBasis, getBasis, lookAt, up vector, gimbal, slerp, great circle, turn a direction."
 license: MIT
 ---
 
@@ -20,11 +20,15 @@ This is the single most important thing on this page.
 | vertical | **Y-down** — higher `y` is *lower* on screen | Y-up |
 | depth | **+Z forward** — higher `z` is *farther* away | −Z forward |
 
-Rotations are extrinsic XYZ, and `Camera3d` exposes all three: `camera.pitch`
+`Camera3d` exposes three rotation angles: `camera.pitch`
 (X, look up/down), `camera.yaw` (Y, look left/right) and `camera.roll` (Z, bank
 the horizon). The view is `R(yaw) ∘ R(pitch) ∘ R(roll)` inverted, and the frustum
 planes come off that same matrix — so culling follows a banked view.
 
+The basis those angles produce is **readable and writable**: `getBasis(right,
+up, forward)` reads it, `setBasis(right, up, forward)` poses the camera from
+one.
+
 `camera.rotate()` is NOT the way to bank a 3D camera. It writes the inherited
 `currentTransform`, which a 3D view never reads, so the call is silently inert.
 Set `roll`. (On a `Camera2d` it is the other way round: roll IS that transform's
@@ -67,6 +71,86 @@ That flips the world's sort to `"depth"`, switches the broadphase to a 3D index,
 and renders sprites and meshes with perspective projection. `Camera3d` extends
 `Camera2d`, so follow, fade, shake and post effects all still work.
 
+### Keep the camera, do not fish it back out
+
+`app.viewport` is the **active stage's** default camera, so it is typed
+`Camera2d`: a stage overrides the application's `cameraClass`, and the
+built-in loading screen does exactly that. Reading your `Camera3d` back out of
+it therefore needs a cast, and a cast that is wrong while the loader is up:
+
+```js
+const camera = app.viewport as Camera3d;   // works, until it does not
+```
+
+Own it instead. Pass the camera in and keep the typed reference, and nothing
+downstream ever narrows:
+
+```js
+class GameStage extends Stage {
+    readonly camera: Camera3d;
+
+    constructor(app) {
+        const camera = new Camera3d(0, 0, app.renderer.width, app.renderer.height);
+        super({ cameras: [camera] });
+        this.camera = camera;
+    }
+}
+```
+
+A freshly built camera is named `"default"`, and a stage registers its
+`cameras` by name, so this IS the stage's default camera: `app.viewport`
+returns the same instance.
+
+### The two patterns differ in LIFETIME, and that decides which you want
+
+This is the part that bites. `cameraClass` builds a **fresh camera for each
+stage**, which the engine does deliberately so "Camera3d state shouldn't
+bleed across stages". An owned camera passed through `super({ cameras })` is
+built once and lives as long as the stage object, which for a stage you
+register with `state.set()` means as long as the application.
+
+So anything you attach to the camera now outlives the visit:
+
+```js
+// in onResetEvent — runs EVERY time the stage is entered
+app.viewport.addPostEffect(bloom);
+```
+
+With `cameraClass` that lands on a fresh camera each time and is harmless.
+With an owned camera it stacks: a second bloom on the second visit, a third
+on the third. The symptom is text and edges appearing to double or smear,
+because the scene is being post-processed once per accumulated effect.
+
+Note that `removePostEffect` DESTROYS the effect rather than detaching it, so
+"just remove it on the way out" is not a free undo.
+
+**Choose on lifetime, not on typing:**
+
+| your effects / camera state are | use |
+|---|---|
+| set up per stage visit, in `onResetEvent` | `cameraClass` — fresh camera per stage |
+| set up once, in the stage constructor | an owned camera in `super({ cameras })` |
+
+If you want the typed reference but your setup is per-visit, keep
+`cameraClass` and narrow once on reset:
+
+```js
+override onResetEvent(app) {
+    const viewport = app.viewport;
+    if (!(viewport instanceof Camera3d)) {
+        throw new Error("this stage needs a Camera3d");
+    }
+    this.camera = viewport;   // typed, checked, and still fresh per visit
+}
+```
+
+That is what the Earth Defender example does, and why: it attaches post
+effects on every reset and never removes them.
+
+Narrowing beats asserting wherever you read the shared slot: the language
+verifies `instanceof`, and fails loudly if the application was never given a
+`cameraClass`, where a cast fails silently at the first 3D call.
+
 Per-stage opt-in also works, which is useful when the loading screen is 2D:
 
 ```js
@@ -87,13 +171,121 @@ class GameStage extends Stage {
   Objects beyond the far plane clip or project with bad w-divides; a `near` that
   is too small wastes depth precision and distant props z-fight. Use
   `camera.setClipPlanes(near, far)`.
-- **`camera.pos.set(x, y)` is 2-argument and zeroes z.** Use `camera.depth` —
-  the documented z accessor — or assign `pos.x`/`pos.y` individually.
+- **`camera.pos.set(x, y)` is 2-argument and zeroes z.** Use
+  `camera.setPosition(x, y, z)`, which leaves the depth untouched when `z` is
+  omitted; `camera.depth` is the z accessor if you only want that.
+- **`lookAt(target)` solves pitch and yaw only**, so on its own it cannot
+  express "up is this direction" and it leaves `roll` alone. Pass an up to
+  bank the horizon too: `camera.lookAt(target, up)`, where `up` is what should
+  appear UP ON SCREEN. This engine renders Y-down, so a level horizon is
+  `(0, -1, 0)`. There is deliberately no default, because giving one would
+  silently level every camera that had banked its own horizon.
+- **When the game already has all three axes, hand them over**:
+  `camera.setBasis(right, up, forward)`, the writable counterpart of
+  `getBasis`. The case that needs it is a view over a curved surface, where up
+  is the surface normal and differs at every point, so no pitch and yaw pair
+  expresses it and integrating towards one drifts and gimbals at the poles.
+  `setBasis` absorbs a triple that has drifted off orthonormal rather than
+  leaving the camera holding something that is not a rotation, and it does not
+  care what the axes are scaled to: a direction is a direction, so anything
+  from a denormal to 1e300 resolves the same way. Note its `up` is the camera's
+  local +Y column, which under Y-down points DOWN the screen: the opposite
+  sense to `lookAt`'s, and one negation apart.
 - **`worldToLocal` does not project.** It is a 2D camera's offset subtraction.
   To pin a label or marker to a point in the scene use
   `camera.worldToScreen(x, y, z)`, which applies the projection and returns
   `null` behind the camera. See `melonjs-camera-and-drawing`.
 
+## Where an up vector earns its keep
+
+Three cases. In the first two, `lookAt(target)` on its own is already right and
+an up would be noise. The third is the one it exists for.
+
+```js
+// 1. ordinary third-person: world up never changes, so say nothing
+camera.setPosition(x, y, z).lookAt(player);
+
+// 2. a deliberate dutch angle: this is a ROLL, not an up vector
+camera.lookAt(player);
+camera.roll = Math.PI / 32;
+
+// 3. a view over a curved surface: up is the surface normal, and it is
+//    different at every point on the globe. No pitch and yaw pair expresses
+//    it, and integrating towards it drifts and gimbals over the poles.
+const up = player.pos.clone().sub(planetCentre).normalize();  // surface normal
+camera.setPosition(eye.x, eye.y, eye.z).lookAt(player, up.negate());
+```
+
+Note the `negate()` in case 3. The surface normal points away from the planet,
+which is the direction the player's head points, and `up` wants what should
+appear UP ON SCREEN. This engine renders Y-down, so `(0, -1, 0)` is a level
+horizon and a world-space "up" direction has to be handed over in that sense.
+Get it backwards and the view is upside down, which is the single most likely
+mistake with this argument.
+
+If the game already computes all three axes, skip the solve entirely:
+
+```js
+// a surface frame the game is already maintaining
+camera.setBasis(right, up, forward);
+```
+
+`setBasis` takes the camera's OWN columns, where `up` is local +Y and so points
+down the screen: the opposite sense to `lookAt`'s, one negation apart. It also
+absorbs a frame that has drifted off orthonormal, which one integrated over
+thousands of steps will have.
+
+**A camera posed this way and a world rotated into a fixed camera's frame are
+the same picture.** If a game already transforms its world into view space by
+hand, there is nothing to gain by switching; the value of `setBasis` is not
+having to write that transform in the first place.
+
+## Turning a direction: `slerp`, not `lerp`
+
+`lerp` walks the straight line between the two tips, which passes INSIDE the
+sphere. The result points the right way at both ends, lingers near them, rushes
+the middle, and comes out shorter than either input as it crosses the midpoint.
+On a camera swing that reads as a lurch; on a body walking over a globe it dips
+into the surface.
+
+`Vector3d#slerp` turns along the great circle instead, at a constant angular
+rate, and carries the length across linearly, so two unit vectors give back a
+unit vector and nothing needs renormalizing.
+
+```js
+// a turret, a camera, a ship: a facing chasing another facing
+facing.slerp(toTarget, 0.25);
+
+// frame-rate independent, the same shape as math.damp
+facing.slerp(toTarget, 1 - Math.exp((-6 * dt) / 1000));
+```
+
+`ObservableVector3d` has it too and fires its callback ONCE, so
+`renderable.pos.slerp(...)` is one notification rather than three.
+
+**`Vector2d` has the same method**, and it is not a cut-down copy: in 2D the
+whole turn is one signed angle, so there is no sine to divide by and no
+degenerate near-parallel case at all. What it buys a 2D game is the wrap: a
+heading damped as a NUMBER from 170 degrees to -170 degrees sweeps the long 340
+instead of the short 20, and an arc between directions cannot do that.
+
+Two degenerate pairs are handled inside rather than left to the caller, and
+both turn up in ordinary game code:
+
+- **the same direction**, where every path between them is the same path.
+- **opposite directions**, where infinitely many great circles pass through
+  both and none is the shorter way round. The textbook formula divides by a
+  vanishing sine here and hands back `NaN`, which propagates into a position or
+  a matrix and the object disappears. `slerp` picks a stable perpendicular and
+  turns through half a circle instead.
+
+That second case is why a hand-rolled version is a liability rather than a
+shortcut: anything orbiting a planet reaches the antipode of where it started,
+every run.
+
+**`math.damp` for a scalar, `slerp` for a direction.** Same job, different
+space; what `damp` cannot do is keep a vector on the sphere.
+
 ## Depth sorting
 
 Under `Camera3d` the world sorts on `"depth"` **every frame** (recursively), so
@@ -153,6 +345,40 @@ geometry with an opaque one would drag the opaque half into the transparent pass
 
 **`transparent: false`** pins a mesh to the opaque pass however it is faded.
 
+### `depthTest: false` for something with no surface to be occluded on
+
+`transparent` decides the PASS, and the transparent pass turns depth *writing*
+off on its own so overlapping blended draws blend instead of fighting. Whether
+geometry in front of a mesh **hides** it is a separate question, and
+`depthTest` is where you answer it. The default, `true`, is what you want for
+anything genuinely in the scene — a muzzle flash behind a wall should still be
+behind the wall, and this is not a synonym for "additive".
+
+Set it `false` for a mesh standing in for a screen-space effect: an additive
+glow carrying a world position only so it can sort and move with the thing it
+belongs to. A world-space caption billboarded over a prop wants it for the
+same reason, since it has no surface for the prop's own foliage to be in front
+of. Left depth tested, a flat billboard is sliced along a hard straight
+line the moment any geometry is nearer at some pixel. That shows up worst
+around something round — a glow on a rock near a planet's limb gets cut,
+and no offset escapes it, because the near surface bulges further toward the
+camera than any offset you would dare apply.
+
+```js
+const halo = new Sprite3d(0, 0, {
+    image: glowTexture,
+    width: rock.radius * 3, height: rock.radius * 3,
+    billboard: "spherical",
+    blendMode: "additive",
+    transparent: true,     // the blended pass
+    alphaCutoff: 0,        // do not cut the soft falloff
+    depthTest: false,      // and do not let the world slice it
+});
+```
+
+Honoured in the transparent pass on both GPU backends; the Canvas renderer has
+no depth buffer and ignores it.
+
 Blending uses the renderable's existing `blendMode`, so a glow is one property.
 The advanced modes (`"overlay"`, `"difference"`, and the rest that need a
 compositing pass) fall back to `"normal"` here, on both backends:
@@ -174,6 +400,12 @@ const glow = new Mesh(0, 0, {
 Ground shadows ride the same pass — a blob is a decal, and decals are its first
 client rather than a feature of their own.
 
+**`Trail3d`** is the transparent pass's other obvious client: a camera-facing
+ribbon for an exhaust streak, a speed trail or a tyre mark. It is a `Mesh`, so
+it sorts and fogs with everything else here, and like the rest of this tier it
+needs a `Camera3d`. `Trail` is the 2D one and stays flat under a perspective
+camera. See `melonjs-particles-and-trails`.
+
 ## Distance fog
 
 Off until you ask for it, and one call on the camera:
@@ -233,10 +465,14 @@ mesh shaders, so a screen-space overlay stays clean with no work.
 **A custom mesh shader is not fogged unless it asks to be.** Fog is compiled
 into the engine's own mesh programs — `#define FOG` on WebGL, an `enable_fog`
 overridable constant on WebGPU — and a shader you supply is yours: the engine
-binds it as written and never substitutes a fogged variant. So a mesh carrying a
-`ShaderEffect` keeps full contrast while the scene around it recedes. It is safe
-— nothing throws, and the camera's fog is simply not applied — but it is usually
-surprising.
+binds it as written and never substitutes a fogged variant. So a mesh given its
+own `GLShader` keeps full contrast while the scene around it recedes. It is
+safe — nothing throws, and the camera's fog is simply not applied — but it is
+usually surprising.
+
+A hosted `ShaderEffect` is the other case and needs nothing: its body is
+spliced into the engine's own mesh program as a colour hook, and fog is applied
+to the hook's result, so such a mesh fogs like any other.
 
 To opt in, declare the same uniforms and the engine will feed them, because the
 fog values are pushed to any mesh program that declares them rather than only to
@@ -353,7 +589,7 @@ There are four levels, and picking the wrong one is the usual reason a colour
 
 | level | how | use for |
 |---|---|---|
-| whole object | `mesh.tint.setColor(r, g, b)` | flash on hit, team colour, fading one object |
+| whole object | `mesh.setTint("#ff8800")`, or `mesh.tint.setColor(r, g, b)` | flash on hit, team colour, fading one object |
 | per vertex | `settings.vertexColors`, or `mesh.setVertexColor(i, color)` | a gradient *within* one mesh — distance haze, a darker crease |
 | per material | `textureGroups`, from a multi-material OBJ + MTL | a model whose parts differ, in one draw call |
 | per instance | `new InstancedMesh(…, { instanceColors: true })` then `setInstanceColor(i, color)` | a thousand copies that differ |
@@ -475,6 +711,22 @@ Billboarding needs a `Camera3d` drawing the frame; under a 2D camera the quad
 renders fixed-orientation. **Any other string falls through to the spherical
 branch**, so a guessed value like `"upright"` silently gives you spherical.
 
+A billboard takes its **orientation** from the camera, so `rotate()` has no
+effect on one: a card already turned to face the camera has no free rotation
+left to give. Everything that is not an orientation still applies, `scale()`
+and `meshScale` included, so animating the size of a shockwave or a pickup is
+the ordinary call and the cull bounds grow with it:
+
+```js
+const wave = new Sprite3d(x, y, { image: "ring", width: 64, height: 64,
+                                  billboard: "spherical", transparent: true });
+wave.scale(1 + 3 * t);          // grows; `scale` accumulates, so drive it
+                                 // from the authored size, not per frame
+```
+
+For an in-plane rotation, a bolt streak or an exhaust, use `billboard: false`
+and orient the quad yourself.
+
 ## Lighting
 
 `Light3d` takes **one argument — the options object** (it has no `x, y, z`
@@ -543,23 +795,167 @@ the model needs no tangent attribute, and an unmapped mesh is unaffected. This
 is the 3D counterpart of the `Sprite` normal maps in the lighting skill; they
 are separate systems and a `Mesh` uses this one.
 
+### What the ground-shadow tier can and cannot do
+
+Check this table before claiming a setting is unsupported. Every one of these
+is read **every draw**, so all of them can be animated.
+
+| setting | `Mesh` / `Sprite3d` / `GLTFModel` part | `InstancedMesh` |
+|---|---|---|
+| `castGroundShadow` | yes | yes |
+| `shadowGroundY` | yes, the caster's own floor | yes, **one plane** through the SET's origin |
+| `shadowGroundPoint` | yes on a `Mesh` or `Sprite3d`; on a `GLTFModel` part only by setting it after the load, since it is neither a model nor a `level.load` option | **no**, warns and ignores |
+| `shadowGroundNormal` | yes | yes, one plane for the set |
+| `shadowOpacity` | yes | yes |
+| `shadowScale` | yes | yes |
+| `shadowOffset` | yes | yes, one throw for the set |
+| `shadowStretch` | yes | yes, one stretch for the set |
+| `shadowDirectionX` / `Z` | yes | yes |
+| `shadowLight` | yes | yes |
+| height fade as the caster rises | yes | **no** |
+| a different value per instance | n/a | **no**, and there is no plan for one |
+
+The last two "no"s are the same limitation seen twice: a set gets ONE shadow
+plane and ONE shared quad, so the instance's own height is dropped and nothing
+can vary between instances. Everything else is one value for the whole set,
+which is what a set means. A scatter over curved ground is therefore one set
+per flat facet, and a flying scatter wanting a height fade has to be
+per-object meshes.
+
+`shadowGroundPoint` (20.9) is the one genuinely per-object setting, and the
+reason is structural rather than missing work: the instanced tier builds its
+plane THROUGH the set's own origin so the translation's x and z drop out of
+the intercept, which is then `groundY + lift / nY`. An arbitrary point does
+not drop out, and that same `nY` divisor is why the 75 degree tilt ceiling
+cannot be lifted there either. `InstancedMesh` warns and ignores rather than
+storing it, so a game cannot think it took.
+
+Apart from that one, if a claim that a setting "does not work on an
+`InstancedMesh`" is in your head, it is out of date: `shadowOffset` and
+`shadowStretch` both reached the instanced tier in 20.8.
+
 Ground shadows are **on by default** (the `castGroundShadow` application
 setting), and need a GPU backend and a `Camera3d`. As a blanket default they
 skip geometry with no vertical extent — a ground plane. Per object,
 `castGroundShadow: true`/`false` overrides the app setting and is obeyed as
-given, safeguard included; `shadowGroundY` names the floor the blob lands on.
+given, safeguard included; `shadowGroundY` names the floor the blob lands on,
+`shadowOpacity` how dark it is and `shadowScale` how big it is.
+
+On ground that is not flat, name the floor with `shadowGroundPoint` instead:
+a point and `shadowGroundNormal` are a plane, and the blob leaves the caster's
+vertical column to land on it. `shadowGroundY` cannot express that, because
+the blob is always directly below the caster in world Y, which is only "below"
+on level ground. It is also what lifts the tilt ceiling, since that ceiling
+measures tilt from world up and so assumes a camera looking down the Y axis.
+
+The height fade follows whichever floor you named. With a point **and** a
+normal it is measured along that normal; with a point alone it is the
+straight-line distance to the point. So on a sphere the blob fades with
+ALTITUDE rather than with the vertical drop, which is the whole reason the
+point exists. Two consequences worth knowing, because they fail in opposite
+directions: a `shadowGroundNormal` facing inward makes the height negative, so
+the fade clamps to full strength and the blob never fades at all; and a point
+on the wrong side of the caster reads as a large height, so the blob
+disappears outright rather than thinning to a ring the way a backwards
+`shadowGroundY` does. It is also the one shadow setting that THROWS rather
+than clamping or hiding: a non-finite component is rejected on the spot.
 
 The blob is an ellipse sized to the caster's own footprint and placed at the
-caster's x/z — it is **never offset by light direction**. So a tall or narrow
-object (a character, a tree, a pickup) shows its shadow clearly, while a wide,
-flat-bottomed one resting on the floor covers its own completely from a camera
-looking down at it. That is the shadow behaving correctly, not a bug.
+caster's x/z, or at `shadowGroundPoint` when one is set. So a tall or narrow object (a character, a tree, a pickup) shows
+its shadow clearly, while a wide, flat-bottomed one resting on the floor covers
+its own completely from a camera looking down at it. That is the shadow
+behaving correctly, not a bug.
 
 **Do not chase it by raising `shadowGroundY`.** Lifting the plane does not slide
 the blob out from under the object, it floats the blob *up* — and past a few
-units it projects over the top of the caster as a dark halo ringing it. If an
-object needs a visible shadow, give it a smaller footprint relative to its
-height, or accept that a boulder bedded in the ground has none.
+units it projects over the top of the caster as a dark halo ringing it.
+
+The simplest fix is a bigger blob, so its edge shows past the object:
+
+```js
+mesh.shadowScale = 1.5;        // 1 is the default; 0 hides the shadow
+```
+
+`shadowScale` works everywhere, `InstancedMesh` included. Changing it on a
+set rewrites the shared quad's four corners in place rather than rebuilding
+it, as does a `shadowLight` that moves, so an animated sun costs no
+allocation.
+
+Or, for the look of a sun that is not overhead, use the shape controls:
+
+```js
+mesh.shadowOffset = 1.5;       // slide it out, in blob radii
+mesh.shadowDirectionX = 1;     // the ground direction it is cast along
+mesh.shadowDirectionZ = 0;
+mesh.shadowStretch = 2;        // and lengthen it along the same line
+```
+
+`shadowOffset` is measured in multiples of the blob's **own radius**, not in
+world units, so one value serves a boulder and a pebble and every part of a
+glTF model. About `stretch - 1` is what keeps the shadow attached to its
+caster. It is honoured **only when the floor has been named**, by
+`shadowGroundY` or by `shadowGroundPoint`, because the
+blob is a flat quad on one named plane: sliding it across a plane the game has
+not named puts it where there may be no floor. `shadowStretch` is clamped to 3
+and the blob fades as it pulls, so an extreme value degrades to nothing rather
+than to a smear.
+
+An `InstancedMesh` honours both, as **one** offset and **one** stretch for the
+whole set, which is all a shared set can carry. Both ride the quad the blobs
+share rather than the matrix that also places them: a stretch in the matrix
+would scale the instance positions too and smear the scatter instead of
+lengthening its blobs. So a scatter can sit next to loose props under the same
+sun without looking lit from somewhere else.
+
+`shadowLight` takes the direction from a `Light3d` you name, re-read every
+draw, so a moving sun carries the shadows with it. Nothing is inferred: the
+engine never picks a dominant light, because a scene with several has no
+non-arbitrary answer and one with none has no answer at all.
+
+### A floor that is not level
+
+`shadowGroundY` says where the floor is; `shadowGroundNormal` says which way
+it faces:
+
+```js
+prop.shadowGroundY = floorY;
+prop.shadowGroundNormal = [Math.sin(0.35), -Math.cos(0.35), 0];  // a 20 deg slope
+```
+
+World up is `(0, -1, 0)`, because render space is Y-down, and that is the
+default. The blob is **rotated** onto the plane rather than projected, so it
+keeps its size; it sits directly under the caster, since the normal turns it
+rather than moving it, unless `shadowGroundPoint` says where instead. It needs
+the floor named, by `shadowGroundY` or `shadowGroundPoint`, for the same
+reason the offset does: tilting the bounds fallback has no anchor to turn
+about.
+
+The tilt is clamped at 75 degrees alongside `shadowGroundY`, past which an
+edge-on blob has nothing left to show. That ceiling measures tilt from WORLD
+up, which stands in for "tilted away from the viewer" only while the camera
+looks down the Y axis, so it is lifted alongside `shadowGroundPoint`, where a
+point and a normal state the plane outright.
+
+On an `InstancedMesh` one plane serves the **whole set**: it passes through
+the set's origin at `shadowGroundY`, faces the normal, and every blob is
+projected onto it whatever height its own instance sits at, exactly as the
+level case puts every blob at one height. A scatter over curved ground is
+therefore one set per flat facet, each with the facet's own plane, not one
+set with an averaged normal.
+
+All three compose on a set: the stretch turns the shared quad, the offset
+slides the whole set along the light, and both are carried onto the tilted
+plane rather than applied flat, so a bank's planting lies along its slope
+instead of hovering across it.
+
+Give blobs to the plants that stand apart. Dense low ground cover is better
+left without: a thousand blobs each as wide as its own fern sum to a darkened
+hillside, not to a thousand shadows, and ground cover is the ground.
+
+These are **art direction, not a projection**. A stretched ellipse is not a
+silhouette and has no contact with terrain, so on ground that is not the plane
+you named it will not lie on it. Direction-correct shadows want a shadow map,
+which this tier does not do.
 
 ### Get the sign right: the floor is a GREATER y
 
@@ -587,10 +983,28 @@ caster's own y and check which one is larger.
 
 ## Collision in 3D
 
-Use `Box3d` bodies, not a hand-rolled distance check. `Box3d`-vs-`Box3d` is
-the engine's 3D narrowphase and the only contact that pushes back along Z; the
-response carries `overlapNZ` / `overlapZ` for the depth axis. See the physics
-skill for the contract and the mixed-pair caveat.
+Use a body with a depth shape, not a hand-rolled distance check. Two shapes
+carry depth — `Box3d` and `Sphere` — and any pair of them is resolved in three
+dimensions; the response carries `overlapNZ` / `overlapZ` for the depth axis.
+
+Pick by whether the thing turns. `Box3d` is world-axis-aligned and cannot be
+oriented, so it fits walls, floors and crates and misfits anything that
+tumbles. `Sphere` has no orientation at all, which makes it the shape for
+spinning debris, projectiles, and anything spread over a curved surface: on a
+globe each object's own "up" points a different way, so one axis-aligned box
+cannot fit any of them.
+
+A hand-rolled check is the usual mistake here and it costs twice — it throws
+away the penetration vector the response already carries, and it is invisible
+to the debug plugin's hitbox overlay, which draws from `body.shapes`. If the
+red boxes never appear, the reason is usually that there is no body to draw.
+
+Against a planar shape, either 3D shape degrades to its XY footprint with the
+planar side read as unbounded along Z, so a sphere or box body still collides
+with an ordinary collision layer, just without a depth result. And mind the
+normal: a box pair separates along one world axis, a sphere along the line
+between two centres, so a sphere contact fills the 2D and depth halves of the
+response at the same time. See the physics skill for the full contract.
 
 ## glTF / GLB scenes
 
@@ -599,6 +1013,14 @@ Loaded through the same level director as everything else:
 ```js
 await loader.preload([{ name: "diorama", type: "glb", src: "data/diorama.glb" }]);
 level.load("diorama", { scale, castGroundShadow, shadowGroundY, onLoaded });
+
+// every ground-shadow setting travels except shadowGroundPoint, which is
+// per object and dropped by a scene load: a loaded scene can
+// be told where its sun is, and `shadowLight` is re-read every draw
+level.load("diorama", {
+    scale, castGroundShadow: true, shadowGroundY: 0,
+    shadowLight: sun, shadowOffset: 0.6, shadowStretch: 1.8, async: true,
+});
 ```
 
 `.obj` / `.mtl` are also supported loader types.
@@ -658,6 +1080,7 @@ To branch rather than fail, read `app.renderer.supportsDepthBuffer` after
 | a `lit` mesh renders fullbright | it had no normals — supply them, or let the engine generate them |
 | a gradient across one mesh is impossible | `tint` is per object — use `vertexColors` / `setVertexColor` |
 | a mesh stays solid as you fade it out | meshes render opaque; only `alpha` 0 (hidden) and 1 differ |
+| a glow is cut along a hard straight line, worst near a round object's limb | a flat billboard being depth tested against the geometry behind it — `depthTest: false` |
 | vertex colour applies under a 2D camera but not `Camera3d` | wrote the array directly without setting `needsUpdate` |
 | `Mesh: vertexColors has N entries, expected M` | one colour per *vertex*, not per triangle or per index |
 | nothing renders, or a backdrop covers everything | wrong depth sign — "far" is *larger* z when looking along +Z |
@@ -676,11 +1099,20 @@ To branch rather than fail, read `app.renderer.supportsDepthBuffer` after
 | fog does not match the sky after a background fade | an explicit `color` was passed; omit it to track `renderer.backgroundColor` |
 | geometry clips before it has finished fading | fog `far` beyond the clip far — omit the distances and they default to the clip planes |
 | one marker must stay readable in fog | `fog: false` on that mesh |
-| an object casts no visible shadow | wide and flat-bottomed — its own blob is underneath it; raising `shadowGroundY` haloes it instead of revealing it |
+| an object casts no visible shadow | wide and flat-bottomed — its own blob is underneath it; raise `shadowScale` (or slide it out with `shadowOffset`), not `shadowGroundY`, which haloes it instead of revealing it |
 | a dark ring around the top of an object | `shadowGroundY` lifted too far, floating the blob up into the caster |
+| a tilted blob never fades as its caster rises | `shadowGroundNormal` faces inward, so the height came out negative and clamped to full strength |
+| a blob vanishes completely after setting `shadowGroundPoint` | the point is on the wrong side of the caster; the fade reads that as height and hides it |
+| `shadowGroundPoint` throws | it is the one shadow setting that rejects a bad value instead of clamping: all three components must be finite |
+| a scatter ignores `shadowGroundPoint` | `InstancedMesh` shares one plane across the set and warns; use one set per facet, or per-object meshes |
 | a mesh sits at the wrong depth after being added | `autoDepth` overwrote `pos.z` with the child index — pass `addChild(mesh, z)` |
 | a mesh sits half its size off | `anchorPoint` — only on the 2D-camera path; a `Camera3d` mesh pivots on its model origin |
 | a billboard tips over when the camera looks down | `"spherical"`, or a mistyped mode string falling through to it — use `true` / `"cylindrical"` |
+| `rotate()` does nothing on a billboard | the camera owns its orientation; `billboard: false` and orient the quad yourself |
+| the camera will not tilt its horizon to an arbitrary up | `lookAt(target)` solves pitch and yaw only; pass the up as the next argument, or hand all three axes to `setBasis` |
+| the view is upside down after `lookAt(target, up)` | `up` is the direction that should appear UP ON SCREEN, and this is Y-down, so a level horizon is `(0, -1, 0)` |
+| `setBasis` throws "forward must have a non-zero length" | `forward` is all zeros, the one case that names no direction; a short one is fine, so a surface frame that shrank as it drifted still works |
+| roll is ignored when the target is straight up or down | no rotation about the view axis is determined there, so `lookAt` keeps the roll it had and `setBasis` falls back to the `right` axis |
 | an object jumps to the camera plane | `Vector3d.set(x, y)` / `camera.pos.set(x, y)` zeroed its z |
 | lighting looks wrong under a 3D camera | `Light2d` used instead of `Light3d` |