littlejsengine 1.20.0 → 1.21.0

package/dist/littlejs.js

@@ -35,7 +35,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.20.0';
+const engineVersion = '1.21.0';
 
 /** Frames per second to update
  *  @type {number}
@@ -43,11 +43,12 @@ const engineVersion = '1.20.0';
  *  @memberof Engine */
 const frameRate = 60;
 
-/** How many seconds each frame lasts, engine uses a fixed time step
+/** How many seconds the update covers: 1/60 with the fixed time step, or with engineVariableStep the time of the
+ *  display frame it runs on, times timeScale; while paused it keeps the last update's
  *  @type {number}
  *  @default 1/60
  *  @memberof Engine */
-const timeDelta = 1/frameRate;
+let timeDelta = 1/frameRate;
 
 /** Array containing all engine objects
  *  @type {Array<EngineObject>}
@@ -95,6 +96,75 @@ function setPaused(isPaused=true) { paused = isPaused; }
 
 // Engine internal variables
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+
+// delta smoothing, after Time Delta Smoothing by Frank Force (2013): a frame is on screen for whole display frames,
+// so each delta is rounded to them and the rest is carried to the next, keeping the total real time; the frame
+// length is estimated from recent frames and kept internal, since the browser does not say what it is
+const frameDeltaHistory = [];
+let frameIntervalMS = 1e3 / 60, frameDeltaCarryMS = 0, frameDeltaCarryAverageMS = 0, frameDeltaSmoothing = true;
+function engineSmoothDelta(deltaMS)
+{
+    if (!(deltaMS > 0)) return 0;
+    if (deltaMS < 250) // a gap from a hidden tab is not a display frame
+    {
+        frameDeltaHistory.push(deltaMS);
+        frameDeltaHistory.length > 64 && frameDeltaHistory.shift();
+
+        // the frames each delta held are counted in the last estimate or in the lower quartile of the last 16,
+        // whichever the deltas fit better: the quartile is one frame even when a busy game misses most of them, and
+        // it takes over when the window moves to a display with another refresh rate, or the estimate went wrong
+        const recent = frameDeltaHistory.slice(-16).sort((a, b)=> a - b);
+        const [lastMS, lastOff] = engineFrameFit(frameIntervalMS);
+        const [quartileMS, quartileOff] = engineFrameFit(recent[recent.length >> 2]);
+        frameIntervalMS = lastOff <= quartileOff ? lastMS : quartileMS;
+
+        // deltas far from whole frames mean the display has no fixed refresh, with a margin so it does not flip
+        frameDeltaSmoothing = min(lastOff, quartileOff) < (frameDeltaSmoothing ? .2 : .12);
+    }
+
+    if (!frameDeltaSmoothing)
+    {
+        // deltas that are not whole frames of one length, like a variable refresh display, are the frame times
+        // as they are, with any carry paid, and smoothing starts over once they fit again
+        const rawMS = deltaMS + frameDeltaCarryMS;
+        frameDeltaCarryMS = min(rawMS, 0);
+        frameDeltaCarryAverageMS = 0;
+        return max(rawMS, 0);
+    }
+
+    // whole frames, 0 for one that came early or 2 after one was missed, the carry stays within half a frame; a
+    // little of its slow average is paid each frame, so jitter can not hold it at half a frame and flip every frame
+    const pullMS = frameDeltaCarryAverageMS / 32;
+    frameDeltaCarryMS += deltaMS;
+    const frames = round((frameDeltaCarryMS - pullMS) / frameIntervalMS);
+    if (frames < 1)
+        return 0; // the carry keeps it
+    const smoothMS = frames * frameIntervalMS + pullMS;
+    frameDeltaCarryMS -= smoothMS;
+    frameDeltaCarryAverageMS += (frameDeltaCarryMS - frameDeltaCarryAverageMS) / 32;
+    return smoothMS;
+}
+
+// fit the delta history as whole frames of about unitMS: the frame length is the least squares slope of time over
+// frames held, so jitter and whole ms timestamps average out, with how far the deltas are from whole frames
+function engineFrameFit(unitMS)
+{
+    let timeMS = 0, frames = 0, offMS = 0, sumF = 0, sumT = 0, sumFF = 0, sumFT = 0;
+    const count = frameDeltaHistory.length;
+    for (const d of frameDeltaHistory)
+    {
+        const held = max(1, round(d / unitMS));
+        timeMS += d;
+        frames += held;
+        offMS += abs(d - held * unitMS);
+        sumF += frames, sumT += timeMS, sumFF += frames * frames, sumFT += frames * timeMS;
+    }
+    const spread = count * sumFF - sumF * sumF;
+    return [spread ? (count * sumFT - sumF * sumT) / spread : unitMS, offMS / count / unitMS];
+}
+
+// where the fixed step's time counts from, moved when the variable step hands back so time goes on from there
+let timeFixedStart = 0, frameFixedStart = 0;
 let windowWidthLast = 0, windowHeightLast = 0, windowPixelRatioLast = 0;
 let engineUpdateInternal; // assigned by engineInit so engineStep can drive it
 let engineFrameScheduled = false; // a frame of the loop is asked for and has not run yet
@@ -112,6 +182,9 @@ function engineObjectsCollidePairAdd(asker, other, resolve=false)
     others.set(other, resolve);
 }
 let engineInitialized = false; // engineInit ran, with or without a canvas
+// the loads startup waits for, each counted for the loading screen, and how many are done; undefined once the game
+// loop starts
+let engineLoads, engineLoadsDone = 0;
 let engineObjectsUpdateCount = 0; // passes of engineObjectsUpdate so far, how a child knows it moved this pass
 const engineChildStack = []; // the children being updated, taken off the live lists so one leaving does not skip the next
 let showEngineVersion = true;
@@ -161,11 +234,68 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored, preRe
 ///////////////////////////////////////////////////////////////////////////////
 // Main Engine Functions
 
+/** Add something the game loads to what startup waits for: while engineInit and gameInit run, the game loop starts
+ *  once it is done, and the loading screen counts it; images from loadTexture and sounds from files are added on
+ *  their own, and a load that fails counts as done; after startup it does nothing
+ *  @param {Promise<any>} promise
+ *  @return {Promise<any>} - The same promise
+ *  @example
+ *  async function gameInit() { level = await engineAddLoad(fetchJSON('level.json')); }
+ *  @memberof Engine */
+function engineAddLoad(promise)
+{
+    if (engineLoads)
+    {
+        engineLoads.push(promise);
+        const done = ()=> { ++engineLoadsDone; };
+        promise.then(done, done);
+    }
+    return promise;
+}
+
+// wait for every load, the ones added while waiting too, drawing the loading screen each frame meanwhile
+async function engineWaitForLoads()
+{
+    let waiting = true;
+    const start = performance.now();
+    const drawFrame = ()=>
+    {
+        if (!waiting) return;
+        engineLoadingScreenDraw((performance.now() - start) / 1e3);
+        setTimeout(drawFrame, 16);
+    };
+    headlessMode || drawFrame();
+    try
+    {
+        for (let count; count !== engineLoads.length;)
+        {
+            count = engineLoads.length;
+            await Promise.allSettled(engineLoads);
+        }
+    }
+    finally { waiting = false; }
+}
+
+// one frame of the loading screen, once loading has taken half a second, so a fast load never shows it; input
+// while it shows is dropped, as it is under the splash
+function engineLoadingScreenDraw(elapsed)
+{
+    if (headlessMode || !loadingScreen || elapsed < .5) return;
+    inputClear();
+    engineUpdateCanvas();
+    loadingScreen(engineLoadsDone / engineLoads.length);
+}
+
 /**
  * @callback GameInitCallback - Called after the engine starts, can be async
  * @return {void|Promise<void>}
  * @memberof Engine
  */
+/**
+ * @callback LoadingScreenCallback - Draws the loading screen on mainContext, each frame while the game loads
+ * @param {number} progress - The part of the loads done, 0 to 1
+ * @memberof Engine
+ */
 /**
  * @callback GameCallback - Update or render function for the game
  * @memberof Engine
@@ -200,6 +330,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     // double-register listeners / double-add canvases on a second call
     if (engineInitialized) return;
     engineInitialized = true;
+    engineLoads = [], engineLoadsDone = 0;
     ASSERT(isArray(imageSources), 'pass in images as array');
 
     // allow passing in empty functions
@@ -239,6 +370,9 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         frameTimeLastMS = frameTimeMS;
         if (debug || debugWatermark)
             averageFPS = lerp(averageFPS, 1e3/(frameTimeDeltaMS||1), .05);
+        // the time the frame will be on screen, in whole display frames; engineStep's steps are exact already
+        if (!manualStepAtStart)
+            frameTimeDeltaMS = engineSmoothDelta(frameTimeDeltaMS);
         audioUpdateVolume();
         // the time keys work while the debug overlay is open, or always when debugKeysAlways is set
         const debugKeys = debug && (debugOverlay || debugKeysAlways);
@@ -251,32 +385,61 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         timeReal += frameTimeDeltaMS * debugScale / 1e3;
         const combinedScale = timeScale * debugScale;
         frameTimeDeltaMS *= combinedScale;
-        // paused or a time scale of 0 is frozen: it ticks on unscaled time, so the update rate stays fixed instead of
-        // following however fast the display refreshes, and gameUpdatePost and input still run to leave it
-        const frozen = paused || !combinedScale;
-        frameTimeBufferMS += frozen ? frameTimeDeltaUnscaledMS : frameTimeDeltaMS;
-        frameTimeBufferMS = min(frameTimeBufferMS, 50 * (frozen ? 1 : max(1, combinedScale))); // clamp min framerate
-
-        // apply time delta smoothing, improves smoothness of framerate in some browsers
-        let wasUpdated = false, deltaSmooth = 0;
-        if (frameTimeBufferMS < 0 && frameTimeBufferMS > -9)
+        let wasUpdated = false;
+        if (engineVariableStep)
         {
-            // force at least one update each frame since it is waiting for refresh
-            deltaSmooth = frameTimeBufferMS;
-            frameTimeBufferMS = 0;
+            // one update for the frame with timeDelta the time it covers, per-frame values are the game's to scale;
+            // engineStep's frames are exactly 1/60, its first too, which has no frame before it to take a delta from
+            if (frameTimeDeltaUnscaledMS > 0 || manualStepAtStart)
+            {
+                // frozen stands still as in the fixed step, and timeDelta keeps the last update's
+                const frozenTick = paused || !combinedScale;
+                if (!frozenTick)
+                {
+                    timeDelta = manualStepAtStart ? combinedScale / frameRate :
+                        min(frameTimeDeltaUnscaledMS, 50) * combinedScale / 1e3; // clamp min framerate
+                    time += timeDelta;
+                    ++frame;
+                }
+                engineTick(frozenTick);
+            }
         }
-
-        // update multiple frames if necessary in case of slow framerate
-        for (; frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
+        else
         {
-            // read again each tick, so a pause set by the game stops the rest of this frame's catch-up ticks
-            const frozenTick = paused || !(timeScale * debugScale);
+            // paused or a time scale of 0 is frozen: it ticks on unscaled time, so the update rate stays fixed instead
+            // of following however fast the display refreshes, and gameUpdatePost and input still run to leave it
+            const frozen = paused || !combinedScale;
+            frameTimeBufferMS += frozen ? frameTimeDeltaUnscaledMS : frameTimeDeltaMS;
+            frameTimeBufferMS = min(frameTimeBufferMS, 50 * (frozen ? 1 : max(1, combinedScale))); // clamp min framerate
 
-            // increment frame and update time, frozen does not advance time
-            if (!frozenTick)
-                time = frame++ / frameRate;
+            // apply time delta smoothing, improves smoothness of framerate in some browsers
+            let deltaSmooth = 0;
+            if (frameTimeBufferMS < 0 && frameTimeBufferMS > -9)
+            {
+                // force at least one update each frame since it is waiting for refresh
+                deltaSmooth = frameTimeBufferMS;
+                frameTimeBufferMS = 0;
+            }
+
+            // update multiple frames if necessary in case of slow framerate
+            for (; frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
+            {
+                // read again each tick, so a pause set by the game stops the rest of this frame's catch-up ticks
+                const frozenTick = paused || !(timeScale * debugScale);
+
+                // increment frame and update time, frozen does not advance time
+                if (!frozenTick)
+                    time = timeFixedStart + (frame++ - frameFixedStart) / frameRate;
+                engineTick(frozenTick);
+            }
+
+            // add the time smoothing back in
+            frameTimeBufferMS += deltaSmooth;
+        }
 
-            // update game and objects, when frozen update everything except them
+        // one tick of the loop: update game and objects, when frozen update everything except them
+        function engineTick(frozenTick)
+        {
             wasUpdated = true;
             engineUpdateCanvas();
             inputUpdate();
@@ -303,9 +466,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 renderFrame();
         }
 
-        // add the time smoothing back in
-        frameTimeBufferMS += deltaSmooth;
-
         // manual step turned on by this frame's updates, set the buffer the loop and smoothing just moved again
         if (engineManualStep && !manualStepAtStart)
             frameTimeBufferMS = -.5e3 / frameRate;
@@ -364,7 +524,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     }
 
     // skip setup if headless
-    if (headlessMode) return startEngine();
+    if (headlessMode) return startEngine([]);
 
     // ensure body exists for minimal HTML where the script runs before <body> is parsed
     if (!document.body)
@@ -442,14 +602,19 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         promises.push(splash);
     }
 
-    // wait for all the promises to finish
-    await Promise.all(promises);
-    return startEngine();
+    // the splash first, the images load under it, then the loading screen for the rest
+    showSplashScreen && await promises.at(-1);
+    return startEngine(promises);
 
-    async function startEngine()
+    // gameInit runs once the images are in, and the game loop starts once it and everything loaded while it ran are
+    // done, the loading screen showing in the meantime; an error in gameInit reaches the caller
+    async function startEngine(images)
     {
-        // wait for gameInit to load
-        await gameInit();
+        const init = (async ()=> { await Promise.all(images); await gameInit(); })();
+        engineAddLoad(init);
+        await engineWaitForLoads();
+        engineLoads = undefined;
+        await init;
         engineUpdateInternal = engineUpdate; // engineStep only runs once the game is set up
         engineManualStep || engineUpdate();
     }
@@ -1449,6 +1614,14 @@ function debugRender()
             debugContext.fillText('9: Tweakables', x, y += h);
             debugContext.fillStyle = levelEditor.isOpen ? '#f00' : '#fff';
             debugContext.fillText('0: Edit Level', x, y += h);
+            for (const line of debugOverlayKeys)
+            {
+                // a key a debug plugin added, when it has something to say
+                const key = line();
+                if (!key) continue;
+                debugContext.fillStyle = key.on ? '#f00' : '#fff';
+                debugContext.fillText(key.text, x, y += h);
+            }
             debugContext.fillStyle = '#fff';
 
             let keysPressed = '';
@@ -1676,6 +1849,53 @@ function debugProtectConstant(obj)
     // freeze the object to prevent adding new properties
     return Object.freeze(obj);
 }
+
+///////////////////////////////////////////////////////////////////////////////
+// Input capture: the free camera and the 3D level editor take the keyboard and mouse, so the game under them reads
+// every key and mouse button as up, and no mouse movement or wheel; gamepads are left to the game
+
+let inputCaptureOn = false;      // something has taken the keyboard and mouse
+let inputCaptureReading = false; // it is reading them now
+let inputCaptureDeltaScreen, inputCaptureWheel = 0; // this update's mouse movement and wheel, for it alone
+
+// the game let go of a captured mouse itself, with pointerLockExit, since the debug tools last looked: a capture
+// that is lost without it is the browser's doing, which is how Chrome takes Escape
+let inputLockLetGo = false;
+function inputLockExit() { inputLockLetGo = true; }
+
+// the keys debug plugins add to the overlay's list, each a function that gives {text, on} or nothing to show
+const debugOverlayKeys = [];
+
+// take the keyboard and mouse from the game, or hand them back
+function inputCapture(on=true)
+{
+    inputCaptureOn = !!on;
+    inputCaptureDeltaScreen = vec2();
+    inputCaptureWheel = 0;
+}
+
+// read the input as the one that took it, keyIsDown and the rest work as always inside read
+function inputCaptureRead(read)
+{
+    const was = inputCaptureReading;
+    inputCaptureReading = true;
+    try { return read(); }
+    finally { inputCaptureReading = was; }
+}
+
+// if a read of the keyboard and mouse, device 0, is the game's while they are taken
+function inputCaptureHides(device) { return inputCaptureOn && !inputCaptureReading && !device; }
+
+// called first in inputUpdate: the mouse movement and wheel go to the one that took the input
+function inputCaptureMouse()
+{
+    if (!inputCaptureOn) return;
+    inputCaptureDeltaScreen = mouseDeltaScreen;
+    inputCaptureWheel = mouseWheel;
+    mouseDeltaScreen = vec2();
+    mouseWheel = 0;
+}
+
 /**
  * LittleJS Math Classes and Functions
  * - Comprehensive math utilities for game development
@@ -3361,6 +3581,13 @@ let fontDefault = 'arial';
  *  @memberof Settings */
 let showSplashScreen = false;
 
+/** The loading screen, drawn after the splash while the images, gameInit and what they load are loading, once that
+ *  takes more than half a second: a function given the part done, 0 to 1, or undefined for none, which leaves the
+ *  screen blank; the default says Loading over a bar
+ *  @type {LoadingScreenCallback|undefined}
+ *  @memberof Settings */
+let loadingScreen = drawLoadingScreen;
+
 /** Disables all rendering, audio, and input for servers, must be set before engineInit
  *  @type {boolean}
  *  @default
@@ -3374,6 +3601,15 @@ let headlessMode = false;
  *  @memberof Settings */
 let engineManualStep = false;
 
+/** Run one update per display frame with timeDelta the time it covers, in place of fixed updates at frameRate
+ *  - Per-frame values are not scaled: velocity, gravity, damping and particle speeds act once per update, so a
+ *    game that turns this on scales its own movement by timeDelta
+ *  - Values in seconds follow real time as they are: time, timers, particle emit rate and life, animation, Box2D
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let engineVariableStep = false;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -3769,6 +4005,11 @@ function setFontDefault(font) { fontDefault = font; }
  *  @memberof Settings */
 function setShowSplashScreen(show) { showSplashScreen = show; }
 
+/** Set the loading screen, drawn after the splash while the game loads, once that takes more than half a second
+ *  @param {LoadingScreenCallback} [callback] - Draws on mainContext given the part done, 0 to 1; undefined for none
+ *  @memberof Settings */
+function setLoadingScreen(callback) { loadingScreen = callback; }
+
 /** Set to disable rendering, audio, and input for servers, must be set before engineInit
  *  @param {boolean} headless
  *  @memberof Settings */
@@ -3794,6 +4035,23 @@ function setEngineManualStep(enable=true)
     }
 }
 
+/** Set if the engine runs one update per display frame with timeDelta the time it covers
+ *  Can be set before engineInit or while running; turned off it goes back to fixed updates at frameRate
+ *  @param {boolean} [enable]
+ *  @memberof Settings */
+function setEngineVariableStep(enable=true)
+{
+    if (engineVariableStep && !enable)
+    {
+        // fixed time goes on one fixed step after the last update, if one ran, and timeDelta is the fixed step again
+        timeFixedStart = frame ? time + 1 / frameRate : time;
+        frameFixedStart = frame;
+        timeDelta = 1 / frameRate;
+        frameTimeBufferMS = engineManualStep ? -.5e3 / frameRate : 0;
+    }
+    engineVariableStep = enable;
+}
+
 /** Set whether the draw and debug functions draw in screen space when a call leaves screenSpace out
  *  @param {boolean} screenSpace
  *  @memberof Settings */
@@ -4233,9 +4491,10 @@ class EngineObject
         // bail if a collision callback destroyed us mid-frame
         if (this.destroyed) return;
 
-        if (this.clampSpeed)
+        // limit max speed to prevent missing collisions, only for what collides: with solids, or with tiles while it
+        // has a mass, which tile collision needs; anything else moves as fast as it is told
+        if (this.clampSpeed && enablePhysicsSolver && (this.collideSolidObjects || this.collideLevel && this.mass))
         {
-            // limit max speed to prevent missing collisions
             this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
             this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
         }
@@ -5026,12 +5285,20 @@ class TextureInfo
 }
 
 ///////////////////////////////////////////////////////////////////////////////
+/**
+ * @callback SpriteAnimationEndCallback - Called once when a SpriteAnimation's play ends
+ * @return {void}
+ * @memberof Draw
+ */
+
 /**
  * SpriteAnimation - Steps a tile through its frames over time: looping, once, or there and back
  * - Driven by the engine time like a Timer, so it pauses with the game and needs no update call
  * - Read tileInfo each frame for the frame to draw, from an object's update or before a drawTile
  * - loop, play and pingPong each start over from the first frame; stop holds the current one
+ * - play(onEnd) calls onEnd once the play ends, on the first read after it, since there is no update to call it
  * - Frames follow each other along the row, as tileInfo.frame counts them
+ * - SpriteAnimator switches between a character's animations by name
  * @example
  * const walk = new SpriteAnimation(tile(0, 16), 4, .1); // four frames, a tenth of a second each
  * const attack = new SpriteAnimation(tile(4, 16), 3, .05).play(); // once, then holds the last frame
@@ -5063,6 +5330,9 @@ class SpriteAnimation
         /** @property {number|undefined} - The frame held by stop, undefined while running
          *  @type {number|undefined} */
         this.heldFrame = undefined;
+        /** @property {SpriteAnimationEndCallback|undefined} - Called once when a play ends, on the first read after it
+         *  @type {SpriteAnimationEndCallback|undefined} */
+        this.onEnd = undefined;
     }
 
     /** Start over from the first frame and repeat forever
@@ -5070,8 +5340,14 @@ class SpriteAnimation
     loop() { return this.restart('loop'); }
 
     /** Start over from the first frame, run through once and hold the last frame, last to first at a negative speed
+     *  @param {function():void} [onEnd] - Called once when it ends, on the first read of it after that
      *  @return {SpriteAnimation} */
-    play() { return this.restart('once'); }
+    play(onEnd)
+    {
+        this.restart('once');
+        this.onEnd = onEnd;
+        return this;
+    }
 
     /** Start over from the first frame and run there and back forever
      *  @return {SpriteAnimation} */
@@ -5081,7 +5357,7 @@ class SpriteAnimation
      *  @return {SpriteAnimation} */
     stop() { this.heldFrame = this.frame; return this; }
 
-    /** Start over from the first frame in a mode
+    /** Start over from the first frame in a mode, with no end callback
      *  @param {string} [mode] - 'loop', 'once' or 'pingPong', the current mode when left out
      *  @return {SpriteAnimation} */
     restart(mode=this.mode)
@@ -5089,6 +5365,7 @@ class SpriteAnimation
         this.mode = mode;
         this.startTime = time;
         this.heldFrame = undefined;
+        this.onEnd = undefined;
         return this;
     }
 
@@ -5100,6 +5377,7 @@ class SpriteAnimation
      *  @return {number} */
     get frame()
     {
+        this.isDone; // a read after a play ends calls onEnd, which may start it over
         if (this.heldFrame !== undefined)
             return this.heldFrame;
         const n = this.frameCount, f = floor(this.elapsedFrames);
@@ -5115,9 +5393,81 @@ class SpriteAnimation
      *  @return {TileInfo} */
     get tileInfo() { return this.firstTile.frame(this.frame); }
 
-    /** True once a play has shown its last frame for its time
+    /** True once a play has shown its last frame for its time, the first read after that calls onEnd
+     *  @return {boolean} */
+    get isDone()
+    {
+        const done = this.mode == 'once' && this.heldFrame === undefined && abs(this.elapsedFrames) >= this.frameCount;
+        if (done && this.onEnd)
+        {
+            const onEnd = this.onEnd;
+            this.onEnd = undefined; // once, and it can start a new play with a callback of its own
+            onEnd();
+        }
+        return done;
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * SpriteAnimator - A character's animations by name, like idle, walk and attack, and the one showing now
+ * - Each clip is a SpriteAnimation and keeps its own mode, loop, play or pingPong
+ * - set starts a clip over only when it changes or a play of it has ended, so it can be called every update
+ * - Read tileInfo each frame for the frame to draw, as with a SpriteAnimation
+ * @example
+ * const hero = new SpriteAnimator({
+ *     idle:   new SpriteAnimation(tile(0, 16), 2, .4),
+ *     walk:   new SpriteAnimation(tile(2, 16), 4, .1),
+ *     attack: new SpriteAnimation(tile(6, 16), 3, .05).play(),
+ * });
+ * hero.set('attack', ()=> hero.set('idle')); // back to idle when the attack ends
+ * // in update: this.tileInfo = hero.tileInfo;
+ * @memberof Draw
+ */
+class SpriteAnimator
+{
+    /** Create an animator from its clips, showing the first one
+     *  @param {Object<string, SpriteAnimation>} clips - The clips by name */
+    constructor(clips)
+    {
+        const names = Object.keys(clips);
+        ASSERT(names.length > 0, 'an animator needs at least one clip');
+        /** @property {Object<string, SpriteAnimation>} - The clips by name */
+        this.clips = clips;
+        /** @property {string} - The name of the clip showing now */
+        this.name = names[0];
+    }
+
+    /** Show a clip, starting it over in its own mode unless it is showing and has not ended
+     *  @param {string} name - The clip's name
+     *  @param {function():void} [onEnd] - Called once when a play clip ends, as with SpriteAnimation.play
+     *  @return {SpriteAnimator} */
+    set(name, onEnd)
+    {
+        ASSERT(this.clips[name], 'no clip named ' + name);
+        if (name == this.name && !this.clip.isDone)
+            return this;
+        this.name = name;
+        this.clip.restart();
+        this.clip.onEnd = onEnd;
+        return this;
+    }
+
+    /** The clip showing now
+     *  @return {SpriteAnimation} */
+    get clip() { return this.clips[this.name]; }
+
+    /** The tile of the frame showing now
+     *  @return {TileInfo} */
+    get tileInfo() { return this.clip.tileInfo; }
+
+    /** The frame of the clip showing now
+     *  @return {number} */
+    get frame() { return this.clip.frame; }
+
+    /** True once the clip showing now is a play that has ended
      *  @return {boolean} */
-    get isDone() { return this.mode == 'once' && this.heldFrame === undefined && abs(this.elapsedFrames) >= this.frameCount; }
+    get isDone() { return this.clip.isDone; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -5942,7 +6292,7 @@ async function loadTexture(textureIndex, src)
     const image = new Image;
     if (src)
     {
-        await new Promise(resolve =>
+        await engineAddLoad(new Promise(resolve => // startup waits for it
         {
             image.onload = resolve;
             image.onerror = ()=>
@@ -5952,7 +6302,7 @@ async function loadTexture(textureIndex, src)
             };
             image.crossOrigin = 'anonymous';
             image.src = src;
-        });
+        }));
     }
     
     return textureInfos[textureIndex] = new TextureInfo(image);
@@ -6683,7 +7033,7 @@ function keyIsDown(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 1);
+    return !!(inputData[device]?.[key] & 1) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was pressed this frame
@@ -6696,7 +7046,7 @@ function keyWasPressed(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 2);
+    return !!(inputData[device]?.[key] & 2) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was released this frame
@@ -6709,7 +7059,7 @@ function keyWasReleased(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 4);
+    return !!(inputData[device]?.[key] & 4) && !inputCaptureHides(device);
 }
 
 /** Returns input vector from arrow keys or WASD if enabled
@@ -6912,7 +7262,10 @@ function pointerLockRequest()
 /** Request to unlock the pointer
  *  @memberof Input */
 function pointerLockExit()
-{ document.exitPointerLock?.(); }
+{
+    inputLockExit(); // debug builds: the free camera and the 3D editor tell this from Escape
+    document.exitPointerLock?.();
+}
 
 /** Check if pointer is locked (true if locked)
  *  @return {boolean}
@@ -7229,6 +7582,7 @@ function inputInit()
 
 function inputUpdate()
 {
+    inputCaptureMouse(); // debug builds: the free camera or the 3D editor may have the mouse
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)
@@ -8233,8 +8587,8 @@ class Sound
             // load the audio file, a URL object as bundlers give works like its string;
             // report failures rather than leaving an unhandled rejection, the sound just stays unloaded and silent
             const filename = asset + '';
-            this.loadSound(filename).catch(e=>
-                LOG('Sound load failed for', filename, '-', e.message));
+            engineAddLoad(this.loadSound(filename).catch(e=>
+                LOG('Sound load failed for', filename, '-', e.message))); // startup waits for it
         }
     }
 
@@ -11717,6 +12071,25 @@ function glPolyStrip(points)
  */
 
 ///////////////////////////////////////////////////////////////////////////////
+// the default loading screen: Loading over a bar across the middle, filled by the part of the loads done
+function drawLoadingScreen(progress)
+{
+    const x = mainContext, w = mainCanvasSize.x, h = mainCanvasSize.y;
+    const barWidth = min(w * .6, 400), barHeight = 12, left = (w - barWidth) / 2, top = h / 2;
+    x.save();
+    x.fillStyle = '#000';
+    x.fillRect(0, 0, w, h);
+    x.fillStyle = x.strokeStyle = '#fff';
+    x.font = '28px ' + fontDefault;
+    x.textAlign = 'center';
+    x.textBaseline = 'bottom';
+    x.fillText('Loading', w / 2, top - 16);
+    x.lineWidth = 2;
+    x.strokeRect(left, top, barWidth, barHeight);
+    x.fillRect(left, top, barWidth * clamp(progress), barHeight);
+    x.restore();
+}
+
 function drawEngineLogo(t)
 {
     const blackAndWhite = 0;
@@ -12673,18 +13046,7 @@ class PostProcessPlugin
                 'gl_Position=vec4(p+p-1.,1,1);'+ // set position
                 '}'                              // end of shader
                 ,
-                '#version 300 es\n' +            // specify GLSL ES version
-                'precision highp float;'+        // use highp for accuracy
-                'uniform sampler2D iChannel0;'+  // input texture
-                'uniform sampler2D iChannel1;'+  // the previous frame's output, when feedbackTexture is set
-                'uniform vec3 iResolution;'+     // size of output texture
-                'uniform float iTime;'+          // time
-                'out vec4 c;'+                   // out color
-                '\n' + shaderCode + '\n'+        // insert custom shader code
-                'void main(){'+                  // shader entry point
-                'mainImage(c,gl_FragCoord.xy);'+ // call post process function
-                'c.a=1.;'+                       // always use full alpha
-                '}'                              // end of shader
+                postProcessFragmentSource(shaderCode)
             );
 
             // setup VAO for post processing
@@ -12772,10 +13134,20 @@ class PostProcessPlugin
                 glContext.bindTexture(glContext.TEXTURE_2D, postProcess.feedbackTexture);
             }
 
+            // the 3D depth, when render3D draws it, on the third texture unit, with what sceneDepth needs to read it
+            const depth = typeof render3D != 'undefined' && render3D?.depthTexture ? render3D : undefined;
+            glContext.activeTexture(glContext.TEXTURE2);
+            glContext.bindTexture(glContext.TEXTURE_2D, depth?.cameraDepthTexture || null);
+            glContext.activeTexture(glContext.TEXTURE0);
+            const camera = depth?.camera;
+            camera && glContext.uniform3f(glUniformLocation(postProcess.shader, 'iDepthRange'), camera.near,
+                camera.far == Infinity ? 0 : camera.far, camera.orthographic ? 1 : 0);
+
             // set uniforms and draw
             const uniformLocation = (name)=>glUniformLocation(postProcess.shader, name);
             glContext.uniform1i(uniformLocation('iChannel0'), 0);
             glContext.uniform1i(uniformLocation('iChannel1'), 1);
+            glContext.uniform1i(uniformLocation('iChannel2'), 2);
             glContext.uniform1f(uniformLocation('iTime'), time);
             glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
@@ -12787,6 +13159,11 @@ class PostProcessPlugin
                 glContext.activeTexture(glContext.TEXTURE0);
             }
 
+            // the depth leaves the third unit for whatever draws next
+            glContext.activeTexture(glContext.TEXTURE2);
+            glContext.bindTexture(glContext.TEXTURE_2D, null);
+            glContext.activeTexture(glContext.TEXTURE0);
+
             // restore defaults so subsequent dynamic texture uploads aren't flipped or premultiplied
             glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, false);
             glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
@@ -12803,6 +13180,31 @@ class PostProcessPlugin
 
 ///////////////////////////////////////////////////////////////////////////////
 
+// the fragment shader of the post process pass around its mainImage snippet: the frame on iChannel0, the last output
+// on iChannel1 with a feedback texture, and the 3D depth on iChannel2 when render3D.depthTexture is on, read with
+// sceneDepth(uv), the distance from the camera along its view in world units, uv 0 to 1 across the screen
+function postProcessFragmentSource(shaderCode)
+{
+    return '#version 300 es\n' +        // specify GLSL ES version
+        'precision highp float;'+        // use highp for accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform sampler2D iChannel1;'+  // the previous frame's output, when feedbackTexture is set
+        'uniform sampler2D iChannel2;'+  // the 3D depth, when render3D.depthTexture is on
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time
+        'uniform vec3 iDepthRange;'+     // the camera's near, its far or 0 for none, and 1 when orthographic
+        'out vec4 c;'+                   // out color
+        // the depth texture's value back to a distance, as the camera's projection put it there
+        'float sceneDepth(vec2 uv){'+
+        'float d=texture(iChannel2,uv).r*2.-1.,n=iDepthRange.x,f=iDepthRange.y;'+
+        'return iDepthRange.z>0.?(d*(f-n)+f+n)/2.:f>0.?2.*n*f/(f+n-d*(f-n)):2.*n/(1.-d);}'+
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
+        'c.a=1.;'+                       // always use full alpha
+        '}';                             // end of shader
+}
+
 /**
  * Shader code for a bloom effect, the bright parts of the image blurred back over it
  * - Pass it to PostProcessPlugin, or edit the string to build an effect on top of it
@@ -20121,7 +20523,9 @@ function tweenUpdate(gameDelta, realDelta)
     for (let i = list.length; i--;)
     {
         const t = list[i];
-        if (!t.active || t.activePass === pass) continue; // stopped, or started again by a callback this update
+        // stopped, or started again by a callback this update, or during an update a callback ran inside it, which
+        // counts on from this one
+        if (!t.active || t.activePass >= pass) continue;
         let dt;
         if (enginePath)
         {
@@ -20145,7 +20549,7 @@ function tweenUpdate(gameDelta, realDelta)
             // Completion: fire end value, remove from active, start the next iteration
             // of a loop or pingPong, or when there is none it has completed, fire onComplete
             t.callback(t.interp(0));
-            if (!t.active || t.activePass === pass)
+            if (!t.active || t.activePass >= pass)
                 continue; // stopped or restarted by its own callback, the run it was on ends without completing
             tweenDeactivate(t);
             const next = t.thenCallback;
@@ -20170,6 +20574,63 @@ function tweenStopAll()
 // Register with the engine so tweens auto-advance.
 engineAddPlugin(tweenUpdate);
 
+/**
+ * LittleJS Scene System Plugin
+ * - A game's states, like a title, the game and game over, as scene objects
+ * - setScene leaves the current scene, destroys the objects and enters the next
+ * - Objects with the persistent flag set outlive every switch
+ * - Pause is the engine's paused flag, a scene's update stops with gameUpdate
+ * @namespace SceneSystem
+ */
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** A scene, any object with the hooks it needs, each optional and called as a method so this is the scene
+ *  @typedef {Object} Scene
+ *  @property {function():void} [enter] - Called when the scene starts, after the old one left and the objects were destroyed
+ *  @property {function():void} [leave] - Called before the next scene starts, while the scene is current and its objects are still there
+ *  @property {function():void} [update] - Called each update after gameUpdate, not while paused or at time scale 0
+ *  @property {function():void} [render] - Called before gameRender, to draw under the objects
+ *  @property {function():void} [renderPost] - Called after gameRenderPost, to draw over the game, while paused too; plugins made after the first setScene draw over it
+ *  @memberof SceneSystem */
+
+let sceneCurrent, sceneLeaving = false, scenePluginAdded = false;
+
+/** Leave the current scene, destroy every object that is not persistent, and enter the next scene
+ *  - Setting the current scene again restarts it, and no scene leaves the game with none
+ *  - The switch happens at once, it can be called from anywhere but a scene's leave
+ *  @param {Scene} [scene] - The scene to enter
+ *  @memberof SceneSystem */
+function setScene(scene)
+{
+    ASSERT(!sceneLeaving, 'setScene can not be called from a scene leave');
+    if (!scenePluginAdded)
+    {
+        scenePluginAdded = true;
+        engineAddPlugin(sceneUpdate, sceneRenderPost, undefined, undefined, sceneRender);
+    }
+
+    if (sceneCurrent)
+    {
+        sceneLeaving = true;
+        sceneCurrent.leave?.();
+        sceneLeaving = false;
+    }
+    engineObjectsDestroy();
+    sceneCurrent = scene;
+    scene?.enter?.();
+}
+
+/** Get the current scene
+ *  @return {Scene|undefined}
+ *  @memberof SceneSystem */
+function getScene() { return sceneCurrent; }
+
+// the plugin hooks, update skips the frozen ticks that skip gameUpdate
+function sceneUpdate() { paused || !timeScale || sceneCurrent?.update?.(); }
+function sceneRender() { sceneCurrent?.render?.(); }
+function sceneRenderPost() { sceneCurrent?.renderPost?.(); }
+
 /**
  * LittleJS PathFinder Plugin
  * - Grid-based A* pathfinder with two-pass smoothing for natural-looking paths
@@ -21643,36 +22104,62 @@ class Ray3D
 
 ///////////////////////////////////////////////////////////////////////////////
 // 3D collision helpers, none of them change anything that is passed in
-// Boxes sit centered on pos and take a full size, like drawRect
+// Boxes sit centered on pos and take a full size, like drawRect, upright unless given a rotation, an Euler vec3 like
+// rotation3D, which turns them about their center
 // Cylinders stand up the Y axis, centered on pos, with a full height
 // Names that could be mistaken for 2D functions get a 3D suffix
 
+// whether a rotation turns anything, a missing one does not
+const isTurned3D = (rotation)=> !!rotation && !!(rotation.x || rotation.y || rotation.z);
+
+// a turned box's three unit axes, the columns of its rotation
+function boxAxes3D(rotation)
+{
+    const m = buildMatrix(undefined, rotation).m;
+    return [vec3(m[0], m[1], m[2]), vec3(m[4], m[5], m[6]), vec3(m[8], m[9], m[10])];
+}
+
+// a point in a turned box's own space, from its center, and a vector from that space back to the world's
+function boxLocal3D(point, pos, axes)
+{
+    const d = point.subtract(pos);
+    return vec3(d.dot(axes[0]), d.dot(axes[1]), d.dot(axes[2]));
+}
+const boxWorld3D = (v, axes)=> axes[0].scale(v.x).add(axes[1].scale(v.y)).add(axes[2].scale(v.z));
+
 /**
- * Check if a point is inside an axis aligned box, boundary is inclusive
+ * Check if a point is inside a box, boundary is inclusive
  * @param {Vector3} point
  * @param {Vector3} pos - Center of the box
  * @param {Vector3} size - Full size of the box
+ * @param {Vector3} [rotation] - How the box is turned, upright when left out
  * @return {boolean}
  * @memberof Math3D
  */
-function isPointInBox3D(point, pos, size)
+function isPointInBox3D(point, pos, size, rotation)
 {
+    if (isTurned3D(rotation))
+        return isPointInBox3D(boxLocal3D(point, pos, boxAxes3D(rotation)), vec3(), size);
     return abs(point.x - pos.x) <= size.x/2 &&
         abs(point.y - pos.y) <= size.y/2 &&
         abs(point.z - pos.z) <= size.z/2;
 }
 
 /**
- * Check if two axis aligned boxes are overlapping, touching edges do not overlap
+ * Check if two boxes are overlapping, touching edges do not overlap
  * @param {Vector3} posA
  * @param {Vector3} sizeA - Full size of box A
  * @param {Vector3} posB
  * @param {Vector3} [sizeB] - Full size of box B, zero for a point
+ * @param {Vector3} [rotationA] - How box A is turned, upright when left out
+ * @param {Vector3} [rotationB] - How box B is turned
  * @return {boolean}
  * @memberof Math3D
  */
-function isOverlapping3D(posA, sizeA, posB, sizeB=vec3())
+function isOverlapping3D(posA, sizeA, posB, sizeB=vec3(), rotationA, rotationB)
 {
+    if (isTurned3D(rotationA) || isTurned3D(rotationB))
+        return !!collideBoxBox3D(posA, sizeA, posB, sizeB, rotationA, rotationB);
     const d = posA.subtract(posB);
     return abs(d.x) < (sizeA.x + sizeB.x)/2 &&
         abs(d.y) < (sizeA.y + sizeB.y)/2 &&
@@ -21701,16 +22188,19 @@ function collideSphereSphere(posA, radiusA, posB, radiusB)
 }
 
 /**
- * Returns the vector to move a sphere out of an axis aligned box, or undefined
+ * Returns the vector to move a sphere out of a box, or undefined
  * @param {Vector3} pos - Sphere center
  * @param {number} radius
  * @param {Vector3} boxPos
  * @param {Vector3} boxSize - Full size of the box
+ * @param {Vector3} [boxRotation] - How the box is turned, upright when left out
  * @return {Vector3|undefined}
  * @memberof Math3D
  */
-function collideSphereBox(pos, radius, boxPos, boxSize)
+function collideSphereBox(pos, radius, boxPos, boxSize, boxRotation)
 {
+    if (isTurned3D(boxRotation))
+        return collideSphereOrientedBox3D(pos, radius, boxPos, boxSize, boxAxes3D(boxRotation));
     const h = boxSize.scale(.5);
     const closest = vec3(
         clamp(pos.x, boxPos.x - h.x, boxPos.x + h.x),
@@ -21798,15 +22288,20 @@ function collideSphereCylinder(pos, radius, cylinderPos, cylinderRadius, cylinde
 /**
  * Returns the vector to move box A by so it no longer overlaps box B, the shortest way out, or undefined
  * - The 3D twin of collideBoxBox
+ * - Turned boxes are tested by the separating axis test, the push is along the direction they overlap least on
  * @param {Vector3} posA
  * @param {Vector3} sizeA - Full size of box A
  * @param {Vector3} posB
  * @param {Vector3} sizeB - Full size of box B
+ * @param {Vector3} [rotationA] - How box A is turned, upright when left out
+ * @param {Vector3} [rotationB] - How box B is turned
  * @return {Vector3|undefined}
  * @memberof Math3D
  */
-function collideBoxBox3D(posA, sizeA, posB, sizeB)
+function collideBoxBox3D(posA, sizeA, posB, sizeB, rotationA, rotationB)
 {
+    if (isTurned3D(rotationA) || isTurned3D(rotationB))
+        return collideOrientedBoxes3D(posA, sizeA, boxAxes3D(rotationA), posB, sizeB, boxAxes3D(rotationB));
     const d = posA.subtract(posB);
     const overlapX = (sizeA.x + sizeB.x)/2 - abs(d.x);
     const overlapY = (sizeA.y + sizeB.y)/2 - abs(d.y);
@@ -21816,6 +22311,44 @@ function collideBoxBox3D(posA, sizeA, posB, sizeB)
     return pushOutAxis3D(d, overlapX, overlapY, overlapZ);
 }
 
+// the push to move a sphere out of a box turned to these axes: in the box's own space it is upright, and the push
+// goes back out turned
+function collideSphereOrientedBox3D(pos, radius, boxPos, boxSize, axes)
+{
+    const push = collideSphereBox(boxLocal3D(pos, boxPos, axes), radius, vec3(), boxSize);
+    return push && boxWorld3D(push, axes);
+}
+
+// the world's axes, for an upright box among turned ones
+const BOX_WORLD_AXES = Object.freeze([vec3(1, 0, 0), vec3(0, 1, 0), vec3(0, 0, 1)]);
+
+// the shortest push to move box A out of box B by the separating axis test: each box's three face directions and
+// the nine across an edge of each; a gap on any of them is no touch, and the push is along the least overlap, from
+// B to A; an edge direction has to overlap clearly less to win, so a box lying on another leaves by the face
+function collideOrientedBoxes3D(posA, sizeA, axesA, posB, sizeB, axesB)
+{
+    const d = posA.subtract(posB), ha = sizeA.scale(.5), hb = sizeB.scale(.5);
+    const reach = (h, axes, n)=> h.x * abs(axes[0].dot(n)) + h.y * abs(axes[1].dot(n)) + h.z * abs(axes[2].dot(n));
+    let push, least = Infinity;
+    const separated = (axis, weight)=>
+    {
+        const lengthSquared = axis.lengthSquared();
+        if (lengthSquared < 1e-12) return false; // parallel edges give no direction to test
+        const n = axis.scale(lengthSquared ** -.5), along = d.dot(n);
+        const overlap = reach(ha, axesA, n) + reach(hb, axesB, n) - abs(along);
+        if (overlap <= 0) return true;
+        if (overlap * weight < least)
+            least = overlap * weight, push = n.scale(along < 0 ? -overlap : overlap);
+        return false;
+    };
+    for (const axis of [...axesA, ...axesB])
+        if (separated(axis, 1)) return;
+    for (const a of axesA)
+    for (const b of axesB)
+        if (separated(a.cross(b), 1.05)) return;
+    return push;
+}
+
 /**
  * Returns the distance along the ray to the first intersection with a sphere, or undefined
  * - The hit is ray.getPosition(distance), a direction that is not unit length scales the distance
@@ -21864,17 +22397,25 @@ function raycastPlane(ray, planePos, planeNormal)
 }
 
 /**
- * Returns the distance along the ray to the first intersection with an axis aligned box, or undefined
+ * Returns the distance along the ray to the first intersection with a box, or undefined
  * - The hit is ray.getPosition(distance), a direction that is not unit length scales the distance
  * - A ray starting inside the box is already there, so it gets back 0
  * @param {Ray3D} ray
  * @param {Vector3} pos - Center of the box
  * @param {Vector3} size - Full size of the box
+ * @param {Vector3} [rotation] - How the box is turned, upright when left out
  * @return {number|undefined}
  * @memberof Math3D
  */
-function raycastBox(ray, pos, size)
+function raycastBox(ray, pos, size, rotation)
 {
+    if (isTurned3D(rotation))
+    {
+        // the ray in the box's own space, where the box is upright; turning keeps the distances
+        const axes = boxAxes3D(rotation), d = ray.direction;
+        const direction = vec3(d.dot(axes[0]), d.dot(axes[1]), d.dot(axes[2]));
+        return raycastBox(new Ray3D(boxLocal3D(ray.origin, pos, axes), direction), vec3(), size);
+    }
     const {origin, direction} = ray;
     const h = size.scale(.5);
     const boxMin = pos.subtract(h), boxMax = pos.add(h);
@@ -21973,9 +22514,11 @@ function render3DCanDraw()
 }
 
 // the draw state fields a batch is drawn under; lights and fog are not captured, they are read live at flush
-// the three functions below write them out by hand for speed, so a new field goes in all four
+// the three functions below write them out by hand for speed, so a new field goes in all four; emissiveMapColor is
+// compared by its values, so two objects with equal colors batch
 const RENDER3D_STATE_FIELDS = ['blend', 'additive', 'depthTest', 'depthWrite', 'cullBackFaces', 'mirrored', 'lighting',
-    'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader'];
+    'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader', 'normalMap', 'normalScale', 'shininess',
+    'reflectivity', 'emissiveMap', 'emissiveMapColor'];
 
 // a copy of the draw state in one fixed shape, the fields of RENDER3D_STATE_FIELDS written out so the
 // compare below stays a handful of direct reads, it runs for every instance drawn
@@ -21984,7 +22527,9 @@ function render3DCaptureBatchState()
     const r = render3D;
     return {blend: r.blend, additive: r.additive, depthTest: r.depthTest, depthWrite: r.depthWrite,
         cullBackFaces: r.cullBackFaces, mirrored: r.mirrored, lighting: r.lighting, emissive: r.emissive,
-        receiveShadow: r.receiveShadow, specular: r.specular, pixelated: r.pixelated, shader: r.shader};
+        receiveShadow: r.receiveShadow, specular: r.specular, pixelated: r.pixelated, shader: r.shader,
+        normalMap: r.normalMap, normalScale: r.normalScale, shininess: r.shininess, reflectivity: r.reflectivity,
+        emissiveMap: r.emissiveMap, emissiveMapColor: (r.emissiveMapColor || WHITE).copy()}; // the caller may change it
 }
 
 // put a captured draw state back, written out the same way; the transparent stage does this for every queued draw
@@ -21993,7 +22538,9 @@ function render3DApplyBatchState(s)
     const r = render3D;
     r.blend = s.blend, r.additive = s.additive, r.depthTest = s.depthTest, r.depthWrite = s.depthWrite,
     r.cullBackFaces = s.cullBackFaces, r.mirrored = s.mirrored, r.lighting = s.lighting, r.emissive = s.emissive,
-    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader;
+    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader,
+    r.normalMap = s.normalMap, r.normalScale = s.normalScale, r.shininess = s.shininess,
+    r.reflectivity = s.reflectivity, r.emissiveMap = s.emissiveMap, r.emissiveMapColor = s.emissiveMapColor;
 }
 
 // true when the current draw state differs from a captured one, so a pending batch must flush first
@@ -22003,13 +22550,20 @@ function render3DStateChanged(s)
     return r.blend !== s.blend || r.additive !== s.additive || r.depthTest !== s.depthTest
         || r.depthWrite !== s.depthWrite || r.cullBackFaces !== s.cullBackFaces || r.mirrored !== s.mirrored
         || r.lighting !== s.lighting || r.emissive !== s.emissive || r.receiveShadow !== s.receiveShadow
-        || r.specular !== s.specular || r.pixelated !== s.pixelated || r.shader !== s.shader;
+        || r.specular !== s.specular || r.pixelated !== s.pixelated || r.shader !== s.shader
+        || r.normalMap !== s.normalMap || r.normalScale !== s.normalScale || r.shininess !== s.shininess
+        || r.reflectivity !== s.reflectivity || r.emissiveMap !== s.emissiveMap
+        || render3DColorChanged(r.emissiveMapColor || WHITE, s.emissiveMapColor);
+}
+
+// whether two colors differ in their rgb, for the batch key's emissiveMapColor
+function render3DColorChanged(a, b) { return a.r !== b.r || a.g !== b.g || a.b !== b.b;
 }
 
 // whether a sphere is inside the view, or the shadow map's box during the shadow pass, without a vector
 function render3DSphereVisible(x, y, z, radius)
 {
-    const planes = render3D.shadowPass ? render3D.shadowPlanes : render3D.frustumPlanes;
+    const planes = render3D.shadowPass && !render3D.depthPass ? render3D.shadowPlanes : render3D.frustumPlanes;
     for (let i = 0; i < planes.length; ++i)
     {
         const p = planes[i];
@@ -22109,6 +22663,15 @@ function render3DSetObjectState(o)
     r.emissive = emissive;
     r.additive = !!o?.additive;
     r.specular = o?.specular || 0;
+    const shininess = o?.shininess ?? 16, reflectivity = o?.reflectivity || 0;
+    ASSERT(isNumber(shininess) && shininess > 0, 'shininess must be a number above 0', shininess);
+    ASSERT(isNumber(reflectivity) && reflectivity >= 0 && reflectivity <= 1, 'reflectivity must be 0 to 1', reflectivity);
+    r.shininess = shininess;
+    r.reflectivity = reflectivity;
+    r.normalMap = o?.normalMap || undefined;
+    r.normalScale = o?.normalScale ?? 1;
+    r.emissiveMap = o?.emissiveMap || undefined;
+    r.emissiveMapColor = o?.emissiveMapColor || WHITE;
     r.receiveShadow = !o || o.receiveShadow;
     r.cullBackFaces = r.mirrored = false; // each mesh sets these as it draws
     r.pixelated = !!o?.pixelated;
@@ -22342,6 +22905,11 @@ class Render3DPlugin
          *  flat faces */
         this.smoothShading = false;
 
+        /** @property {boolean} - Draw the camera's depth into a texture each frame for post processing:
+         *  PostProcessPlugin hands it to its shader as iChannel2, read with sceneDepth(uv); off by default and free
+         *  when off, on it draws the solid objects of the default layer once more, depth only */
+        this.depthTexture = false;
+
         // shadows
         /** @property {boolean} - Cast real shadows from the sun, off by default and free when off */
         this.shadows = false;
@@ -22378,8 +22946,23 @@ class Render3DPlugin
         this.cullBackFaces = false;
         this.mirrored = false;
         /** @property {number} - Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and
-         *  1 adds a light's full color at its brightest; its size is fixed */
+         *  1 adds a light's full color at its brightest; shininess sets its size */
         this.specular = 0;
+        /** @property {number} - The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 100 sharp
+         *  like polished metal; set from each object's shininess */
+        this.shininess = 16;
+        /** @property {TextureInfo|undefined} - Normal map for the next draws, set from each object's normalMap
+         *  @type {TextureInfo|undefined} */
+        this.normalMap = undefined;
+        /** @property {number} - How strongly the normal map bends the surface, set from each object's normalScale */
+        this.normalScale = 1;
+        /** @property {number} - How much the surface reflects the sky, 0 to 1, set from each object's reflectivity */
+        this.reflectivity = 0;
+        /** @property {TextureInfo|undefined} - Emissive map for the next draws, set from each object's emissiveMap
+         *  @type {TextureInfo|undefined} */
+        this.emissiveMap = undefined;
+        /** @property {Color} - Multiplies the emissive map, set from each object's emissiveMapColor */
+        this.emissiveMapColor = WHITE;
         /** @property {Shader|undefined} - Custom Shader for the next draws, set from each object's shader; undefined
          *  draws with the plugin's own
          *  @type {Shader|undefined} */
@@ -22481,6 +23064,13 @@ class Render3DPlugin
         /** @type {WebGLFramebuffer|undefined} */
         this.shadowFramebuffer = undefined;
         this.shadowTextureSize = 0;
+        /** @type {WebGLTexture|undefined} */
+        this.cameraDepthTexture = undefined; // the camera's depth, drawn when depthTexture is on
+        /** @type {WebGLFramebuffer|undefined} */
+        this.cameraDepthFramebuffer = undefined;
+        this.cameraDepthWidth = 0;
+        this.cameraDepthHeight = 0;
+        this.depthPass = false; // drawing the camera's depth, a shadow pass seen from the camera
         this.contextGeneration = 0;  // counts context losses, a mesh uploaded under an older one uploads again
         this.uniforms = new Map;     // uniform locations by program
         /** @type {Object<string, Array<number>>} */
@@ -22908,7 +23498,8 @@ class Render3DPlugin
         // a far plane at Infinity has no midpoint, so put it a long way out instead
         const {near, far} = this.camera;
         const radius = far == Infinity ? near * 1e4 : (near + far) / 2;
-        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined}, ()=>
+        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined,
+            emissiveMap: undefined}, ()=>
             this.drawMesh(this.sky, buildMatrix(this.camera.pos, undefined, vec3(radius))));
     }
 
@@ -23033,8 +23624,10 @@ class Render3DPlugin
     drawQuad(a, b, c, d, tileInfo, color=WHITE)
     {
         if (this.transparentQueue) // the queue replays later, so it keeps copies of what a caller may reuse
+        {
             a = a.copy(), b = b.copy(), c = c.copy(), d = d.copy();
             color = isArray(color) ? color.map(k=> k.copy()) : color.copy();
+        }
         this.drawStrip(render3DQuadStrip(a, b, c, d), render3DFaceNormal(a, b, c, d), RENDER3D_QUAD_UVS,
             render3DQuadValues(color), tileInfo);
     }
@@ -23333,7 +23926,9 @@ const RENDER3D_SNIPPET_NAMES =
 // uniforms: lightDir (xyz the way the sunlight travels, w = emissive, 1 or more skips the lighting),
 //   lightColor (the sun's rgb, a = specular), ambientFog (rgb, a = fogEnd), fogColor (rgb, a = fogStart),
 //   cameraPos, tex, shadowMap, shadowParams (x = shadows on, y = bias, z = blur step in texture space,
-//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive)
+//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive),
+//   materialParams (x = normal map scale, 0 skips it, y = shininess, z = reflectivity), emissiveTint (rgb, a = the
+//   emissive map is on), skyTop, skyHorizon, skyBottom (what a reflection shows), normalTex, emissiveTex
 function render3DFragmentSource(fragmentCode)
 {
     return '#version 300 es\n' +
@@ -23342,7 +23937,8 @@ function render3DFragmentSource(fragmentCode)
         'uniform vec4 extraLights[' + RENDER3D_MAX_LIGHTS + '],extraLightColors[' + RENDER3D_MAX_LIGHTS + '];' +
         'uniform int extraLightCount;' +
         'uniform vec3 cameraPos;' +
-        'uniform sampler2D tex;' +
+        'uniform vec4 materialParams,emissiveTint,skyTop,skyHorizon,skyBottom;' +
+        'uniform sampler2D tex,normalTex,emissiveTex;' +
         'uniform bool premultipliedTexture;' + // is the texture a render target, which holds premultiplied color
         'uniform highp sampler2DShadow shadowMap;' +
         'in vec3 P,N;in vec2 T,L;in vec4 C,S;' +
@@ -23357,6 +23953,17 @@ function render3DFragmentSource(fragmentCode)
         'for(int x=-1;x<=1;++x)for(int y=-1;y<=1;++y)' +
         's+=texture(shadowMap,vec3(q.xy+vec2(x,y)*shadowParams.z,q.z));' +
         'return s/9.;}' +
+        // the normal map's normal here, in the frame that the position and texture coordinate change along across the
+        // screen, so a mesh needs no tangents; green points up the image and v runs down it, so up is -v;
+        // a mesh with no texture coordinates has no frame and keeps its own normal
+        'vec3 normalMapNormal(vec3 n){' +
+        'vec3 p1=dFdx(P),p2=dFdy(P);vec2 t1=dFdx(T),t2=dFdy(T);' +
+        'vec3 a=cross(p2,n),b=cross(n,p1),u=a*t1.x+b*t2.x,v=a*t1.y+b*t2.y;' +
+        'float k=max(dot(u,u),dot(v,v));' +
+        'if(k<=0.)return n;' +
+        'vec3 m=texture(normalTex,T).xyz*2.-1.;' +
+        'm.xy*=materialParams.x;' +
+        'return normalize((u*m.x-v*m.y)*inversesqrt(k)+n*m.z);}' +
         (fragmentCode ? RENDER3D_SNIPPET_NAMES + fragmentCode + '\n' : '') +
         'void main(){' +
         (fragmentCode ? 'vec4 t;mainImage(t,T);' : 'vec4 t=texture(tex,T);') +
@@ -23367,6 +23974,7 @@ function render3DFragmentSource(fragmentCode)
         'if(e<1.){' +
         'vec3 n=dot(N,N)>0.?normalize(N):vec3(0,1,0);' +
         'if(!gl_FrontFacing)n=-n;' + // only a double sided mesh shows a back face, light it on the side that is seen
+        'if(materialParams.x!=0.)n=normalMapNormal(n);' +
         'float nl=dot(n,-lightDir.xyz);' +
         'float s=shadow();' +
         // the ambient: one color, or blended from the ground color below to the sky color above by the way the face points
@@ -23385,15 +23993,24 @@ function render3DFragmentSource(fragmentCode)
         'float ln=dot(n,v);' +
         'vec3 lc=extraLightColors[i].rgb*extraLightColors[i].a*a*a;' +
         'l+=lc*max(0.,ln);' +
-        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),16.)*step(0.,ln);' +
+        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),materialParams.y)*step(0.,ln);' +
         '}' +
         'c.rgb*=l*(1.-e)+e;' + // lit, blended toward its own color by how emissive it is
         // specular: the sun's only where its light hits and out of shadow, then the Light3D highlights,
         // skipped entirely when the strength is zero
         'if(lightColor.a>0.){' +
         'vec3 r=reflect(lightDir.xyz,n);' +
-        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),16.)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),materialParams.y)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        '}' +
+        // the sky along the reflected view, more at a glancing angle (Schlick's Fresnel); sky light, so the sun's
+        // shadow does not dim it
+        'if(materialParams.z>0.){' +
+        'vec3 w=normalize(P-cameraPos),q=reflect(w,n);' +
+        'float f=materialParams.z+(1.-materialParams.z)*pow(1.-max(dot(n,-w),0.),5.);' +
+        'c.rgb=mix(c.rgb,q.y>0.?mix(skyHorizon.rgb,skyTop.rgb,q.y):mix(skyHorizon.rgb,skyBottom.rgb,-q.y),f);' +
         '}}else c.rgb*=e;' + // fully emissive: its own color, or brighter, with no lighting to work out
+        // the emissive map adds its light on top, lit or not
+        'if(emissiveTint.a>0.)c.rgb+=texture(emissiveTex,T).rgb*emissiveTint.rgb;' +
         'if(ambientFog.a>0.){' +
         'float z=distance(cameraPos,P);' +
         'c.rgb=mix(c.rgb,shadowParams.w<0.?vec3(0):fogColor.rgb,smoothstep(fogColor.a,ambientFog.a,z));' +
@@ -23420,6 +24037,8 @@ function render3DUseProgram(program)
     gl.uniformMatrix4fv(render3DUniform('lightViewProj'), false, r.shadowMatrix.m);
     gl.uniform1i(render3DUniform('tex'), 0);
     gl.uniform1i(render3DUniform('shadowMap'), 1);
+    gl.uniform1i(render3DUniform('normalTex'), 2);
+    gl.uniform1i(render3DUniform('emissiveTex'), 3);
     const c = r.camera.pos;
     gl.uniform3f(render3DUniform('cameraPos'), c.x, c.y, c.z);
     gl.uniform1i(render3DUniform('extraLightCount'), r.lightCount);
@@ -23512,6 +24131,8 @@ function render3DContextLost()
     render3DClearInstances();
     r.shadowFramebuffer = r.shadowTexture = undefined;
     r.shadowTextureSize = 0;
+    r.cameraDepthFramebuffer = r.cameraDepthTexture = undefined;
+    r.cameraDepthWidth = r.cameraDepthHeight = 0;
     r.streamCount = 0;
     ++r.contextGeneration; // every uploaded mesh is stale now, the soft dot is a TextureInfo the engine restores
 }
@@ -23590,25 +24211,68 @@ function render3DSampler(wrap, pixelated)
 }
 
 // bind the texture of a tile or texture, white when there is none or it is not loaded, with the 3D sampler that
-// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps
-function render3DBindTexture(tileInfo, state=render3D)
+// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps; on unit 0, the color texture,
+// or another unit, the material maps, after which unit 0 is active again
+function render3DBindTexture(tileInfo, state=render3D, unit=0)
 {
     const gl = glContext, r = render3D;
     const textureInfo = render3DTextureOf(tileInfo);
     const texture = textureInfo?.glTexture || r.whiteTexture;
+    unit && gl.activeTexture(gl.TEXTURE0 + unit);
     gl.bindTexture(gl.TEXTURE_2D, texture);
     if (texture === r.whiteTexture || !r.mipmaps && !state.pixelated)
-        return gl.bindSampler(0, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
-                                        // or anisotropy, and filtering it that way costs every untextured fragment
-    gl.bindSampler(0, render3DSampler(textureInfo?.wrap, state.pixelated));
-    glUpdateMipmaps(texture); // drawn into since its mipmaps were made
-    if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        gl.bindSampler(unit, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
+                                    // or anisotropy, and filtering it that way costs every untextured fragment
+    else
+    {
+        gl.bindSampler(unit, render3DSampler(textureInfo?.wrap, state.pixelated));
+        glUpdateMipmaps(texture); // drawn into since its mipmaps were made
+        if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        {
+            glMipmappedTextures.add(texture); // the core makes them again when the texture changes
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+    }
+    unit && gl.activeTexture(gl.TEXTURE0);
+}
+
+// the material's uniforms and maps for a draw: the normal map on unit 2 and the emissive map on unit 3, white when
+// unused and bound only when they change, and the sky a reflection shows, the colors setSky was given or the
+// ambient ones; with nothing set every part of it is skipped in the shader, and a map with no GL texture yet, or
+// one freed, counts as none, since the white texture in its place would bend every normal or light the surface
+function render3DSetMaterialUniforms(state)
+{
+    const r = render3D, loaded = (map)=> render3DTextureOf(map)?.glTexture ? map : undefined;
+    const normalMap = state.normalScale ? loaded(state.normalMap) : undefined, emissiveMap = loaded(state.emissiveMap);
+    render3DUniform4f('materialParams', normalMap ? state.normalScale : 0, state.shininess, state.reflectivity, 0);
+    const ec = state.emissiveMapColor || WHITE;
+    emissiveMap ? render3DUniform4f('emissiveTint', ec.r, ec.g, ec.b, 1) : render3DUniform4f('emissiveTint', 0, 0, 0, 0);
+    render3DBindMap(2, normalMap, state);
+    render3DBindMap(3, emissiveMap, state);
+    if (state.reflectivity > 0)
     {
-        glMipmappedTextures.add(texture); // the core makes them again when the texture changes
-        gl.generateMipmap(gl.TEXTURE_2D);
+        const sky = r.sky && render3DSkyColors.get(r.sky), a = r.ambientColor, g = r.ambientGroundColor || a;
+        const top = sky ? sky[0] : a, bottom = sky ? sky[2] : g;
+        render3DUniform4f('skyTop', top.r, top.g, top.b, 1);
+        render3DUniform4f('skyBottom', bottom.r, bottom.g, bottom.b, 1);
+        sky ? render3DUniform4f('skyHorizon', sky[1].r, sky[1].g, sky[1].b, 1) :
+            render3DUniform4f('skyHorizon', (a.r + g.r) / 2, (a.g + g.g) / 2, (a.b + g.b) / 2, 1);
     }
 }
 
+// what each material map unit has bound, index 2 and 3 the maps and 4 and 5 whether each is pixelated, forgotten at
+// the start and end of each pass
+let render3DBoundMaps = [];
+
+// bind a material map to its unit, or white for none, only when it or its filtering changed since the last draw
+function render3DBindMap(unit, map, state)
+{
+    const bound = render3DBoundMaps, pixelated = !!map && state.pixelated;
+    if (bound[unit] === map && bound[unit + 2] === pixelated) return;
+    bound[unit] = map, bound[unit + 2] = pixelated;
+    render3DBindTexture(map, state, unit);
+}
+
 // send a vec4 uniform of the main shader only when its value changed since the last send
 function render3DUniform4f(name, x, y, z, w)
 {
@@ -23746,6 +24410,7 @@ function render3DSetDrawUniforms(matrix, tileInfo, tint, uvRect, state=render3D)
     // a render target's texture holds premultiplied color, the blend writes it that way, so the shader undoes it
     const textureInfo = render3DTextureOf(tileInfo);
     render3DUniform1i('premultipliedTexture', +!!(textureInfo?.glTexture && glPremultipliedTextures.has(textureInfo.glTexture)));
+    render3DSetMaterialUniforms(state);
 }
 
 // the six flat sides of the camera's visible box, each as [x, y, z, w] facing inward
@@ -23767,6 +24432,7 @@ function render3DFrustumPlanes(matrix)
 function render3DPreRender()
 {
     const r = render3D;
+    editor3DCameraBegin(); // debug builds draw with the free camera or the 3D editor's, the game's is back after
     r.updateMatrices();
     r.shadowMapDrawn = false;
     render3DRenderPass(false);
@@ -23776,6 +24442,7 @@ function render3DPreRender()
 function render3DRender()
 {
     render3DRenderPass(true);
+    editor3DCameraEnd();
 }
 
 // one 3D pass for the objects of a layer: take over the gl state, draw the shadow map once a frame and the stages, hand
@@ -23825,7 +24492,8 @@ function render3DRenderPass(after2D)
     // may have left its own texture, which fails every draw; the shadow map goes back there even with shadows off
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, r.shadowTexture || null);
-    gl.activeTexture(gl.TEXTURE0);
+    // the material maps' units start white, a 2D plugin may have left its own textures there
+    render3DSetMapUnits(r.whiteTexture);
     gl.depthMask(true);
     gl.clear(gl.DEPTH_BUFFER_BIT);
 
@@ -23838,6 +24506,8 @@ function render3DRenderPass(after2D)
             render3DRenderShadowMap();
             r.shadowMapDrawn = true;
         }
+        // the camera's depth for post processing, from the default layer
+        r.depthTexture && isDefault && render3DRenderDepth();
         render3DUseProgram(r.program); // after the shadow map, so the light matrix it sends is this frame's
         r.renderStages(objects, isDefault);
     }
@@ -23853,6 +24523,7 @@ function render3DRenderPass(after2D)
         gl.depthMask(true);
         gl.frontFace(gl.CCW);
         gl.bindSampler(0, null); // back to the textures' own filtering for 2D
+        render3DSetMapUnits(null); // the material maps leave no texture or sampler behind for 2D
         if (glActiveTexture)
             gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
         // ARRAY_BUFFER is not part of VAO state in WebGL2, so bindVertexArray alone would not restore it
@@ -23861,6 +24532,21 @@ function render3DRenderPass(after2D)
     }
 }
 
+// put a texture on both material map units with no sampler, white at the start of the pass and none at its end, and
+// forget what the map cache thought was bound; unit 0 is active after
+function render3DSetMapUnits(texture)
+{
+    const gl = glContext;
+    for (const unit of [2, 3])
+    {
+        gl.activeTexture(gl.TEXTURE0 + unit);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.bindSampler(unit, null);
+    }
+    gl.activeTexture(gl.TEXTURE0);
+    render3DBoundMaps = [];
+}
+
 // create the shadow map depth texture and framebuffer at a size, or keep them when the size matches
 function render3DUpdateShadowMap(size)
 {
@@ -23937,6 +24623,65 @@ function render3DRenderShadowMap()
     }
 }
 
+// the camera's depth texture and its framebuffer at a size, made again when the canvas changes size; depth values
+// are not filtered, so it is read texel by texel
+function render3DUpdateCameraDepth(width, height)
+{
+    const gl = glContext, r = render3D;
+    if (r.cameraDepthTexture && r.cameraDepthWidth === width && r.cameraDepthHeight === height) return;
+    r.cameraDepthTexture && gl.deleteTexture(r.cameraDepthTexture);
+    r.cameraDepthFramebuffer && gl.deleteFramebuffer(r.cameraDepthFramebuffer);
+    const texture = r.cameraDepthTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    const framebuffer = r.cameraDepthFramebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, texture, 0);
+    gl.drawBuffers([gl.NONE]); // depth only
+    gl.readBuffer(gl.NONE);
+    ASSERT(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE, 'camera depth framebuffer is incomplete');
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    r.cameraDepthWidth = width, r.cameraDepthHeight = height;
+}
+
+// draw the camera's depth for post processing: the solid objects from the camera with the shadow map's depth only
+// shader, into a texture the size of the canvas; what is see through is cut by its alpha as it is for shadows
+function render3DRenderDepth()
+{
+    const gl = glContext, r = render3D, width = glCanvas.width, height = glCanvas.height;
+    render3DUpdateCameraDepth(width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, r.cameraDepthFramebuffer);
+    gl.viewport(0, 0, width, height);
+    gl.clear(gl.DEPTH_BUFFER_BIT);
+    gl.useProgram(r.shadowShader);
+    gl.uniformMatrix4fv(render3DUniform('viewProj', r.shadowShader), false, r.viewProjection.m);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.CULL_FACE);
+
+    r.shadowPass = r.depthPass = true;
+    try
+    {
+        const solids = render3DLayerObjects(!!r.renderAfter2D).filter(o=> !o.additive && (!o.transparent || o.tileInfo));
+        render3DDrawObjects(solids);
+        r.onRenderOpaque?.();
+        r.flush();
+        render3DFlushInstances();
+    }
+    finally
+    {
+        r.shadowPass = r.depthPass = false;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, width, height);
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Strips: every strip repeats its first point once at the start and its last
 // point once at the end. Those repeats make flat triangles with no area, which
@@ -24090,18 +24835,26 @@ function render3DStripTriangles(count, remap, place)
 }
 
 // a mesh's packed vertex data for the GPU, one vertex per entry of a layout, which is the strip index of each,
-// written into data when given, the buffer an earlier call returned for the same layout
+// written into data when given, the buffer an earlier call returned for the same layout; it measures the mesh's
+// radius and box as it goes, as computeRadius does, over the vertices once instead of every strip entry
 function render3DMeshVertexData(mesh, vertices, data=new ArrayBuffer(vertices.length * RENDER3D_VERTEX_BYTES))
 {
     const count = vertices.length;
     const floats = new Float32Array(data), ints = new Uint32Array(data);
+    let r = 0, x0 = Infinity, y0 = Infinity, z0 = Infinity, x1 = -Infinity, y1 = -Infinity, z1 = -Infinity;
     for (let j = 0; j < count; ++j)
     {
         // a hand built mesh may leave normals, uvs and colors empty
         const i = vertices[j], p = mesh.points[i], uv = mesh.uvs[i] || RENDER3D_DEFAULT_UV;
-        render3DWriteVertex(floats, ints, j * RENDER3D_VERTEX_FLOATS, p.x, p.y, p.z,
+        const x = p.x, y = p.y, z = p.z;
+        render3DWriteVertex(floats, ints, j * RENDER3D_VERTEX_FLOATS, x, y, z,
             mesh.normals[i] || RENDER3D_DEFAULT_NORMAL, uv.x, uv.y, (mesh.colors[i] || WHITE).rgbaInt());
+        r = max(r, x*x + y*y + z*z);
+        x0 = min(x0, x), y0 = min(y0, y), z0 = min(z0, z);
+        x1 = max(x1, x), y1 = max(y1, y), z1 = max(z1, z);
     }
+    mesh.radius = r ** .5;
+    mesh.bounds = count ? {min: vec3(x0, y0, z0), max: vec3(x1, y1, z1)} : {min: vec3(), max: vec3()};
     return data;
 }
 
@@ -24613,8 +25366,8 @@ class Mesh
      *  @return {Mesh} */
     upload()
     {
-        this.computeRadius();
-        if (!render3D?.program || !glContext) return this;
+        // the packing below measures the radius and box, with nothing to pack to they are measured here
+        if (!render3D?.program || !glContext) return this.computeRadius(), this;
         const gl = glContext, layout = this.vertexLayout;
         // no layout when dynamicDraw was turned on after an upload, the next upload makes one
         if (this.dynamicDraw && layout && this.buffer && this.contextGeneration === render3D.contextGeneration)
@@ -25116,25 +25869,30 @@ function buildSky(topColor=hsl(.6, .8, .55), horizonColor=hsl(.6, 1, .9), bottom
     // a sphere turned inside out so it is seen from within, each point colored by how high it is
     const mesh = buildSphere(2, sides, rings, true).flipNormals();
     mesh.colors = mesh.points.map(p=> p.y < 0 ? horizonColor.lerp(bottomColor, -p.y) : horizonColor.lerp(topColor, p.y));
+    render3DSkyColors.set(mesh, [topColor.copy(), horizonColor.copy(), bottomColor.copy()]);
     return mesh;
 }
 
+// the top, horizon and bottom colors of each sky dome buildSky made, which a reflection shows while that dome is
+// render3D.sky, whether setSky set it or the game did
+const render3DSkyColors = new WeakMap;
+
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * EngineObject3D - An EngineObject with a 3D transform and a mesh
  * - Set pos3D, rotation3D and scale3D instead of the 2D pos, size and angle
  * - Gets update, children, timers, destroy and renderOrder from EngineObject
- * - velocity3D is added to pos3D each frame, along with render3D.gravity and damping once it has a mass
+ * - velocity3D is added to pos3D each frame, slowed by damping, and render3D.gravity pulls it once it has a mass
  * - Objects face -Z, the same way the camera does, so lookAt turns them to face a point
  * - The 2D pos and velocity are still there but nothing draws them
- * - These inherited fields are 2D only and do nothing here: angle, angleVelocity, angleDamping,
- *   additiveColor, drawSize, mirror, clampSpeed, friction and groundObject
+ * - These inherited fields are 2D only and do nothing here: angle, angleVelocity, additiveColor, drawSize and mirror;
+ *   damping, angleDamping, clampSpeed, friction and groundObject work as in 2D, on velocity3D and angleVelocity3D
  * - The inherited shader works here as in 2D, and with emissive at 1 its snippet does its own lighting
  * - Set sync2D for a 2D game with 3D looks, pos and angle then drive pos3D and rotation3D,
  *   which is the one way those 2D fields reach a 3D object
  * - setCollision takes the same flags as in 2D, but the solid collision happens in 3D against size3D
- * - The solid box is axis aligned in the world, rotation3D is ignored like angle is in 2D, so give a turned wall a
- *   size3D along the world axes
+ * - The solid box turns with rotation3D, so a turned wall or a ramp collides as it looks; resting on one no steeper
+ *   than groundAngle stands there
  * - Its tile and raycast halves are 2D only so they default off here, and a child sits solid collision out
  * - A sync2D object collides in 2D instead, which needs the 2D size set as well as size3D
  * - setMesh swaps the mesh and frees the old one, for text and terrain that get built again
@@ -25182,7 +25940,7 @@ class EngineObject3D extends EngineObject
         /** @property {Vector3} - Added to pos3D each frame by the engine before update, like the 2D velocity, no super
          *  call needed; damping and render3D.gravity act on it once the object has a mass */
         this.velocity3D = vec3();
-        /** @property {Vector3} - Added to rotation3D each frame by the engine before update, angleDamping is 2D only */
+        /** @property {Vector3} - Added to rotation3D each frame by the engine before update, slowed by angleDamping */
         this.angleVelocity3D = vec3();
         /** @property {Mesh|undefined} - Mesh to draw
          *  @type {Mesh|undefined} */
@@ -25213,8 +25971,27 @@ class EngineObject3D extends EngineObject
          *  lamps and glowing things, between is partly self lit, and above 1 is brighter than its color, for bloom */
         this.emissive = 0;
         /** @property {number} - Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and
-         *  1 adds a light's full color at its brightest; its size is fixed */
+         *  1 adds a light's full color at its brightest; shininess sets its size */
         this.specular = 0;
+        /** @property {number} - The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 16 the
+         *  default, 100 sharp like polished metal; shows only with specular above 0 */
+        this.shininess = 16;
+        /** @property {TextureInfo|undefined} - A normal map that bends the surface at each texel so it catches the
+         *  light like bumps and grooves, green pointing up the image as OpenGL and glTF have it; read at the color
+         *  texture's coordinates, see normalMapFromHeight to make one in code
+         *  @type {TextureInfo|undefined} */
+        this.normalMap = undefined;
+        /** @property {number} - How strongly the normal map bends the surface, 0 turns it off, as glTF's scale */
+        this.normalScale = 1;
+        /** @property {number} - How much it reflects the sky, 0 none and 1 a mirror of it; the edges seen at a
+         *  glancing angle reflect more either way, as water and glass do */
+        this.reflectivity = 0;
+        /** @property {TextureInfo|undefined} - A texture of where it glows, added on top of the lit surface so it
+         *  shows in the dark, like lit windows; read at the color texture's coordinates
+         *  @type {TextureInfo|undefined} */
+        this.emissiveMap = undefined;
+        /** @property {Color} - Multiplies the emissive map, as glTF's emissiveFactor */
+        this.emissiveMapColor = WHITE;
         /** @property {boolean} - Draw into the shadow map when render3D.shadows is on; sprites and cut out textures
          *  cast their outline, an object faded below half its alpha casts nothing, a see through one casts only when
          *  textured, and additive objects never cast */
@@ -25222,6 +25999,9 @@ class EngineObject3D extends EngineObject
         /** @property {boolean} - Collide as the sphere that fits size3D instead of as the size3D box, so it rolls
          *  around corners */
         this.collideAsSphere3D = false;
+        /** @property {number} - The steepest slope it stands on, in radians from level, PI/4 by default: resting on
+         *  a solid within this of flat sets groundObject and holds it still, steeper it slides down */
+        this.groundAngle = PI / 4;
         /** @property {boolean} - Darkened by the shadow map when render3D.shadows is on */
         this.receiveShadow = true;
         /** @property {boolean|undefined} - Draw this object over the 2D scene, undefined uses render3D.renderAfter2D
@@ -25252,10 +26032,32 @@ class EngineObject3D extends EngineObject
             'a sync2D object collides in 2D, so give it a 2D size as well as a size3D', this.size);
         if (this.sync2D)
             super.updatePhysics();
+        ASSERT(isNumber(this.groundAngle) && this.groundAngle >= 0 && this.groundAngle < PI / 2,
+            'groundAngle must be 0 to less than PI/2, a slope from level', this.groundAngle);
+        // what it stands on is found again each frame, by the level and by the solids it rests on; a sync2D
+        // object's is the 2D physics'
+        const ground = this.groundObject;
+        this.sync2D || (this.groundObject = undefined);
+        if (this.clampSpeed && !this.sync2D && (this.collideSolidObjects || this.collideLevel && this.mass))
+        {
+            // each axis within objectMaxSpeed, as in 2D, so a fast object does not pass through a thin wall; only
+            // for what collides, anything else moves as fast as it is told
+            const v = this.velocity3D, s = objectMaxSpeed;
+            v.x = clamp(v.x, -s, s), v.y = clamp(v.y, -s, s), v.z = clamp(v.z, -s, s);
+        }
         // a moving object keeps out of the level, the height maps and voxel maps, from where it was before it moved
         const oldPos = this.collideLevel && this.mass && !this.sync2D ? this.pos3D.copy() : undefined;
         render3DMove(this);
-        oldPos && render3DCollideLevel(this, oldPos);
+        if (ground && this.mass && !this.sync2D)
+        {
+            // sliding on what it stood on slows by friction, the less grippy of the two, relative to that one's own
+            // speed so a moving platform carries it, as in 2D
+            const friction = max(this.friction, ground.friction), v = this.velocity3D;
+            const moving = ground instanceof EngineObject3D ? ground.velocity3D : undefined;
+            const gx = moving?.x ?? 0, gz = moving?.z ?? 0;
+            v.x = gx + (v.x - gx) * friction, v.z = gz + (v.z - gz) * friction;
+        }
+        oldPos && render3DCollideLevel(this, oldPos, ground);
         // the engine only runs this for objects that own where they are, a child rides along with its parent
         if (this.collideSolidObjects && !this.sync2D)
             render3DCollideSolid(this);
@@ -25288,7 +26090,7 @@ class EngineObject3D extends EngineObject
 
     /** Set how this object collides, the same flags as in 2D
      *  - Solid collision happens in 3D here, against size3D boxes or spheres; a child sits it out
-     *  - The boxes are axis aligned in the world, rotation3D is ignored
+     *  - The boxes turn with rotation3D, against height maps and voxel maps an object is still its upright box
      *  - A sync2D object collides in 2D instead, against the 2D size, so set that as well as size3D
      *  @param {boolean} [collideSolidObjects] - Take part in solid collision
      *  @param {boolean} [isSolid] - Block other objects, a pair where neither one blocks passes through;
@@ -25476,27 +26278,29 @@ function render3DObjectMatrix(o)
     return o.worldMatrix;
 }
 
-// move an object by its 3D velocities, an object with mass falling with render3D.gravity and slowing by its damping
+// move an object by its 3D velocities, each slowed by its damping, an object with mass falling with render3D.gravity
 function render3DMove(o)
 {
     // the vectors change in place, as the 2D object's do: this runs for every object every frame
+    // a sync2D object's damping is the 2D physics', its 3D velocities are its own to set
     const p = o.pos3D, v = o.velocity3D, r = o.rotation3D, a = o.angleVelocity3D;
+    const d = o.sync2D ? 1 : o.damping, e = o.sync2D ? 1 : o.angleDamping;
+    // damped first and gravity added after, the order EngineObject.updatePhysics uses,
+    // so the same mass, damping and gravity fall the same way in both
+    v.x *= d, v.y *= d, v.z *= d;
     if (o.mass && !o.sync2D) // a 2D driven object gets the 2D gravity instead
     {
-        // damped first and gravity added after, the order EngineObject.updatePhysics uses,
-        // so the same mass, damping and gravity fall the same way in both
-        const g = render3D.gravity, s = o.gravityScale, d = o.damping;
-        v.x = v.x * d + g.x * s, v.y = v.y * d + g.y * s, v.z = v.z * d + g.z * s;
+        const g = render3D.gravity, s = o.gravityScale;
+        v.x += g.x * s, v.y += g.y * s, v.z += g.z * s;
     }
     p.x += v.x, p.y += v.y, p.z += v.z;
-    r.x += a.x, r.y += a.y, r.z += a.z;
+    r.x += a.x *= e, r.y += a.y *= e, r.z += a.z *= e;
 }
 
 // keep an object that moved out of the level's solid geometry, clearing what it stood on for the level to set again
-function render3DCollideLevel(o, oldPos)
+// ground is what it stood on last frame, which a height map keeps it on going down a slope
+function render3DCollideLevel(o, oldPos, ground)
 {
-    const ground = o.groundObject;
-    o.groundObject = undefined;
     for (const level of render3DLevel)
         level.destroyed || level.levelCollide3D(o, oldPos, level === ground);
 }
@@ -25513,7 +26317,23 @@ function render3DSolidShape(o)
     const kx = abs(k.x), ky = abs(k.y), kz = abs(k.z);
     if (o.collideAsSphere3D)
         return {pos: o.pos3D.copy(), radius: max(s.x, s.y, s.z) / 2 * max(kx, ky, kz)};
-    return {pos: o.pos3D.copy(), size: vec3(s.x * kx, s.y * ky, s.z * kz)};
+    // a turned box has its axes, a solid is never a child so its rotation is the world's; an upright one has none, and
+    // neither does a sprite, whose rotation turns how it faces the camera, not its box
+    const axes = !render3DIsSprite(o) && isTurned3D(o.rotation3D) ? render3DSolidAxes(o) : undefined;
+    return {pos: o.pos3D.copy(), size: vec3(s.x * kx, s.y * ky, s.z * kz), axes};
+}
+
+// a turned solid's three axes, worked out when its rotation changes and kept until then, so the pairs it is tested
+// against each frame do not each work them out again
+const render3DSolidAxesCache = new WeakMap;
+function render3DSolidAxes(o)
+{
+    const r = o.rotation3D, kept = render3DSolidAxesCache.get(o);
+    if (kept && kept.x === r.x && kept.y === r.y && kept.z === r.z)
+        return kept.axes;
+    const axes = boxAxes3D(r);
+    render3DSolidAxesCache.set(o, {x: r.x, y: r.y, z: r.z, axes});
+    return axes;
 }
 
 // how far a solid shape can reach from its own center, for a quick reject before the exact test
@@ -25531,15 +26351,30 @@ function render3DSolidReach(o)
 // what it takes to move shape a clear of shape b, whichever pair of shapes they are, or undefined for no touch
 function render3DSolidPush(a, b)
 {
+    // a turned box is tested by its kept axes, the upright pairs as they always were
+    const sphereBox = (sphere, box)=> box.axes ? collideSphereOrientedBox3D(sphere.pos, sphere.radius, box.pos,
+        box.size, box.axes) : collideSphereBox(sphere.pos, sphere.radius, box.pos, box.size);
     if (!a.size) // a is a sphere
-        return b.size ? collideSphereBox(a.pos, a.radius, b.pos, b.size)
-            : collideSphereSphere(a.pos, a.radius, b.pos, b.radius);
+        return b.size ? sphereBox(a, b) : collideSphereSphere(a.pos, a.radius, b.pos, b.radius);
     if (!b.size) // only b is, so push b out of a and turn it around
     {
-        const push = collideSphereBox(b.pos, b.radius, a.pos, a.size);
+        const push = sphereBox(b, a);
         return push && push.scale(-1);
     }
-    return collideBoxBox3D(a.pos, a.size, b.pos, b.size);
+    return a.axes || b.axes ? collideOrientedBoxes3D(a.pos, a.size, a.axes ?? BOX_WORLD_AXES, b.pos, b.size,
+        b.axes ?? BOX_WORLD_AXES) : collideBoxBox3D(a.pos, a.size, b.pos, b.size);
+}
+
+// a sprite, a tile with no mesh, which faces the camera however it is turned
+const render3DIsSprite = (o)=> !o.mesh && !!o.tileInfo;
+
+// whether a push leaves a box by one of its faces, along one of its axes, not by an edge or a corner; a sphere has
+// no face to stand on
+function render3DOnFace(push, shape)
+{
+    if (!shape.size) return false;
+    const n = push.normalize(), axes = shape.axes ?? BOX_WORLD_AXES;
+    return max(abs(n.dot(axes[0])), abs(n.dot(axes[1])), abs(n.dot(axes[2]))) > 1 - 1e-6;
 }
 
 // push a solid object out of the solids before it in the engine's list of them, so each pair is resolved once:
@@ -25565,7 +26400,8 @@ function render3DCollideSolid(a)
         if (dx*dx + dy*dy + dz*dz > reach*reach)
             continue;
 
-        const push = render3DSolidPush(shapeA, render3DSolidShape(b));
+        const shapeB = render3DSolidShape(b);
+        let push = render3DSolidPush(shapeA, shapeB);
         if (!push) continue;
 
         // both objects hear about it, and either one can take the touch over
@@ -25573,6 +26409,19 @@ function render3DCollideSolid(a)
         const resolveB = b.collideWithObject(a, push.scale(-1));
         if (!resolveA || !resolveB) continue;
 
+        // standing: resting on a box's face within the upper one's groundAngle of level holds it there, the push
+        // turned straight up, as far as it takes to leave the surface, so it does not creep down a ramp; only what
+        // moves stands, and a sphere, an edge or a corner is nothing to stand on, what rests there rolls off
+        const lengthSquared = push.lengthSquared(), up = push.y / lengthSquared ** .5;
+        const aStands = up > 0 && a.mass && up >= cos(a.groundAngle) && render3DOnFace(push, shapeB);
+        const bStands = up < 0 && b.mass && -up >= cos(b.groundAngle) && render3DOnFace(push, shapeA);
+        if (aStands || bStands)
+        {
+            aStands ? a.groundObject = b : b.groundObject = a;
+            if (push.x || push.z) // one straight up already is used as it is
+                push = vec3(0, lengthSquared / push.y, 0);
+        }
+
         // heavier objects move less, mass 0 stays put; then bounce apart when moving toward each other
         const total = a.mass + b.mass;
         const weightA = !a.mass ? 0 : !b.mass ? 1 : b.mass / total;
@@ -25593,8 +26442,8 @@ function render3DCollideSolid(a)
 
 /**
  * Collect the EngineObject3D objects whose boxes overlap a sphere or a box, the 3D twin of engineObjectsCollect
- * - Boxes are axis aligned around the world position, rotation3D is ignored; lights, emitters and trails have no size
- *   and are never collected
+ * - Each object is its size3D box at its world position, turned as it is turned; lights, emitters and trails have no
+ *   size and are never collected
  * @param {Vector3} pos - Center of the area
  * @param {Vector3|number} size - Diameter of a sphere if a number, 0 for a point, full size of a box if a Vector3
  * @param {Array<EngineObject>} [objects] - Defaults to every object
@@ -25616,9 +26465,27 @@ function engineObjectsCollect3D(pos, size, objects=engineObjects, testCenters=fa
         if (!(s.x || s.y || s.z)) continue;
         const center = vec3(m[12], m[13], m[14]);
         const worldSize = testCenters ? vec3() : render3DWorldSize(o, m);
+        // a turned box is tested as turned, its axes read off the matrix, its columns with the scale taken out
+        const turned = !testCenters && !render3DIsSprite(o) && (m[1] || m[2] || m[4] || m[6] || m[8] || m[9]);
+        const axis = (i)=> vec3(m[i], m[i+1], m[i+2]).normalize();
+        let axes = turned ? [axis(0), axis(4), axis(8)] : undefined;
+        if (axes && (abs(axes[0].dot(axes[1])) > 1e-6 || abs(axes[0].dot(axes[2])) > 1e-6 ||
+            abs(axes[1].dot(axes[2])) > 1e-6))
+        {
+            // a turned child of an unevenly scaled parent is sheared, its edges no longer square, which the box
+            // tests do not take; the upright box around it stands in, which may take a little more but never misses
+            const e = axes.map((a, i)=> a.scale(i ? i > 1 ? worldSize.z / 2 : worldSize.y / 2 : worldSize.x / 2));
+            const reach = (c)=> 2 * (abs(e[0][c]) + abs(e[1][c]) + abs(e[2][c]));
+            worldSize.set(reach('x'), reach('y'), reach('z'));
+            axes = undefined;
+        }
         let hit;
-        if (box)
+        if (box && axes)
+            hit = !!collideOrientedBoxes3D(pos, box, BOX_WORLD_AXES, center, worldSize, axes);
+        else if (box)
             hit = isOverlapping3D(pos, box, center, worldSize);
+        else if (axes)
+            hit = !!collideSphereOrientedBox3D(pos, radiusSquared ** .5, center, worldSize, axes);
         else
         {
             // a sphere against the nearest point of the box
@@ -25941,10 +26808,53 @@ class Light3D extends EngineObject3D
         /** @property {boolean} - Shine from far away, from its position toward the origin, instead of out from its
          *  position with a falloff; DirectionalLight3D sets it */
         this.directional = false;
+        /** @property {number} - Size of a soft hazy glow drawn over the light, like a lamp at night, 0 for none; it
+         *  is added onto what is behind it, and what is in front of the light hides it */
+        this.glow = 0;
+        /** @property {number} - How fast the glow fades from its middle: 1 by default, .5 a wide haze, 2 a tight
+         *  bright core */
+        this.glowFalloff = 1;
+        this.additive = true; // the glow is added on, in the transparent stage; a light with none draws nothing
     }
 
-    /** Lights draw nothing */
-    render3D() {}
+    /** Draw the glow, a quad facing the camera with a soft round glow on it, pulled toward the camera by half its
+     *  size so a lamp at the light does not cut into it, but never past the camera */
+    render3D()
+    {
+        if (!(this.glow > 0) || this.directional) return;
+        const r = render3D, c = this.color, pos = render3DObjectMatrix(this).getTranslation();
+        const toCamera = r.camera.pos.subtract(pos), distance = toCamera.length();
+        const at = distance ? pos.add(toCamera.scale(min(this.glow, distance) / 2 / distance)) : pos;
+        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1));
+        r.drawBillboard(at, vec2(this.glow), render3DGlow(this.glowFalloff), color);
+    }
+}
+
+// how strong a light's glow is at a distance from its middle, 0 there to 1 at the edge: a bell, full in the middle
+// and nothing at the edge, fading faster the higher the falloff
+function render3DGlowAlpha(r, falloff)
+{
+    const k = 3.5 * falloff, edge = Math.exp(-k);
+    return (Math.exp(-k * r * r) - edge) / (1 - edge);
+}
+
+// the soft round glow of the lights, one texture for each falloff, rounded to a tenth so a changing falloff makes
+// only a few, each made once from a canvas; undefined headless or without a canvas
+const render3DGlowTextures = new Map;
+function render3DGlow(falloff=1)
+{
+    ASSERT(isNumber(falloff) && falloff > 0, 'glowFalloff must be a number above 0');
+    const key = max(round(falloff * 10), 1) / 10;
+    let texture = render3DGlowTextures.get(key);
+    if (texture || !glContext || typeof OffscreenCanvas == 'undefined') return texture;
+    const size = 64, context = createCanvasContext(size), steps = 16;
+    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    for (let i = 0; i <= steps; ++i)
+        gradient.addColorStop(i / steps, 'rgba(255,255,255,' + render3DGlowAlpha(i / steps, key).toFixed(4) + ')');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, size, size);
+    render3DGlowTextures.set(key, texture = new TextureInfo(context.canvas));
+    return texture;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -26010,6 +26920,54 @@ function render3DSoftDot()
     return render3DSoftDotTexture = new TextureInfo(context.canvas);
 }
 
+/** Make a normal map from a height at each pixel, for bumps and grooves with no image file: the slope at each pixel
+ *  from its neighbors' heights, taken around the edges so the map tiles; set it as an object's normalMap
+ *  @param {Vector2} size - In pixels
+ *  @param {function(number, number): number} heightFunction - The height 0 to 1 at a pixel, x across and y down
+ *  @param {number} [strength] - How steep the slopes are: a height change of 1 over one pixel leans the normal
+ *  by strength
+ *  @return {TextureInfo} - Wraps; headless it has no image
+ *  @memberof Render3D */
+function normalMapFromHeight(size, heightFunction, strength=1)
+{
+    ASSERT(isVector2(size) && size.x >= 1 && size.y >= 1, 'normalMapFromHeight size must be a Vector2 of pixels');
+    const width = size.x | 0, height = size.y | 0;
+    if (typeof OffscreenCanvas == 'undefined')
+    {
+        // headless, nothing to draw into; the right size so what reads it still works
+        const textureInfo = new TextureInfo(undefined, false, true);
+        textureInfo.size = vec2(width, height), textureInfo.sizeInverse = vec2(1 / width, 1 / height);
+        return textureInfo;
+    }
+    const context = createCanvasContext(width, height);
+    const pixels = render3DNormalMapPixels(width, height, heightFunction, strength);
+    context.putImageData(new ImageData(pixels, width, height), 0, 0);
+    return new TextureInfo(context.canvas, true, true);
+}
+
+// the pixels of a normal map made from heights, rgba with the top row first: each normal leans away from the uphill
+// side, green up the image as OpenGL has it, and a flat height is (128, 128, 255); rounded before they are stored,
+// since the clamped array would round a flat 127.5 to even
+function render3DNormalMapPixels(width, height, heightFunction, strength)
+{
+    const heights = new Float32Array(width * height), pixels = new Uint8ClampedArray(width * height * 4);
+    for (let y = 0; y < height; ++y)
+    for (let x = 0; x < width; ++x)
+        heights[y * width + x] = heightFunction(x, y);
+    const h = (x, y)=> heights[mod(y, height) * width + mod(x, width)];
+    for (let y = 0; y < height; ++y)
+    for (let x = 0; x < width; ++x)
+    {
+        const dx = (h(x+1, y) - h(x-1, y)) / 2 * strength, dy = (h(x, y+1) - h(x, y-1)) / 2 * strength;
+        const k = 1 / hypot(dx, dy, 1), i = (y * width + x) * 4;
+        pixels[i] = round((-dx * k * .5 + .5) * 255);
+        pixels[i+1] = round((dy * k * .5 + .5) * 255);
+        pixels[i+2] = round((k * .5 + .5) * 255);
+        pixels[i+3] = 255;
+    }
+    return pixels;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // The rest of the shape builders: buildLathe, buildSphere, buildBox, buildGrid and buildSky live with the
 // renderer, since it hands those out itself
@@ -26546,6 +27504,22 @@ class HeightMap extends EngineObject3D
      *  @ignore */
     levelRaycast3D(ray) { return this.raycast(ray); }
 
+    /** Where a short move goes under the surface, for a particle's move in one frame: the part of the move made
+     *  before it, 0 to 1, and the surface normal there; undefined when it stays above, starts under, or is off the map
+     *  @param {Vector3} from
+     *  @param {Vector3} to
+     *  @return {{distance: number, normal: Vector3}|undefined}
+     *  @ignore */
+    levelSegment3D(from, to)
+    {
+        const m = this.pos3D, size = this.mapSize;
+        if (abs(to.x - m.x) > size.x / 2 || abs(to.z - m.z) > size.y / 2) return; // off the map
+        const a = from.y - this.getHeight(from.x, from.z), b = to.y - this.getHeight(to.x, to.z);
+        if (a < 0 || b >= 0) return; // above all the way, or under from the start
+        const distance = a / (a - b);
+        return {distance, normal: this.getNormal(from.x + (to.x - from.x) * distance, from.z + (to.z - from.z) * distance)};
+    }
+
     /** Keep an object above the ground, called by the engine for each object with collideLevel
      *  @param {EngineObject3D} o
      *  @param {Vector3} oldPos - Where it was before it moved
@@ -26734,7 +27708,7 @@ class FirstPersonCamera3D extends EngineObject3D
         /** @property {boolean} - Capture the mouse on a click, so looking needs no button held */
         this.lockPointer = true;
         /** @property {number} - Speed of a jump in world units a frame, 0 for none; Space or gamepad button 0 jumps
-         *  while it stands on something, a height map or voxel map it collides with, see collideLevel */
+         *  while it stands on something, a height map, a voxel map or a solid, see groundObject */
         this.jumpSpeed = 0;
         /** @property {number} - How far above its position the eye is, in its own space, so with a size3D the eye can
          *  sit toward the top of the body instead of its middle; keep it under half the body's height, or the eye is
@@ -26805,6 +27779,49 @@ class FirstPersonCamera3D extends EngineObject3D
 const RENDER3D_PARTICLE_FLOATS = 21;
 // the position, color and size of the particle being drawn, shared by every emitter so the draw loop makes no objects
 const render3DParticlePos = vec3(), render3DParticleColor = new Color, render3DParticleSize = vec2();
+// where a particle was and is, for the level collision
+const render3DParticleFrom = vec3(), render3DParticleTo = vec3();
+
+// the emitters inside a particle callback now, whose nested calls each get a view of their own
+const render3DParticlesCalling = new Set;
+
+// a particle as a ParticleEmitter3D's callbacks see it, set from the particle for each call
+/** @param {ParticleEmitter3D} emitter
+ *  @return {Particle3D} */
+function render3DParticleView(emitter)
+{
+    return {emitter, pos: vec3(), velocity: vec3(), age: 0, lifeTime: 0, destroyed: false,
+        destroy() { this.destroyed = true; }};
+}
+
+/**
+ * A particle as a ParticleEmitter3D's callbacks see it: one object the emitter reuses, set from the particle for each
+ * call and written back after it, so copy what you keep
+ * @typedef {Object} Particle3D
+ * @property {ParticleEmitter3D} emitter - The emitter it is in
+ * @property {Vector3} pos - Where it is, change it to move it
+ * @property {Vector3} velocity - How far it moves each frame
+ * @property {number} age - Seconds it has lived
+ * @property {number} lifeTime - Seconds it lives
+ * @property {boolean} destroyed - Set by destroy
+ * @property {function(): void} destroy - End it this update, the destroy callback gets it
+ * @memberof Render3D
+ */
+
+/**
+ * @callback Particle3DCallback - A function a ParticleEmitter3D calls with one of its particles
+ * @param {Particle3D} particle
+ * @memberof Render3D
+ */
+
+/**
+ * @callback Particle3DCollideCallback - Decides whether a particle stops where it hits the level, a filter as in 2D
+ * @param {Particle3D} particle
+ * @param {EngineObject3D} level - The HeightMap or VoxelMap it hit
+ * @param {Vector3} pos - Where it hit
+ * @return {boolean|void} - true to stop it there; a callback that returns nothing lets it pass through
+ * @memberof Render3D
+ */
 
 /**
  * ParticleEmitter3D - Spawns camera facing particles, the 3D twin of ParticleEmitter
@@ -26818,6 +27835,10 @@ const render3DParticlePos = vec3(), render3DParticleColor = new Color, render3DP
  * - gravity here is its own number added to velocity y each frame: it is neither the engine's 2D
  *   gravity nor render3D.gravity, so an effect keeps its own fall wherever it is used
  * - An emitter with an emitTime destroys itself once its last particle is gone, like the 2D emitter
+ * - Callbacks as the 2D emitter's: particleCreateCallback, particleUpdateCallback, particleCollideCallback and
+ *   particleDestroyCallback, each given a Particle3D, one object the emitter reuses for every particle and call
+ * - collideLevel, off by default, has particles hit the height maps and voxel maps, bouncing by restitution and
+ *   sliding by friction
  * @extends EngineObject3D
  * @memberof Render3D
  * @example
@@ -26890,7 +27911,8 @@ class ParticleEmitter3D extends EngineObject3D
         this.randomness = randomness;
         /** @property {boolean} - Additive blending */
         this.additive = additive;
-        /** @property {number} - Seconds of each particle's path to draw as a ribbon behind it, 0 draws billboards */
+        /** @property {number} - Seconds of each particle's path to draw as a ribbon behind it, 0 draws billboards;
+         *  with engineVariableStep it keeps trailTime * frameRate updates of path */
         this.trailTime = 0;
         /** @property {number} - Radians per frame each particle turns in the camera plane, either way; 0 is no spin */
         this.angleSpeed = 0;
@@ -26906,6 +27928,25 @@ class ParticleEmitter3D extends EngineObject3D
         this.trailData = undefined;
         /** @property {number} - Trail points kept per particle, from trailTime */
         this.trailMax = 0;
+        /** @property {boolean} - Particles hit the level, the height maps and voxel maps, bouncing by restitution and
+         *  sliding along by friction; off by default, it tests each particle's move against the level every frame */
+        this.collideLevel = false;
+        /** @property {Particle3DCallback|undefined} - Called with each particle as it is made
+         *  @type {Particle3DCallback|undefined} */
+        this.particleCreateCallback = undefined;
+        /** @property {Particle3DCallback|undefined} - Called with each particle each update, after it moves
+         *  @type {Particle3DCallback|undefined} */
+        this.particleUpdateCallback = undefined;
+        /** @property {Particle3DCollideCallback|undefined} - Decides if a particle stops where it hits the level,
+         *  with collideLevel on; a callback that returns nothing lets it through
+         *  @type {Particle3DCollideCallback|undefined} */
+        this.particleCollideCallback = undefined;
+        /** @property {Particle3DCallback|undefined} - Called with each particle as it goes, its life over or destroyed
+         *  @type {Particle3DCallback|undefined} */
+        this.particleDestroyCallback = undefined;
+        /** @property {Particle3D} - The particle the callbacks get, one object for every particle and call
+         *  @type {Particle3D} */
+        this.particleView = render3DParticleView(this);
         /** @property {Vector3|undefined} - Where the emitter was at its last update, for when its parent is destroyed
          *  @type {Vector3|undefined} */
         this.worldPos3D = undefined;
@@ -26935,8 +27976,9 @@ class ParticleEmitter3D extends EngineObject3D
         else if (!this.particleCount)
             this.destroy();
 
-        // the trail storage follows trailTime, a change starts every trail over
-        const trailMax = this.trailTime ? max(1, round(this.trailTime / timeDelta)) : 0;
+        // the trail storage follows trailTime at the fixed rate, a change starts every trail over, so a varying
+        // timeDelta can not; with engineVariableStep a trail keeps that many updates
+        const trailMax = this.trailTime ? max(1, round(this.trailTime * frameRate)) : 0;
         if (trailMax !== this.trailMax)
         {
             this.trailMax = trailMax;
@@ -26946,8 +27988,13 @@ class ParticleEmitter3D extends EngineObject3D
         }
 
         // move the particles and drop the dead ones, all in the typed array: this runs for every particle every frame
-        const F = RENDER3D_PARTICLE_FLOATS, data = this.particleData, trail = this.trailData;
+        // a callback can emit, which grows the arrays when they are full, so they are read again after each one
+        const F = RENDER3D_PARTICLE_FLOATS;
+        let data = this.particleData, trail = this.trailData;
+        const reread = ()=> { data = this.particleData, trail = this.trailData; };
         const damping = this.damping, gravity = this.gravity * scale, angleDamping = this.angleDamping; // a bigger effect has to fall faster to keep the same arc
+        const collideLevel = this.collideLevel && render3DLevel.length;
+        const updateCallback = this.particleUpdateCallback, destroyCallback = this.particleDestroyCallback;
         for (let i = this.particleCount; i--;)
         {
             // damped first and gravity added after, the order the 2D particle uses, so the same
@@ -26956,6 +28003,7 @@ class ParticleEmitter3D extends EngineObject3D
             const vx = data[k+3] *= damping, vy = data[k+4] = data[k+4] * damping + gravity, vz = data[k+5] *= damping;
             data[k] += vx, data[k+1] += vy, data[k+2] += vz;
             data[k+18] += data[k+19] *= angleDamping;
+            collideLevel && (this.particleCollide(k, data[k] - vx, data[k+1] - vy, data[k+2] - vz), reread());
             const t = i * trailMax * 3;
             if (trailMax)
             {
@@ -26967,9 +28015,11 @@ class ParticleEmitter3D extends EngineObject3D
                 trail[j] = data[k], trail[j+1] = data[k+1], trail[j+2] = data[k+2];
                 data[k+20] = n + 1;
             }
+            updateCallback && (this.particleCall(updateCallback, k), reread());
             if ((data[k+17] += timeDelta) >= data[k+16])
             {
                 // dead: the last particle takes its slot, trail and all, order does not matter
+                destroyCallback && (this.particleCall(destroyCallback, k), reread());
                 const last = --this.particleCount, kl = last * F;
                 if (i !== last)
                 {
@@ -27036,6 +28086,60 @@ class ParticleEmitter3D extends EngineObject3D
         data[k+18] = this.angleSpeed ? rand(2*PI) : 0;
         data[k+19] = this.angleSpeed ? this.angleSpeed * random() * randSign() : 0;
         data[k+20] = 0; // trail points
+        this.particleCreateCallback && this.particleCall(this.particleCreateCallback, k);
+    }
+
+    // call a particle callback with the particle at k: the emitter's one Particle3D is set from its numbers, and
+    // what the callback changes is written back; a particle it destroys has lived its life, the update removes it
+    particleCall(callback, k, level, pos)
+    {
+        // a callback that emits runs the create callback inside itself, which gets a view of its own so this one
+        // keeps its particle; what the callback changes is written to the arrays as they are after it, since an
+        // emit into a full emitter grows them
+        const nested = render3DParticlesCalling.has(this);
+        const view = nested ? render3DParticleView(this) : this.particleView, data = this.particleData;
+        view.pos.set(data[k], data[k+1], data[k+2]);
+        view.velocity.set(data[k+3], data[k+4], data[k+5]);
+        view.age = data[k+17], view.lifeTime = data[k+16], view.destroyed = false;
+        render3DParticlesCalling.add(this);
+        let result;
+        try { result = callback(view, level, pos); }
+        finally { nested || render3DParticlesCalling.delete(this); }
+        const out = this.particleData;
+        out[k] = view.pos.x, out[k+1] = view.pos.y, out[k+2] = view.pos.z;
+        out[k+3] = view.velocity.x, out[k+4] = view.velocity.y, out[k+5] = view.velocity.z;
+        if (view.destroyed)
+            out[k+17] = max(out[k+17], out[k+16] - timeDelta); // aged past its life this update
+        return result;
+    }
+
+    // stop the particle at k where its last move went into the level, from where it was: back at the surface, a hair
+    // off it, its speed into it turned around by restitution and its speed along it kept by friction, unless the
+    // collide callback lets it through; one that starts inside is let go, as a 2D one is
+    particleCollide(k, x, y, z)
+    {
+        let data = this.particleData;
+        const from = render3DParticleFrom.set(x, y, z);
+        const to = render3DParticleTo.set(data[k], data[k+1], data[k+2]);
+        let hit, level;
+        for (const l of render3DLevel)
+        {
+            const h = l.destroyed ? undefined : l.levelSegment3D(from, to);
+            if (h && (!hit || h.distance < hit.distance))
+                hit = h, level = l;
+        }
+        if (!hit) return;
+        const point = from.lerp(to, hit.distance);
+        const callback = this.particleCollideCallback;
+        if (callback && (!this.particleCall(callback, k, level, point.copy()) || this.particleView.destroyed))
+            return; // let through, or destroyed by the callback
+        data = this.particleData; // as the callback left it, an emit may have grown it
+
+        const n = hit.normal, v = vec3(data[k+3], data[k+4], data[k+5]), into = n.scale(v.dot(n));
+        const restitution = max(this.restitution, level.restitution), friction = max(this.friction, level.friction);
+        const out = v.subtract(into).scale(friction).subtract(into.scale(restitution)), p = point.add(n.scale(1e-3));
+        data[k] = p.x, data[k+1] = p.y, data[k+2] = p.z;
+        data[k+3] = out.x, data[k+4] = out.y, data[k+5] = out.z;
     }
 
     /** Draw the particles, as flat squares or as streaks when trailTime is set
@@ -28190,6 +29294,18 @@ class VoxelMap extends EngineObject3D
      *  @ignore */
     levelRaycast3D(ray) { return this.raycast(ray)?.distance; }
 
+    /** Where a short move goes into a block, for a particle's move in one frame: the part of the move made before it,
+     *  0 to 1, and the normal of the face it comes in through; undefined when it hits none, or starts inside one
+     *  @param {Vector3} from
+     *  @param {Vector3} to
+     *  @return {{distance: number, normal: Vector3}|undefined}
+     *  @ignore */
+    levelSegment3D(from, to)
+    {
+        const hit = this.raycast(new Ray3D(from, to.subtract(from)), 1);
+        return hit && hit.distance > 0 ? {distance: hit.distance, normal: hit.normal} : undefined;
+    }
+
     /** Keeps an eye on its placement, called automatically each frame */
     update()
     {
@@ -28226,6 +29342,194 @@ class VoxelMap extends EngineObject3D
     }
 }
 
+/**
+ * LittleJS 3D Level Plugin
+ * - A 3D level is a list of objects, each a type name, a position, and a rotation, scale and properties where
+ *   they are not the default, kept as plain JSON that can be written by hand
+ * - level3DAddType names the types a game makes them from, as objectLayersAddType does in 2D
+ * - level3DLoad makes every object of a level
+ * - Box, Sphere, Cylinder and Light are built in, to block out and light a level with no code
+ * - The 3D level editor, in debug builds, edits the level a game loaded
+ * @namespace Level3D
+ */
+
+///////////////////////////////////////////////////////////////////////////////
+
+const LEVEL3D_VERSION = 1; // the format a level's littlejs3D names
+
+// the types a level's objects are made from, by name
+const level3DTypes = new Map;
+
+// the scale each object had when it was made, the level's scale multiplies it
+const level3DBaseScale = new WeakMap;
+
+/** Add a type of object, so level3DLoad makes one wherever a level has an object of that type
+ *  - The name is a string because minified builds rename classes
+ *  - A class, or any function with a prototype, is made with new make(pos3D, properties); an arrow function is
+ *    called as make(pos3D, properties), for what is not an object, like a player start
+ *  - properties is the defaults with the object's own values over them, and each of the type's own is also set on
+ *    what was made; a property the type has no default for is in properties and is not set
+ *  - Give a class a constructor of its own that takes the position: one that hands every argument on to
+ *    EngineObject3D would hand it the properties as its mesh
+ *  - An EngineObject3D then gets the object's rotation, and its scale times the scale it was made with
+ *  - Adding a name again replaces it, Box, Sphere, Cylinder and Light too
+ *  @param {string} name - The type the objects have in the level
+ *  @param {Function} make - A class made at each object's position, or a function called with it
+ *  @param {Object} [defaults] - Properties of each one made, the level editor shows inputs for them
+ *  @param {TileInfo} [tileInfo] - An icon for the level editor
+ *  @memberof Level3D
+ *  @example
+ *  level3DAddType('Crate', Crate, {health: 3});
+ *  level3DAddType('PlayerStart', (pos)=> playerStart = pos); */
+function level3DAddType(name, make, defaults={}, tileInfo)
+{
+    ASSERT(isStringLike(name), 'object type name must be a string');
+    ASSERT(typeof make === 'function', 'make must be a class or function');
+    ASSERT(!!defaults && typeof defaults === 'object', 'defaults must be an object');
+    level3DTypes.set(String(name), {make, defaults, tileInfo});
+}
+
+/** Add a type that is a mesh and nothing more, a static prop with no class to write, for a built mesh or a model
+ *  - Each object has a color and a solid property, solid collides as the box around the mesh
+ *  @param {string} name - The type the objects have in the level
+ *  @param {Mesh} mesh - Shared by every object of the type
+ *  @param {TileInfo} [tileInfo] - Its texture
+ *  @param {Color} [color] - Its color, an object's own color property goes over it
+ *  @memberof Level3D
+ *  @example
+ *  level3DAddMesh('Tree', treeMesh, tile(4)); */
+function level3DAddMesh(name, mesh, tileInfo, color=WHITE)
+{
+    ASSERT(mesh instanceof Mesh, 'mesh must be a Mesh');
+    ASSERT(isColor(color), 'color must be a color');
+    level3DAddType(name, function(pos, properties) { return level3DMakeShape(pos, properties, mesh, tileInfo); },
+        {color, solid: false}, tileInfo);
+}
+
+/** Make the objects of a level, each from the type added for its name
+ *  - The level is an object: {littlejs3D: 1, objects: [{id, type, pos: [x, y, z]}, ...]}, and {} is a new one
+ *  - rotation is pitch, yaw and roll in degrees, scale is a number for each axis, both left out when they are
+ *    the default, and properties holds what differs from the type's defaults
+ *  - A Color property is a #rrggbb or #rrggbbaa string, a Vector2 or Vector3 an array, as the default says
+ *  - An object whose type was not added is skipped, with a warning in debug builds
+ *  - What a file written by hand gets wrong uses the default: a value that is not of its default's type
+ *  - An object its type can not make is skipped with an error in debug builds, where asserts throw, and the rest
+ *    of the level is made
+ *  @param {Object} level - The level, the level editor edits this same object
+ *  @return {Array<any>} - What each object's type made, a function that made nothing is left out
+ *  @memberof Level3D */
+function level3DLoad(level)
+{
+    ASSERT(!!level && typeof level === 'object', 'a level is an object, {} for a new one');
+    ASSERT(!(level.littlejs3D > LEVEL3D_VERSION), 'the level was made by a newer LittleJS');
+    editor3DLevelLoaded(level); // debug builds: the 3D editor takes the level, its autosaved edits go in first
+    const made = [];
+    for (const object of isArray(level.objects) ? level.objects : [])
+    {
+        if (!object || typeof object !== 'object') continue;
+        const result = level3DMake(object);
+        editor3DObjectMade(object, result); // debug builds link it for the 3D editor
+        result && made.push(result);
+    }
+    return made;
+}
+
+// a vec3 of an array of three numbers, as the file has them, or the fallback
+function level3DVector(value, fallback)
+{
+    return isArray(value) && value.length === 3 && value.every((v)=> isNumber(v)) ?
+        vec3(value[0], value[1], value[2]) : fallback;
+}
+
+// the defaults of an object's type, a Color or vector copied for each object, then its own properties over them,
+// each read as its default is; one the file got wrong, a value not of its default's type, keeps the default, and
+// one the type has no default for is kept as it is
+function level3DProperties(type, object)
+{
+    const properties = {}, own = object.properties;
+    for (const [key, value] of Object.entries(type.defaults))
+        properties[key] = value?.copy ? value.copy() : value;
+    for (const [key, value] of Object.entries(own && typeof own === 'object' ? own : {}))
+    {
+        const d = type.defaults[key];
+        if (isColor(d))
+            /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) && (properties[key] = new Color().setHex(value));
+        else if (isVector3(d))
+            properties[key] = level3DVector(value, properties[key]);
+        else if (isVector2(d))
+            isArray(value) && value.length === 2 && value.every((v)=> isNumber(v)) &&
+                (properties[key] = vec2(value[0], value[1]));
+        else if (d === undefined || typeof value === typeof d)
+            properties[key] = value;
+    }
+    return properties;
+}
+
+// make one object of a level from the type added for its name, undefined when there is no such type or it made
+// nothing
+function level3DMake(object)
+{
+    const type = level3DTypes.get(object.type);
+    if (!type)
+    {
+        debug && console.warn(`level3DLoad: no type added for ${object.type}, skipped`);
+        return;
+    }
+    const pos = level3DVector(object.pos, vec3()), properties = level3DProperties(type, object);
+    const {make} = type, count = engineObjects.length;
+    let result;
+    try { result = make.prototype ? new make(pos, properties) : make(pos, properties); }
+    catch (error)
+    {
+        // a value the type can not be made with: in debug builds, where asserts throw, the object is skipped with
+        // what it made so far, so the rest of the level loads and the level editor can put the value right
+        if (!debug) throw error;
+        console.error(`level3DLoad: ${object.type} ${object.id} could not be made, skipped:`, error);
+        for (const o of engineObjects.slice(count))
+            o.destroy();
+        return;
+    }
+    if (!result || typeof result !== 'object') return;
+    if (result instanceof EngineObject3D)
+    {
+        level3DBaseScale.set(result, result.scale3D.copy());
+        result.rotation3D = level3DVector(object.rotation, vec3()).scale(PI / 180);
+        result.scale3D = result.scale3D.multiply(level3DVector(object.scale, vec3(1)));
+    }
+
+    // the type's own properties are set on it, one the type has no default for could be a field of the engine's
+    for (const key in type.defaults)
+        result[key] = properties[key];
+    return result;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the built-in types
+
+// a static object of a mesh, with the color, tile and solid properties the built-in types have
+function level3DMakeShape(pos, properties, mesh, tileInfo, asSphere=false)
+{
+    const o = new EngineObject3D(pos, mesh, properties.tile >= 0 ? tile(properties.tile) : tileInfo, properties.color);
+    o.collideAsSphere3D = asSphere;
+    properties.solid && o.setCollision();
+    return o;
+}
+
+// the cylinder all Cylinder objects share, built the first time one is made
+let level3DCylinderMesh;
+
+level3DAddType('Box', function(pos, properties) { return level3DMakeShape(pos, properties, render3D.boxMesh); },
+    {color: WHITE, tile: -1, solid: true});
+level3DAddType('Sphere', function(pos, properties)
+    { return level3DMakeShape(pos, properties, render3D.sphereMesh, undefined, true); },
+    {color: WHITE, tile: -1, solid: true});
+level3DAddType('Cylinder', function(pos, properties)
+    { return level3DMakeShape(pos, properties, level3DCylinderMesh ||= buildCylinder()); },
+    {color: WHITE, tile: -1, solid: true});
+level3DAddType('Light', function(pos, properties)
+    { return new Light3D(pos, properties.radius, properties.color, properties.intensity); },
+    {color: WHITE, radius: 5, intensity: 1});
+
 /**
  * LittleJS glTF Plugin
  * - Loads glTF 2.0 models: a .gltf with its .bin and images beside it, or a .glb with everything in one file
@@ -28236,6 +29540,8 @@ class VoxelMap extends EngineObject3D
  *   GLTFObject that createObject makes; a skinned character's walk is not read
  * - Materials give a base color and texture and whether they blend; glass made with KHR_materials_transmission blends too,
  *   and a KHR_materials_unlit material comes in emissive, its own color with no shading
+ * - A material's normal map and emissive map load too, with its normal scale and emissive factor, read at the base
+ *   color texture's uvs; roughness, metalness and occlusion maps are not loaded
  * - The base color texture reads the uv set its texCoord names, moved by KHR_texture_transform as gltfpack and
  *   Blender write it
  * - An OPAQUE material, the default, ignores its texture's alpha as the format says: a texture only such materials
@@ -28282,6 +29588,17 @@ class GLTFPart
         /** @property {boolean} - The material is unlit (KHR_materials_unlit), its own color with no shading; the object
          *  createObject makes draws it with emissive 1 */
         this.unlit = false;
+        /** @property {TextureInfo|undefined} - The material's normal map, drawn with the base color texture's uvs
+         *  @type {TextureInfo|undefined} */
+        this.normalMap = undefined;
+        /** @property {number} - The normal map's strength, its scale in the file */
+        this.normalScale = 1;
+        /** @property {TextureInfo|undefined} - The material's emissive map, or a white texture when it has an
+         *  emissiveFactor and no texture, so it glows all over
+         *  @type {TextureInfo|undefined} */
+        this.emissiveMap = undefined;
+        /** @property {Color} - The emissiveFactor, which multiplies the emissive map */
+        this.emissiveMapColor = WHITE;
     }
 }
 
@@ -28427,8 +29744,8 @@ class GLTFModel
         for (const part of this.parts)
             part.mesh.dispose();
         this.mesh.dispose();
-        for (const textureInfo of new Set(this.parts.map(p=> p.textureInfo)))
-            textureInfo?.destroyWebGLTexture();
+        for (const textureInfo of new Set(this.parts.flatMap(p=> [p.textureInfo, p.normalMap, p.emissiveMap])))
+            textureInfo !== gltfWhiteTextureInfo && textureInfo?.destroyWebGLTexture(); // the white one is shared
     }
 
     /** Make an object at a position with a child per part, so each keeps its own texture, color and blending, and
@@ -28486,6 +29803,8 @@ class GLTFObject extends EngineObject3D
             o.transparent = part.transparent;
             o.pixelated = part.pixelated;
             o.emissive = part.unlit ? 1 : 0;
+            o.normalMap = part.normalMap, o.normalScale = part.normalScale;
+            o.emissiveMap = part.emissiveMap, o.emissiveMapColor = part.emissiveMapColor.copy(); // its own, as color is
             const rest = model.nodeTree?.restPose?.[part.node];
             if (rest)
             {
@@ -28622,13 +29941,15 @@ async function parseGLTF(data, baseUrl='')
         return gltfFetch(buffer.uri, baseUrl).then(r=> r.arrayBuffer());
     }));
 
-    // the textures, decoded together first; none without WebGL, and a failed image only logs; only the base color
-    // textures are drawn with, so the normal, roughness and other maps are not loaded at all
-    const baseColorTextures = new Set((json.materials || []).map(m=> m.pbrMetallicRoughness?.baseColorTexture?.index));
+    // the textures, decoded together first; none without WebGL, and a failed image only logs; the base color, normal
+    // and emissive textures are drawn with, the roughness and occlusion maps are not loaded at all
+    const usedTextures = new Set((json.materials || []).flatMap(m=> [m.pbrMetallicRoughness?.baseColorTexture?.index,
+        m.normalTexture?.index, m.emissiveTexture?.index]));
+    const normalTextures = new Set((json.materials || []).map(m=> m.normalTexture?.index));
     const opaqueTextures = gltfOpaqueTextures(json);
     const textures = await Promise.all((json.textures || []).map(async (texture, index)=>
     {
-        if (!glContext || typeof createImageBitmap == 'undefined' || !baseColorTextures.has(index)) return;
+        if (!glContext || typeof createImageBitmap == 'undefined' || !usedTextures.has(index)) return;
         try
         {
             // a WebP or AVIF image is named by its extension, the browser decodes those like any other
@@ -28645,7 +29966,11 @@ async function parseGLTF(data, baseUrl='')
             // an OPAQUE material ignores its texture's alpha, which the 3D pass would cut holes by, so a texture only
             // those use has it set to 1; decoded as stored for that, and a jpeg has no alpha to set
             const opaque = opaqueTextures.has(index) && blob.type !== 'image/jpeg';
-            const bitmap = opaque ? await createImageBitmap(blob, {premultiplyAlpha: 'none'}).then(gltfOpaqueImage) : await createImageBitmap(blob);
+            // a normal map is directions, not colors, so it is decoded as stored; one a material also uses as a
+            // color, an odd file, is decoded that way too
+            const bitmap = normalTextures.has(index) ?
+                await createImageBitmap(blob, {colorSpaceConversion: 'none', premultiplyAlpha: 'none'}) :
+                opaque ? await createImageBitmap(blob, {premultiplyAlpha: 'none'}).then(gltfOpaqueImage) : await createImageBitmap(blob);
             return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497]); // REPEAT by default
         }
         catch (e) { LOG('glTF image not loaded', e); }
@@ -28721,7 +30046,7 @@ async function parseGLTF(data, baseUrl='')
     }
 
     // a texture none of the parts draws with, another scene's, goes now too, since dispose finds them by the parts
-    const used = new Set(parts.map(p=> p.textureInfo));
+    const used = new Set(parts.flatMap(p=> [p.textureInfo, p.normalMap, p.emissiveMap]));
     for (const texture of textures)
         texture && !used.has(texture) && texture.destroyWebGLTexture();
     return new GLTFModel(parts, animations, {nodes: json.nodes, parents, restInverse, restPose});
@@ -28957,9 +30282,34 @@ function gltfPart(json, buffers, textures, primitive, matrix, name)
         textureRef ? textures[textureRef.index] : undefined, blend || transmission > 0);
     part.pixelated = json.samplers?.[texture?.sampler]?.magFilter === 9728; // NEAREST
     part.unlit = !!material.extensions?.KHR_materials_unlit;
+
+    // the normal and emissive maps, read at the base color texture's uvs; the emissive texture is multiplied by the
+    // factor, which is black by default as the format says, so a texture alone does not glow; a factor with no
+    // texture glows all over
+    const normalRef = material.normalTexture, emissiveRef = material.emissiveTexture;
+    part.normalMap = normalRef && textures[normalRef.index];
+    part.normalScale = normalRef?.scale ?? 1;
+    const [er, eg, eb] = material.emissiveFactor || [0, 0, 0];
+    if (er || eg || eb)
+    {
+        part.emissiveMap = emissiveRef ? textures[emissiveRef.index] : gltfWhiteTexture();
+        part.emissiveMapColor = rgb(gltfSRGB(er), gltfSRGB(eg), gltfSRGB(eb));
+    }
     return part;
 }
 
+// a 1 by 1 white texture, the emissive map of a material that glows all over with no texture; made once and never
+// freed, like the engine's own white texture, undefined without WebGL
+let gltfWhiteTextureInfo;
+function gltfWhiteTexture()
+{
+    if (gltfWhiteTextureInfo || !glContext || typeof OffscreenCanvas == 'undefined') return gltfWhiteTextureInfo;
+    const context = createCanvasContext(1);
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, 1, 1);
+    return gltfWhiteTextureInfo = new TextureInfo(context.canvas);
+}
+
 // a glTF color factor or vertex color is linear, where the renderer works in sRGB like the textures, so it is
 // brought across at load or a mid gray material would come out nearly black; 0 and 1 stay exact
 function gltfSRGB(c)
@@ -29577,7 +30927,8 @@ function render3DRenderDebug()
     render3DDebugPrimitives = render3DDebugPrimitives.filter(p=> p.clearCount === debugClearCount);
     if (!debugVideoCaptureIsActive()) // hidden from a video capture like the 2D ones, but they still expire
     {
-        render3DWithState({lighting: false, depthTest: false, receiveShadow: false, additive: false, shader: undefined}, ()=>
+        render3DWithState({lighting: false, depthTest: false, receiveShadow: false, additive: false, shader: undefined,
+            emissiveMap: undefined}, ()=>
         {
             for (const p of render3DDebugPrimitives)
                 p.draw();
@@ -29722,6 +31073,14 @@ class LevelEditor
          *  section has Play from mouse, which starts play there, Escape at the mouse and Play at the view center
          *  @type {EditorPlayFromCallback|undefined} */
         this.onPlayFrom = undefined;
+        /** @property {Array<number>|undefined} - The tiles the palette shows, in its order, for a sheet that also holds
+         *  sprites and art that are not level tiles; undefined shows every tile of the sheet
+         *  @type {Array<number>|undefined} */
+        this.paletteTiles = undefined;
+        /** @property {boolean|undefined} - Which level editor opens: true the 3D one, false the 2D one, undefined the
+         *  3D one when a level was loaded with level3DLoad and there is a Render3DPlugin
+         *  @type {boolean|undefined} */
+        this.use3D = undefined;
     }
 
     /** True while the editor is open, the game is paused under it
@@ -29918,7 +31277,7 @@ function editorMapRestore(map)
     if (!saved) return map;
     // an autosave from before the map's shape was in the hash matches on its tiles and objects, and one from before
     // objects were matches on its tiles; one of a resized map is resized to first
-    const sameFile = saved.hash === record.hash || !saved.width &&
+    const sameFile = saved.hash === record.hash || saved.savedHash === record.hash || !saved.width &&
         (saved.hash === editorMapHash(data, objects) || !saved.objects && saved.hash === editorMapHash(data));
     if ((saved.width ?? map.width) === map.width && (saved.height ?? map.height) === map.height &&
         editorSameData(saved.layers, data) && editorSameData(saved.objects ?? [], objects))
@@ -30071,15 +31430,17 @@ async function editorRememberedFile(record)
 }
 const editorFileKey = (record)=> (globalThis.location?.pathname ?? '') + ' ' + record.key;
 
-// a map as a file Save wrote is the file from then on: Reset to file goes back to it, the autosave keeps only the
-// edits since, and a reload of it has nothing to apply; a download can not say it replaced the file, so it does not,
-// and neither does a file of another name, a copy, since the game still loads the one it came from
+// a map as a file Save wrote is the file from then on: Reset to file goes back to it, and a reload of it has nothing
+// to apply; a download can not say it replaced the file, so it does not, and neither does a file of another name, a
+// copy, since the game still loads the one it came from; the browser gives a picked file's name and not its folder,
+// so a file of the same name may be a copy too, and the autosave stays, with the hash of the file the game loads and
+// of the file written, until a reload shows which one the game loads
 function editorSetBaseline(record, written)
 {
     if (record.synthetic) return; // a layer made in code has no file to load it from
     const data = editorTileLayerData(written.layers);
     const objects = editorObjectGroups(written.layers).map((group)=> group.objects ?? []);
-    Object.assign(record, {original: data, originalObjects: objects, hash: editorMapHash(data, objects,
+    Object.assign(record, {original: data, originalObjects: objects, savedHash: editorMapHash(data, objects,
         editorMapLayout(written)), originalSize: {width: written.width, height: written.height}});
     record.pending || editorAutosave(record); // edits waiting to be applied keep their autosave
 }
@@ -30192,11 +31553,12 @@ function editorAutosave(record)
     while (kept.length > original.length && !kept.at(-1).length)
         kept.pop(); // an Objects layer the editor made, empty again, is not an edit
     const size = record.originalSize, sameSize = map.width === size.width && map.height === size.height;
-    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original))
+    // the map as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it
+    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original) && !record.savedHash)
         delete saves[record.key];
     else
-        saves[record.key] = {hash: record.hash, width: map.width, height: map.height, layers: data, objects,
-            nextobjectid: map.nextobjectid};
+        saves[record.key] = {hash: record.hash, savedHash: record.savedHash, width: map.width, height: map.height,
+            layers: data, objects, nextobjectid: map.nextobjectid};
     editorWriteSaves(saves);
 }
 
@@ -31029,8 +32391,8 @@ function editorBrushTile()
 // the brush takes the tile in a cell, an empty cell gives the Erase brush
 function editorPick(layer, pos) { editorBrush = editorStampTile(editorGidAt(layer, pos) || 0); }
 
-// a palette slot into the brush: slot 0 is the Erase brush, slot n tile n - 1, keeping a one tile brush's turn; on
-// an object layer slot n is the nth object type
+// a palette slot into the brush: slot 0 is the Erase brush, slot n the palette's nth tile, keeping a one tile
+// brush's turn; on an object layer slot n is the nth object type
 function editorPalettePick(slot)
 {
     if (editorObjectLayer)
@@ -31041,7 +32403,8 @@ function editorPalettePick(slot)
         return;
     }
     const t = editorBrushTile();
-    editorBrush = editorStampTile(slot ? editorTileToGid(slot - 1, t?.direction, t?.mirror) : 0);
+    const tile = slot && (editorPaletteTiles(editorLayer)[slot - 1]?.tile ?? slot - 1); // every tile, in order
+    editorBrush = editorStampTile(slot ? editorTileToGid(tile, t?.direction, t?.mirror) : 0);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -31460,11 +32823,18 @@ function editorPanelInit()
 // the palette's cell size in pixels and how many to a row
 const editorPaletteCell = 30, editorPaletteColumns = 8;
 
-// a layer's tiles in order, as the tile infos it draws them with, up to the image's edge and without the blank
-// ones at the end, a tile of one flat color; found once for each layer
+// the tiles a layer's palette shows, each its index and the tile info it draws with: the game's
+// levelEditor.paletteTiles, or every tile up to the image's edge without the blank ones at the end, a tile of one
+// flat color; found once for each layer and list
 function editorPaletteTiles(layer)
 {
-    const live = layer?.live, image = live?.tileInfo?.textureInfo?.image;
+    const live = layer?.live, image = live?.tileInfo?.textureInfo?.image, list = levelEditor.paletteTiles;
+    if (list && live)
+    {
+        if (layer.palette?.list !== list)
+            layer.palette = {list, tiles: list.map((tile)=> ({tile, tileInfo: editorTileInfo(live, tile)}))};
+        return layer.palette.tiles;
+    }
     if (!image) return [];
     if (layer.palette?.image === image) return layer.palette.tiles;
 
@@ -31473,7 +32843,7 @@ function editorPaletteTiles(layer)
     {
         const t = editorTileInfo(live, i);
         if (t.pos.x + t.size.x > image.width || t.pos.y + t.size.y > image.height) break;
-        tiles.push(t);
+        tiles.push({tile: i, tileInfo: t});
     }
     try
     {
@@ -31482,7 +32852,8 @@ function editorPaletteTiles(layer)
         context.drawImage(image, 0, 0);
         const blank = (t)=>
         {
-            const pixels = new Uint32Array(context.getImageData(t.pos.x, t.pos.y, t.size.x, t.size.y).data.buffer);
+            const {pos, size} = t.tileInfo, pixels = new Uint32Array(context.getImageData(pos.x, pos.y, size.x,
+                size.y).data.buffer);
             return pixels.every((p)=> p === pixels[0]);
         };
         while (tiles.length > 1 && blank(tiles.at(-1)))
@@ -31542,15 +32913,16 @@ function editorPaletteDraw(canvas, layer)
     context.moveTo(8, 8), context.lineTo(cell - 8, cell - 8);
     context.moveTo(cell - 8, 8), context.lineTo(8, cell - 8);
     context.stroke();
-    tiles.forEach((t, i)=>
+    tiles.forEach(({tileInfo: {pos, size}}, i)=>
     {
         const slot = i + 1, x = slot % columns * cell, y = (slot / columns | 0) * cell;
-        context.drawImage(image, t.pos.x, t.pos.y, t.size.x, t.size.y, x + 2, y + 2, cell - 4, cell - 4);
+        context.drawImage(image, pos.x, pos.y, size.x, size.y, x + 2, y + 2, cell - 4, cell - 4);
     });
 
-    // the brush's slot outlined, when it is one tile or Erase
+    // the brush's slot outlined, when it is one tile the palette shows or Erase
     const t = editorBrushTile(), erase = !t && editorBrush.width === 1 && editorBrush.height === 1 &&
-        editorBrush.grids[0][0] === 0, selected = erase ? 0 : t ? t.tile + 1 : -1;
+        editorBrush.grids[0][0] === 0, shown = t ? tiles.findIndex((p)=> p.tile === t.tile) : -1;
+    const selected = erase ? 0 : shown >= 0 ? shown + 1 : -1;
     if (selected < 0) return;
     context.strokeStyle = '#4af';
     context.strokeRect(selected % columns * cell + 1, (selected / columns | 0) * cell + 1, cell - 2, cell - 2);
@@ -32095,3 +33467,1814 @@ if (debug && globalThis.document?.addEventListener)
     document.addEventListener('wheel', editorOnWheel, {passive: true});
 }
 
+/*
+ * LittleJS 3D Editor Plugin
+ * - A free camera to look around any 3D game as it runs, C on the debug overlay
+ * - The 3D level editor, for a level loaded with level3DLoad, 0 on the debug overlay
+ * - Debug builds only, like the 2D level editor: engineRelease.js has empty stubs for what other files call, so
+ *   release builds carry none of it
+ * - Goes after the Render3D plugins and the 2D level editor
+ */
+
+///////////////////////////////////////////////////////////////////////////////
+// the view: a camera of the editor's own, drawn with while the free camera or the editor is on
+
+const EDITOR3D_LOOK_SPEED = .003; // radians a pixel of mouse movement turns the view
+
+// the camera of the free camera and the editor, made at the first use
+
+/** @type {Camera3D|undefined} */
+let editor3DCamera;
+let editor3DFreeCamera = false; // the free camera is on
+let editor3DFlySpeed = .2;      // world units flown in a frame of 1/60, the wheel changes it
+let editor3DTimeLast = 0;       // real time of the last update, flying goes by real time so it works while paused
+let editor3DWasLocked = false;  // the mouse was captured last update, a lock that is lost leaves the free camera
+// the game's camera while the editor's is drawn with
+/** @type {Camera3D|undefined} */
+let editor3DGameCamera;
+
+// if something draws with the editor's camera
+function editor3DViewOn() { return editor3DFreeCamera || editor3DIsOpen; }
+
+// the editor's camera starts as the game's: where it is, the way it looks and its field of view
+function editor3DCameraStart()
+{
+    const from = render3D.camera, camera = editor3DCamera = new Camera3D;
+    camera.pos = from.pos.copy();
+    camera.rotation = vec3(from.rotation.x, from.rotation.y, 0);
+    camera.fov = from.fov;
+    camera.near = from.near;
+    camera.far = from.far;
+}
+
+// turn the free camera on or off, it needs a Render3DPlugin and takes the keyboard and mouse while it is on
+function editor3DSetFreeCamera(on)
+{
+    on = !!on && !!render3D;
+    if (on === editor3DFreeCamera) return;
+    editor3DFreeCamera = on;
+    editor3DWasLocked = false;
+    if (on)
+    {
+        editor3DCameraStart();
+        pointerLockRequest();
+    }
+    else
+        pointerLockIsActive() && pointerLockExit();
+    inputCapture(editor3DViewOn());
+}
+
+// fly a camera: turn is the mouse movement in pixels, move is right, up and forward from -1 to 1
+function editor3DFly(camera, move, turn, seconds, fast=false)
+{
+    const r = camera.rotation;
+    camera.rotation = vec3(clamp(r.x - turn.y * EDITOR3D_LOOK_SPEED, -1.55, 1.55), r.y - turn.x * EDITOR3D_LOOK_SPEED, 0);
+    const distance = editor3DFlySpeed * 60 * seconds * (fast ? 4 : 1);
+    camera.pos = camera.pos.add(camera.getRight().scale(move.x * distance))
+        .add(vec3(0, move.y * distance, 0))
+        .add(camera.getForward().scale(move.z * distance));
+}
+
+// the keys that fly, right, up and forward from -1 to 1
+function editor3DFlyKeys()
+{
+    const key = (code)=> keyIsDown(code) ? 1 : 0;
+    return vec3(key('KeyD') - key('KeyA'), key('KeyE') - key('KeyQ'), key('KeyW') - key('KeyS'));
+}
+
+// run a function with render3D looking through the editor's camera, for the editor's picking and projecting
+function editor3DWithView(fn)
+{
+    const r = render3D, camera = r.camera;
+    r.camera = editor3DCamera;
+    r.updateMatrices();
+    try { return fn(); }
+    finally
+    {
+        r.camera = camera;
+        r.updateMatrices();
+    }
+}
+
+// called by the 3D pass before it works out its matrices: the frame is drawn with the editor's camera
+function editor3DCameraBegin()
+{
+    if (!editor3DViewOn() || !editor3DCamera) return;
+    const r = render3D, camera = editor3DGameCamera = r.camera;
+    r.camera = editor3DCamera;
+
+    // where the game is looking from, a box turned its way and a line along its view; the editor has enough to show
+    if (editor3DFreeCamera)
+    {
+        const color = hsl(.15, 1, .6);
+        debugBox3D(camera.pos, vec3(.5, .5, .8), color, 0, camera.rotation);
+        debugLine3D(camera.pos, camera.pos.add(camera.getForward().scale(2)), color);
+    }
+
+    // the editor's own drawing, in this frame's 3D pass
+    editor3DIsOpen && render3DDebugPush(0, editor3DDraw);
+}
+
+// called by the 3D pass after the frame: the game's camera is back, with its matrices, for the game's next update
+function editor3DCameraEnd()
+{
+    if (!editor3DGameCamera) return;
+    render3D.camera = editor3DGameCamera;
+    editor3DGameCamera = undefined;
+    render3D.updateMatrices();
+}
+
+// if a captured mouse was let go of by the browser since the last look, as Chrome does on Escape, and not by the
+// game with pointerLockExit
+function editor3DLostLock(locked)
+{
+    const lost = editor3DWasLocked && !locked && !inputLockLetGo;
+    editor3DWasLocked = locked;
+    inputLockLetGo = false;
+    return lost;
+}
+
+// C turns the free camera on while the debug keys work, the level editor has its own view
+function editor3DFreeCameraKey()
+{
+    if (!(debugOverlay || debugKeysAlways) || levelEditor.isOpen || !keyWasPressed('KeyC')) return;
+    inputClearKey('KeyC');
+    editor3DSetFreeCamera(true);
+}
+
+// the free camera's update: C or Escape leaves, and so does a captured mouse the browser let go of, since Chrome
+// takes Escape for that and may not send the key; the mouse looks while it is captured or the right button is held
+function editor3DFreeCameraUpdate(seconds)
+{
+    const locked = pointerLockIsActive(), lostLock = editor3DLostLock(locked);
+    if (keyWasPressed('KeyC') || debugKey && keyWasPressed(debugKey) || lostLock)
+    {
+        inputClearKey('KeyC');
+        debugKey && inputClearKey(debugKey);
+        editor3DSetFreeCamera(false);
+        return;
+    }
+    editor3DFlySpeed = clamp(editor3DFlySpeed * Math.exp(-inputCaptureWheel * .2), .01, 10);
+    const look = locked || mouseIsDown(2);
+    editor3DFly(editor3DCamera, editor3DFlyKeys(), look ? inputCaptureDeltaScreen : vec2(), seconds,
+        keyIsDown('ShiftLeft') || keyIsDown('ShiftRight'));
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the math of the handles: each is dragged with the mouse's ray
+
+const EDITOR3D_UP = vec3(0, 1, 0);
+
+// how far along an axis line, from its origin, the point nearest a ray is: the two lines' closest points, solved
+// for the axis; a ray along the axis has no nearest point, and gives 0
+function editor3DAxisDistance(ray, origin, axis)
+{
+    const d = ray.direction, w = origin.subtract(ray.origin);
+    const a = axis.dot(axis), b = axis.dot(d), c = d.dot(d), e = axis.dot(w), f = d.dot(w);
+    const denominator = a * c - b * b;
+    return abs(denominator) < 1e-9 ? 0 : (b * f - c * e) / denominator;
+}
+
+// where a ray meets the plane through a point, undefined when it runs along the plane or away from it
+function editor3DPlanePoint(ray, point, normal)
+{
+    const distance = raycastPlane(ray, point, normal);
+    return distance === undefined ? undefined : ray.getPosition(distance);
+}
+
+// the axis a ring turns around and two axes across it, for the pitch 'x', yaw 'y' or roll 'z' of a rotation:
+// yaw turns around world up, pitch around the side axis after the yaw, roll around the forward axis after both,
+// so each ring changes one number of rotation3D; a turn goes from across toward along
+function editor3DRingAxes(rotation, ring)
+{
+    const frame = buildMatrix(vec3(), ring === 'y' ? vec3() : ring === 'x' ? vec3(0, rotation.y, 0) :
+        vec3(rotation.x, rotation.y, 0));
+    const x = frame.transformDirection(vec3(1, 0, 0)), y = frame.transformDirection(vec3(0, 1, 0));
+    const z = frame.transformDirection(vec3(0, 0, 1));
+    return ring === 'x' ? {axis: x, across: y, along: z} : ring === 'y' ? {axis: y, across: z, along: x} :
+        {axis: z, across: x, along: y};
+}
+
+// the angle of a ray's point on a ring's plane, around the ring's axis from across toward along
+function editor3DRingAngle(ray, center, axes)
+{
+    const point = editor3DPlanePoint(ray, center, axes.axis);
+    if (!point) return;
+    const offset = point.subtract(center);
+    return atan2(offset.dot(axes.along), offset.dot(axes.across));
+}
+
+// a value on the nearest step, a step of 0 leaves it
+function editor3DSnap(value, step) { return step ? round(value / step) * step : value; }
+
+// a position snapped to the grid by the low corner of its box, so its faces land on grid lines and boxes tile
+// with no gaps; a turned object has no such corner and goes by its center
+function editor3DSnapPos(pos, size, step, turned=false)
+{
+    const half = turned ? vec3() : size.scale(.5), low = pos.subtract(half);
+    return vec3(editor3DSnap(low.x, step), editor3DSnap(low.y, step), editor3DSnap(low.z, step)).add(half);
+}
+
+// the height of the editor's view in world units at a point's depth, handles are sized by it to keep their size
+// on screen
+function editor3DScreenScale(point)
+{
+    const camera = editor3DCamera, depth = point.subtract(camera.pos).dot(camera.getForward());
+    return max(depth, .01) * tan(camera.fov / 2) * 2;
+}
+
+// how far in pixels a screen position is from the line between two world points as the view shows it, Infinity
+// when an end is behind the camera
+function editor3DSegmentDistance(screenPos, a, b)
+{
+    const sa = render3D.worldToScreen(a), sb = render3D.worldToScreen(b);
+    if (!sa || !sb) return Infinity;
+    const ab = sb.subtract(sa), t = clamp(screenPos.subtract(sa).dot(ab) / (ab.lengthSquared() || 1), 0, 1);
+    return screenPos.distance(sa.add(ab.scale(t)));
+}
+
+// the first point a ray hits: on an object, a height map or a voxel map, leaving some out, or on the ground plane
+// at height 0 when it hits none
+function editor3DSurface(ray, ignore=new Set)
+{
+    let distance;
+    for (const o of engineObjects)
+    {
+        if (ignore.has(o)) continue;
+        const d = render3DRaycastObject(ray, o);
+        if (d !== undefined && (distance === undefined || d < distance))
+            distance = d;
+    }
+    distance ??= raycastPlane(ray, vec3(), EDITOR3D_UP);
+    return distance === undefined ? undefined : ray.getPosition(distance);
+}
+
+// where a box of a size stands with its bottom on a point
+function editor3DRest(point, size) { return vec3(point.x, point.y + size.y / 2, point.z); }
+
+// the height of the middle of a box that lands at a place across the ground: dropped from its own height over a
+// height, onto what is under it, so it climbs a step as tall as itself and no more; with nothing under it, it
+// stands at that height
+function editor3DLand(x, z, height, size, ignore)
+{
+    const landed = editor3DDrop(vec3(x, height + size.y * 1.5 + .01, z), size, ignore);
+    return landed ? landed.y : height + size.y / 2;
+}
+
+// where a box lands dropped straight down from its bottom onto what is under it, undefined with nothing there
+function editor3DDrop(pos, size, ignore=new Set)
+{
+    const bottom = vec3(pos.x, pos.y - size.y / 2, pos.z);
+    const point = editor3DSurface(new Ray3D(bottom, vec3(0, -1, 0)), ignore);
+    return point && editor3DRest(point, size);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the level: the object the game gave level3DLoad is the source of truth, the editor changes it in place and
+// brings what the game made in line with it
+
+// the level being edited, the one given to level3DLoad last
+
+/** @type {Object|undefined} */
+let editor3DLevel;
+
+// what the game made for each object of the level, by the object's id
+const editor3DInstances = new Map;
+
+// what the editor keeps for each level: {fileName, key, original, hash, pending, fileHandle, undo, redo}, the file
+// it came from, the file's objects and their hash for the autosave, an autosave waiting for a file that changed,
+// and its undo and redo lists
+const editor3DRecords = new WeakMap;
+
+// if the editor is open, and if it was opened and not exited, while Escape switches between playing and editing
+let editor3DIsOpen = false, editor3DSession = false;
+let editor3DGamePaused = false;   // the game's pause from before the editor opened
+let editor3DPlayFromMouse = false; // Escape and Play hand the game a position to play from
+
+const editor3DSelection = new Set; // the ids of the selected objects
+// the type a click places
+/** @type {string|undefined} */
+let editor3DBrush;
+// the copied objects
+/** @type {Array<Object>|undefined} */
+let editor3DClipboard;
+let editor3DUndoList = [], editor3DRedoList = []; // the level's, each entry its object list before and after an edit
+// the edit being made, a drag is one
+/** @type {{before: Array<Object>}|undefined} */
+let editor3DStroke;
+
+const editor3DCopy = (value)=> JSON.parse(JSON.stringify(value));
+const editor3DSame = (a, b)=> JSON.stringify(a) === JSON.stringify(b);
+const editor3DRound = (v)=> round(v * 1e4) / 1e4; // as the file keeps a number
+
+// the level's objects, and the one of an id
+const editor3DObjects = ()=> isArray(editor3DLevel?.objects) ? editor3DLevel.objects : [];
+const editor3DObject = (id)=> editor3DObjects().find((o)=> o.id === id);
+const editor3DSelected = ()=> editor3DObjects().filter((o)=> editor3DSelection.has(o.id));
+
+// an object's position, rotation in degrees and scale, the defaults where the level leaves them out
+const editor3DPos = (object)=> level3DVector(object.pos, vec3());
+const editor3DRotation = (object)=> level3DVector(object.rotation, vec3());
+const editor3DScale = (object)=> level3DVector(object.scale, vec3(1));
+const editor3DTurned = (object)=> editor3DRotation(object).lengthSquared() > 0;
+
+// the size of an object's box: what the game made for it says, a marker is 1 unit
+function editor3DSize(object)
+{
+    const made = editor3DInstances.get(object.id);
+    if (!(made instanceof EngineObject3D) || !(made.mesh || made.tileInfo)) return vec3(1);
+    const s = made.size3D, k = made.scale3D;
+    return vec3(s.x * abs(k.x), s.y * abs(k.y), s.z * abs(k.z));
+}
+
+// every object gets an id of its own, a whole number: one without, or with one already used, gets a new one
+function editor3DFixIds(objects)
+{
+    const isObject = (o)=> !!o && typeof o === 'object', seen = new Set;
+    let next = 1;
+    for (const o of objects)
+        isObject(o) && Number.isInteger(o.id) && (next = max(next, o.id + 1));
+    for (const o of objects)
+    {
+        if (!isObject(o)) continue;
+        if (!Number.isInteger(o.id) || seen.has(o.id))
+            o.id = next++;
+        seen.add(o.id);
+    }
+}
+
+// a quick hash of a text, to know when the file changed under its autosave
+function editor3DHash(text)
+{
+    let hash = 2166136261;
+    for (let i = 0; i < text.length; ++i)
+        hash = Math.imul(hash ^ text.charCodeAt(i), 16777619);
+    return hash >>> 0;
+}
+
+// called by level3DLoad before it makes the objects: the editor takes the level, and the first time it sees it,
+// puts in the edits it autosaved for the file, or keeps them waiting when the file changed since
+function editor3DLevelLoaded(level)
+{
+    if (editor3DLevel !== level)
+    {
+        // another level, the selection and the edit being made were the last one's
+        editor3DSelection.clear();
+        editor3DStroke = undefined;
+    }
+    editor3DLevel = level;
+    editor3DInstances.clear();
+    if (isArray(level.objects))
+    {
+        // an entry that is not an object is dropped, in place, a game may keep the list
+        for (let i = level.objects.length; i--;)
+            level.objects[i] && typeof level.objects[i] === 'object' || level.objects.splice(i, 1);
+        editor3DFixIds(level.objects);
+    }
+    const known = editor3DRecords.get(level);
+    if (known)
+    {
+        // loaded again, as a restart does: its edits are in it, and its undo is its own
+        editor3DUndoList = known.undo;
+        editor3DRedoList = known.redo;
+        return;
+    }
+
+    // a level from a file goes by the file, one made in code by its objects as they were loaded, so each has an
+    // autosave of its own
+    const url = editorFetchedURLs.get(level)?.split(/[?#]/)[0];
+    const original = editor3DCopy(editor3DObjects()), hash = editor3DHash(JSON.stringify(original));
+    const record = {fileName: url ? url.split('/').pop() : 'level3D.json', key: url ?? 'level #' + hash, original,
+        hash, pending: undefined, fileHandle: undefined, undo: [], redo: []};
+    editor3DRecords.set(level, record);
+    editor3DUndoList = record.undo;
+    editor3DRedoList = record.redo;
+    // an autosave the file already has, from a Save, goes; one of this file, or of the file a Save wrote, comes back
+    const saved = editor3DSaves()[record.key];
+    if (saved && isArray(saved.objects) && editor3DSame(saved.objects, original))
+        editor3DAutosave(level);
+    else if ((saved?.hash === hash || saved?.savedHash === hash) && isArray(saved.objects))
+        level.objects = editor3DCopy(saved.objects);
+    else if (saved)
+        record.pending = saved;
+}
+
+// called by level3DLoad for each object, with what its type made
+function editor3DObjectMade(object, made)
+{
+    made && typeof made === 'object' && editor3DInstances.set(object.id, made);
+}
+
+// put what the game made for an object where the level has it, and still
+function editor3DPlaceInstance(made, object)
+{
+    made.pos3D = editor3DPos(object);
+    made.rotation3D = editor3DRotation(object).scale(PI / 180);
+    made.scale3D = (level3DBaseScale.get(made) ?? vec3(1)).multiply(editor3DScale(object));
+    made.velocity3D = vec3();
+    made.angleVelocity3D = vec3();
+}
+
+// make an object's game object, again when it has one
+function editor3DMakeInstance(object)
+{
+    editor3DInstances.get(object.id)?.destroy?.();
+    const made = level3DMake(object);
+    made ? editor3DInstances.set(object.id, made) : editor3DInstances.delete(object.id);
+}
+
+// set the level's objects to a list and bring the game's objects in line: one gone is destroyed, a new one made,
+// one that only moved, turned or changed size is moved where it is, and one whose type or properties changed is
+// made again, since its constructor takes them; a type made by an arrow function is called again
+function editor3DSetObjects(list)
+{
+    const before = new Map(editor3DObjects().map((o)=> [o.id, o]));
+    const objects = editor3DLevel.objects = editor3DCopy(list);
+    const ids = new Set(objects.map((o)=> o.id));
+    for (const [id, made] of editor3DInstances)
+    {
+        if (ids.has(id)) continue;
+        made.destroy?.();
+        editor3DInstances.delete(id);
+    }
+    for (const id of [...editor3DSelection])
+        ids.has(id) || editor3DSelection.delete(id);
+    for (const object of objects)
+    {
+        const old = before.get(object.id), made = editor3DInstances.get(object.id);
+        if (!level3DTypes.has(object.type) || old && editor3DSame(old, object)) continue;
+        const onlyMoved = old && old.type === object.type && editor3DSame(old.properties, object.properties) &&
+            made instanceof EngineObject3D && !made.destroyed;
+        onlyMoved ? editor3DPlaceInstance(made, object) : editor3DMakeInstance(object);
+    }
+}
+
+// change the level's objects as part of the edit being made: change edits a copy of the list; the changes until
+// editor3DStrokeEnd are one undo, so a drag is one undo; false when nothing changed
+function editor3DChange(change)
+{
+    if (!editor3DLevel || editor3DRecords.get(editor3DLevel)?.pending) return false; // its autosave waits first
+    const before = editor3DCopy(editor3DObjects()), after = editor3DCopy(before);
+    change(after);
+    if (editor3DSame(before, after)) return false;
+    editor3DSetObjects(after);
+    editor3DStroke ||= {before};
+    return true;
+}
+
+// end the edit being made: one undo, and the autosave
+function editor3DStrokeEnd()
+{
+    const stroke = editor3DStroke;
+    editor3DStroke = undefined;
+    if (!stroke || editor3DSame(stroke.before, editor3DObjects())) return;
+    editor3DUndoList.push({before: stroke.before, after: editor3DCopy(editor3DObjects())});
+    editor3DUndoList.length > 100 && editor3DUndoList.shift();
+    editor3DRedoList.length = 0;
+    editor3DAutosave();
+}
+
+// take the edit being made back, with nothing to undo
+function editor3DStrokeCancel()
+{
+    const stroke = editor3DStroke;
+    editor3DStroke = undefined;
+    stroke && editor3DSetObjects(stroke.before);
+}
+
+// undo the last edit, or redo the last one undone; false with none
+function editor3DUndo(redo=false)
+{
+    editor3DStrokeEnd();
+    const entry = (redo ? editor3DRedoList : editor3DUndoList).pop();
+    if (!entry) return false;
+    (redo ? editor3DUndoList : editor3DRedoList).push(entry);
+    editor3DSetObjects(redo ? entry.after : entry.before);
+    editor3DAutosave();
+    return true;
+}
+
+// write an object's position, rotation in degrees and scale as the file keeps them: rounded, and the rotation and
+// scale left out when they are the default; one not given is left as it is
+function editor3DSetTransform(object, pos, rotation, scale)
+{
+    const list = (v)=> [editor3DRound(v.x), editor3DRound(v.y), editor3DRound(v.z)];
+    pos && (object.pos = list(pos));
+    if (rotation)
+        list(rotation).some((v)=> v) ? object.rotation = list(rotation) : delete object.rotation;
+    if (scale)
+        list(scale).some((v)=> v !== 1) ? object.scale = list(scale) : delete object.scale;
+}
+
+// set an object's property as the file keeps it, only where it differs from its type's default: a Color as a hex
+// string, with its alpha when it has one, and a vector as an array
+function editor3DSetProperty(object, name, value, defaultValue)
+{
+    const encode = (v)=> isColor(v) ? v.toString(v.a < 1) : isVector3(v) ? [v.x, v.y, v.z] :
+        isVector2(v) ? [v.x, v.y] : v;
+    const properties = {...object.properties};
+    if (editor3DSame(encode(value), encode(defaultValue)))
+        delete properties[name];
+    else
+        properties[name] = encode(value);
+    Object.keys(properties).length ? object.properties = properties : delete object.properties;
+}
+
+// add an object of a type at a position, selected; its id, or undefined when the level can not be edited
+function editor3DPlace(type, pos)
+{
+    let id;
+    const placed = editor3DChange((list)=>
+    {
+        const object = {id: id = list.reduce((next, o)=> max(next, o.id + 1), 1), type};
+        editor3DSetTransform(object, pos);
+        list.push(object);
+    });
+    if (!placed) return;
+    editor3DSelection.clear();
+    editor3DSelection.add(id);
+    return id;
+}
+
+// remove the selected objects, as one undo
+function editor3DDelete()
+{
+    if (!editor3DSelection.size) return false;
+    editor3DStrokeEnd();
+    editor3DChange((list)=>
+    {
+        for (let i = list.length; i--;)
+            editor3DSelection.has(list[i].id) && list.splice(i, 1);
+    });
+    editor3DStrokeEnd();
+}
+
+// copy the selected objects
+function editor3DCopySelection()
+{
+    const selected = editor3DSelected();
+    if (!selected.length) return false;
+    editor3DClipboard = editor3DCopy(selected);
+}
+
+// copy the selected objects and remove them
+function editor3DCut() { return editor3DCopySelection() === false ? false : editor3DDelete(); }
+
+// add the copied objects, moved by an offset, with new ids and selected, as one undo
+function editor3DPaste(offset=vec3())
+{
+    const copied = editor3DClipboard, ids = [];
+    if (!copied?.length) return false;
+    editor3DStrokeEnd();
+    const pasted = editor3DChange((list)=>
+    {
+        let id = list.reduce((next, o)=> max(next, o.id + 1), 1);
+        for (const from of copied)
+        {
+            const object = {...editor3DCopy(from), id: id++};
+            editor3DSetTransform(object, editor3DPos(from).add(offset));
+            list.push(object);
+            ids.push(object.id);
+        }
+    });
+    editor3DStrokeEnd();
+    if (!pasted) return false;
+    editor3DSelection.clear();
+    ids.forEach((id)=> editor3DSelection.add(id));
+}
+
+// copy the selected objects where they are and select the copies, the clipboard stays as it was
+function editor3DDuplicate()
+{
+    const clipboard = editor3DClipboard;
+    const done = editor3DCopySelection() === false ? false : editor3DPaste();
+    editor3DClipboard = clipboard;
+    return done;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the session: opening, playing and closing
+
+// if the level editor is the 3D one: as levelEditor.use3D says, or when a 3D level was loaded
+function editor3DWanted() { return !!render3D && (levelEditor.use3D ?? !!editor3DLevel); }
+
+// put every object back where the level has it, and make one the game destroyed again, so what is on screen is
+// what Save writes; a type made by an arrow function made nothing to put back
+function editor3DRestore()
+{
+    for (const object of editor3DObjects())
+    {
+        const type = level3DTypes.get(object.type), made = editor3DInstances.get(object.id);
+        if (!type) continue;
+        if (made instanceof EngineObject3D && !made.destroyed)
+            editor3DPlaceInstance(made, object);
+        else if (type.make.prototype && (!made || made.destroyed))
+            editor3DMakeInstance(object);
+    }
+}
+
+// open or close the editor, the session goes on: the game is paused under it and reads no input
+function editor3DSetOpen(open)
+{
+    open = !!open;
+    if (!debug || editor3DIsOpen === open) return;
+    if (open)
+    {
+        editor3DSetFreeCamera(false);
+        editor3DLevel || editor3DLevelLoaded({}); // a new level, with nothing loaded
+        editor3DCamera || editor3DCameraStart();
+        editor3DGamePaused = paused;
+        setPaused(true);
+        setDebugOverlay(false); // out of the way of the level
+        editor3DIsOpen = true;
+        editor3DRestore();
+    }
+    else
+    {
+        editor3DDrag = editor3DHover = undefined;
+        editor3DMouseOnPanel = false; // the panel hides, with no mouseleave
+        editor3DStrokeEnd();
+        editor3DIsOpen = false;
+        setPaused(editor3DGamePaused);
+    }
+    inputCapture(editor3DViewOn());
+}
+
+// open the editor, a new session starts at the game's camera and a return keeps the editor's
+function editor3DOpen()
+{
+    editor3DSession || editor3DCameraStart();
+    editor3DSession = true;
+    editor3DSetOpen(true);
+}
+
+// close the editor and end its session, Escape opens the debug overlay again
+function editor3DClose()
+{
+    editor3DSession = false;
+    editor3DSetOpen(false);
+}
+
+// switch to playing, from a position when Play from mouse is on
+function editor3DPlay(pos)
+{
+    editor3DSetOpen(false);
+    editor3DPlayFromMouse && pos && levelEditor.onPlayFrom?.(pos.copy());
+}
+
+// rebuild the level through the game's hook and play it
+function editor3DRestart()
+{
+    if (!levelEditor.onRestart) return;
+    editor3DSetOpen(false);
+    levelEditor.onRestart();
+}
+
+// the level editor's open, close and isOpen go to the 3D editor when the game has a 3D level
+if (debug)
+{
+    const open2D = levelEditor.open.bind(levelEditor), close2D = levelEditor.close.bind(levelEditor);
+    levelEditor.open = ()=> editor3DWanted() ? editor3DOpen() : open2D();
+    levelEditor.close = ()=> editor3DIsOpen || editor3DSession ? editor3DClose() : close2D();
+    Object.defineProperty(levelEditor, 'isOpen', {get: ()=> editor3DIsOpen || editorIsOpen});
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// files: the level as JSON, Save, and the autosave
+
+// a value as JSON on one line, with a space after each comma and colon, as a person would write it
+function editor3DJSON(value)
+{
+    if (isArray(value))
+        return '[' + value.map(editor3DJSON).join(', ') + ']';
+    if (value && typeof value === 'object')
+        return '{' + Object.entries(value).filter(([, v])=> v !== undefined)
+            .map(([key, v])=> JSON.stringify(key) + ': ' + editor3DJSON(v)).join(', ') + '}';
+    return JSON.stringify(value) ?? 'null';
+}
+
+// a level as the file has it: its version, what else it holds, and its objects, one to a line
+function editor3DLevelJSON(level=editor3DLevel)
+{
+    const {littlejs3D, objects, ...rest} = level;
+    const lines = [`"littlejs3D": ${LEVEL3D_VERSION}`];
+    for (const [key, value] of Object.entries(rest))
+        lines.push(JSON.stringify(key) + ': ' + editor3DJSON(value));
+    const list = (isArray(objects) ? objects : []).map((o)=> '    ' + editor3DJSON(o));
+    lines.push('"objects": [' + (list.length ? '\n' + list.join(',\n') + '\n  ]' : ']'));
+    return '{\n  ' + lines.join(',\n  ') + '\n}\n';
+}
+
+// every page keeps its own autosaves, one for each level by its key
+function editor3DSaveName() { return 'LittleJS editor 3D ' + (globalThis.location?.pathname ?? ''); }
+const editor3DSaves = ()=> readSaveData(editor3DSaveName(), {});
+
+// if the last autosave did not fit in storage, the panel says so
+let editor3DSaveFailed = false;
+
+// remember the level's objects, or forget them when they are back to the file
+function editor3DAutosave(level=editor3DLevel)
+{
+    const record = editor3DRecords.get(level);
+    if (!record || record.pending) return; // edits waiting to be applied keep their autosave
+    const saves = editor3DSaves(), objects = isArray(level.objects) ? level.objects : [];
+    // the level as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it,
+    // since the browser gives a picked file's name and not its folder, and a file of the same name may be a copy
+    if (editor3DSame(objects, record.original) && !record.savedHash)
+        delete saves[record.key];
+    else
+        saves[record.key] = {hash: record.hash, savedHash: record.savedHash, objects: editor3DCopy(objects)};
+    try
+    {
+        localStorage.setItem(editor3DSaveName(), JSON.stringify(saves));
+        editor3DSaveFailed = false;
+    }
+    catch { editor3DSaveFailed = true; }
+}
+
+// put the autosaved edits of a file that changed into the level, as one undo
+function editor3DApplyPending()
+{
+    const record = editor3DRecords.get(editor3DLevel), saved = record?.pending;
+    if (!saved || !isArray(saved.objects)) return false;
+    record.pending = undefined;
+    editor3DFixIds(saved.objects);
+    editor3DChange((list)=> { list.length = 0; list.push(...editor3DCopy(saved.objects)); });
+    editor3DStrokeEnd();
+    editor3DAutosave();
+}
+
+// drop the autosaved edits of a file that changed
+function editor3DDropPending()
+{
+    const record = editor3DRecords.get(editor3DLevel);
+    if (!record?.pending) return false;
+    record.pending = undefined;
+    editor3DAutosave();
+}
+
+// Reset to file: put the level back as its file has it, or as Save last wrote it, as one undo; edits waiting for a
+// file that changed are dropped, and a level already as its file has it is left alone
+function editor3DRevert()
+{
+    const record = editor3DRecords.get(editor3DLevel);
+    if (!record) return false;
+    record.pending = undefined;
+    if (editor3DSame(editor3DObjects(), record.original))
+        return editor3DAutosave(), false;
+    editor3DChange((list)=> { list.length = 0; list.push(...editor3DCopy(record.original)); });
+    editor3DStrokeEnd();
+}
+
+// save the level as JSON: where the browser lets a page write files, Chrome and Edge, to a file picked once and
+// written again on each Save after, or picked again with Save As; elsewhere as a download; a file of the level's
+// own name that was written is the file from then on, for the autosave; resolves to how it saved, undefined when
+// the picker was closed
+async function editor3DSave(pickAgain=false)
+{
+    const level = editor3DLevel, record = editor3DRecords.get(level);
+    if (!record) return;
+    editor3DStrokeEnd();
+    // what is written, kept as it is now: the level can change while the file is picked and written, and those
+    // edits are not in the file, so they stay in the autosave; the level and record are this one's, whichever is
+    // open by then
+    const text = editor3DLevelJSON(level), written = editor3DCopy(JSON.parse(text).objects);
+    const picker = /** @type {any} */ (globalThis).showSaveFilePicker;
+    const fileKey = (globalThis.location?.pathname ?? '') + ' 3D ' + record.key;
+    if (picker)
+    {
+        try
+        {
+            if (!pickAgain && !record.fileHandle)
+            {
+                const handle = await editorFileStore.get(fileKey), mode = {mode: 'readwrite'};
+                if (handle && (await handle.queryPermission(mode) === 'granted' ||
+                    await handle.requestPermission(mode) === 'granted'))
+                    record.fileHandle = handle;
+            }
+            if (pickAgain || !record.fileHandle)
+            {
+                record.fileHandle = await picker.call(globalThis, {suggestedName: record.fileName,
+                    types: [{description: 'LittleJS 3D level', accept: {'application/json': ['.json']}}]});
+                editorFileStore.set(fileKey, record.fileHandle);
+            }
+            const writable = await record.fileHandle.createWritable();
+            await writable.write(text);
+            await writable.close();
+            if (record.fileHandle.name === record.fileName)
+            {
+                record.original = written;
+                record.savedHash = editor3DHash(JSON.stringify(written));
+                editor3DAutosave(level);
+            }
+            return 'written';
+        }
+        catch (error)
+        {
+            if (error?.name === 'AbortError') return; // the picker was closed, nothing saved
+            record.fileHandle = undefined; // a file it could not write, a download instead, and not kept
+            editorFileStore.set(fileKey, undefined);
+        }
+    }
+    saveText(text, record.fileName, 'application/json');
+    return 'downloaded';
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the tools: handles on the selection, dragged with the mouse
+
+const EDITOR3D_HANDLE_SIZE = .15; // a handle's length as a part of the view's height
+const EDITOR3D_HANDLE_REACH = 10; // how many pixels from a handle still grab it
+const EDITOR3D_AXES = {x: vec3(1, 0, 0), y: vec3(0, 1, 0), z: vec3(0, 0, 1)};
+
+let editor3DTool = 'move';     // 'select', 'move', 'rotate' or 'scale'
+let editor3DGrid = true;       // moves, turns and sizes go in steps, Ctrl flips it for a drag
+let editor3DGroundSnap = true; // a body drag slides along what is under the mouse
+let editor3DMoveStep = 1, editor3DRotateStep = 15, editor3DScaleStep = .25; // the rotate step in degrees
+let editor3DHelp = false;      // the keys are shown
+let editor3DMouseOnPanel = false;
+// the drag being made: {kind, ...}, a 'box' drag has from and to in screen pixels
+/** @type {any} */
+let editor3DDrag;
+// the handle under the mouse
+/** @type {any} */
+let editor3DHover;
+// what an Alt drag orbits around
+/** @type {Vector3|undefined} */
+let editor3DOrbitPivot;
+
+// the middle of the selection, where the handles are
+function editor3DSelectionCenter()
+{
+    const selected = editor3DSelected();
+    if (selected.length)
+        return selected.reduce((sum, o)=> sum.add(editor3DPos(o)), vec3()).scale(1 / selected.length);
+}
+
+// the handles of the tool on the selection, each {kind, axis, center, length, direction or axes, points}: Move has
+// an arrow along each world axis and a square between each pair, Rotate a ring for the pitch, yaw and roll of the
+// first selected object, Scale a handle along each of its own axes and a box in the middle for all three
+function editor3DHandles()
+{
+    const center = editor3DSelectionCenter(), tool = editor3DTool, handles = [];
+    if (!center || tool === 'select') return handles;
+    const length = editor3DScreenScale(center) * EDITOR3D_HANDLE_SIZE;
+    const rotation = editor3DRotation(editor3DSelected()[0]).scale(PI / 180), frame = buildMatrix(vec3(), rotation);
+    for (const axis of 'xyz')
+    {
+        if (tool === 'rotate')
+        {
+            const axes = editor3DRingAxes(rotation, axis), points = [];
+            for (let i = 0; i <= 48; ++i)
+            {
+                const a = i / 48 * PI * 2;
+                points.push(center.add(axes.across.scale(cos(a) * length)).add(axes.along.scale(sin(a) * length)));
+            }
+            handles.push({kind: 'ring', axis, center, length, axes, points});
+            continue;
+        }
+
+        // an arrow or scale handle starts a little out from the middle, which is left for the object's body
+        const direction = tool === 'move' ? EDITOR3D_AXES[axis] : frame.transformDirection(EDITOR3D_AXES[axis]);
+        handles.push({kind: tool === 'move' ? 'arrow' : 'scale', axis, center, length, direction,
+            points: [center.add(direction.scale(length * .2)), center.add(direction.scale(length))]});
+        if (tool === 'move')
+        {
+            // the square between the other two axes moves along both
+            const [a, b] = 'xyz'.replace(axis, '');
+            handles.push({kind: 'plane', axis: a + b, center, length, direction,
+                points: [center.add(EDITOR3D_AXES[a].add(EDITOR3D_AXES[b]).scale(length * .35))]});
+        }
+    }
+    tool === 'scale' && handles.push({kind: 'scaleAll', axis: 'xyz', center, length, points: [center]});
+    return handles;
+}
+
+// the handle nearest a screen position, within reach; a square or box is a point and a little easier to take
+function editor3DHandleAt(screenPos)
+{
+    let nearest, reach = EDITOR3D_HANDLE_REACH;
+    for (const handle of editor3DHandles())
+    {
+        // a ring seen edge on is a line on screen and the mouse's ray runs along its plane, it can not be dragged
+        const {points, center} = handle, toward = center.subtract(editor3DCamera.pos).normalize();
+        if (handle.kind === 'ring' && abs(handle.axes.axis.dot(toward)) < .15) continue;
+
+        // an arrow or scale handle seen end on is a dot over the object, which is left for the object's body
+        if (points.length === 2)
+        {
+            const a = render3D.worldToScreen(points[0]), b = render3D.worldToScreen(points[1]);
+            if (a && b && a.distance(b) < 12) continue;
+        }
+        let distance = Infinity;
+        if (points.length === 1)
+        {
+            const at = render3D.worldToScreen(points[0]);
+            at && (distance = screenPos.distance(at) - 4);
+        }
+        else
+            for (let i = 1; i < points.length; ++i)
+                distance = min(distance, editor3DSegmentDistance(screenPos, points[i-1], points[i]));
+        if (distance < reach)
+            reach = distance, nearest = handle;
+    }
+    return nearest;
+}
+
+// the object of the level a ray hits first: what the game made for it or a part attached to that, or a unit box
+// where it made nothing to hit, like a light or a player start; its id
+function editor3DPickAt(ray)
+{
+    let nearest, id;
+    for (const object of editor3DObjects())
+    {
+        const parts = editor3DVisible(object) ? editor3DParts(editor3DInstances.get(object.id)) : [];
+        let distance = parts.length ? undefined : raycastBox(ray, editor3DPos(object), vec3(1));
+        for (const part of parts)
+        {
+            const d = render3DRaycastObject(ray, part);
+            if (d !== undefined && (distance === undefined || d < distance))
+                distance = d;
+        }
+        if (distance !== undefined && (nearest === undefined || distance < nearest))
+            nearest = distance, id = object.id;
+    }
+    return id;
+}
+
+// what the game made for an object and the parts attached to it, its children and theirs
+function editor3DParts(made, parts=[])
+{
+    if (made instanceof EngineObject && !made.destroyed)
+    {
+        parts.push(made);
+        for (const child of made.children)
+            editor3DParts(child, parts);
+    }
+    return parts;
+}
+
+// what the game made for the selected objects, with their parts, left out when the selection looks for a surface
+// to stand on
+function editor3DSelectedInstances()
+{
+    return new Set(editor3DSelected().flatMap((o)=> editor3DParts(editor3DInstances.get(o.id))));
+}
+
+// where each selected object is, as a drag starts from
+function editor3DDragStart()
+{
+    return new Map(editor3DSelected().map((o)=>
+        [o.id, {pos: editor3DPos(o), rotation: editor3DRotation(o), scale: editor3DScale(o)}]));
+}
+
+// the left button went down: on a handle it drags it, with a brush it places one, on an object it selects it and
+// may drag it, and on nothing it drags out a box to select with
+function editor3DPress(mouse, ray, shift)
+{
+    const handle = editor3DHandleAt(mouse), from = mouse.copy();
+    if (handle)
+    {
+        const {kind, center, direction, axes} = handle;
+        const grab = kind === 'ring' ? editor3DRingAngle(ray, center, axes) :
+            kind === 'plane' ? editor3DPlanePoint(ray, center, direction) :
+            kind === 'scaleAll' ? 0 : editor3DAxisDistance(ray, center, direction);
+        editor3DDrag = {kind, handle, from, grab, start: editor3DDragStart()};
+        return;
+    }
+    if (editor3DBrush)
+    {
+        editor3DPlaceAt(editor3DBrush, ray);
+        shift || (editor3DBrush = undefined);
+        editor3DTool = 'move';
+        return;
+    }
+    const id = editor3DPickAt(ray);
+    if (id === undefined)
+    {
+        editor3DDrag = {kind: 'box', from, to: from.copy(), shift};
+        return;
+    }
+    if (shift)
+    {
+        editor3DSelection.has(id) ? editor3DSelection.delete(id) : editor3DSelection.add(id);
+        return;
+    }
+    if (!editor3DSelection.has(id))
+    {
+        editor3DSelection.clear();
+        editor3DSelection.add(id);
+    }
+
+    // a drag of its body moves it level, at its height, so it stays under the mouse; seen from the side, where the
+    // mouse's ray runs along that plane, it moves across the view instead, in the upright plane facing it
+    const pos = editor3DPos(editor3DObject(id)), forward = editor3DCamera.getForward();
+    const side = abs(ray.direction.y) < .2 && vec3(forward.x, 0, forward.z).normalize();
+    const normal = side && side.lengthSquared() ? side : EDITOR3D_UP;
+    editor3DDrag = {kind: 'body', id, from, moving: false, ignore: editor3DSelectedInstances(), normal,
+        start: editor3DDragStart(), level: editor3DPlanePoint(ray, pos, normal) ?? pos};
+}
+
+// place an object of a type where a ray lands, standing on what is there, snapped, selected, as one undo
+function editor3DPlaceAt(type, ray)
+{
+    const point = editor3DSurface(ray);
+    if (!point) return;
+    editor3DStrokeEnd();
+    const id = editor3DPlace(type, point);
+    if (id === undefined) return;
+    const size = editor3DSize(editor3DObject(id)), ignore = new Set(editor3DParts(editor3DInstances.get(id)));
+    const snapped = editor3DSnapPos(editor3DRest(point, size), size, editor3DGrid ? editor3DMoveStep : 0);
+    const y = editor3DLand(snapped.x, snapped.z, point.y, size, ignore);
+    editor3DChange((list)=> editor3DSetTransform(list.find((o)=> o.id === id), vec3(snapped.x, y, snapped.z)));
+    editor3DStrokeEnd();
+}
+
+// the mouse moved with a drag held: the selection goes from where the drag started to where the mouse says
+function editor3DDragTo(drag, mouse, ray, snap)
+{
+    if (drag.kind === 'box')
+    {
+        drag.to = mouse.copy();
+        return;
+    }
+    if (drag.kind === 'body' && !(drag.moving ||= mouse.distance(drag.from) > 4)) return;
+    const {kind, handle, start, grab} = drag, first = editor3DObject(drag.id ?? [...start.keys()][0]);
+    const was = first && start.get(first.id);
+    if (!was) return;
+    const size = editor3DSize(first), turned = editor3DTurned(first), step = snap ? editor3DMoveStep : 0;
+    const snapTo = (to)=> editor3DSnapPos(to, size, step, turned).subtract(was.pos);
+    let move, turn, factor;
+    if (kind === 'arrow')
+    {
+        const d = editor3DAxisDistance(ray, handle.center, handle.direction) - grab;
+        move = handle.direction.multiply(snapTo(was.pos.add(handle.direction.scale(d)))); // along its axis alone
+    }
+    else if (kind === 'plane')
+    {
+        const point = editor3DPlanePoint(ray, handle.center, handle.direction);
+        if (!point || !grab) return;
+        move = vec3(1).subtract(handle.direction).multiply(snapTo(was.pos.add(point.subtract(grab))));
+    }
+    else if (kind === 'body')
+    {
+        // level under the mouse, and with ground snap it lands on what is under it there, from where it started
+        const point = editor3DPlanePoint(ray, drag.level, drag.normal);
+        if (!point) return;
+        const across = snapTo(was.pos.add(point.subtract(drag.level)));
+        const y = editor3DGroundSnap ? editor3DLand(was.pos.x + across.x, was.pos.z + across.z,
+            was.pos.y - size.y / 2, size, drag.ignore) : was.pos.y;
+        move = vec3(across.x, y - was.pos.y, across.z);
+    }
+    else if (kind === 'ring')
+    {
+        const angle = editor3DRingAngle(ray, handle.center, handle.axes);
+        if (angle === undefined || grab === undefined) return;
+        turn = mod((angle - grab) * 180 / PI + 180, 360) - 180; // the short way around
+    }
+    else if (kind === 'scale')
+    {
+        if (abs(grab) < 1e-6) return;
+        factor = vec3(1);
+        factor[handle.axis] = max(editor3DAxisDistance(ray, handle.center, handle.direction) / grab, .01);
+    }
+    else // the box in the middle sizes all three, right and up is larger
+        factor = vec3(Math.exp((mouse.x - drag.from.x - mouse.y + drag.from.y) / 200));
+
+    editor3DChange((list)=>
+    {
+        for (const object of list)
+        {
+            const s = start.get(object.id);
+            if (!s) continue;
+            if (move)
+                editor3DSetTransform(object, s.pos.add(move));
+            if (turn !== undefined)
+            {
+                const rotation = s.rotation.copy();
+                rotation[handle.axis] = editor3DSnap(rotation[handle.axis] + turn, snap ? editor3DRotateStep : 0);
+                editor3DSetTransform(object, undefined, rotation);
+            }
+            if (factor)
+            {
+                const size = snap ? editor3DScaleStep : 0, least = size || .01;
+                const scale = s.scale.multiply(factor);
+                editor3DSetTransform(object, undefined, undefined, vec3(max(editor3DSnap(scale.x, size), least),
+                    max(editor3DSnap(scale.y, size), least), max(editor3DSnap(scale.z, size), least)));
+            }
+        }
+    });
+}
+
+// the left button went up: a box selects what is inside it, by where each object's middle is on screen, and a
+// press that never moved clears the selection; any other drag is one undo
+function editor3DDragEnd(drag, mouse)
+{
+    editor3DDrag = undefined;
+    if (drag.kind !== 'box')
+        return editor3DStrokeEnd();
+    drag.shift || editor3DSelection.clear();
+    const {from} = drag;
+    if (mouse.distance(from) < 4) return;
+    const low = vec2(min(from.x, mouse.x), min(from.y, mouse.y));
+    const high = vec2(max(from.x, mouse.x), max(from.y, mouse.y));
+    for (const object of editor3DObjects())
+    {
+        const at = render3D.worldToScreen(editor3DPos(object));
+        at && at.x >= low.x && at.x <= high.x && at.y >= low.y && at.y <= high.y &&
+            editor3DSelection.add(object.id);
+    }
+}
+
+// take the drag being made back, with nothing to undo
+function editor3DDragCancel()
+{
+    editor3DDrag = undefined;
+    editor3DStrokeCancel();
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the editor's camera, keys and update
+
+// the surface under a screen position, under the mouse and under the middle of the view, seen through the
+// editor's camera
+function editor3DScreenPoint(screenPos)
+{ return editor3DWithView(()=> editor3DSurface(render3D.screenToRay(screenPos))); }
+function editor3DMousePoint() { return editor3DScreenPoint(mousePosScreen); }
+function editor3DViewPoint() { return editor3DScreenPoint(mainCanvasSize.scale(.5)); }
+
+// move the camera back along its view until the selection is in the middle and fits
+function editor3DFrame()
+{
+    const center = editor3DSelectionCenter(), camera = editor3DCamera;
+    if (!center) return false;
+    const radius = editor3DSelected().reduce((r, o)=>
+        max(r, editor3DPos(o).distance(center) + editor3DSize(o).length() / 2), 0);
+    camera.pos = center.subtract(camera.getForward().scale(max(radius * 2.5, 3)));
+    render3D.updateMatrices();
+}
+
+// drop the selection straight down onto what is under it, each object by itself, as one undo
+function editor3DDropSelection()
+{
+    const ignore = editor3DSelectedInstances();
+    if (!editor3DSelection.size) return false;
+    editor3DStrokeEnd();
+    editor3DChange((list)=>
+    {
+        for (const object of list)
+        {
+            const to = editor3DSelection.has(object.id) &&
+                editor3DDrop(editor3DPos(object), editor3DSize(object), ignore);
+            to && editor3DSetTransform(object, to);
+        }
+    });
+    editor3DStrokeEnd();
+}
+
+// paste the copied objects with their middle under the mouse, the lowest standing on what is there, snapped by
+// the first of them; where they were when the mouse is over nothing
+function editor3DPasteAtMouse()
+{
+    const copied = editor3DClipboard, point = !editor3DMouseOnPanel && editor3DMousePoint();
+    if (!copied?.length) return false;
+    if (!point) return editor3DPaste();
+    const center = copied.reduce((sum, o)=> sum.add(editor3DPos(o)), vec3()).scale(1 / copied.length);
+    const bottom = copied.reduce((low, o)=> min(low, editor3DPos(o).y - editor3DSize(o).y / 2), Infinity);
+    const first = copied[0], was = editor3DPos(first);
+    const snapped = editor3DSnapPos(was.add(vec3(point.x - center.x, 0, point.z - center.z)), editor3DSize(first),
+        editor3DGrid ? editor3DMoveStep : 0, editor3DTurned(first));
+    const land = editor3DLand(snapped.x, snapped.z, point.y, editor3DSize(first)) - editor3DSize(first).y / 2;
+    return editor3DPaste(vec3(snapped.x - was.x, land - bottom, snapped.z - was.z));
+}
+
+// the keys by their position on the keyboard, each called with whether Shift is held; the tool keys are the ones
+// Unity, Unreal and Godot use
+/** @type {Object<string, function(boolean=): any>} */
+const editor3DKeys =
+{
+    KeyQ: ()=> { editor3DTool = 'select'; editor3DBrush = undefined; },
+    KeyW: ()=> { editor3DTool = 'move'; },
+    KeyE: ()=> { editor3DTool = 'rotate'; },
+    KeyR: ()=> { editor3DTool = 'scale'; },
+    KeyG: ()=> { editor3DGrid = !editor3DGrid; },
+    KeyF: ()=> editor3DFrame(),
+    End: ()=> editor3DDropSelection(),
+    Delete: ()=> editor3DDelete(),
+    Backspace: ()=> editor3DDelete(),
+    Slash: ()=> { editor3DHelp = !editor3DHelp; },
+};
+/** @type {Object<string, function(boolean=): any>} */
+const editor3DCtrlKeys =
+{
+    KeyZ: (shift)=> editor3DUndo(shift),
+    KeyY: ()=> editor3DUndo(true),
+    KeyC: ()=> editor3DCopySelection(),
+    KeyX: ()=> editor3DCut(),
+    KeyV: ()=> editor3DPasteAtMouse(),
+    KeyD: ()=> editor3DDuplicate(),
+};
+
+// the camera: the right button looks and the keys fly while it is held, the middle button or Space and the left
+// pans, Alt and the left orbits the selection, and the wheel zooms toward what is under the mouse
+function editor3DCameraUpdate(seconds, shift, alt)
+{
+    const camera = editor3DCamera, delta = inputCaptureDeltaScreen, wheel = inputCaptureWheel;
+    const ahead = ()=> camera.pos.add(camera.getForward().scale(10));
+    if (mouseIsDown(2))
+    {
+        editor3DFlySpeed = clamp(editor3DFlySpeed * Math.exp(-wheel * .2), .01, 10);
+        editor3DFly(camera, editor3DFlyKeys(), delta, seconds, shift);
+    }
+    else if (mouseIsDown(1) || keyIsDown('Space') && mouseIsDown(0))
+    {
+        // the scene follows the mouse, at the depth of what is in the middle of the view
+        const perPixel = editor3DScreenScale(editor3DViewPoint() ?? ahead()) / mainCanvasSize.y;
+        camera.pos = camera.pos.subtract(camera.getRight().scale(delta.x * perPixel))
+            .add(camera.getUp().scale(delta.y * perPixel));
+    }
+    else if (alt && mouseIsDown(0))
+    {
+        if (mouseWasPressed(0) || !editor3DOrbitPivot)
+            editor3DOrbitPivot = editor3DSelectionCenter() ?? editor3DViewPoint() ?? ahead();
+        const pivot = editor3DOrbitPivot, distance = camera.pos.distance(pivot);
+        editor3DFly(camera, vec3(), delta, 0);
+        camera.pos = pivot.subtract(camera.getForward().scale(distance));
+    }
+    else if (wheel && !editor3DMouseOnPanel)
+    {
+        // toward what is under the mouse, a part of the way there for each notch, and never through it
+        render3D.updateMatrices();
+        const ray = render3D.screenToRay(mousePosScreen), target = editor3DSurface(ray);
+        const distance = target ? camera.pos.distance(target) : 10;
+        camera.pos = camera.pos.add(ray.direction.scale(min(max(distance * .15, .2) * -wheel, distance - .5)));
+    }
+    render3D.updateMatrices(); // what follows picks and projects through the camera where it is now
+}
+
+// the editor's update, called while it is open with the input readable and render3D looking through its camera
+function editor3DEditorUpdate(seconds)
+{
+    const held = (...codes)=> codes.some((code)=> keyIsDown(code));
+    const shift = held('ShiftLeft', 'ShiftRight'), alt = held('AltLeft', 'AltRight');
+    const ctrl = held('ControlLeft', 'ControlRight', 'MetaLeft', 'MetaRight');
+    const mouse = mousePosScreen;
+
+    // Escape, the debug key, puts a drag back, or else switches to playing; taken, so the debug overlay stays shut
+    if (debugKey && keyWasPressed(debugKey))
+    {
+        inputClearKey(debugKey);
+        editor3DDrag ? editor3DDragCancel() : editor3DPlay(editor3DMousePoint());
+        return;
+    }
+
+    // 0 exits the editor; cleared, so debugKeysAlways does not open it again in the same step
+    if (keyWasPressed('Digit0'))
+    {
+        inputClearKey('Digit0');
+        editor3DClose();
+        return;
+    }
+
+    editor3DCameraUpdate(seconds, shift, alt);
+    const looking = mouseIsDown(2), cameraDrag = looking || mouseIsDown(1) || keyIsDown('Space') || alt;
+
+    // the keys, which wait for a drag to end, and fly while the right button is held
+    if (!editor3DDrag && !looking)
+        for (const [code, action] of Object.entries(ctrl ? editor3DCtrlKeys : editor3DKeys))
+            keyWasPressed(code) && action(shift);
+
+    // a right press during a drag puts it back
+    if (editor3DDrag && mouseWasPressed(2))
+        return editor3DDragCancel();
+
+    const ray = render3D.screenToRay(mouse), idle = !cameraDrag && !editor3DMouseOnPanel && !editor3DDrag;
+    editor3DHover = idle ? editor3DHandleAt(mouse) : undefined;
+    if (idle && mouseWasPressed(0))
+        editor3DPress(mouse, ray, shift);
+
+    // a quick click, down and up before this step, is a press and its release in one
+    const drag = editor3DDrag;
+    if (drag)
+        mouseIsDown(0) ? editor3DDragTo(drag, mouse, ray, editor3DGrid !== ctrl) : editor3DDragEnd(drag, mouse);
+}
+
+// Ctrl with a letter the editor uses is not the browser's while the editor is open, Ctrl+D would bookmark the page
+if (debug && globalThis.document?.addEventListener)
+    document.addEventListener('keydown', (e)=>
+    {
+        if (editor3DIsOpen && (e.ctrlKey || e.metaKey) && /^Key[ZYCXVD]$/.test(e.code) && !editorIsTextField(e.target))
+            e.preventDefault();
+    });
+
+///////////////////////////////////////////////////////////////////////////////
+// what the panel does to the level, and what it says
+
+// the help, every control
+const editor3DHelpLines =
+[
+    'Left: select · Shift+Left: add or take away · Left drag from empty space: box select',
+    'Q select · W move · E rotate · R scale: drag a handle, or the object itself',
+    'G: grid snap, Ctrl flips it for a drag · End: drop to the ground',
+    'Right button: look, and WASD and QE fly while it is held, Shift faster',
+    'Wheel: zoom · Middle drag or Space+drag: pan · Alt+drag: orbit · F: frame the selection',
+    'Pick a type, then click to place it, Shift+click keeps placing',
+    'Delete · Ctrl+C / X / V: copy, cut, paste · Ctrl+D: duplicate · Ctrl+Z / Y: undo, redo',
+    'Reset to file: the level as its file has it, Restart keeps your edits, Undo brings them back',
+    'Esc: play and edit · 0: exit the editor · ?: keys',
+];
+
+// the hint line, for what is held and what is selected
+function editor3DHint()
+{
+    if (editor3DRecords.get(editor3DLevel)?.pending)
+        return 'The level file changed: apply your edits or drop them';
+    if (editor3DDrag)
+        return editor3DDrag.kind === 'box' ? 'Let go to select what is inside' :
+            'Esc or right click puts it back · Ctrl flips the snap';
+    if (inputCaptureRead(()=> mouseIsDown(2)))
+        return 'WASD and QE fly · Shift faster · the wheel sets the speed';
+    if (editor3DBrush)
+        return `Click to place a ${editor3DBrush} · Shift keeps placing · Q puts it down`;
+    if (editor3DSelection.size)
+        return 'Drag a handle or the object · W move · E rotate · R scale · End drops it';
+    return 'Click to select · pick a type to place · the right button looks · ? keys';
+}
+
+// if the properties box has an input for a default's type
+const editor3DPropertyEditable = (value)=> ['number', 'boolean', 'string'].includes(typeof value) ||
+    isColor(value) || isVector2(value) || isVector3(value);
+
+// set the position, rotation in degrees or scale of the one selected object, from the panel, as one undo
+function editor3DSetSelectedTransform(field, value)
+{
+    const selected = editor3DSelected(), id = selected[0]?.id;
+    if (selected.length !== 1 || !isVector3(value)) return false;
+    editor3DStrokeEnd();
+    editor3DChange((list)=> editor3DSetTransform(list.find((o)=> o.id === id), field === 'pos' ? value : undefined,
+        field === 'rotation' ? value : undefined, field === 'scale' ? value : undefined));
+    editor3DStrokeEnd();
+    return true;
+}
+
+// set a property of the one selected object, from the panel, as one undo; the value has the type of its default
+function editor3DSetSelectedProperty(name, value)
+{
+    const selected = editor3DSelected(), id = selected[0]?.id;
+    const defaults = selected[0] && level3DTypes.get(selected[0].type)?.defaults;
+    const d = defaults && Object.hasOwn(defaults, name) ? defaults[name] : undefined;
+    const sameType = isColor(d) ? isColor(value) : isVector3(d) ? isVector3(value) :
+        isVector2(d) ? isVector2(value) : typeof value === typeof d;
+    if (selected.length !== 1 || !editor3DPropertyEditable(d) || !sameType) return false;
+    editor3DStrokeEnd();
+    editor3DChange((list)=> editor3DSetProperty(list.find((o)=> o.id === id), name, value, d));
+    editor3DStrokeEnd();
+    return true;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// what the editor draws
+
+const EDITOR3D_AXIS_COLORS = {x: hsl(0, .9, .55), y: hsl(.33, .9, .45), z: hsl(.6, .9, .6)};
+const EDITOR3D_SELECT_COLOR = hsl(.15, 1, .6), EDITOR3D_MARKER_COLOR = hsl(.55, 1, .7);
+const EDITOR3D_SOLID_COLOR = hsl(.08, 1, .55);
+
+// a width in world units that shows as a number of pixels at a point
+function editor3DPixels(point, pixels) { return editor3DScreenScale(point) / mainCanvasSize.y * pixels; }
+
+// the 12 edges of the unit box a matrix places
+function editor3DDrawWire(matrix, color, pixels=2)
+{
+    const corner = (i)=> matrix.transformPoint(vec3(i & 1 ? .5 : -.5, i & 2 ? .5 : -.5, i & 4 ? .5 : -.5));
+    const width = editor3DPixels(matrix.getTranslation(), pixels);
+    for (let i = 0; i < 8; ++i)
+    for (const bit of [1, 2, 4])
+        i & bit || render3D.drawLine(corner(i), corner(i | bit), width, color);
+}
+
+// a ring around a point across two axes
+function editor3DDrawRing(center, across, along, radius, color, pixels=2)
+{
+    const points = [];
+    for (let i = 0; i <= 32; ++i)
+    {
+        const a = i / 32 * PI * 2;
+        points.push(center.add(across.scale(cos(a) * radius)).add(along.scale(sin(a) * radius)));
+    }
+    render3D.drawRibbon(points, editor3DPixels(center, pixels), undefined, color);
+}
+
+// what the game made for an object, when it has something to see and click
+function editor3DVisible(object)
+{
+    const made = editor3DInstances.get(object.id);
+    return made instanceof EngineObject3D && !made.destroyed && (made.mesh || made.tileInfo) ? made : undefined;
+}
+
+// the box around an object as a matrix: around its mesh where it is, turned and sized as it is, a unit box for a
+// marker
+function editor3DBoxMatrix(object)
+{
+    const made = editor3DVisible(object), bounds = made?.mesh && (made.mesh.bounds || made.mesh.getBounds());
+    if (!made)
+        return buildMatrix(editor3DPos(object));
+    const matrix = render3DObjectMatrix(made).copy();
+    return bounds ? matrix.multiply(buildMatrix(bounds.min.add(bounds.max).scale(.5), undefined,
+        bounds.max.subtract(bounds.min))) : matrix.multiply(buildMatrix(vec3(), undefined, made.size3D));
+}
+
+// the ground grid at height 0 around where the camera is, a line each unit and a stronger one each 10, fading
+// with distance; drawn with the depth test so the level hides it, and a hair over 0 so a floor there does not
+function editor3DDrawGrid()
+{
+    const camera = editor3DCamera.pos, reach = 40, y = .01;
+    const x0 = round(camera.x), z0 = round(camera.z);
+    for (let i = -reach; i <= reach; ++i)
+    for (const across of [false, true])
+    {
+        const at = (across ? z0 : x0) + i, strong = at % 10 === 0;
+        if (!strong && abs(i) > reach / 2) continue;
+        const fade = 1 - abs(i) / (strong ? reach : reach / 2);
+        const a = across ? vec3(x0 - reach, y, at) : vec3(at, y, z0 - reach);
+        const b = across ? vec3(x0 + reach, y, at) : vec3(at, y, z0 + reach);
+        render3D.drawLine(a, b, strong ? .04 : .02, hsl(0, 0, 1, (strong ? .35 : .15) * fade));
+    }
+}
+
+// the cone a move arrow ends in, standing on Y, made the first time one is drawn
+let editor3DCone;
+const editor3DConeMesh = ()=> editor3DCone ||= buildCone(1, 1, 12);
+
+// the editor's drawing in the 3D pass: the grid, a marker for what has nothing to see, the collision shape of
+// what is solid and selected, the selection, the brush where it would go, and the handles
+function editor3DDraw()
+{
+    const r = render3D;
+    render3DWithState({depthTest: true}, editor3DDrawGrid);
+    for (const object of editor3DObjects())
+    {
+        const made = editor3DVisible(object), selected = editor3DSelection.has(object.id);
+        made || editor3DDrawWire(editor3DBoxMatrix(object), EDITOR3D_MARKER_COLOR, 1.5);
+        selected && editor3DDrawWire(editor3DBoxMatrix(object), EDITOR3D_SELECT_COLOR, 2.5);
+        if (made?.collideSolidObjects && !made.parent && selected)
+        {
+            // what it collides as, which turns with it, where its size3D is not its mesh's
+            const shape = render3DSolidShape(made), color = EDITOR3D_SOLID_COLOR;
+            if (shape.size)
+                editor3DDrawWire(buildMatrix(shape.pos, shape.axes && made.rotation3D, shape.size), color, 1.5);
+            else
+                for (const [across, along] of [['x', 'y'], ['y', 'z'], ['z', 'x']])
+                    editor3DDrawRing(shape.pos, EDITOR3D_AXES[across], EDITOR3D_AXES[along], shape.radius, color, 1.5);
+        }
+    }
+
+    // the brush, a box where a click would place it
+    const point = editor3DBrush && !editor3DMouseOnPanel && !editor3DDrag && editor3DMousePoint();
+    if (point)
+    {
+        const snapped = editor3DSnapPos(editor3DRest(point, vec3(1)), vec3(1), editor3DGrid ? editor3DMoveStep : 0);
+        editor3DDrawWire(buildMatrix(vec3(snapped.x, point.y + .5, snapped.z)), hsl(0, 0, 1, .7));
+    }
+
+    // the handles, the one under the mouse or being dragged in the selection's color
+    for (const handle of editor3DHandles())
+    {
+        const {kind, axis, center, length, points} = handle;
+        const taken = (editor3DDrag?.handle ?? editor3DHover);
+        const lit = taken && taken.kind === kind && taken.axis === axis;
+        const color = lit ? EDITOR3D_SELECT_COLOR : EDITOR3D_AXIS_COLORS[axis[0]] ?? WHITE;
+        const width = editor3DPixels(center, lit ? 4 : 3), tip = length * .1;
+        if (kind === 'ring')
+            r.drawRibbon(points, width, undefined, color);
+        else if (kind === 'plane')
+        {
+            // a flat square across its two axes, in the color of the axis it does not move along
+            const size = vec3(tip * 1.6).subtract(handle.direction.scale(tip * 1.5));
+            r.drawBox(points[0], size, lit ? color : EDITOR3D_AXIS_COLORS['xyz'.replace(axis[0], '')
+                .replace(axis[1], '')].scale(1, .7));
+        }
+        else if (kind === 'scaleAll')
+            r.drawBox(center, tip * 1.4, lit ? color : WHITE);
+        else if (kind === 'arrow')
+        {
+            // a move arrow ends in a cone pointing along it, which says move this way, where scale has a box
+            r.drawLine(points[0], points[1], width, color);
+            const turn = axis === 'x' ? vec3(0, 0, -PI / 2) : axis === 'z' ? vec3(PI / 2, 0, 0) : undefined;
+            const at = points[1].add(handle.direction.scale(tip));
+            r.drawMesh(editor3DConeMesh(), buildMatrix(at, turn, vec3(tip * 1.4, tip * 2, tip * 1.4)), undefined, color);
+        }
+        else
+        {
+            r.drawLine(points[0], points[1], width, color);
+            r.drawBox(points[1], tip, color, editor3DRotation(editor3DSelected()[0]).scale(PI / 180));
+        }
+    }
+}
+
+// the editor's drawing on the 2D layer: the name of each marker, and the box being dragged out to select with
+function editor3DDrawLabels()
+{
+    for (const object of editor3DObjects())
+    {
+        if (editor3DVisible(object)) continue;
+        const at = render3D.worldToScreen(editor3DPos(object));
+        at && drawTextScreen(object.type + '', at, 14, WHITE, 3, BLACK);
+    }
+    const drag = editor3DDrag;
+    if (drag?.kind === 'box')
+    {
+        const {from: a, to: b} = drag, corners = [a, vec2(b.x, a.y), b, vec2(a.x, b.y)];
+        corners.forEach((c, i)=> drawLine(c, corners[(i + 1) % 4], 2, EDITOR3D_SELECT_COLOR, undefined, 0, glEnable, true));
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// the panel, in the look of the 2D level editor's, made the first time the editor opens
+
+let editor3DPanel, editor3DPanelParts;
+
+function editor3DPanelInit()
+{
+    const panel = editor3DPanel = editorElement('div', document.body,
+        'position:fixed;top:8px;left:8px;width:260px;max-height:calc(100% - 16px);overflow-y:auto;' +
+        'box-sizing:border-box;padding:8px;background:#111d;color:#eee;font:12px monospace;' +
+        'border-radius:4px;z-index:9999;user-select:none');
+
+    // a click or touch on the panel is not the level's, a mouse up still goes on so a drag can let go
+    for (const type of ['mousedown','wheel','touchstart','touchmove','touchend','touchcancel'])
+        panel.addEventListener(type, (e)=> e.stopPropagation());
+    panel.addEventListener('mouseenter', ()=> editor3DMouseOnPanel = true);
+    panel.addEventListener('mouseleave', ()=> editor3DMouseOnPanel = false);
+
+    const box = 'margin:4px 0;padding:4px;background:#222;border-radius:3px';
+    const row = (parent=panel)=> editorElement('div', parent, 'display:flex;gap:4px;margin:4px 0;flex-wrap:wrap');
+    const button = (parent, text, onclick, title='')=>
+    {
+        const b = editorElement('button', parent, 'flex:1;padding:3px;cursor:pointer', text);
+        b.onclick = (e)=> { onclick(e); b.blur(); }; // the keys go back to the editor
+        b.title = title;
+        return b;
+    };
+    const check = (parent, text, onchange, title='')=>
+    {
+        const label = editorElement('label', parent, 'display:flex;gap:6px;align-items:center;margin:2px 0');
+        const input = editorElement('input', label);
+        input.type = 'checkbox';
+        input.onchange = ()=> { onchange(input.checked); input.blur(); };
+        editorElement('span', label, '', text);
+        label.title = title;
+        return input;
+    };
+    const choice = (parent, text, values, onchange)=>
+    {
+        const label = editorElement('label', parent, 'display:flex;gap:3px;align-items:center;flex:1');
+        editorElement('span', label, '', text);
+        const select = editorElement('select', label, 'flex:1;background:#333;color:#eee');
+        for (const value of values)
+            editorElement('option', select, '', value + '').value = value + '';
+        select.onchange = ()=> { onchange(parseFloat(select.value)); select.blur(); };
+        return select;
+    };
+
+    editorElement('div', panel, 'font-weight:bold', '3D Level Editor');
+    const top = row();
+    button(top, 'Play', ()=> editor3DPlay(editor3DViewPoint()), 'Esc, and Esc again comes back to the editor');
+    const restart = button(top, 'Restart', editor3DRestart, 'Rebuild the level and play it');
+    button(top, 'Exit', ()=> levelEditor.close(), '0, then Esc opens the debug overlay again');
+    const undo = row();
+    button(undo, 'Undo', ()=> editor3DUndo(), 'Ctrl+Z');
+    button(undo, 'Redo', ()=> editor3DUndo(true), 'Ctrl+Y');
+    button(undo, 'Keys', ()=> editor3DHelp = !editor3DHelp, 'Every control, ?');
+
+    // a file that changed under its autosave
+    const pending = editorElement('div', panel, 'padding:4px;margin:4px 0;background:#630;border-radius:3px');
+    editorElement('div', pending, '', 'The level file changed since your autosaved edits');
+    const pendingRow = editorElement('div', pending, 'display:flex;gap:4px;margin-top:4px');
+    button(pendingRow, 'Apply edits', ()=> editor3DApplyPending());
+    button(pendingRow, 'Drop them', ()=> editor3DDropPending());
+
+    // the tools, and the snapping
+    const tools = row(), toolButtons = {};
+    for (const [tool, text, key] of [['select', 'Select', 'Q'], ['move', 'Move', 'W'], ['rotate', 'Rotate', 'E'],
+        ['scale', 'Scale', 'R']])
+        toolButtons[tool] = button(tools, text, ()=>
+        {
+            editor3DTool = tool;
+            tool === 'select' && (editor3DBrush = undefined);
+        }, key);
+    const snap = editorElement('div', panel, box);
+    const grid = check(snap, 'Grid snap', (on)=> editor3DGrid = on, 'G, and Ctrl flips it for a drag');
+    const steps = row(snap);
+    const moveStep = choice(steps, 'Move', [1, .5, .25], (v)=> editor3DMoveStep = v);
+    const rotateStep = choice(steps, 'Turn', [15, 45, 90], (v)=> editor3DRotateStep = v);
+    const scaleStep = choice(steps, 'Size', [1, .5, .25], (v)=> editor3DScaleStep = v);
+    const ground = check(snap, 'Ground snap', (on)=> editor3DGroundSnap = on,
+        'A drag of an object slides it along what is under the mouse');
+
+    // the types, a click picks one up to place, made again when types are added
+    editorElement('div', panel, 'color:#aaa;margin-top:4px', 'Place');
+    const types = row();
+    const properties = editorElement('div', panel, box);
+
+    const file = row();
+    // Save says so for a moment when it saved, Save As shows where a page can write files
+    const saved = (b, label)=> (result)=> result && (b.textContent = 'Saved', setTimeout(()=> b.textContent = label, 1e3));
+    const save = button(file, 'Save', ()=> editor3DSave().then(saved(save, 'Save')),
+        'Save, to the file picked the first time, or a download');
+    const saveAs = button(file, 'Save As', ()=> editor3DSave(true).then(saved(saveAs, 'Save As')),
+        'Save As, to a file picked again');
+    button(file, 'Reset to file', ()=> editor3DRevert(),
+        'Put the level back as its file has it, or as Save last wrote it; Undo brings the edits back');
+    /** @type {any} */ (globalThis).showSaveFilePicker || (saveAs.style.display = 'none');
+    const playFrom = check(panel, 'Play from mouse', (on)=> editor3DPlayFromMouse = on,
+        'Escape starts play with the player at the mouse, Play at the middle of the view');
+
+    const storage = editorElement('div', panel, 'color:#f86;margin-top:4px',
+        'Autosave failed, storage is full: Save to a file');
+    const hint = editorElement('div', panel, 'color:#8ab;margin-top:4px');
+    const help = editorElement('div', panel, 'color:#aaa;margin-top:4px;border-top:1px solid #444;padding-top:4px');
+    for (const line of editor3DHelpLines)
+        editorElement('div', help, 'margin:2px 0', line);
+    button(help, 'Close', ()=> editor3DHelp = false, '?');
+
+    editor3DPanelParts = {restart, pending, toolButtons, grid, moveStep, rotateStep, scaleStep, ground, types,
+        properties, playFrom, storage, hint, help, typeNames: ''};
+}
+
+// show the panel as the editor is now
+function editor3DPanelUpdate()
+{
+    if (!editor3DIsOpen)
+    {
+        editor3DPanel && (editor3DPanel.style.display = 'none');
+        return;
+    }
+    editor3DPanel || editor3DPanelInit();
+    editor3DPanel.style.display = '';
+    const p = editor3DPanelParts, lit = '2px solid #4af';
+    p.restart.style.display = levelEditor.onRestart ? '' : 'none';
+    p.pending.style.display = editor3DRecords.get(editor3DLevel)?.pending ? '' : 'none';
+    for (const tool in p.toolButtons)
+        p.toolButtons[tool].style.outline = tool === editor3DTool ? lit : '';
+    p.grid.checked = editor3DGrid;
+    p.ground.checked = editor3DGroundSnap;
+    p.moveStep.value = editor3DMoveStep + '';
+    p.rotateStep.value = editor3DRotateStep + '';
+    p.scaleStep.value = editor3DScaleStep + '';
+    p.playFrom.checked = editor3DPlayFromMouse;
+    p.playFrom.parentElement.style.display = levelEditor.onPlayFrom ? 'flex' : 'none';
+    p.storage.style.display = editor3DSaveFailed ? '' : 'none';
+    p.hint.textContent = editor3DHint();
+    p.help.style.display = editor3DHelp ? '' : 'none';
+
+    // a button for each type, made again when the types changed
+    const names = [...level3DTypes.keys()], typeNames = names.join('\n');
+    if (p.typeNames !== typeNames)
+    {
+        p.typeNames = typeNames;
+        p.types.replaceChildren(...names.map((name)=>
+        {
+            const b = editorElement('button', undefined, 'padding:3px 6px;cursor:pointer', name);
+            b.onclick = ()=> { editor3DBrush = editor3DBrush === name ? undefined : name; b.blur(); };
+            return b;
+        }));
+    }
+    names.forEach((name, i)=> p.types.children[i].style.outline = name === editor3DBrush ? lit : '');
+    editor3DPropertiesUpdate(p.properties);
+}
+
+// the properties box: the position, rotation and scale of the one selected object and an input for each default
+// of its type, made again when the selection or the object changes, but not while one of its inputs is typed in
+function editor3DPropertiesUpdate(box)
+{
+    const selected = editor3DSelected(), object = selected.length === 1 && selected[0];
+    const type = object && level3DTypes.get(object.type);
+    const key = object ? JSON.stringify(object) : selected.length ? selected.length + ' objects' : '';
+    box.style.display = key ? '' : 'none';
+    if (box.dataset.key === key || box.contains(document.activeElement)) return;
+    box.dataset.key = key;
+    box.replaceChildren();
+    if (!object)
+    {
+        key && editorElement('div', box, 'color:#aaa', key + ' selected');
+        return;
+    }
+    editorElement('div', box, 'color:#aaa;margin-bottom:2px', `${object.type} ${object.id}`);
+    const field = 'background:#222;color:#eee';
+    const line = (name)=>
+    {
+        const row = editorElement('label', box, 'display:flex;gap:4px;align-items:center;margin:2px 0');
+        editorElement('span', row, 'flex:1', name);
+        return row;
+    };
+
+    // the numbers of a vector, set together once every one of them reads as a number
+    const numbers = (name, value, set)=>
+    {
+        const row = line(name), axes = isVector3(value) ? 'xyz' : 'xy', inputs = [];
+        for (const axis of axes)
+        {
+            const input = editorElement('input', row, field + ';width:' + (axes.length > 2 ? 46 : 52) + 'px');
+            input.type = 'number';
+            input.step = 'any';
+            input.value = editor3DRound(value[axis]) + '';
+            input.onchange = ()=>
+            {
+                const v = inputs.map((i)=> parseFloat(i.value));
+                if (v.every((n)=> isNumber(n)))
+                    set(axes.length > 2 ? vec3(v[0], v[1], v[2]) : vec2(v[0], v[1]));
+                else
+                    inputs.forEach((i, k)=> i.value = editor3DRound(value[axes[k]]) + '');
+                input.blur();
+            };
+            inputs.push(input);
+        }
+    };
+    numbers('pos', editor3DPos(object), (v)=> editor3DSetSelectedTransform('pos', v));
+    numbers('rotation', editor3DRotation(object), (v)=> editor3DSetSelectedTransform('rotation', v));
+    numbers('scale', editor3DScale(object), (v)=> editor3DSetSelectedTransform('scale', v));
+    if (!type) return;
+
+    const values = level3DProperties(type, object);
+    for (const [name, defaultValue] of Object.entries(type.defaults))
+    {
+        const value = values[name];
+        if (isVector3(defaultValue) || isVector2(defaultValue))
+        {
+            numbers(name, value, (v)=> editor3DSetSelectedProperty(name, v));
+            continue;
+        }
+        const input = editorElement('input', line(name), field + ';width:110px');
+        const set = (v)=> { editor3DSetSelectedProperty(name, v); input.blur(); };
+        if (typeof defaultValue === 'boolean')
+        {
+            input.type = 'checkbox';
+            input.checked = !!value;
+            input.onchange = ()=> set(input.checked);
+        }
+        else if (isColor(defaultValue))
+        {
+            input.type = 'color';
+            input.value = value.toString(false);
+            input.onchange = ()=> { const color = new Color().setHex(input.value); color.a = value.a; set(color); };
+        }
+        else if (typeof defaultValue === 'number')
+        {
+            input.type = 'number';
+            input.step = 'any';
+            input.value = value + '';
+            input.onchange = ()=> { const v = parseFloat(input.value); isNumber(v) && set(v); };
+        }
+        else if (typeof defaultValue === 'string')
+        {
+            input.type = 'text';
+            input.value = (value ?? '') + '';
+            input.onchange = ()=> set(input.value);
+        }
+        else
+        {
+            // a type it has no input for, an array say, shown as it is
+            input.readOnly = true;
+            input.value = value + '';
+        }
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// plugin
+
+function editor3DUpdate()
+{
+    const seconds = clamp(timeReal - editor3DTimeLast, 0, .1);
+    editor3DTimeLast = timeReal;
+    if (!render3D) return;
+    if (editor3DFreeCamera)
+        return inputCaptureRead(()=> editor3DFreeCameraUpdate(seconds));
+    if (editor3DIsOpen)
+        return inputCaptureRead(()=> editor3DWithView(()=> editor3DEditorUpdate(seconds)));
+
+    // playing in an editing session, Escape, the debug key, goes back to the editor; taken, so the debug overlay
+    // waits till the session ends; a captured mouse the browser let go of is Escape too, Chrome keeps that key
+    const lostLock = editor3DLostLock(pointerLockIsActive());
+    if (editor3DSession && (lostLock || debugKey && keyWasPressed(debugKey)))
+    {
+        debugKey && inputClearKey(debugKey);
+        editor3DSetOpen(true);
+        return;
+    }
+    editor3DFreeCameraKey();
+}
+
+function editor3DRender()
+{
+    if (headlessMode) return;
+    editor3DPanelUpdate();
+    if (editor3DFreeCamera)
+        drawTextScreen('Free camera · C or Esc to leave', vec2(mainCanvasSize.x / 2, mainCanvasSize.y - 30), 20, WHITE,
+            4, BLACK);
+    editor3DIsOpen && editor3DDrawLabels();
+}
+
+debug && engineAddPlugin(editor3DUpdate, editor3DRender);
+debug && debugOverlayKeys.push(()=> render3D && {text: 'C: Free Camera', on: editor3DFreeCamera});
+