littlejsengine 1.25.0 → 1.26.0

package/plugins/render3d.js

@@ -6,8 +6,9 @@
  * - The 3D scene draws under the 2D sprites, so HUD and text land on top
  * - Lighting is the sun plus ambient, with optional extra lights, fog and shadows
  * - Any object or draw can bring its own Shader, a mainImage snippet the lighting then applies to
- * - Build shapes with buildBox, buildSphere, buildGrid and buildLathe; the other builders, terrain, particles,
- *   camera controls and the OBJ loader are in the Render3D Extras plugin, which goes after this one
+ * - Meshes and the basic builders are in render3dMesh.js, EngineObject3D, instancing and lights in
+ *   render3dObject.js, both right after this one; the other builders, terrain, particles, camera controls and the
+ *   OBJ loader are in the Render3D Extras plugin, which goes after those
  * - Requires the Math3D plugin
  * @namespace Render3D
  */
@@ -99,13 +100,14 @@ function render3DCanDraw()
  *  @property {number} reflectivity
  *  @property {TextureInfo|undefined} emissiveMap
  *  @property {Color} emissiveMapColor
+ *  @property {CubeMap|undefined} environmentMap
  *  @property {number} emissiveR
  *  @property {number} emissiveG
  *  @property {number} emissiveB
  *  @memberof Render3D */
 const RENDER3D_STATE_FIELDS = ['blend', 'additive', 'depthTest', 'depthWrite', 'cullBackFaces', 'mirrored', 'lighting',
     'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader', 'normalMap', 'normalScale', 'shininess',
-    'reflectivity', 'emissiveMap', 'emissiveMapColor'];
+    'reflectivity', 'emissiveMap', 'emissiveMapColor', 'environmentMap'];
 
 // a copy of the draw state in one fixed shape, the fields of RENDER3D_STATE_FIELDS written out, and the version
 // it was taken at
@@ -117,7 +119,7 @@ function render3DCaptureBatchState()
         receiveShadow: d.receiveShadow, specular: d.specular, pixelated: d.pixelated, shader: d.shader,
         normalMap: d.normalMap, normalScale: d.normalScale, shininess: d.shininess, reflectivity: d.reflectivity,
         emissiveMap: d.emissiveMap, emissiveMapColor: (d.emissiveMapColor || WHITE).copy(), // the caller may change it
-        version: r.stateVersion};
+        environmentMap: d.environmentMap, version: r.stateVersion};
 }
 
 // put a captured draw state back, written out the same way; the transparent stage does this for every queued draw
@@ -128,7 +130,8 @@ function render3DApplyBatchState(s)
     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.normalMap = s.normalMap, r.normalScale = s.normalScale, r.shininess = s.shininess,
-    r.reflectivity = s.reflectivity, r.emissiveMap = s.emissiveMap, r.emissiveMapColor = s.emissiveMapColor;
+    r.reflectivity = s.reflectivity, r.emissiveMap = s.emissiveMap, r.emissiveMapColor = s.emissiveMapColor,
+    r.environmentMap = s.environmentMap;
 }
 
 // true when the current draw state differs from a captured one, so a pending batch must flush first; it runs for
@@ -144,7 +147,7 @@ function render3DStateChanged(s)
         || d.specular !== s.specular || d.pixelated !== s.pixelated || d.shader !== s.shader
         || d.normalMap !== s.normalMap || d.normalScale !== s.normalScale || d.shininess !== s.shininess
         || d.reflectivity !== s.reflectivity || d.emissiveMap !== s.emissiveMap
-        || d.emissiveR !== c.r || d.emissiveG !== c.g || d.emissiveB !== c.b)
+        || d.environmentMap !== s.environmentMap || d.emissiveR !== c.r || d.emissiveG !== c.g || d.emissiveB !== c.b)
         return true;
     s.version = r.stateVersion; // set and set back to what it was: the batch goes on, checking the version again
     return false;
@@ -174,7 +177,8 @@ function render3DWithState(fields, fn)
 }
 
 // which side of the 2D scene an object draws on, its own flag or the plugin default
-function render3DIsAfter2D(o) { return !!(o.renderAfter2D ?? render3D.renderAfter2D); }
+function render3DIsAfter2D(o)
+{ return !!((o.drawOwner ? render3DSetting(o, 'renderAfter2D') : o.renderAfter2D) ?? render3D.renderAfter2D); }
 
 // a size given as a number or a vec3
 /** @param {Vector3|number} size
@@ -250,29 +254,33 @@ function render3DQuadAxes(center, right, up)
 function render3DSetObjectState(o)
 {
     const r = render3D;
-    const emissive = o?.emissive || 0;
+    const transparent = o?.transparent;
+    const p = o?.drawOwner ? render3DPartSettings(o) : o; // a part draws with its owner's settings
+    const emissive = p?.emissive || 0;
     ASSERT(isNumber(emissive) && emissive >= 0, 'emissive must be a number, 0 or more', emissive);
     r.lighting = true;
     r.emissive = emissive;
-    r.additive = !!o?.additive;
-    r.specular = o?.specular || 0;
-    const shininess = o?.shininess ?? 16, reflectivity = o?.reflectivity || 0;
+    r.additive = !!p?.additive;
+    r.specular = p?.specular || 0;
+    const shininess = p?.shininess ?? 16, reflectivity = p?.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.normalMap = p?.normalMap || undefined;
+    r.normalScale = p?.normalScale ?? 1;
+    r.emissiveMap = p?.emissiveMap || undefined;
+    r.emissiveMapColor = p?.emissiveMapColor || WHITE;
+    ASSERT(!p?.environment || p.environment instanceof CubeMap, 'environment must be a CubeMap');
+    r.environmentMap = p?.environment || undefined;
+    r.receiveShadow = !p || p.receiveShadow;
     r.cullBackFaces = r.mirrored = false; // each mesh sets these as it draws
-    r.pixelated = !!o?.pixelated;
-    ASSERT(!o?.shader || o.shader instanceof Shader, 'shader must be a Shader, not the snippet itself');
-    r.shader = o?.shader || undefined; // null is no shader too, so it batches with none
+    r.pixelated = !!p?.pixelated;
+    ASSERT(!p?.shader || p.shader instanceof Shader, 'shader must be a Shader, not the snippet itself');
+    r.shader = p?.shader || undefined; // null is no shader too, so it batches with none
     r.depthTest = true;
     if (r.shadowPass)
-        r.blend = !!o?.transparent; // the depth shader cuts a see through caster by the alpha it would blend with
+        r.blend = !!transparent; // the depth shader cuts a see through caster by the alpha it would blend with
 }
 
 // draw objects each with the draw state set from its own flags, then reset to the defaults
@@ -510,7 +518,8 @@ class Render3DPlugin
         this.drawState = {blend: false, additive: false, depthTest: true, depthWrite: true, cullBackFaces: false,
             mirrored: false, lighting: true, emissive: 0, receiveShadow: true, specular: 0, pixelated: false,
             shader: undefined, normalMap: undefined, normalScale: 1, shininess: 16, reflectivity: 0,
-            emissiveMap: undefined, emissiveMapColor: WHITE, emissiveR: 1, emissiveG: 1, emissiveB: 1};
+            emissiveMap: undefined, emissiveMapColor: WHITE, environmentMap: undefined, emissiveR: 1, emissiveG: 1,
+            emissiveB: 1};
         /** @property {number} - Goes up when a draw state field changes, so a batch sees at a glance that none did */
         this.stateVersion = 0;
         ASSERT(Object.keys(render3DCaptureBatchState()).join() === [...RENDER3D_STATE_FIELDS, 'version'].join(),
@@ -591,6 +600,18 @@ class Render3DPlugin
         /** @property {Mesh|undefined} - Sky dome from buildSky or setSky, drawn around the camera behind everything
          *  @type {Mesh|undefined} */
         this.sky = undefined;
+        /** @property {CubeMap|undefined} - A cube map drawn as the sky, behind everything, in place of the sky dome;
+         *  an orthographic camera looks the same way through every pixel, so it sees one color of it; fog fades to
+         *  fogColor, not to the sky box, so with fog set fogColor to its horizon's color
+         *  @type {CubeMap|undefined} */
+        this.skyBox = undefined;
+        /** @property {CubeMap|undefined} - The world around, what reflective surfaces reflect: an object's
+         *  reflectivity says how much and its shininess how sharp, the same shininess that tightens its highlight:
+         *  10000 a mirror, 1000 polished, 10 a wide blur; undefined reflects the sky's colors as setSky gave them; a cube map holds GPU
+         *  memory until its dispose(), so one made again and again, as for a sky that changes, disposes the one it
+         *  replaces, or a captured one is captured into again
+         *  @type {CubeMap|undefined} */
+        this.environment = undefined;
         /** @property {boolean} - Draw the 3D scene on top of the 2D scene instead of under it */
         this.renderAfter2D = false;
         /** @property {boolean} - Draw see through things far to near so they blend correctly */
@@ -660,6 +681,19 @@ class Render3DPlugin
         this.shadowShader = undefined;
         /** @type {WebGLVertexArrayObject|undefined} */
         this.vao = undefined;
+        /** @type {Set<CubeMap>} */
+        this.cubeCaptures = new Set;  // the cube maps capture asked to draw in the next pass
+        /** @type {CubeMap|undefined} */
+        this.capturingCube = undefined; // the cube map being drawn, which nothing may read meanwhile
+        /** @type {WebGLFramebuffer|undefined} */
+        this.captureFramebuffer = undefined;
+        /** @type {WebGLRenderbuffer|undefined} */
+        this.captureDepth = undefined;
+        this.captureDepthSize = 0;
+        /** @type {WebGLProgram|undefined} */
+        this.skyBoxProgram = undefined; // draws the sky box, made on its first draw
+        /** @type {WebGLVertexArrayObject|undefined} */
+        this.skyBoxVao = undefined;  // an empty one, its triangle comes from gl_VertexID
         /** @type {WebGLTexture|undefined} */
         this.whiteTexture = undefined; // 1x1 white for untextured draws
         /** @type {Map<number, WebGLSampler>} */
@@ -679,7 +713,8 @@ class Render3DPlugin
         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 {WeakMap<WebGLProgram, Object<string, WebGLUniformLocation|null>>} */
+        this.uniforms = new WeakMap; // uniform locations by program, weak so a freed one goes with it
         /** @type {Object<string, Array<number>>} */
         this.uniformValues = {};     // last values sent for the cached vec4 uniforms
         this.shadowMapDrawn = false; // the shadow map is drawn by the first pass of the frame
@@ -793,6 +828,12 @@ class Render3DPlugin
     get emissiveMap() { return this.drawState.emissiveMap; }
     set emissiveMap(v) { const d = this.drawState; d.emissiveMap === v || (d.emissiveMap = v, ++this.stateVersion); }
 
+    /** The cube map the next draws reflect in place of render3D.environment, set from each object's environment
+     *  @return {CubeMap|undefined} */
+    get environmentMap() { return this.drawState.environmentMap; }
+    set environmentMap(v)
+    { const d = this.drawState; d.environmentMap === v || (d.environmentMap = v, ++this.stateVersion); }
+
     /** Multiplies the emissive map, set from each object's emissiveMapColor; compared by its rgb, so a Color
      *  changed in place is seen when it is set again, and undefined is white
      *  @return {Color} */
@@ -958,8 +999,8 @@ class Render3DPlugin
         if (range)
         {
             const distance = offset.length();
-            if (distance > range)
-                return; // out of range
+            if (distance >= range)
+                return; // out of range, at it too, where the fade is silent
             const taperRange = range * sound.taper;
             if (distance > taperRange)
                 volume *= percent(distance, range, taperRange);
@@ -1138,14 +1179,15 @@ class Render3DPlugin
     {
         const opaque = [], transparent = [];
         for (const o of objects)
-            (o.transparent || o.additive ? transparent : opaque).push(o);
+            (o.transparent || render3DSetting(o, 'additive') ? transparent : opaque).push(o);
 
-        isDefault && this.sky && this.drawSky();
+        isDefault && (this.skyBox && this.skyBox !== this.capturingCube || this.sky) && this.drawSky();
 
         // opaque: no blending, depth writes on, by render order
         this.blend = false;
         this.depthWrite = true;
-        const byOrder = (a, b)=> a.renderOrder - b.renderOrder;
+        const byOrder = (a, b)=> (a.drawOwner ? render3DSetting(a, 'renderOrder') : a.renderOrder) -
+            (b.drawOwner ? render3DSetting(b, 'renderOrder') : b.renderOrder);
         opaque.sort(byOrder);
         transparent.sort(byOrder);
         render3DDrawObjects(opaque);
@@ -1171,7 +1213,7 @@ class Render3DPlugin
             isDefault && this.onRenderTransparent?.();
         }
         finally { this.flushTransparentQueue(); }
-        isDefault && render3DRenderDebug();
+        isDefault && !this.capturingCube && render3DRenderDebug();
         this.flush();
 
         // leave the fields at the opaque defaults for anything reading them outside the pass
@@ -1217,10 +1259,14 @@ class Render3DPlugin
         finally { render3DApplyBatchState(state); }
     }
 
-    /** Draw render3D.sky around the camera, unlit, unfogged and behind everything, called automatically by the pass */
+    /** Draw render3D.skyBox, or render3D.sky around the camera, unlit, unfogged and behind everything, called
+     *  automatically by the pass */
     drawSky()
     {
         this.flush();
+        if (this.skyBox && this.skyBox !== this.capturingCube && render3DDrawSkyBox(this.skyBox))
+            return; // a plain return, so the method is typed void and a subclass may override it so
+        if (!this.sky) return; // a sky box that could not draw, with no dome to draw instead
         // the dome only has to sit between the clip planes, the pass draws it first with no depth test;
         // a far plane at Infinity has no midpoint, so put it a long way out instead
         const {near, far} = this.camera;
@@ -1570,7 +1616,8 @@ class Camera3D
         this.far = 1e3;
         /** @property {number} - Visible height in world units for an orthographic view, 0 is perspective */
         this.orthographic = 0;
-        /** @property {boolean} - Line the 3D camera up with the 2D camera, so 3D things at z=0 sit on the 2D sprites */
+        /** @property {boolean} - Line the 3D camera up with the 2D camera, so 3D things at z=0 sit on the 2D sprites;
+         *  it lines up with the 2D view of the main canvas, whatever canvas size a screenToRay is given */
         this.align2D = false;
     }
 
@@ -1712,6 +1759,9 @@ function render3DFragmentSource(fragmentCode)
         'uniform vec3 cameraPos;' +
         'uniform vec4 materialParams,emissiveTint,skyTop,skyHorizon,skyBottom,gelAxes;' +
         'uniform sampler2D tex,normalTex,emissiveTex,gelTex;' +
+        'uniform samplerCube envMap;' + // the environment, when envParams.x is 1, envParams.y its last mipmap, z the
+        // level a shininess of -1 would read, log2(size * .45), and w the level a turn of one radian a pixel reads
+        'uniform vec4 envParams;' +
         '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;' +
@@ -1745,11 +1795,11 @@ function render3DFragmentSource(fragmentCode)
         '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' : '') +
+        // a snippet's mainImage is declared here and written after main, so a define in it can not reach main
+        (fragmentCode ? 'void mainImage(out vec4,vec2);' : '') +
         'void main(){' +
         (fragmentCode ? 'vec4 t;mainImage(t,T);' : 'vec4 t=texture(tex,T);') +
         'if(premultipliedTexture&&t.a>0.)t.rgb/=t.a;' + // back to straight color, what the lighting and blend expect
-        'if(shadowParams.w>0.&&t.a<.5)discard;' + // an opaque draw drops see through texels, as the shadow map does
         'vec4 c=C*t;' +
         'float e=lightDir.w;' +
         'if(e<1.){' +
@@ -1795,7 +1845,12 @@ function render3DFragmentSource(fragmentCode)
         'if(materialParams.z>0.){' +
         'vec3 w=normalize(P-cameraPos),q=reflect(w,n);' +
         'float f=materialParams.z+(1.-materialParams.z)*pow(clamp(1.-dot(n,-w),0.,1.),5.);' +
-        'c.rgb=mix(c.rgb,q.y>0.?mix(skyHorizon.rgb,skyTop.rgb,q.y):mix(skyHorizon.rgb,skyBottom.rgb,-q.y),f);' +
+        // the environment when there is one, blurred more the lower the shininess, a mirror at a shininess of
+        // 10000 and toward its last mipmap at 1, or by how far the reflection turns from one pixel to the next when
+        // that is more, so a small mirror reads the blur of what its pixels cover instead of sparkling
+        'c.rgb=mix(c.rgb,envParams.x>0.?textureLod(envMap,q,clamp(max(envParams.z-.5*log2(materialParams.y+2.),' +
+        'envParams.w+log2(max(max(length(dFdx(q)),length(dFdy(q))),1e-9))),0.,envParams.y)).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;' +
@@ -1803,14 +1858,19 @@ function render3DFragmentSource(fragmentCode)
         'float z=distance(cameraPos,P);' +
         'c.rgb=mix(c.rgb,shadowParams.w<0.?vec3(0):fogColor.rgb,smoothstep(fogColor.a,ambientFog.a,z));' +
         '}' +
-        'o=vec4(c.rgb,shadowParams.w>0.?1.:c.a);' + // an opaque draw stays opaque whatever the tint alpha says
-        '}';
+        // an opaque draw drops see through texels, as the shadow map does, at the end, after the normal map's
+        // derivatives and the texture samples, which need the pixels around them, and stays opaque otherwise
+        'if(shadowParams.w>0.&&t.a<.5)discard;' +
+        'o=vec4(c.rgb,shadowParams.w>0.?1.:c.a);' +
+        '}' +
+        (fragmentCode ? '\n' + RENDER3D_SNIPPET_NAMES + fragmentCode + '\n' : '');
 }
 
 // a Shader's 3D program, compiled the first time a draw needs it
 function render3DShaderProgram(shader)
 {
     ASSERT(shader instanceof Shader, 'render3D.shader must be a Shader, not the snippet itself');
+    shader.program3D || glShaderTrack(shader); // one let go of and drawn again is kept for a lost context again
     const program = shader.program3D ||= glCreateProgram(RENDER3D_VERTEX_SOURCE, render3DFragmentSource(shader.fragmentCode));
     return glFailedPrograms.has(program) ? render3D.program : program; // one that did not build draws as with none
 }
@@ -1829,6 +1889,7 @@ function render3DUseProgram(program)
     gl.uniform1i(render3DUniform('normalTex'), 2);
     gl.uniform1i(render3DUniform('emissiveTex'), 3);
     gl.uniform1i(render3DUniform('gelTex'), 4);
+    gl.uniform1i(render3DUniform('envMap'), 5);
     gl.uniform4fv(render3DUniform('gelAxes'), r.gelAxes);
     const c = r.camera.pos;
     gl.uniform3f(render3DUniform('cameraPos'), c.x, c.y, c.z);
@@ -1842,7 +1903,8 @@ function render3DUseProgram(program)
     if (program !== r.program)
     {
         gl.uniform1f(render3DUniform('iTime'), time);
-        gl.uniform3f(render3DUniform('iResolution'), glCanvas.width, glCanvas.height, 1);
+        const face = r.capturingCube?.size; // in a capture the face is the screen
+        gl.uniform3f(render3DUniform('iResolution'), face || glCanvas.width, face || glCanvas.height, 1);
     }
 }
 
@@ -1851,12 +1913,14 @@ function render3DInitGL()
     if (headlessMode) return;
     if (!glEnable || !glContext)
     {
-        console.warn('Render3DPlugin: WebGL not enabled, construct the plugin in gameInit with glEnable set');
+        // a device whose WebGL could not draw, which fell back to Canvas2D, is not helped by setting glEnable
+        console.warn(!glDeviceFailed ? 'Render3DPlugin: WebGL not enabled, construct the plugin in gameInit with glEnable set'
+            : 'Render3DPlugin: this device can not draw WebGL, so nothing 3D is drawn');
         return;
     }
     const gl = glContext, r = render3D;
     glFlush(); // a pending 2D batch draws now, while the engine's own buffer, vertex array and program are bound
-    r.uniforms = new Map;
+    r.uniforms = new WeakMap;
     r.uniformValues = {};
     render3DShadowCut = undefined; // the shadow shader is new too
     r.attribValues = []; // a fresh context has its own attribute defaults, so nothing sent before it counts
@@ -1883,6 +1947,15 @@ function render3DInitGL()
         'void main(){if(texture(tex,T).a*mix(1.,A,cut)<.5)discard;}'
     );
 
+    // a program that did not build in a release build would fail every draw: 3D stays off, said once, since the pass
+    // returns when there is no program, and a lost context that comes back tries again
+    if (glFailedPrograms.has(r.program) || glFailedPrograms.has(r.shadowShader))
+    {
+        console.error('Render3DPlugin: its shaders did not build on this device, so nothing 3D is drawn');
+        r.program = r.shadowShader = undefined;
+        return;
+    }
+
     // the vertex array object with the attributes enabled once, pointers are set per buffer by render3DBindVertexBuffer
     // the per instance attributes get their divisor only while a batch has them on, see render3DDrawInstanced
     r.vao = gl.createVertexArray();
@@ -1910,10 +1983,346 @@ function render3DInitGL()
     glSetInstancedMode(true);
 }
 
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * CubeMap - Six square images all around a point, the world far away: what reflective surfaces reflect as
+ * render3D.environment, and the sky as render3D.skyBox
+ * - makeCubeMap paints one from a function of direction, loadCubeMap loads six images
+ * - Made with no faces it is drawn from the scene: capture(pos3D) draws everything around that point into it in the
+ *   next frame's 3D pass, six views of the whole scene, so capture once for a still scene or now and then for one
+ *   that moves
+ * - Its faces are in WebGL's order and lay out, +x, -x, +y, -y, +z, -z: WebGL's cube is left handed, so in this right
+ *   handed world a face seen from the middle is mirrored; loadCubeMap turns a sky box set's images to it
+ * @memberof Render3D
+ * @example
+ * render3D.environment = render3D.skyBox = makeCubeMap(64, (d)=> hsl(.6, .8, .4 + d.y * .4));
+ * @example
+ * // a chrome ball that reflects the scene around it, captured once
+ * const ball = new EngineObject3D(vec3(0, 1, 0), render3D.sphereMesh, undefined, BLACK);
+ * ball.reflectivity = 1;
+ * ball.shininess = 1e4;
+ * render3D.environment = new CubeMap(128);
+ * render3D.environment.capture(ball.pos3D);
+ */
+class CubeMap
+{
+    /** Make a cube map from its six faces, as makeCubeMap and loadCubeMap do, or with none to capture the scene into
+     *  @param {number} size - Pixels a side of each face
+     *  @param {Array<Uint8Array|HTMLImageElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas>} [faces] - +x, -x,
+     *  +y, -y, +z and -z, RGBA pixels row by row or images; none for a cube map drawn by capture */
+    constructor(size, faces)
+    {
+        ASSERT(isNumber(size) && size >= 1 && size % 1 === 0, 'a cube map\'s size must be a whole positive number', size);
+        ASSERT(faces === undefined || isArray(faces) && faces.length === 6, 'a cube map has six faces');
+        ASSERT(!faces || faces.every((face)=> face instanceof Uint8Array ? face.length === size * size * 4 :
+            face.width === size && face.height === size), 'each face of a cube map is size by size, RGBA or an image');
+        /** @property {number} - Pixels a side of each face */
+        this.size = size;
+        /** @property {Array<Uint8Array|HTMLImageElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas>|undefined} -
+         *  Its faces, kept to upload again after a lost context, undefined for one drawn by capture
+         *  @type {Array<Uint8Array|HTMLImageElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas>|undefined} */
+        this.faces = faces;
+        /** @property {Vector3|undefined} - Where it was last captured from, and is captured from again after a lost
+         *  context
+         *  @type {Vector3|undefined} */
+        this.capturePos = undefined;
+        /** @type {WebGLTexture|undefined} */
+        this.glTexture = undefined; // made by the first pass that uses it
+        this.contextGeneration = -1;
+    }
+
+    /** Draw the scene around a point into a cube map made with no faces, in the next frame's 3D pass
+     *  - Every object of the layer render3D.renderAfter2D picks is drawn, with the sky and the render callbacks; the
+     *    camera's near and far planes, the lights and the fog are the scene's
+     *  - It is six more draws of the scene, so capture once for a still scene, or every few frames for a moving one
+     *  - A closed mesh around the point, like the ball that reflects it, is not seen from inside, so it hides nothing
+     *  - While it is drawn, what would reflect it reflects the sky's colors in its place
+     *  - It is seen from one point, so it suits what is near that point best, give each mirror its own with
+     *    obj.environment
+     *  @param {Vector3} pos3D - The point it is seen from */
+    capture(pos3D)
+    {
+        ASSERT(!this.faces, 'only a cube map made with no faces can capture the scene');
+        ASSERT(isVector3(pos3D), 'capture needs a Vector3');
+        this.capturePos = pos3D.copy();
+        render3D.cubeCaptures.add(this);
+    }
+
+    /** Free its texture, which is made again if it is used after */
+    dispose()
+    {
+        this.glTexture && glContext?.deleteTexture(this.glTexture);
+        this.glTexture = undefined;
+        render3D?.cubeCaptures.delete(this);
+    }
+}
+
+/** Make a cube map by asking a function the color of each direction
+ *  - The function gets a unit Vector3 for each pixel of each face and gives a Color
+ *  - It runs size * size * 6 times, so a size of 64 or 128 makes one at once, larger takes a moment
+ *  @param {number} size - Pixels a side of each face
+ *  @param {function(Vector3): Color} colorOf - The color seen looking that way
+ *  @return {CubeMap}
+ *  @example
+ *  // a sky, blue above and pale at the horizon, with a sun
+ *  const sun = vec3(1, 1, -1).normalize();
+ *  render3D.environment = makeCubeMap(64, (d)=> hsl(.6, .7, .9 - max(d.y, 0) * .5).lerp(WHITE, max(0, d.dot(sun)) ** 64));
+ *  @memberof Render3D */
+function makeCubeMap(size, colorOf)
+{
+    ASSERT(isNumber(size) && size >= 1 && size % 1 === 0, 'makeCubeMap needs a whole size', size);
+    ASSERT(typeof colorOf === 'function', 'makeCubeMap needs a function of direction');
+    const faces = [];
+    for (let face = 0; face < 6; ++face)
+    {
+        const data = new Uint8Array(size * size * 4);
+        for (let y = 0; y < size; ++y)
+        for (let x = 0; x < size; ++x)
+        {
+            const color = colorOf(render3DCubeDirection(face, (x + .5) / size * 2 - 1, (y + .5) / size * 2 - 1));
+            const i = (x + y * size) * 4;
+            data[i]   = clamp(color.r) * 255 + .5 | 0;
+            data[i+1] = clamp(color.g) * 255 + .5 | 0;
+            data[i+2] = clamp(color.b) * 255 + .5 | 0;
+            data[i+3] = clamp(color.a) * 255 + .5 | 0;
+        }
+        faces.push(data);
+    }
+    return new CubeMap(size, faces);
+}
+
+/** Load a cube map from six square images of one size
+ *  - The images are a sky box set as three.js's CubeTextureLoader takes them, and show the same: each face seen from
+ *    inside as its image is drawn
+ *  @param {Array<string>} sources - The images of +x, -x, +y, -y, +z and -z, as a sky box set names them right,
+ *  left, top, bottom, front and back
+ *  @return {Promise<CubeMap>}
+ *  @memberof Render3D */
+async function loadCubeMap(sources)
+{
+    ASSERT(isArray(sources) && sources.length === 6, 'loadCubeMap takes six images, +x, -x, +y, -y, +z and -z');
+    const images = await Promise.all(sources.map((src)=> new Promise((resolve, reject)=>
+    {
+        const image = new Image;
+        image.crossOrigin = 'anonymous';
+        image.onload = ()=> resolve(image);
+        image.onerror = ()=> reject(new Error('loadCubeMap could not load ' + src));
+        image.src = src;
+    })));
+    const size = images[0].width;
+    if (!images.every((image)=> image.width === size && image.height === size))
+        throw new Error('loadCubeMap needs six square images of one size');
+    // a sky box set is drawn for WebGL's cube, which is left handed: in this right handed world each face would show
+    // mirrored, so as three.js does each is drawn mirrored, and +x and -x trade places, and every face is then seen
+    // from inside as its image shows
+    const faces = [1, 0, 2, 3, 4, 5].map((i)=>
+    {
+        const context = createCanvasContext(size);
+        context.scale(-1, 1);
+        context.drawImage(images[i], -size, 0);
+        return context.canvas;
+    });
+    return new CubeMap(size, faces);
+}
+
+// the direction of a point on a cube map's face, s and t from -1 to 1 across and down the face as WebGL lays it out
+function render3DCubeDirection(face, s, t)
+{
+    const d = face === 0 ? vec3(1, -t, -s) : face === 1 ? vec3(-1, -t, s) : face === 2 ? vec3(s, 1, t) :
+        face === 3 ? vec3(s, -1, -t) : face === 4 ? vec3(s, -t, 1) : vec3(-s, -t, -1);
+    return d.normalize();
+}
+
+// a cube map's texture, uploaded with its mipmaps the first time and again after a lost context, bound to the
+// cube map target of the active unit; undefined with no cube map or no WebGL
+function render3DCubeTexture(cube)
+{
+    const gl = glContext;
+    if (!cube || !gl) return;
+    if (cube.glTexture && cube.contextGeneration === render3D.contextGeneration)
+        return cube.glTexture;
+    const texture = cube.glTexture = gl.createTexture();
+    cube.contextGeneration = render3D.contextGeneration;
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // a face's first row is its top, as the cube's faces are laid out
+    if (!cube.faces)
+    {
+        // drawn by a capture: empty faces, black until the capture, which happens again when the context was lost;
+        // a size the device can not make falls back to the largest it can, as the shadow map's does
+        cube.size = min(cube.size, gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE),
+            gl.getParameter(gl.MAX_RENDERBUFFER_SIZE));
+        for (let i = 0; i < 6; ++i)
+            gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, cube.size, cube.size, 0, gl.RGBA,
+                gl.UNSIGNED_BYTE, null);
+        cube.capturePos && render3D.cubeCaptures.add(cube);
+    }
+    else cube.faces.forEach((face, i)=> face instanceof Uint8Array ?
+        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, cube.size, cube.size, 0, gl.RGBA,
+            gl.UNSIGNED_BYTE, face) :
+        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, face));
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.generateMipmap(gl.TEXTURE_CUBE_MAP); // the blur of a rough surface's reflection
+    return texture;
+}
+
+// the transform of a camera at pos looking out through a cube map face, 90 degrees across: right, up and forward are
+// the face's directions toward its right edge, toward its last row and through its middle, from the same table
+// render3DCubeDirection reads, so a captured face lays out as an uploaded one; up is down the face, as a
+// framebuffer's rows go up
+function render3DCubeFaceMatrix(face, pos)
+{
+    const [right, up, forward] = [
+        [vec3(0, 0, -1), vec3(0, -1, 0), vec3(1, 0, 0)],
+        [vec3(0, 0, 1), vec3(0, -1, 0), vec3(-1, 0, 0)],
+        [vec3(1, 0, 0), vec3(0, 0, 1), vec3(0, 1, 0)],
+        [vec3(1, 0, 0), vec3(0, 0, -1), vec3(0, -1, 0)],
+        [vec3(1, 0, 0), vec3(0, -1, 0), vec3(0, 0, 1)],
+        [vec3(-1, 0, 0), vec3(0, -1, 0), vec3(0, 0, -1)]][face];
+    return new Matrix4([right.x, right.y, right.z, 0, up.x, up.y, up.z, 0,
+        -forward.x, -forward.y, -forward.z, 0, pos.x, pos.y, pos.z, 1]);
+}
+
+// draw the cube maps asked for by capture, each face a view of the layer's objects from its point, with the sky and
+// the render callbacks, into a framebuffer of its own; the camera, the matrices and the frame's viewport are put
+// back after, and the environment unit is bound again, since a texture can not be read while it is drawn
+function render3DCaptureCubes(objects)
+{
+    const gl = glContext, r = render3D, camera = r.camera;
+    const captures = [...r.cubeCaptures];
+    r.cubeCaptures.clear();
+    if (!r.captureFramebuffer)
+    {
+        r.captureFramebuffer = gl.createFramebuffer();
+        r.captureDepth = gl.createRenderbuffer();
+        r.captureDepthSize = 0;
+    }
+    // a camera looking out through each face in turn, its matrix the face's
+    const view = new Camera3D;
+    view.fov = PI / 2;
+    view.near = camera.orthographic || !(camera.near > 0) ? .1 : camera.near; // an orthographic camera's may be behind it
+    view.far = camera.far;
+    let faceMatrix = new Matrix4;
+    view.getMatrix = ()=> faceMatrix.copy();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, r.captureFramebuffer);
+    try
+    {
+        for (const cube of captures)
+        {
+            const texture = render3DCubeTexture(cube), size = cube.size;
+            r.cubeCaptures.delete(cube); // a texture made just now asks again, it is drawn here
+            if (r.captureDepthSize !== size)
+            {
+                gl.bindRenderbuffer(gl.RENDERBUFFER, r.captureDepth);
+                gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT24, size, size);
+                gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, r.captureDepth);
+                r.captureDepthSize = size;
+            }
+            // nothing reads the texture while it is drawn: the environment unit lets it go and the shader reflects
+            // the sky's colors in its place, and it is not drawn as the sky box
+            r.capturingCube = cube;
+            gl.activeTexture(gl.TEXTURE0 + 5);
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+            gl.activeTexture(gl.TEXTURE0);
+            render3DBoundEnvironment = null;
+            gl.viewport(0, 0, size, size);
+            view.pos = cube.capturePos;
+            r.camera = view;
+            for (let face = 0; face < 6; ++face)
+            {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + face,
+                    texture, 0);
+                ASSERT(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE,
+                    'cube map capture framebuffer is incomplete');
+                faceMatrix = render3DCubeFaceMatrix(face, cube.capturePos);
+                r.updateMatrices(1);
+                if (face < 2 || face > 3)
+                {
+                    // a side face's up is world down, as the cube lays its rows out, so sprites and particles, built
+                    // on the camera's right and up, would stand on their heads: half a turn about forward puts them
+                    // on world up, and leaves forward and the sort the same
+                    r.cameraRight = r.cameraRight.scale(-1);
+                    r.cameraUp = r.cameraUp.scale(-1);
+                }
+                const c = canvasClearColor;
+                gl.clearColor(c.r, c.g, c.b, 1);
+                gl.depthMask(true);
+                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                render3DUseProgram(r.program);
+                r.renderStages(objects, true);
+            }
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null, 0);
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+            gl.generateMipmap(gl.TEXTURE_CUBE_MAP); // the blur of a rough surface's reflection
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+        }
+    }
+    finally
+    {
+        r.capturingCube = undefined;
+        r.camera = camera;
+        r.updateMatrices();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, glCanvas.width, glCanvas.height);
+        gl.activeTexture(gl.TEXTURE0 + 5);
+        gl.bindTexture(gl.TEXTURE_CUBE_MAP, render3DCubeTexture(r.environment) || null);
+        gl.activeTexture(gl.TEXTURE0);
+        render3DBoundEnvironment = r.environment || null;
+    }
+}
+
+// draw a cube map as the sky: one triangle over the whole screen, each pixel the cube's color the way it looks,
+// with its own program and an empty vertex array, the pass's state put back after; false when the program did not
+// build, in a release build, so the dome draws in its place
+function render3DDrawSkyBox(cube)
+{
+    const gl = glContext, r = render3D;
+    r.skyBoxProgram ||= glCreateProgram(
+        '#version 300 es\nprecision highp float;out vec2 v;' +
+        'void main(){v=vec2(gl_VertexID&1,gl_VertexID>>1)*4.-1.;gl_Position=vec4(v,0,1);}',
+        '#version 300 es\nprecision highp float;uniform mat4 inverseViewProj;uniform samplerCube sky;in vec2 v;' +
+        'out vec4 o;void main(){vec4 a=inverseViewProj*vec4(v,-1,1),b=inverseViewProj*vec4(v,0,1);' +
+        'o=vec4(texture(sky,b.xyz/b.w-a.xyz/a.w).rgb,1);}'); // the way through this pixel, near plane to beyond
+    if (glFailedPrograms.has(r.skyBoxProgram)) return false;
+    r.skyBoxVao ||= gl.createVertexArray();
+    const depthTest = gl.isEnabled(gl.DEPTH_TEST), blend = gl.isEnabled(gl.BLEND), cull = gl.isEnabled(gl.CULL_FACE);
+    const depthWrite = gl.getParameter(gl.DEPTH_WRITEMASK);
+    gl.useProgram(r.skyBoxProgram);
+    r.currentProgram = undefined; // the next draw picks its program again
+    gl.activeTexture(gl.TEXTURE6);
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, render3DCubeTexture(cube));
+    gl.bindSampler(6, null);
+    gl.uniform1i(glUniformLocation(r.skyBoxProgram, 'sky'), 6);
+    // the view turned but not moved: the way through a pixel does not depend on where the camera is, and two points
+    // near the origin keep their difference, where points a long way out lose it to float precision
+    const turn = r.viewMatrix.copy();
+    turn.m[12] = turn.m[13] = turn.m[14] = 0;
+    gl.uniformMatrix4fv(glUniformLocation(r.skyBoxProgram, 'inverseViewProj'), false,
+        r.projectionMatrix.copy().multiply(turn).invert().m);
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.CULL_FACE);
+    gl.depthMask(false);
+    gl.bindVertexArray(r.skyBoxVao);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindVertexArray(r.vao);
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+    gl.activeTexture(gl.TEXTURE0);
+    depthTest && gl.enable(gl.DEPTH_TEST);
+    blend && gl.enable(gl.BLEND);
+    cull && gl.enable(gl.CULL_FACE);
+    gl.depthMask(depthWrite);
+    return true;
+}
+
 function render3DContextLost()
 {
     const r = render3D;
     r.program = r.currentProgram = r.shadowShader = r.vao = r.streamBuffer = r.whiteTexture = undefined;
+    r.skyBoxProgram = r.skyBoxVao = r.captureFramebuffer = r.captureDepth = undefined;
+    r.captureDepthSize = 0;
     for (const shader of glShaderObjects)
         shader.program3D = undefined; // compiled again by the next draw
     r.lightCount = 0;
@@ -2044,6 +2453,18 @@ function render3DSetMaterialUniforms(state)
     render3DBindMap(3, emissiveMap, state);
     if (state.reflectivity > 0)
     {
+        // the draw's own environment or the scene's, never the cube map a capture is drawing
+        let environment = state.environmentMap || r.environment;
+        environment === r.capturingCube && (environment = undefined);
+        render3DBindEnvironment(environment);
+        // a rough reflection is blurred over half of sqrt(2 / (shininess + 2)), the spread Blinn-Phong and Beckmann
+        // give a shininess, narrower than the Phong highlight the shader draws, and a texel of mipmap
+        // L spans (PI/2) / size * 2^L, so the shader reads level log2(size * .45) - log2(shininess + 2)
+        // / 2: the same blur for any size of map; it stops at 4 by 4 a face, where sampling across the edges still
+        // blends neighboring faces
+        const size = environment ? environment.size : 1;
+        // a turn of one radian a pixel covers size / (PI/2) texels of a face, log2 of that the level that blurs it
+        render3DUniform4f('envParams', environment ? 1 : 0, max(0, log2(size) - 2), log2(size * .45), log2(size * 2 / PI));
         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);
@@ -2053,6 +2474,22 @@ function render3DSetMaterialUniforms(state)
     }
 }
 
+// the cube map bound to the environment unit, 5, so a draw binds only when it changes; null for none, undefined when
+// not known, forgotten at the start and end of each pass and around a capture
+let render3DBoundEnvironment;
+
+// bind a draw's environment to unit 5 when it is not bound already; none leaves the unit as it is, its reflection
+// reads the sky's colors
+function render3DBindEnvironment(cube)
+{
+    const gl = glContext;
+    if (!cube || cube === render3DBoundEnvironment || !gl) return;
+    gl.activeTexture(gl.TEXTURE0 + 5);
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, render3DCubeTexture(cube) || null);
+    gl.activeTexture(gl.TEXTURE0);
+    render3DBoundEnvironment = cube;
+}
+
 // 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 = [];
@@ -2314,6 +2751,8 @@ function render3DRenderPass(after2D)
         }
         // the camera's depth for post processing, from the default layer
         r.depthTexture && isDefault && render3DRenderDepth();
+        // the cube maps asked for by capture, drawn with this frame's shadow map
+        isDefault && r.cubeCaptures.size && render3DCaptureCubes(objects);
         render3DUseProgram(r.program); // after the shadow map, so the light matrix it sends is this frame's
         r.renderStages(objects, isDefault);
     }
@@ -2349,6 +2788,11 @@ function render3DSetMapUnits(texture)
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.bindSampler(unit, null);
     }
+    // the environment cube on unit 5 for the pass, emptied at its end with the others
+    gl.activeTexture(gl.TEXTURE0 + 5);
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture && render3DCubeTexture(render3D.environment) || null);
+    gl.bindSampler(5, null);
+    render3DBoundEnvironment = texture && render3D.environment || null;
     gl.activeTexture(gl.TEXTURE0);
     render3DBoundMaps = [];
 }
@@ -2410,7 +2854,7 @@ function render3DRenderShadowMap()
     {
         // see through objects cast only when textured, their alpha cuts the shadow out
         const casters = render3DLayerObjects(!!r.renderAfter2D).filter(o=>
-            o.castShadow && !o.additive && (!o.transparent || o.tileInfo));
+            render3DSetting(o, 'castShadow') && !render3DSetting(o, 'additive') && (!o.transparent || o.tileInfo));
         render3DDrawObjects(casters);
         r.onRenderOpaque?.();
         r.flush();
@@ -2475,7 +2919,8 @@ function render3DRenderDepth()
     r.shadowPass = r.depthPass = true;
     try
     {
-        const solids = render3DLayerObjects(!!r.renderAfter2D).filter(o=> !o.additive && (!o.transparent || o.tileInfo));
+        const solids = render3DLayerObjects(!!r.renderAfter2D).filter(o=>
+            !render3DSetting(o, 'additive') && (!o.transparent || o.tileInfo));
         render3DDrawObjects(solids);
         r.onRenderOpaque?.();
         r.flush();
@@ -2585,2348 +3030,3 @@ function render3DBillboardCorners(pos, size, angle, upright)
         vec3(pos.x - rx + ux, pos.y - ry + uy, pos.z - rz + uz), vec3(pos.x - rx - ux, pos.y - ry - uy, pos.z - rz - uz),
         vec3(pos.x + rx + ux, pos.y + ry + uy, pos.z + rz + uz), vec3(pos.x + rx - ux, pos.y + ry - uy, pos.z + rz - uz)];
 }
-
-// how many vertices a strip of n points takes with its repeats, and which point vertex k of it is
-function render3DStripCount(n) { return n + 2 + (n & 1); }
-function render3DStripIndex(k, n) { return k < 1 ? 0 : k <= n ? k - 1 : n - 1; }
-
-// walk a strip's vertices with the repeats applied, calling back with (point, normal, uv, color)
-// normals, uvs and colors may be one value for all points, an array per point, or undefined
-function render3DForEachStripVertex(points, normals, uvs, colors, callback)
-{
-    ASSERT(isArray(points) && points.length > 2, 'strip needs at least 3 points');
-    const n = points.length, count = render3DStripCount(n);
-    const normalArray = isArray(normals), uvArray = isArray(uvs), colorArray = isArray(colors);
-    for (let k = 0; k < count; ++k)
-    {
-        const i = render3DStripIndex(k, n);
-        callback(points[i],
-            normalArray ? normals[i] : normals || RENDER3D_DEFAULT_NORMAL,
-            uvArray ? uvs[i] : uvs || RENDER3D_DEFAULT_UV,
-            colorArray ? colors[i] : colors || WHITE);
-    }
-}
-
-// write one vertex into a packed buffer at float index j
-function render3DWriteVertex(floats, ints, j, x, y, z, n, u, v, rgba)
-{
-    floats[j]   = x;   floats[j+1] = y;   floats[j+2] = z;
-    floats[j+3] = n.x; floats[j+4] = n.y; floats[j+5] = n.z;
-    floats[j+6] = u;   floats[j+7] = v;
-    ints[j+8] = rgba;
-}
-
-// turn every triangle of an index list the other way round, in place: the authoring form reads counter clockwise
-// from the front and the pass draws clockwise, as a strip's triangles come out after its leading repeat
-function render3DFlipTriangles(indices)
-{
-    for (let t = 0; t < indices.length; t += 3)
-    {
-        const b = indices[t+1];
-        indices[t+1] = indices[t+2], indices[t+2] = b;
-    }
-    return indices;
-}
-
-// the triangles of a strip of count entries as an index list, given which vertex each entry maps to and which place
-// it is at: the strip's triangle i is (i-2, i-1, i), its odd ones read the other way as the GPU reads a strip, and a
-// triangle with two corners in one place has no area, it is a join between pieces or a sliver at a pole, and is left out
-function render3DStripTriangles(count, remap, place)
-{
-    const indices = [];
-    for (let i = 2; i < count; ++i)
-    {
-        const a = i & 1 ? i - 1 : i - 2, b = i & 1 ? i - 2 : i - 1;
-        if (place[a] != place[b] && place[b] != place[i] && place[a] != place[i])
-            indices.push(remap[a], remap[b], remap[i]);
-    }
-    return indices;
-}
-
-// 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; 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;
-        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;
-}
-
-// reorder a convex polygon's points, counter clockwise from outside, into one triangle strip
-function render3DPolygonStrip(points)
-{
-    const strip = [points[0]];
-    for (let i = 1, j = points.length - 1; i <= j; ++i, --j)
-    {
-        strip.push(points[i]);
-        if (i !== j)
-            strip.push(points[j]);
-    }
-    return strip;
-}
-
-// turn every triangle of a mesh the other way round, the normals left alone: an index list reads each one in the
-// other order, and a strip gets one extra point at each end, which flips every triangle and keeps the count even
-function render3DFlipWinding(mesh)
-{
-    if (mesh.indices)
-        return void render3DFlipTriangles(mesh.indices);
-    for (const key of ['points', 'normals', 'uvs', 'colors'])
-    {
-        const a = mesh[key];
-        if (a.length)
-            a.unshift(a[0]), a.push(a[a.length - 1]);
-    }
-    mesh.vertexKeys = undefined;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-// frees the GPU buffer of a mesh that is garbage collected without dispose, some time after it goes; it holds the
-// buffer and its context, never the mesh, or the mesh could not be collected, and dispose unregisters the mesh
-const render3DMeshBuffers = typeof FinalizationRegistry == 'undefined' ? undefined :
-    new FinalizationRegistry(({buffer, indexBuffer, generation})=>
-    {
-        if (generation !== render3D?.contextGeneration || !glContext) return;
-        glContext.deleteBuffer(buffer);
-        glContext.deleteBuffer(indexBuffer);
-    });
-
-// the points at one place, to a hundred thousandth, which smooth normals are summed by: each point's group, numbered
-// from 0, found by a number made from its place and checked against the place, so no text is made for a point
-function render3DPlaceGroups(points)
-{
-    const groups = new Int32Array(points.length), first = new Map, next = [], places = [];
-    for (let i = 0; i < points.length; ++i)
-    {
-        const p = points[i], x = round(p.x * 1e5), y = round(p.y * 1e5), z = round(p.z * 1e5);
-        const hash = Math.imul(x, 73856093) ^ Math.imul(y, 19349663) ^ Math.imul(z, 83492791);
-        let group = first.get(hash);
-        while (group !== undefined && !(places[group*3] === x && places[group*3+1] === y && places[group*3+2] === z))
-            group = next[group];
-        if (group === undefined)
-        {
-            group = next.length;
-            next.push(first.get(hash));
-            first.set(hash, group);
-            places.push(x, y, z);
-        }
-        groups[i] = group;
-    }
-    return {groups, count: next.length};
-}
-
-// the face normals meeting at each place added up, each weighted by its corner angle so a cube corner averages its
-// three faces evenly however they are cut into triangles; of a strip, every other triangle turned back, with no
-// indices, or of the index list; in numbers, with no vector made for a triangle or a corner
-function render3DSmoothNormalSums(points, indices)
-{
-    const strip = !indices, triangles = strip ? max(points.length - 2, 0) : indices.length / 3 | 0;
-    const {groups, count} = render3DPlaceGroups(points);
-    const sums = new Float64Array(count * 3), touched = new Uint8Array(count);
-    let nx = 0, ny = 0, nz = 0;
-    const addCorner = (a, b, c, group)=>
-    {
-        // the angle at corner a, then the face normal scaled by it added to the sum at a's place
-        const ux = b.x - a.x, uy = b.y - a.y, uz = b.z - a.z, vx = c.x - a.x, vy = c.y - a.y, vz = c.z - a.z;
-        const dot = ux*vx + uy*vy + uz*vz, lengths = (ux**2 + uy**2 + uz**2)**.5 * (vx**2 + vy**2 + vz**2)**.5;
-        const angle = Math.acos(clamp(dot / (lengths || 1), -1, 1)), s = group * 3;
-        sums[s] += nx * angle, sums[s+1] += ny * angle, sums[s+2] += nz * angle;
-        touched[group] = 1;
-    };
-    for (let t = 0; t < triangles; ++t)
-    {
-        const i0 = strip ? t : indices[t*3], i1 = strip ? t + 1 : indices[t*3+1], i2 = strip ? t + 2 : indices[t*3+2];
-        const a = points[i0], b = points[i1], c = points[i2];
-        const ux = b.x - a.x, uy = b.y - a.y, uz = b.z - a.z, vx = c.x - a.x, vy = c.y - a.y, vz = c.z - a.z;
-        const cx = uy*vz - uz*vy, cy = uz*vx - ux*vz, cz = ux*vy - uy*vx;
-        const lengthSquared = cx**2 + cy**2 + cz**2;
-        if (!lengthSquared) continue; // no area, like a triangle joining two strips
-        const k = (strip && !(t & 1) ? -1 : 1) / lengthSquared**.5;
-        nx = cx * k, ny = cy * k, nz = cz * k;
-        addCorner(a, b, c, groups[i0]);
-        addCorner(b, c, a, groups[i1]);
-        addCorner(c, a, b, groups[i2]);
-    }
-    return {groups, sums, touched};
-}
-
-/**
- * Mesh - Triangles with positions, normals, uvs and colors, uploaded once and drawn by matrix
- * - Build with addStrip, addQuad, combine or the shape builders, then render each frame
- * - Its back faces are skipped unless doubleSided is set, which the open builders like buildGrid do for you
- * - Two forms: a triangle strip, what the builders make, or an indexed list of triangles over their own vertices,
- *   what addTriangles and the model loaders make; upload sends the GPU an indexed list either way, see getTriangles,
- *   so a strip's joins between its pieces cost nothing to draw, and toIndexed turns a strip mesh into the list form
- * - The GPU buffer is created lazily on first render and dropped by dispose, or freed once the mesh is garbage
- *   collected, so dispose is only needed to free it right away, like for a mesh rebuilt often
- * @memberof Render3D
- * @example
- * const mesh = buildLathe([[0, -1], [1, 0], [0, 1]], 4); // octahedron
- * mesh.render(buildMatrix(vec3(0, 1, 0)), undefined, RED);
- */
-class Mesh
-{
-    /** Create an empty mesh */
-    constructor()
-    {
-        /** @property {Array<Vector3>} - Vertex positions, in strip order or one per vertex of an indexed mesh
-         *  @type {Array<Vector3>} */
-        this.points = [];
-        /** @property {Array<Vector3>} - Vertex normals
-         *  @type {Array<Vector3>} */
-        this.normals = [];
-        /** @property {Array<Vector2>} - Vertex texture coords, 0-1 across the tile
-         *  @type {Array<Vector2>} */
-        this.uvs = [];
-        /** @property {Array<Color>} - Vertex colors
-         *  @type {Array<Color>} */
-        this.colors = [];
-        /** @property {WebGLBuffer|undefined} - GPU vertex buffer, created by upload
-         *  @type {WebGLBuffer|undefined} */
-        this.buffer = undefined;
-        /** @property {WebGLBuffer|undefined} - GPU index buffer, the triangles, created by upload
-         *  @type {WebGLBuffer|undefined} */
-        this.indexBuffer = undefined;
-        /** @property {number} - Indices in the GPU index buffer, three per triangle */
-        this.bufferCount = 0;
-        this.indexType = 0; // gl.UNSIGNED_SHORT, or UNSIGNED_INT past 65535 vertices
-        /** @property {boolean} - The mesh changed and needs uploading again, set it yourself if you edit the arrays */
-        this.dirty = false;
-        /** @property {boolean|undefined} - Draw every use of this mesh in the opaque stage as one instanced call,
-         *  undefined follows render3D.instancing
-         *  @type {boolean|undefined} */
-        this.instanced = undefined;
-        /** @property {boolean} - Draw both sides, each lit as the side that is seen; off skips the faces pointing away,
-         *  which is faster and right for closed shapes, the open builders like buildGrid and buildRibbon turn it on */
-        this.doubleSided = false;
-        /** @property {boolean} - The values change often but the shape never does, for a water surface or a cloth: set
-         *  once, the mesh keeps its GPU layout and a dirty upload only rewrites the vertices into the buffer it has;
-         *  the strip must keep the same points in the same order, a new point count asserts; the layout is decided by
-         *  the first upload, so strip entries equal then stay one vertex and triangles with no area then stay dropped,
-         *  set vertexKeys or give it distinct values at the start, not a flat grid of one color or points all in one place */
-        this.dynamicDraw = false;
-        /** @property {Array<number>|undefined} - The mesh as an indexed triangle list instead of a strip: the arrays
-         *  hold each vertex once and this says how they join, three vertex numbers per triangle, counter clockwise seen
-         *  from the front like a strip's first triangle; addTriangles and the loaders fill it, toIndexed turns a strip
-         *  mesh into this form
-         *  @type {Array<number>|undefined} */
-        this.indices = undefined;
-        /** @property {Int32Array|undefined} - Which strip entries are one vertex, set by a builder that knows, one
-         *  whole number per entry with equal numbers meaning the same vertex; upload skips its search for them, then
-         *  drops the keys, since an edit after that may tell the entries apart; adding geometry or recomputing normals
-         *  drops them too
-         *  @type {Int32Array|undefined} */
-        this.vertexKeys = undefined;
-        /** @type {{vertices: Array<number>, pointCount: number, data: ArrayBuffer}|undefined} */
-        // the strip index of each GPU vertex, the point count and packed data of the last upload, for a dynamicDraw mesh
-        this.vertexLayout = undefined;
-        this.instanceCount = 0; // draws waiting in this mesh's batch, with their values, texture and draw state
-        /** @type {Float32Array|undefined} */
-        this.instanceData = undefined;
-        /** @property {number} - Bounding sphere radius around the origin, for culling and picking, computed by upload */
-        this.radius = 0;
-        /** @property {{min: Vector3, max: Vector3}|undefined} - Bounding box, for picking, measured with the radius
-         *  @type {{min: Vector3, max: Vector3}|undefined} */
-        this.bounds = undefined;
-        this.contextGeneration = 0; // the context the buffer belongs to, see render3D.contextGeneration
-    }
-
-    /** Number of vertices in the mesh
-     *  @return {number} */
-    get vertexCount() { return this.points.length; }
-
-    /** Add a triangle strip, joined to the previous one by invisible flat triangles so one mesh holds many strips
-     *  - Strip order: the first three points make a triangle, then each point makes another with the two before it
-     *  - List the first three points counter clockwise as seen from the front, or the face points away
-     *    and may vanish when back faces are culled
-     *  @param {Array<Vector3>} points - Strip order
-     *  @param {Vector3|Array<Vector3>} [normals] - One for all or one per point, default up
-     *  @param {Vector2|Array<Vector2>} [uvs] - One for all or one per point, default zero
-     *  @param {Color|Array<Color>} [colors] - One for all or one per point, default white
-     *  @return {Mesh} */
-    addStrip(points, normals, uvs, colors)
-    {
-        if (this.indices)
-        {
-            // an indexed mesh takes the strip as the triangles it makes
-            const part = new Mesh().addStrip(points, normals, uvs, colors).toIndexed();
-            return this.addTriangles(part.points, part.indices, part.normals, part.uvs, part.colors);
-        }
-        render3DForEachStripVertex(points, normals, uvs, colors, (p, n, uv, c)=>
-        {
-            this.points.push(p);
-            this.normals.push(n);
-            this.uvs.push(uv);
-            this.colors.push(c);
-        });
-        this.vertexKeys = undefined; // the new entries have no keys
-        this.dirty = true;
-        return this;
-    }
-
-    /** Add triangles over their own vertices, the indexed form a model file comes in
-     *  - The mesh becomes indexed: a strip mesh is turned into triangles first, and strips added later join as triangles
-     *  - List each triangle counter clockwise as seen from the front, like a strip's first triangle
-     *  @param {Array<Vector3>} points - Each vertex once
-     *  @param {Array<number>} indices - Three vertex numbers per triangle, into points
-     *  @param {Vector3|Array<Vector3>} [normals] - One for all or one per point, default up
-     *  @param {Vector2|Array<Vector2>} [uvs] - One for all or one per point, default zero
-     *  @param {Color|Array<Color>} [colors] - One for all or one per point, default white
-     *  @return {Mesh} */
-    addTriangles(points, indices, normals, uvs, colors)
-    {
-        ASSERT(isArray(points) && isArray(indices) && indices.length % 3 === 0,
-            'addTriangles takes points and three indices per triangle');
-        ASSERT(indices.every(i=> i >= 0 && i < points.length && i % 1 === 0), 'an index points past the vertices given');
-        this.toIndexed();
-        const offset = this.points.length, normalArray = isArray(normals), uvArray = isArray(uvs), colorArray = isArray(colors);
-        for (let i = 0; i < points.length; ++i)
-        {
-            this.points.push(points[i]);
-            this.normals.push(normalArray ? normals[i] : normals || RENDER3D_DEFAULT_NORMAL);
-            this.uvs.push(uvArray ? uvs[i] : uvs || RENDER3D_DEFAULT_UV);
-            this.colors.push(colorArray ? colors[i] : colors || WHITE);
-        }
-        for (const i of indices)
-            this.indices.push(i + offset);
-        this.dirty = true;
-        return this;
-    }
-
-    /** Turn a strip mesh into the indexed form, each distinct vertex once and the real triangles over them, in place
-     *  - An indexed mesh is left as it is; the builders make strips and a loader makes this, and either draws the same
-     *  @return {Mesh} */
-    toIndexed()
-    {
-        if (this.indices) return this;
-        const {vertices, indices} = this.getTriangles();
-        this.points = vertices.map(i=> this.points[i]);
-        this.normals = vertices.map(i=> this.normals[i] || RENDER3D_DEFAULT_NORMAL);
-        this.uvs = vertices.map(i=> this.uvs[i] || RENDER3D_DEFAULT_UV);
-        this.colors = vertices.map(i=> this.colors[i] || WHITE);
-        // the list upload sends reads clockwise, the pass draws it that way; the authoring form is counter clockwise
-        this.indices = render3DFlipTriangles(indices);
-        this.vertexKeys = undefined;
-        this.dirty = true;
-        return this;
-    }
-
-    /** Add a flat quad from four corners in loop order, counter clockwise seen from the front, a is the top left of the texture
-     *  @param {Vector3} a
-     *  @param {Vector3} b
-     *  @param {Vector3} c
-     *  @param {Vector3} d
-     *  @param {Color|Array<Color>} [color] - One for all or one per corner
-     *  @param {Array<Vector2>} [uvs] - One per corner, default across the tile
-     *  @return {Mesh} */
-    addQuad(a, b, c, d, color, uvs)
-    {
-        return this.addStrip(render3DQuadStrip(a, b, c, d), render3DFaceNormal(a, b, c, d),
-            uvs ? render3DQuadValues(uvs) : RENDER3D_QUAD_UVS, render3DQuadValues(color));
-    }
-
-    /** Append another mesh transformed by a matrix, for building one shape out of several
-     *  @param {Mesh} mesh
-     *  @param {Matrix4|Vector3} [matrix] - Transform, or just a position to move it to
-     *  @param {Color} [color] - Multiplies the appended vertex colors
-     *  @return {Mesh} */
-    combine(mesh, matrix=RENDER3D_IDENTITY, color=WHITE)
-    {
-        matrix = render3DMatrix(matrix); // most parts only need moving into place
-        const normalMatrix = render3DNormalMatrix(matrix), mirrors = render3DMirrors(matrix);
-        let part = mesh, order;
-        if (this.indices || mesh.indices)
-        {
-            // one of them is indexed, so both are: the part as a copy if it is a strip
-            this.toIndexed();
-            part = mesh.indices ? mesh : new Mesh().combine(mesh).toIndexed();
-            const offset = this.points.length, indices = part.indices;
-            // the count read once, a mesh combined with itself grows as it is read; a mirror turns every triangle the
-            // other way round
-            for (let t = 0, n = indices.length; t < n; t += 3)
-                this.indices.push(indices[t] + offset, indices[t + (mirrors ? 2 : 1)] + offset,
-                    indices[t + (mirrors ? 1 : 2)] + offset);
-        }
-        else if (mirrors && part.points.length)
-        {
-            // a strip reads the other way round with one more point at each end, as render3DFlipWinding does
-            const last = part.points.length - 1;
-            order = [0, ...part.points.keys(), last];
-        }
-        for (let j = 0, count = order ? order.length : part.points.length; j < count; ++j)
-        {
-            const i = order ? order[j] : j;
-            this.points.push(matrix.transformPoint(part.points[i]));
-            this.normals.push(normalMatrix.transformDirection(part.normals[i] || RENDER3D_DEFAULT_NORMAL).normalize());
-            this.uvs.push((part.uvs[i] || RENDER3D_DEFAULT_UV).copy());
-            this.colors.push((part.colors[i] || WHITE).multiply(color));
-        }
-        this.doubleSided ||= mesh.doubleSided; // an open part leaves the whole mesh open
-        this.vertexKeys = undefined; // the new entries have no keys
-        this.dirty = true;
-        return this;
-    }
-
-    /** Returns a new mesh: this one and its mirror image across the plane through the origin facing axis
-     *  - For modeling half a shape against that plane, a part that crosses it overlaps its image
-     *  @param {Vector3} [axis] - Faces the mirror plane, vec3(1,0,0) mirrors across x
-     *  @return {Mesh} */
-    mirror(axis=vec3(1, 0, 0))
-    {
-        ASSERT(isVector3(axis) && axis.lengthSquared() > 0, 'mirror needs an axis');
-        const n = axis.normalize(), a = -2 * n.x, b = -2 * n.y, c = -2 * n.z;
-        const reflect = new Matrix4([1 + a * n.x, b * n.x, c * n.x, 0, a * n.y, 1 + b * n.y, c * n.y, 0,
-            a * n.z, b * n.z, 1 + c * n.z, 0, 0, 0, 0, 1]);
-        return new Mesh().combine(this).combine(this, reflect); // combine turns the image's faces the right way out
-    }
-
-    /** Returns a new mesh of count copies of this one, each turned further around an axis through the origin
-     *  @param {number} count - Copies, spaced evenly around the whole turn
-     *  @param {Vector3} [axis] - Up by default
-     *  @return {Mesh} */
-    spin(count, axis=vec3(0, 1, 0))
-    {
-        ASSERT(count >= 1 && count % 1 === 0, 'spin count must be a whole number, 1 or more');
-        ASSERT(isVector3(axis) && axis.lengthSquared() > 0, 'spin needs an axis');
-        const mesh = new Mesh, unit = axis.normalize();
-        for (let i = 0; i < count; ++i)
-            mesh.combine(this, render3DAxisRotation(unit, i / count * 2 * PI));
-        return mesh;
-    }
-
-    /** Returns a new mesh of everything in this mesh or the other, see subtract
-     *  @param {Mesh} mesh - Closed, as the builders make them apart from the open ones like buildGrid
-     *  @param {Matrix4|Vector3} [matrix] - Places the other mesh, or just a position to move it to
-     *  @return {Mesh} */
-    union(mesh, matrix) { return render3DMeshCSG(this, mesh, matrix, 0); }
-
-    /** Returns a new mesh of this one with the other cut out of it, CSG with BSP trees
-     *  - Both must be closed, every edge shared by two triangles, as the builders make them apart from the open
-     *    ones like buildGrid and buildRibbon; the result is closed and indexed, and neither mesh changes
-     *  - The faces a cut makes come from the other mesh's surface, turned to face out, with its normals, uvs and
-     *    colors, so a smooth cylinder drills a round hole
-     *  - Parts that overlap must be joined with union to be one solid, not with combine, mirror or spin, which
-     *    leave them overlapping, and CSG then gives a wrong shape
-     *  - Cuts split the triangles near them, so the result has more: a few thousand triangles take tens to a few
-     *    hundred milliseconds, so build shapes this way at load time, not every frame; joining several cutters
-     *    with union and cutting once is quicker than cutting with each in turn
-     *  - Details closer than about 1e-4 are made one, so build a very small part larger and scale it after
-     *  @param {Mesh} mesh - Closed, as the builders make them apart from the open ones like buildGrid
-     *  @param {Matrix4|Vector3} [matrix] - Places the other mesh, or just a position to move it to
-     *  @return {Mesh}
-     *  @example
-     *  const wall = buildBox(vec3(4, 3, .5)).subtract(buildBox(vec3(1, 2, 1)), vec3(0, -.5, 0)); // a doorway */
-    subtract(mesh, matrix) { return render3DMeshCSG(this, mesh, matrix, 1); }
-
-    /** Returns a new mesh of only what is in both this mesh and the other, see subtract
-     *  @param {Mesh} mesh - Closed, as the builders make them apart from the open ones like buildGrid
-     *  @param {Matrix4|Vector3} [matrix] - Places the other mesh, or just a position to move it to
-     *  @return {Mesh} */
-    intersect(mesh, matrix) { return render3DMeshCSG(this, mesh, matrix, 2); }
-
-    /** Scale every uv, so a whole texture repeats across the mesh when its TextureInfo wraps
-     *  @param {Vector2|number} scale - Repeats across and up, a number for both
-     *  @return {Mesh} */
-    scaleUVs(scale)
-    {
-        const s = render3DSize2(scale);
-        // new vectors, builders share uv objects between faces
-        this.uvs = this.uvs.map(uv=> vec2(uv.x * s.x, uv.y * s.y));
-        this.dirty = true;
-        return this;
-    }
-
-    /** Move, turn or scale every vertex in place, normals follow along
-     *  @param {Matrix4|Vector3} matrix - Transform, or just an offset to move by
-     *  @return {Mesh} */
-    transform(matrix)
-    {
-        matrix = render3DMatrix(matrix);
-        const normalMatrix = render3DNormalMatrix(matrix);
-        for (let i = 0; i < this.points.length; ++i)
-        {
-            this.points[i] = matrix.transformPoint(this.points[i]);
-            // a mesh built by hand may have no normals yet, and then there is nothing to turn
-            this.normals[i] &&= normalMatrix.transformDirection(this.normals[i]).normalize();
-        }
-        render3DMirrors(matrix) && render3DFlipWinding(this); // a mirror would leave the faces pointing in
-        this.dirty = true;
-        return this;
-    }
-
-    /** Turn the mesh inside out so it is lit and drawn from within, for rooms and domes
-     *  @return {Mesh} */
-    flipNormals()
-    {
-        render3DFlipWinding(this);
-        this.normals = this.normals.map(n=> n.scale(-1));
-        this.dirty = true;
-        return this;
-    }
-
-    /** Set every vertex color
-     *  @param {Color} color
-     *  @return {Mesh} */
-    setColor(color)
-    {
-        // one per point, not one per color already there, so a mesh built by hand with no
-        // colors gets them instead of quietly staying white
-        this.colors = this.points.map(()=> color);
-        this.dirty = true;
-        return this;
-    }
-
-    /** Measure the axis aligned box around the vertices
-     *  @return {{min: Vector3, max: Vector3}} */
-    getBounds()
-    {
-        if (!this.points.length)
-            return {min: vec3(), max: vec3()};
-        const lo = vec3(Infinity), hi = vec3(-Infinity);
-        for (const p of this.points)
-        {
-            lo.x = min(lo.x, p.x); lo.y = min(lo.y, p.y); lo.z = min(lo.z, p.z);
-            hi.x = max(hi.x, p.x); hi.y = max(hi.y, p.y); hi.z = max(hi.z, p.z);
-        }
-        return {min: lo, max: hi};
-    }
-
-    /** Move the mesh so the center of its bounds is on the origin
-     *  @return {Mesh} */
-    center()
-    {
-        const bounds = this.getBounds();
-        return this.transform(bounds.min.add(bounds.max).scale(-.5));
-    }
-
-    /** Scale the mesh evenly so its largest extent is a size, for loaded models of unknown units
-     *  @param {number} [size]
-     *  @return {Mesh} */
-    fit(size=1)
-    {
-        const bounds = this.getBounds();
-        const extent = bounds.max.subtract(bounds.min);
-        const scale = size / (max(extent.x, extent.y, extent.z) || 1);
-        return this.transform(Matrix4.scaling(vec3(scale)));
-    }
-
-    /** Measure the bounding sphere around the origin into radius, called by upload
-     *  @return {number} */
-    computeRadius()
-    {
-        let r = 0;
-        for (const p of this.points)
-            r = max(r, p.lengthSquared());
-        this.bounds = this.getBounds(); // measured with it, a pick tests a mesh's box after its sphere
-        return this.radius = r ** .5;
-    }
-
-    /** Derive normals from the triangles, of the strip or of the index list
-     *  @param {boolean} [smooth] - Round the lighting across faces instead of giving each face a hard edge; flat
-     *    normals on an indexed mesh give every corner its own vertex
-     *  @return {Mesh} */
-    computeNormals(smooth=false)
-    {
-        if (this.indices)
-        {
-            // the triangles are listed: smooth normals add up around each position, weighted by the corner angle
-            // like the strip's, so vertices split apart at one place smooth back together and a mesh can go flat and
-            // smooth again; flat ones need a vertex per corner, so the vertices are split up first
-            if (smooth)
-            {
-                const {groups, sums, touched} = render3DSmoothNormalSums(this.points, this.indices);
-                this.normals = this.points.map((p, i)=>
-                {
-                    const s = groups[i] * 3, x = sums[s], y = sums[s+1], z = sums[s+2];
-                    const lengthSquared = x**2 + y**2 + z**2, k = 1 / lengthSquared**.5;
-                    return touched[groups[i]] && lengthSquared ? vec3(x * k, y * k, z * k) : RENDER3D_DEFAULT_NORMAL;
-                });
-                this.dirty = true;
-                return this;
-            }
-            const split = (a)=> this.indices.map(i=> a[i]);
-            this.points = split(this.points), this.normals = split(this.normals);
-            this.uvs = split(this.uvs), this.colors = split(this.colors);
-            this.indices = this.indices.map((_, i)=> i);
-            const points = this.points, indices = this.indices;
-            const normals = points.map(()=> RENDER3D_DEFAULT_NORMAL);
-            for (let t = 0; t < indices.length; t += 3)
-            {
-                const a = points[indices[t]], b = points[indices[t+1]], c = points[indices[t+2]];
-                const cross = b.subtract(a).cross(c.subtract(a));
-                if (cross.lengthSquared()) // its own three corners
-                    normals[indices[t]] = normals[indices[t+1]] = normals[indices[t+2]] = cross.normalize();
-            }
-            this.normals = normals;
-            this.dirty = true;
-            return this;
-        }
-
-        // smooth normals are the sums at each place made unit length, or straight up for a place with none
-        const points = this.points, n = points.length;
-        if (smooth)
-        {
-            const {groups, sums, touched} = render3DSmoothNormalSums(points);
-            this.normals = points.map((p, i)=>
-            {
-                const s = groups[i] * 3, x = sums[s], y = sums[s+1], z = sums[s+2], l = (x**2 + y**2 + z**2)**.5;
-                return !touched[groups[i]] ? vec3(0, 1, 0) : l ? vec3(x * (1/l), y * (1/l), z * (1/l)) : vec3();
-            });
-            this.vertexKeys = undefined;
-            this.dirty = true;
-            return this;
-        }
-
-        // the outward normal of each triangle in the strip
-        const faceNormals = [];
-        for (let i = 0; i + 2 < n; ++i)
-        {
-            const a = points[i], b = points[i+1], c = points[i+2];
-            const normal = b.subtract(a).cross(c.subtract(a));
-            // triangles in a strip alternate which way they wind, so every other one is flipped back
-            // a zero normal means a flat triangle joining two strips, so skip it
-            faceNormals.push(normal.lengthSquared() ? normal.normalize(i & 1 ? 1 : -1) : undefined);
-        }
-
-        // then hand those to the vertices: every triangle writes its own three corners, so the only vertices left
-        // with the default are the repeats at the ends of a strip, which no triangle with any area uses
-        const normals = points.map(()=> RENDER3D_DEFAULT_NORMAL);
-        faceNormals.forEach((f, i)=> f && (normals[i] = normals[i+1] = normals[i+2] = f));
-
-        this.normals = normals;
-        this.vertexKeys = undefined; // flat normals tell entries at one place apart
-        this.dirty = true;
-        return this;
-    }
-
-    /** Pack the vertices and create the GPU buffer, called automatically by render
-     *  @return {Mesh} */
-    upload()
-    {
-        // 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)
-        {
-            // the layout of the last upload stands, only the values are written again into the buffer it has,
-            // packed into the same memory each time so a mesh uploaded every frame makes no garbage
-            ASSERT(layout.pointCount === this.points.length,
-                'a dynamicDraw mesh keeps its shape, the same points in the same order; ' +
-                'for a new shape make a new mesh or turn dynamicDraw off', this.points.length);
-            if (layout.pointCount === this.points.length)
-            {
-                gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-                gl.bufferSubData(gl.ARRAY_BUFFER, 0, render3DMeshVertexData(this, layout.vertices, layout.data));
-                gl.bindBuffer(gl.ARRAY_BUFFER, glArrayBuffer);
-                this.dirty = false;
-                return this;
-            }
-        }
-        this.dispose();
-        const {vertices, indices} = this.getTriangles(), count = vertices.length, wide = count > 65535;
-        const data = render3DMeshVertexData(this, vertices);
-        this.vertexLayout = this.dynamicDraw ? {vertices, pointCount: this.points.length, data} : undefined;
-        this.vertexKeys = undefined; // used once: an edit after this may tell entries apart
-        this.buffer = gl.createBuffer();
-        this.indexBuffer = gl.createBuffer();
-        this.bufferCount = indices.length;
-        this.indexType = wide ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
-        this.dirty = false;
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, data, this.dynamicDraw ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, wide ? new Uint32Array(indices) : new Uint16Array(indices), gl.STATIC_DRAW);
-        this.contextGeneration = render3D.contextGeneration;
-        const buffers = {buffer: this.buffer, indexBuffer: this.indexBuffer, generation: this.contextGeneration};
-        render3DMeshBuffers?.register(this, buffers, this);
-        gl.bindBuffer(gl.ARRAY_BUFFER, glArrayBuffer); // the engine's 2D batch writes through this binding
-        return this;
-    }
-
-    /** The mesh as an indexed triangle list, what upload sends to the GPU: the strip's real triangles over its
-     *  distinct vertices, the joins between its pieces dropped and every triangle facing the way it did in the strip
-     *  - Vertices are compared to a millionth, so two at one place with the same normal, uv and color are one
-     *  @return {{vertices: Array<number>, indices: Array<number>}} - vertices are strip indices, one per distinct
-     *    vertex; indices are the triangles, three per triangle, into vertices */
-    getTriangles()
-    {
-        const count = this.points.length, vertices = [];
-        if (this.indices)
-        {
-            // already a list: every vertex as it is, and the triangles read the way the pass draws, clockwise
-            for (let i = 0; i < count; ++i)
-                vertices.push(i);
-            return {vertices, indices: render3DFlipTriangles(this.indices.slice())};
-        }
-        const remap = new Int32Array(count), place = new Int32Array(count), keys = this.vertexKeys;
-        if (keys && keys.length === count)
-        {
-            // a builder said which entries are one vertex: the first entry with a key stands for every entry with it,
-            // and is their place, so nothing is searched
-            const first = new Int32Array(count).fill(-1);
-            for (let i = 0; i < count; ++i)
-            {
-                const key = keys[i];
-                ASSERT(key >= 0 && key < count, 'vertexKeys must be whole numbers below the entry count', key);
-                const j = first[key];
-                if (j < 0)
-                    first[key] = i, remap[i] = vertices.length, vertices.push(i);
-                else
-                    remap[i] = remap[j];
-                place[i] = first[key];
-            }
-            return {vertices, indices: render3DStripTriangles(count, remap, place)};
-        }
-
-        // each vertex as nine whole numbers, its values in millionths and its color, so vertices hash and compare as
-        // numbers; a hash table over all nine finds the distinct vertices and one over the first three the places,
-        // each slot holding a vertex index plus one and a taken slot moving on to the next
-        const values = new Float64Array(count * 9);
-        let size = 1;
-        while (size < count * 2) size *= 2;
-        const mask = size - 1, seen = new Int32Array(size), places = new Int32Array(size);
-        const mix = (h, v)=> Math.imul(h ^ v, 0x9e3779b1) >>> 0;
-        for (let i = 0; i < count; ++i)
-        {
-            const p = this.points[i], n = this.normals[i] || RENDER3D_DEFAULT_NORMAL;
-            const uv = this.uvs[i] || RENDER3D_DEFAULT_UV, k = i * 9;
-            const x = values[k] = round(p.x * 1e6), y = values[k+1] = round(p.y * 1e6), z = values[k+2] = round(p.z * 1e6);
-            values[k+3] = round(n.x * 1e6), values[k+4] = round(n.y * 1e6), values[k+5] = round(n.z * 1e6);
-            values[k+6] = round(uv.x * 1e6), values[k+7] = round(uv.y * 1e6);
-            values[k+8] = (this.colors[i] || WHITE).rgbaInt();
-            let h = mix(mix(mix(0x811c9dc5, x), y), z);
-
-            // the place, shared with a vertex there that has another normal or uv, as at a lathe's poles
-            for (let slot = h & mask;; slot = (slot + 1) & mask)
-            {
-                const o = places[slot] - 1;
-                if (o < 0) { places[slot] = i + 1, place[i] = i; break; }
-                if (values[o*9] === x && values[o*9+1] === y && values[o*9+2] === z) { place[i] = o; break; }
-            }
-
-            // the whole vertex
-            for (let m = 3; m < 9; ++m)
-                h = mix(h, values[k+m]);
-            for (let slot = h & mask;; slot = (slot + 1) & mask)
-            {
-                const o = seen[slot] - 1;
-                if (o < 0) { seen[slot] = i + 1, remap[i] = vertices.length, vertices.push(i); break; }
-                let same = true;
-                for (let m = 0; same && m < 9; ++m)
-                    same = values[o*9+m] === values[k+m];
-                if (same) { remap[i] = remap[o]; break; }
-            }
-        }
-        return {vertices, indices: render3DStripTriangles(count, remap, place)};
-    }
-
-    /** Draw the mesh with the current draw state, batched with its other uses in the opaque stage
-     *  @param {Matrix4|Vector3} [matrix] - Object transform, or just a position to draw it at
-     *  @param {TileInfo|TextureInfo} [tileInfo] - Texture, mesh uvs map across the tile or the whole texture
-     *  @param {Color} [color] - Tint */
-    render(matrix, tileInfo, color) { render3D?.drawMesh(this, matrix, tileInfo, color); }
-
-    /** Delete the GPU buffer now, the CPU arrays stay so the mesh can be rendered again
-     *  - Optional, the buffer is freed anyway once the mesh is garbage collected, this frees it right away */
-    dispose()
-    {
-        if (!this.buffer) return;
-        render3DMeshBuffers?.unregister(this); // freed here, so not again when the mesh is collected
-        // a buffer from a context that was lost is gone with it, and the new context refuses to delete it
-        if (this.contextGeneration === render3D?.contextGeneration)
-            glContext?.deleteBuffer(this.buffer), glContext?.deleteBuffer(this.indexBuffer);
-        this.buffer = this.indexBuffer = undefined;
-        this.bufferCount = 0;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Shape builders, all centered on the origin so buildMatrix does placement
-// Sizes are full sizes like buildBox and the 2D drawCircle, sides go around an axis and rings along it
-
-/**
- * Spin a flat outline around the Y axis to make a round shape, like a vase or a wheel
- * - profile is [[radius, y], ...] from bottom to top
- * - A profile that ends where it starts makes a closed ring like a donut
- * - An end left open, with a radius and no cap, makes the mesh doubleSided so its inside shows
- * - An end on the axis smooth shades as a round pole like a sphere's when its segment is within 45 degrees of
- *   level, and as a point like a cone's tip when it is steeper
- * @param {Array<Array<number>>} profile
- * @param {number} [sides] - Around the axis
- * @param {boolean} [smooth] - Defaults to render3D.smoothShading
- * @param {boolean} [capped] - Close the ends that have a radius with flat discs
- * @return {Mesh}
- * @memberof Render3D
- * @example
- * const vase = buildLathe([[0, -1], [.8, -.3], [.9, .2], [.4, .6], [0, 1]], 12);
- */
-function buildLathe(profile, sides=16, smooth=render3D?.smoothShading, capped=true)
-{
-    ASSERT(isArray(profile) && profile.length > 1, 'lathe profile needs at least 2 points');
-    sides |= 0;
-    ASSERT(sides > 2, 'lathe needs at least 3 sides');
-    const mesh = new Mesh;
-    const rings = profile.length;
-    const point = (i, a)=> vec3(sin(a) * profile[i][0], profile[i][1], cos(a) * profile[i][0]);
-
-    // 2D outward normal of each profile segment, in (radius, y) space
-    const segmentNormal = (i)=>
-    {
-        const [r0, y0] = profile[i], [r1, y1] = profile[i+1];
-        const n = vec2(y1 - y0, r0 - r1);
-        return n.length() ? n.normalize() : vec2(1, 0);
-    };
-    // vertex normal: average of the adjacent segment normals, across the seam when the profile is closed,
-    // and a closed profile needs no caps
-    const closed = rings > 2 && abs(profile[0][0] - profile[rings-1][0]) < 1e-9 &&
-        abs(profile[0][1] - profile[rings-1][1]) < 1e-9;
-    const segmentLength = (i)=> hypot(profile[i+1][0] - profile[i][0], profile[i+1][1] - profile[i][1]);
-    const vertexNormal = (i)=>
-    {
-        // an open end on the axis is a pole and points along it, like a sphere's, when the surface there is
-        // within 45 degrees of level; a steeper one is a point like a cone's tip and takes its side's normal
-        if (!closed && (!i || i == rings - 1) && abs(profile[i][0]) < 1e-9)
-        {
-            const up = i ? 1 : -1;
-            if (segmentNormal(i ? i - 1 : 0).y * up > Math.SQRT1_2 - 1e-9)
-                return vec2(0, up);
-        }
-        // otherwise the neighbors weighted by their length, so a short band does not tilt a long wall
-        let n = vec2();
-        const add = (s)=> n = n.add(segmentNormal(s).scale(segmentLength(s)));
-        if (i > 0) add(i - 1);
-        else if (closed) add(rings - 2);
-        if (i < rings - 1) add(i);
-        else if (closed) add(0);
-        return n.length() ? n.normalize() : vec2(1, 0);
-    };
-    const normal3D = (n, a)=> vec3(sin(a) * n.x, n.y, cos(a) * n.x);
-
-    // v runs along the profile by arc length
-    const lengths = [0];
-    for (let i = 1; i < rings; ++i)
-        lengths[i] = lengths[i-1] + hypot(profile[i][0] - profile[i-1][0], profile[i][1] - profile[i-1][1]);
-    const total = lengths[rings - 1] || 1;
-    const v = (i)=> 1 - lengths[i] / total;
-
-    for (let i = 0; i + 1 < rings; ++i)
-    {
-        if (smooth)
-        {
-            // one ribbon around the ring pair, top point then bottom point per column
-            const points = [], normals = [], uvs = [];
-            const n0 = vertexNormal(i), n1 = vertexNormal(i + 1);
-            // a point on the axis is one per column, each drawn by the face beside it, so its normal turns half
-            // a side toward the middle of that face; a pole's points along the axis and does not turn
-            const half = PI / sides;
-            const turn1 = abs(profile[i + 1][0]) < 1e-9 ? -half : 0, turn0 = abs(profile[i][0]) < 1e-9 ? half : 0;
-            for (let j = 0; j <= sides; ++j)
-            {
-                const a = j / sides * 2 * PI, u = j / sides;
-                points.push(point(i + 1, a), point(i, a));
-                normals.push(normal3D(n1, a + turn1), normal3D(n0, a + turn0));
-                uvs.push(vec2(u, v(i + 1)), vec2(u, v(i)));
-            }
-            mesh.addStrip(points, normals, uvs);
-        }
-        else
-        {
-            // one quad per side with its face normal
-            const n = segmentNormal(i);
-            for (let j = 0; j < sides; ++j)
-            {
-                const a0 = j / sides * 2 * PI, a1 = (j + 1) / sides * 2 * PI;
-                const u0 = j / sides, u1 = (j + 1) / sides;
-                mesh.addStrip(
-                    [point(i + 1, a0), point(i, a0), point(i + 1, a1), point(i, a1)],
-                    normal3D(n, (a0 + a1) / 2),
-                    [vec2(u0, v(i + 1)), vec2(u0, v(i)), vec2(u1, v(i + 1)), vec2(u1, v(i))]);
-            }
-        }
-    }
-
-    // flat discs close the ends that have a radius, a hard edge even when the sides are smooth
-    if (capped && !closed)
-        for (const [i, up] of /** @type {Array<[number, boolean]>} */ ([[0, false], [rings - 1, true]]))
-        {
-            if (abs(profile[i][0]) < 1e-9) continue; // a pole has no cap
-            const points = [], uvs = [];
-            for (let j = 0; j < sides; ++j)
-            {
-                const a = (up ? j : -j) / sides * 2 * PI; // counter clockwise seen from outside
-                points.push(point(i, a));
-                uvs.push(vec2(sin(a) * .5 + .5, cos(a) * .5 + .5));
-            }
-            mesh.addStrip(render3DPolygonStrip(points), vec3(0, up ? 1 : -1, 0), render3DPolygonStrip(uvs));
-        }
-
-    // an end left open shows the inside, so it is seen from both sides
-    mesh.doubleSided = !closed && !capped && (abs(profile[0][0]) > 1e-9 || abs(profile[rings-1][0]) > 1e-9);
-    return mesh;
-}
-
-/**
- * Build a sphere centered on the origin
- * @param {number} [size] - Diameter
- * @param {number} [sides] - Around
- * @param {number} [rings] - Top to bottom
- * @param {boolean} [smooth] - Defaults to render3D.smoothShading
- * @return {Mesh}
- * @memberof Render3D
- */
-function buildSphere(size=1, sides=16, rings=8, smooth=render3D?.smoothShading)
-{
-    ASSERT(rings > 1, 'sphere needs at least 2 rings');
-    const profile = [];
-    for (let i = 0; i <= rings; ++i)
-    {
-        const a = i / rings * PI - PI/2;
-        profile.push([cos(a) * size / 2, sin(a) * size / 2]);
-    }
-    return buildLathe(profile, sides, smooth);
-}
-
-// a box with its edges cut by a bevel of size t: each face shrunk by t, a strip along each edge around a quarter
-// circle, and an eighth of a sphere at each corner; one segment makes them flat, a chamfer
-function render3DBevelBox(half, t, segments, faces)
-{
-    const mesh = new Mesh, inner = half.subtract(vec3(t)), n = max(1, segments | 0);
-
-    // a triangle facing out, since the box is convex around the origin, flat shaded or with the normals of the
-    // round, and uvs from the face it faces most, as a plain box maps that face
-    const triangle = (a, b, c, na, nb, nc)=>
-    {
-        let normal = b.subtract(a).cross(c.subtract(a));
-        if (normal.lengthSquared() < 1e-20) return; // an edge or face with no size
-        if (normal.dot(a.add(b).add(c)) < 0)
-            [b, c, nb, nc, normal] = [c, b, nc, nb, normal.scale(-1)];
-        normal = normal.normalize();
-        let face = faces[0];
-        for (const f of faces)
-            if (f[0].dot(normal) > face[0].dot(normal))
-                face = f;
-        const [, r, u] = face, hr = abs(half.dot(r)), hu = abs(half.dot(u));
-        const uv = (p)=> vec2(.5 + p.dot(r) / (2 * hr), .5 - p.dot(u) / (2 * hu));
-        mesh.addStrip([a, b, c], n > 1 && na ? [na, nb, nc] : normal, [uv(a), uv(b), uv(c)]);
-    };
-
-    // the faces, shrunk by the bevel
-    for (const [normal, r, u] of faces)
-    {
-        const [a, b, c, d] = render3DQuadAxes(normal.multiply(half), r.multiply(inner), u.multiply(inner));
-        triangle(a, b, c);
-        triangle(c, b, d);
-    }
-
-    // the edges, each a strip around a quarter circle from one face to the next
-    const axes = [vec3(1, 0, 0), vec3(0, 1, 0), vec3(0, 0, 1)];
-    for (let k = 0; k < 3; ++k)
-    for (const si of [-1, 1])
-    for (const sj of [-1, 1])
-    {
-        const n1 = axes[(k + 1) % 3].scale(si), n2 = axes[(k + 2) % 3].scale(sj);
-        const middle = n1.multiply(inner).add(n2.multiply(inner)), along = axes[k].multiply(inner);
-        const start = middle.subtract(along), end = middle.add(along);
-        const dir = (m)=> n1.scale(cos(m / n * PI / 2)).add(n2.scale(sin(m / n * PI / 2)));
-        for (let m = 0; m < n; ++m)
-        {
-            const d0 = dir(m), d1 = dir(m + 1);
-            const a = start.add(d0.scale(t)), b = end.add(d0.scale(t));
-            const c = start.add(d1.scale(t)), d = end.add(d1.scale(t));
-            triangle(a, b, c, d0, d0, d1);
-            triangle(c, b, d, d1, d0, d1);
-        }
-    }
-
-    // the corners, an eighth of a sphere in rows from one face's axis down to the edge between the other two
-    for (const sx of [-1, 1])
-    for (const sy of [-1, 1])
-    for (const sz of [-1, 1])
-    {
-        const nx = vec3(sx, 0, 0), ny = vec3(0, sy, 0), nz = vec3(0, 0, sz), corner = inner.multiply(vec3(sx, sy, sz));
-        const dir = (i, j)=>
-        {
-            const polar = i / n * PI / 2, around = i ? j / i * PI / 2 : 0;
-            return nz.scale(cos(polar)).add(nx.scale(cos(around) * sin(polar))).add(ny.scale(sin(around) * sin(polar)));
-        };
-        const point = (i, j)=> corner.add(dir(i, j).scale(t));
-        for (let i = 0; i < n; ++i)
-        {
-            for (let j = 0; j <= i; ++j)
-                triangle(point(i, j), point(i + 1, j), point(i + 1, j + 1), dir(i, j), dir(i + 1, j), dir(i + 1, j + 1));
-            for (let j = 0; j < i; ++j)
-                triangle(point(i, j), point(i + 1, j + 1), point(i, j + 1), dir(i, j), dir(i + 1, j + 1), dir(i, j + 1));
-        }
-    }
-    return mesh;
-}
-
-/**
- * Build a box centered on the origin, six flat faces with uvs covering each face
- * - bevel cuts its edges and corners: 1 segment is a flat chamfer, more round them, and the biggest bevel, half
- *   the smallest side, rounds a cube into a ball
- * @param {Vector3|number} [size] - Full size, a number for a cube
- * @param {number} [bevel] - Size of the cut on each edge, clamped to half the smallest side
- * @param {number} [bevelSegments] - Steps around each edge, 1 for a flat chamfer
- * @return {Mesh}
- * @memberof Render3D
- */
-function buildBox(size=1, bevel=0, bevelSegments=1)
-{
-    ASSERT(isNumber(bevel) && bevel >= 0, 'bevel must be a number, 0 or more');
-    const half = render3DSize3(size).scale(.5);
-    // each face: normal, right axis, up axis (right cross up = normal)
-    const faces = [
-        [vec3(0, 0, 1),  vec3(1, 0, 0),  vec3(0, 1, 0)],
-        [vec3(0, 0, -1), vec3(-1, 0, 0), vec3(0, 1, 0)],
-        [vec3(1, 0, 0),  vec3(0, 0, -1), vec3(0, 1, 0)],
-        [vec3(-1, 0, 0), vec3(0, 0, 1),  vec3(0, 1, 0)],
-        [vec3(0, 1, 0),  vec3(1, 0, 0),  vec3(0, 0, -1)],
-        [vec3(0, -1, 0), vec3(1, 0, 0),  vec3(0, 0, 1)],
-    ];
-    const t = min(bevel, half.x, half.y, half.z);
-    if (t > 0)
-        return render3DBevelBox(half, t, bevelSegments, faces);
-    const mesh = new Mesh;
-    for (const [n, r, u] of faces)
-    {
-        const center = n.multiply(half);
-        const right = r.multiply(half), up = u.multiply(half);
-        mesh.addStrip(render3DQuadAxes(center, right, up), n, RENDER3D_QUAD_UVS);
-    }
-    return mesh;
-}
-
-/**
- * Build a heightfield grid in the XZ plane centered on the origin
- * - smooth rounds the lighting across cells and colors each corner
- * - flat lights and colors each cell on its own, so a checkerboard stays crisp
- * - doubleSided, a sheet seen from both sides; turn it off for ground only ever seen from above
- * - One cell is a plain square, render3D.planeMesh and planeMeshDoubleSided are shared ones
- * @param {Vector2|number} [size] - World size along X and Z, a number for a square
- * @param {Vector2|number} [segments] - Cells along X and Z, a number for both
- * @param {Color|function(number, number): Color} [color] - One Color for the whole grid, or (x, z) => Color
- * @param {function(number, number): number} [heightFunction] - (x, z) => y, default flat
- * @param {boolean} [smooth] - Defaults to render3D.smoothShading with a heightFunction; a flat grid is flat shaded,
- *   since its light is even anyway and smoothing would only blend its cell colors; pass smooth to blend a gradient
- * @return {Mesh}
- * @memberof Render3D
- * @example
- * const ground = buildGrid(vec2(20), 10, (x, z)=> (floor(x / 2) + floor(z / 2)) & 1 ? GRAY : WHITE); // 2 unit checks
- */
-function buildGrid(size=vec2(1), segments=1, color, heightFunction, smooth=heightFunction && render3D?.smoothShading)
-{
-    heightFunction ||= ()=> 0;
-    size = render3DSize2(size);
-    segments = render3DSize2(segments);
-    ASSERT(segments.x > 0 && segments.y > 0 && segments.x % 1 === 0 && segments.y % 1 === 0,
-        'grid segments must be whole numbers above zero');
-    const mesh = new Mesh;
-    const segmentsX = segments.x, segmentsZ = segments.y;
-    const cellX = size.x / segmentsX, cellZ = size.y / segmentsZ;
-    const halfX = size.x / 2, halfZ = size.y / 2, ex = cellX / 2, ez = cellZ / 2;
-    const px = (i)=> i * cellX - halfX, pz = (j)=> j * cellZ - halfZ;
-    const colorAt = /** @type {function(number, number): Color} */ (color);
-    const cellColor = (i, j)=> !color ? WHITE : isColor(color) ? /** @type {Color} */ (color) : colorAt(px(i), pz(j));
-    // a big terrain has millions of vertices, so each one is made once, shared by the rows above and below it
-    const row = (j)=>
-    {
-        const points = [], normals = [], uvs = [], colors = [], z = pz(j);
-        for (let i = 0; i <= segmentsX; ++i)
-        {
-            const x = px(i);
-            points.push(vec3(x, heightFunction(x, z), z));
-            uvs.push(vec2(i / segmentsX, j / segmentsZ));
-            if (!smooth) continue;
-            normals.push(render3DSlopeNormal(heightFunction, x, z, ex, ez, halfX, halfZ));
-            colors.push(cellColor(i, j));
-        }
-        return {points, normals, uvs, colors};
-    };
-    let above = row(0);
-    for (let j = 0; j < segmentsZ; ++j)
-    {
-        const below = row(j + 1);
-        if (smooth)
-        {
-            // one ribbon per row with vertex normals from the slope
-            const points = [], normals = [], uvs = [], colors = [];
-            for (let i = 0; i <= segmentsX; ++i)
-            {
-                points.push(above.points[i], below.points[i]);
-                normals.push(above.normals[i], below.normals[i]);
-                uvs.push(above.uvs[i], below.uvs[i]);
-                colors.push(above.colors[i], below.colors[i]);
-            }
-            mesh.addStrip(points, normals, uvs, colors);
-        }
-        else
-        {
-            // one quad per cell with its face normal and one color sampled at its center
-            for (let i = 0; i < segmentsX; ++i)
-                mesh.addQuad(above.points[i], below.points[i], below.points[i+1], above.points[i+1], cellColor(i + .5, j + .5),
-                    [above.uvs[i], below.uvs[i], below.uvs[i+1], above.uvs[i+1]]);
-        }
-        above = below;
-    }
-    if (smooth)
-    {
-        // the grid knows which strip entries are one vertex, each shared by the rows above and below it and by the
-        // repeats at the ends of its ribbons, so the upload of a big terrain skips searching millions of entries
-        const n = 2 * (segmentsX + 1) + 2, keys = mesh.vertexKeys = new Int32Array(mesh.points.length);
-        const id = (i, j)=> j * (segmentsX + 1) + i;
-        for (let j = 0; j < segmentsZ; ++j)
-        {
-            const start = j * n;
-            keys[start] = id(0, j); // the leading repeat
-            for (let i = 0; i <= segmentsX; ++i)
-                keys[start + 1 + 2*i] = id(i, j), keys[start + 2 + 2*i] = id(i, j + 1);
-            keys[start + n - 1] = id(segmentsX, j + 1); // the trailing repeat
-        }
-    }
-    mesh.doubleSided = true; // a sheet, seen from both sides; terrain seen only from above can turn it off
-    return mesh;
-}
-
-/**
- * Build a sky dome: a sphere colored by direction, wound to be seen from inside
- * - set it as render3D.sky and the pass draws it around the camera behind everything
- * @param {Color} [topColor] - Straight up
- * @param {Color} [horizonColor] - Level with the camera
- * @param {Color} [bottomColor] - Straight down, what a camera looking at the ground sees past its edge; defaults to the
- *   horizon color
- * @param {number} [sides] - Around
- * @param {number} [rings] - Top to bottom
- * @return {Mesh}
- * @memberof Render3D
- */
-function buildSky(topColor=hsl(.6, .8, .55), horizonColor=hsl(.6, 1, .9), bottomColor=horizonColor, sides=16, rings=8)
-{
-    // 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, 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, 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 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
- * - addChild attaches the 3D transform, and pos3D becomes an offset from the parent; attach keeps the child where
- *   it is and works the offset out, and removeChild leaves it where it was in the world
- * - The 2D offset arguments of addChild do nothing here, set the child's pos3D
- * @extends EngineObject
- * @memberof Render3D
- * @example
- * class Spinner extends EngineObject3D
- * {
- *     constructor(pos) { super(pos, buildBox(), undefined, RED); }
- *     update() { this.rotation3D.y += .02; }
- * }
- */
-class EngineObject3D extends EngineObject
-{
-    /** Create a 3D object and add it to the object list
-     *  @param {Vector3} [pos3D] - World space position
-     *  @param {Mesh} [mesh] - Mesh to draw, undefined draws nothing
-     *  @param {TileInfo|TextureInfo} [tileInfo] - Texture, mesh uvs map across the tile; a whole TextureInfo becomes
-     *    the tile that covers it
-     *  @param {Color} [color] - Tint */
-    constructor(pos3D=vec3(), mesh, tileInfo, color=WHITE)
-    {
-        ASSERT(!tileInfo || tileInfo instanceof TileInfo || tileInfo instanceof TextureInfo,
-            'tileInfo must be a TileInfo or TextureInfo, it comes before color');
-        // a whole texture is stored as the tile that covers it, with no padding or bleed to trim
-        // the edges, so this is always a TileInfo like the 2D one and the object stays an EngineObject
-        if (tileInfo instanceof TextureInfo)
-            render3DWholeTiles.add(tileInfo = new TileInfo(vec2(), tileInfo.size, tileInfo, 0, 0));
-        // the 2D pos starts where the object is, so turning on sync2D keeps it there
-        super(vec2(pos3D.x, pos3D.y), vec2(), tileInfo, 0, color);
-        ASSERT(isVector3(pos3D), 'pos3D must be a vec3');
-        ASSERT(!mesh || mesh instanceof Mesh, 'mesh must be a Mesh or undefined');
-        this.mass = 0; // static: no 2D physics, and no 3D gravity until a mass is set
-
-        /** @property {Vector3} - World space position, local to the parent when attached to an EngineObject3D */
-        this.pos3D = pos3D.copy();
-        /** @property {Vector3} - Rotation vec3(pitch, yaw, roll) in radians, local to the parent when attached to an
-         *  EngineObject3D */
-        this.rotation3D = vec3();
-        /** @property {Vector3} - Scale, local to the parent when attached to an EngineObject3D */
-        this.scale3D = vec3(1);
-        /** @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, slowed by angleDamping */
-        this.angleVelocity3D = vec3();
-        /** @property {Mesh|undefined} - Mesh to draw
-         *  @type {Mesh|undefined} */
-        this.mesh = mesh;
-        /** @property {Vector3} - Size for solid collision and the collect and callback helpers, and of the sprite when
-         *  there is a tileInfo and no mesh; starts at the size of the mesh's box, or 1 with no mesh, and setMesh leaves
-         *  it as it is; the box is centered on pos3D, so center() a mesh whose origin is not its middle, like a model
-         *  standing on its feet, or set size3D; scale3D and any parent's scale grow it, so drawing and picking agree */
-        // a shared mesh measured since it last changed is not walked again for each object made from it
-        const bounds = mesh && mesh.points.length ? !mesh.dirty && mesh.bounds || mesh.getBounds() : undefined;
-        this.size3D = bounds ? bounds.max.subtract(bounds.min) : vec3(1);
-        /** @property {number} - Diameter of a soft shadow drawn under the object on render3D.softShadowHeight, 0 for
-         *  none; scale3D and a parent's scale grow it, so set it once for the unscaled object */
-        this.softShadow = 0;
-        /** @property {boolean} - A sprite stands on world up instead of tilting toward the camera */
-        this.upright = false;
-        /** @property {boolean} - Keep this object's texture pixels hard edged, for pixel art that should not blur or bleed */
-        this.pixelated = false;
-        /** @property {boolean} - Copy the 2D pos and angle into pos3D and rotation3D each frame, for 2D games with 3D
-         *  looks; set mass to use 2D physics, and pos3D.z stays yours to set or move with velocity3D.z */
-        this.sync2D = false;
-        /** @property {boolean} - Draw in the transparent stage, blended and sorted far to near with depth writes off;
-         *  on for a sprite */
-        this.transparent = !mesh && !!tileInfo;
-        /** @property {boolean} - Additive blending, in the transparent stage */
-        this.additive = false;
-        /** @property {number} - How much it lights itself: 0 is lit as normal, 1 is its own color with no shading, for
-         *  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; 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 */
-        this.castShadow = true;
-        /** @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
-         *  @type {boolean|undefined} */
-        this.renderAfter2D = undefined;
-        /** @property {Matrix4|undefined} - The transform from its parent, used in place of pos3D, rotation3D and
-         *  scale3D when set, for one they cannot hold like a glTF pose with shear; read every frame it is set
-         *  @type {Matrix4|undefined} */
-        this.localMatrix = undefined;
-        // the world transform, kept up to date by render3DObjectMatrix; getMatrix returns a copy
-        this.worldMatrix = new Matrix4;
-        this.matrixBuilt = new Float64Array(9).fill(NaN); // the position, rotation and scale it was built from
-        this.matrixVersion = 0;          // counts the rebuilds, so a child knows when its parent's changed
-        /** @type {EngineObject3D|undefined} */
-        this.matrixParent = undefined;   // the parent it was built under, and that parent's version then
-        this.matrixParentVersion = 0;
-        this.movePass = engineObjectsUpdateCount; // the engine pass a child last moved in, so a refresh is not a step
-    }
-
-    /** Move by the 3D velocities and push out of solids, called automatically each frame before update, like the 2D physics
-     *  - update runs once every object has moved and collided, so bounce off anything else there, it lands before the draw
-     *  - Override this and call super to change how the object moves itself
-     *  - A sync2D object runs the 2D physics as well, and collides there instead */
-    updatePhysics()
-    {
-        // a sync2D object collides in 2D, which measures the 2D size, and that starts at zero on a 3D object
-        ASSERT(!this.sync2D || !this.collideSolidObjects || (this.size.x && this.size.y),
-            '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);
-        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);
-    }
-
-    /** Move a child by its own velocities, bring a sync2D object's pos3D up to its 2D pos, then update the children,
-     *  called automatically each frame
-     *  @param {boolean} [updateChildren] - Also update the children's transforms */
-    updateTransforms(updateChildren=true)
-    {
-        if (!paused)
-        {
-            // a child is never given updatePhysics, so it moves here, as an offset from its parent: once per
-            // engine pass, since addChild, attach and a game bring the transforms up to date too
-            if (this.parent && this.movePass !== engineObjectsUpdateCount)
-            {
-                this.movePass = engineObjectsUpdateCount;
-                render3DMove(this);
-            }
-        }
-
-        // placed from its parent first, so a sync2D object copies where it is now, then its children from it
-        super.updateTransforms(false);
-        if (!paused && this.sync2D)
-            this.pos3D.x = this.pos.x, this.pos3D.y = this.pos.y, this.rotation3D.z = -this.angle;
-        if (updateChildren)
-            for (const child of this.children)
-                child.updateTransforms();
-    }
-
-    /** 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 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;
-     *    blocking needs collideSolidObjects, so isSolid on its own is not allowed
-     *  @param {boolean} [collideLevel] - Collide with the level, the height maps and voxel maps, or the 2D tile layers
-     *    for a sync2D object
-     *  @param {boolean} [collideRaycast] - Raycasts, 2D only; 3D has render3D.pick and engineObjectsRaycast3D */
-    setCollision(collideSolidObjects=true, isSolid=true, collideLevel=true, collideRaycast=false)
-    { super.setCollision(collideSolidObjects, isSolid, collideLevel, collideRaycast); }
-
-    /** Called by a VoxelMap to ask whether a block stops this object, a hook to let one through or react to it
-     *  @param {number} type - The block's type, 1 to 255
-     *  @param {Vector3} cell - The block's cell in the map
-     *  @return {boolean} - true to be stopped by it, every block stops it by default */
-    collideWithVoxel(type, cell) { return true; }
-
-    /** Returns the world position
-     *  @return {Vector3} */
-    getWorldPos3D() { return render3DObjectMatrix(this).getTranslation(); }
-
-    /** Returns the direction the object faces, its -Z axis in the world
-     *  @return {Vector3} */
-    getForward3D() { return render3DAxis(render3DObjectMatrix(this).m, 8).normalize(-1); }
-
-    /** Returns the object's right axis in the world
-     *  @return {Vector3} */
-    getRight3D() { return render3DAxis(render3DObjectMatrix(this).m, 0).normalize(); }
-
-    /** Returns the object's up axis in the world
-     *  @return {Vector3} */
-    getUp3D() { return render3DAxis(render3DObjectMatrix(this).m, 4).normalize(); }
-
-    /** Returns a copy of the object's world transform, the parent's included when attached to an EngineObject3D
-     *  - The object keeps its matrix and rebuilds it only when its position, rotation or scale changed, so this is
-     *    cheap to call
-     *  @return {Matrix4} */
-    getMatrix() { return render3DObjectMatrix(this).copy(); }
-
-    /** Turn the object so its -Z axis points at a world space target, sets pitch and yaw and clears roll
-     *  @param {Vector3} target */
-    lookAt(target)
-    {
-        // rotation3D is local to the parent, so a child has to aim at the target from the parent's point of view
-        const parent = this.parent instanceof EngineObject3D ? this.parent : undefined;
-        const local = parent ? parent.getMatrix().invert().transformPoint(target) : target;
-        this.rotation3D = render3DLookRotation(local.subtract(this.pos3D), this.rotation3D);
-    }
-
-    /** Attaches a child, its pos3D, rotation3D and scale3D taken as the offset from this one; returns child for chaining
-     *  - The 2D offset arguments do nothing for an EngineObject3D child, set its pos3D
-     *  @param {EngineObject} child
-     *  @param {Vector2} [localPos]
-     *  @param {number} [localAngle]
-     *  @return {EngineObject} The child object attached */
-    addChild(child, localPos, localAngle)
-    {
-        // addChild brings the child's transform up to date, which is not a step: it already moved this pass as
-        // a root, or moves in the next one, so it must not move by its velocity again here
-        if (child instanceof EngineObject3D)
-            child.movePass = engineObjectsUpdateCount;
-        return super.addChild(child, localPos, localAngle);
-    }
-
-    /** Attaches a child without moving it: its pos3D, rotation3D and scale3D become what they have to be under this
-     *  parent to keep its world transform, where addChild takes them as the offset; returns child for chaining
-     *  - A parent scaled unevenly and a child turned under it make a shear, which those three values cannot hold,
-     *    so the child comes out as close as they can get; a uniform scale is exact
-     *  @param {EngineObject} child
-     *  @return {EngineObject} The child object attached */
-    attach(child)
-    {
-        if (!(child instanceof EngineObject3D))
-            return super.attach(child); // a 2D child only has the 2D transform to keep
-        child.parent?.removeChild(child); // keeps its world values, so its own matrix is its world matrix
-        const local = render3DObjectMatrix(this).copy().invert().multiply(render3DObjectMatrix(child));
-        super.attach(child);
-        child.pos3D = local.getTranslation();
-        child.rotation3D = local.getRotation();
-        child.scale3D = local.getScale();
-        if (child.localMatrix)
-            child.localMatrix = local; // a matrix given whole stays whole, shear and all
-        return child;
-    }
-
-    /** Removes a child from this one, it stays where it is in the world: its pos3D, rotation3D and scale3D become
-     *  its world values, with the same shear caveat as attach; a child being destroyed is let go as it is
-     *  @param {EngineObject} child */
-    removeChild(child)
-    {
-        if (child instanceof EngineObject3D && !child.destroyed)
-        {
-            const world = render3DObjectMatrix(child);
-            child.pos3D = world.getTranslation();
-            child.rotation3D = world.getRotation();
-            child.scale3D = world.getScale();
-            if (child.localMatrix)
-                child.localMatrix = world.copy(); // a matrix given whole stays whole, shear and all
-        }
-        super.removeChild(child);
-    }
-
-    /** Draw a different mesh and free the GPU buffer of the one it replaces
-     *  - For a mesh built again when something changes, like a score, a rebuilt terrain or a loaded model
-     *  - A mesh another object is still drawing is left alone, since builders are often shared
-     *  - Freeing one held somewhere else only costs it an upload, the points it was built from stay
-     *  @param {Mesh} [mesh] - The mesh to draw from now on, undefined to draw nothing
-     *  @return {Mesh|undefined} - The mesh passed in */
-    setMesh(mesh)
-    {
-        ASSERT(!mesh || mesh instanceof Mesh, 'mesh must be a Mesh or undefined');
-        const old = this.mesh;
-        this.mesh = mesh;
-        // nothing to free and nothing to look for when it was never uploaded
-        if (old && old !== mesh && old.buffer && !engineObjects.some(o=> /** @type {EngineObject3D} */ (o).mesh === old))
-            old.dispose();
-        return mesh;
-    }
-
-    /** 2D rendering is skipped, the mesh is drawn by render3D during the 3D pass */
-    render() {}
-
-    /** Draw the object in 3D, called by the 3D pass with the draw state set from this object's flags, draws the mesh by default
-     *  @return {void} */
-    render3D()
-    {
-        // an opaque draw comes out solid however low its alpha is, so a fade with no flag looks like nothing happened
-        ASSERT(this.transparent || this.additive || this.color.a >= 1,
-            'an object that fades needs its transparent flag, an opaque draw ignores the color alpha', this.color);
-        // the matrix the object keeps, rebuilt only when it moved, the same one for the shadow pass and the main pass
-        const matrix = render3DObjectMatrix(this);
-        if (this.mesh)
-            render3D.drawMesh(this.mesh, matrix, this.tileInfo, this.color);
-        else if (this.tileInfo)
-        {
-            // a sprite, at the world size the collect, pick and solid collision helpers measure it at
-            const m = matrix.m, size = render3DWorldSize(this, m);
-            render3D.drawBillboard(vec3(m[12], m[13], m[14]), vec2(size.x, size.y), this.tileInfo, this.color,
-                this.rotation3D.z, this.upright);
-        }
-    }
-}
-
-// an object's world matrix, the one it keeps: rebuilt only when its position, rotation or scale changed since the
-// last build, or its parent's matrix did, so an object that stands still costs nine compares a frame instead of
-// the trig and a new matrix; the matrix returned is the object's own, read it and never change it
-const render3DLocalMatrix = new Matrix4;
-function render3DObjectMatrix(o)
-{
-    const parent = o.parent instanceof EngineObject3D ? o.parent : undefined;
-    const parentMatrix = parent && render3DObjectMatrix(parent); // the parent first, so its version is current
-    const p = o.pos3D, r = o.rotation3D, s = o.scale3D, k = o.matrixBuilt, local = o.localMatrix;
-    if (local)
-    {
-        // a matrix given whole is taken as it is each time, it can change in place
-        if (parent)
-        {
-            o.worldMatrix.m.set(parentMatrix.m);
-            o.worldMatrix.multiply(local);
-            o.matrixParentVersion = parent.matrixVersion;
-        }
-        else
-            o.worldMatrix.m.set(local.m);
-        k[0] = NaN; // built from the matrix, so going back to pos3D builds again
-        o.matrixParent = parent;
-        ++o.matrixVersion;
-    }
-    else if (k[0] !== p.x || k[1] !== p.y || k[2] !== p.z || k[3] !== r.x || k[4] !== r.y || k[5] !== r.z
-        || k[6] !== s.x || k[7] !== s.y || k[8] !== s.z || o.matrixParent !== parent
-        || parent && o.matrixParentVersion !== parent.matrixVersion)
-    {
-        k[0] = p.x, k[1] = p.y, k[2] = p.z, k[3] = r.x, k[4] = r.y, k[5] = r.z, k[6] = s.x, k[7] = s.y, k[8] = s.z;
-        if (parent)
-        {
-            // the parent's world matrix times the local one
-            buildMatrix(p, r, s, render3DLocalMatrix);
-            o.worldMatrix.m.set(parentMatrix.m);
-            o.worldMatrix.multiply(render3DLocalMatrix);
-            o.matrixParentVersion = parent.matrixVersion;
-        }
-        else
-            buildMatrix(p, r, s, o.worldMatrix);
-        o.matrixParent = parent;
-        ++o.matrixVersion;
-    }
-    return o.worldMatrix;
-}
-
-// 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
-    {
-        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 *= 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
-// ground is what it stood on last frame, which a height map keeps it on going down a slope
-function render3DCollideLevel(o, oldPos, ground)
-{
-    for (const level of render3DLevel)
-        level.destroyed || level.levelCollide3D(o, oldPos, level === ground);
-}
-
-// where a solid object is in the world and what it collides as: the sphere that fits size3D, or the size3D box,
-// each grown by the object's scale
-// only objects that own where they are take part, so pos3D is already world space, and however the object is
-// turned its axes come out as long as its scale makes them; building the transform to read that back off it
-// costs six trig calls and a matrix for every pair tested, which is the whole cost of a crowded scene
-function render3DSolidShape(o)
-{
-    ASSERT(!o.parent, 'a child rides along with its parent, it has no world pos3D of its own to collide with');
-    const s = o.size3D, k = o.scale3D;
-    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)};
-    // 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
-// it has to be the shape's own radius, or a wider one: a box reaches to its corner, and a sphere
-// takes the largest scale the same way render3DSolidShape does, or the reject would skip real touches
-function render3DSolidReach(o)
-{
-    const s = o.size3D, k = o.scale3D;
-    const kx = abs(k.x), ky = abs(k.y), kz = abs(k.z);
-    if (o.collideAsSphere3D)
-        return max(s.x, s.y, s.z) / 2 * max(kx, ky, kz);
-    return hypot(s.x * kx, s.y * ky, s.z * kz) / 2;
-}
-
-// 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 ? 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 = sphereBox(b, a);
-        return push && push.scale(-1);
-    }
-    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:
-// the ones after it update later and test against it then, and an object that is not in the list yet, because it
-// turned collision on this frame, tests them all itself and is not tested back
-// one pair per test is half the work of the 2D solver, which tests both directions; the difference only shows
-// when a collideWithObject destroys some third object, whose own turn then finds the pair already gone
-function render3DCollideSolid(a)
-{
-    let shapeA = render3DSolidShape(a);
-    const reachA = render3DSolidReach(a);
-    for (const b of engineObjectsCollide)
-    {
-        if (b === a) break;
-        // a child is part of its parent
-        if (b.destroyed || !(b instanceof EngineObject3D) || b.parent || b.sync2D) continue;
-        if (!a.isSolid && !b.isSolid) continue; // neither one blocks, so they pass through each other
-
-        // the pairs nowhere near each other are almost all of them in a scene of any size, so
-        // settle those with one distance check instead of building a shape for each
-        const p = shapeA.pos, q = b.pos3D, reach = reachA + render3DSolidReach(b);
-        const dx = p.x - q.x, dy = p.y - q.y, dz = p.z - q.z;
-        if (dx*dx + dy*dy + dz*dz > reach*reach)
-            continue;
-
-        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
-        const resolveA = a.collideWithObject(b, push);
-        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;
-        const weightB = !b.mass ? 0 : !a.mass ? 1 : a.mass / total;
-        a.pos3D = a.pos3D.add(push.scale(weightA));
-        b.pos3D = b.pos3D.subtract(push.scale(weightB));
-        if (weightA)
-            shapeA = render3DSolidShape(a); // it moved, so the next solid must be tested against where it is now
-        // mass 0 keeps its velocity too, so a moving platform keeps moving, and what hits it bounces by its own
-        // restitution as it would off a static wall
-        const normal = push.normalize();
-        if (weightA && a.velocity3D.dot(normal) < 0)
-            a.velocity3D = a.velocity3D.reflect(normal, a.restitution);
-        if (weightB && b.velocity3D.dot(normal) > 0)
-            b.velocity3D = b.velocity3D.reflect(normal, b.restitution);
-    }
-}
-
-/**
- * Collect the EngineObject3D objects whose boxes overlap a sphere or a box, the 3D twin of engineObjectsCollect
- * - 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
- * @param {boolean} [testCenters] - Test only each object's center, a little faster, and ignores object sizes
- * @return {Array<EngineObject3D>}
- * @memberof Render3D
- */
-function engineObjectsCollect3D(pos, size, objects=engineObjects, testCenters=false)
-{
-    // a size of 0 is a point, tested against each box, since a sphere of no size could never hit
-    const radiusSquared = typeof size === 'number' && size > 0 ? (size/2)**2 : undefined;
-    const box = radiusSquared ? undefined : typeof size === 'number' ? vec3() : render3DSize3(size);
-    const collected = [];
-    for (const o of objects)
-    {
-        if (!(o instanceof EngineObject3D) || o.destroyed) continue;
-        // the box in world space, scaled by the object and its parents
-        const m = render3DObjectMatrix(o).m, s = o.size3D;
-        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 && 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
-            const dx = max(abs(pos.x - center.x) - worldSize.x/2, 0);
-            const dy = max(abs(pos.y - center.y) - worldSize.y/2, 0);
-            const dz = max(abs(pos.z - center.z) - worldSize.z/2, 0);
-            hit = dx*dx + dy*dy + dz*dz < radiusSquared;
-        }
-        hit && collected.push(o);
-    }
-    return collected;
-}
-
-// how far along a ray an object is hit, or undefined for a miss; a mesh is hit on its triangles, in its own space,
-// and a sprite as the quad it draws
-const render3DRaycastCenter = vec3();
-function render3DRaycastObject(ray, o)
-{
-    if (o.destroyed || !(o instanceof EngineObject3D)) return;
-    // a height map or voxel map is hit on its surface, not its box
-    if (o instanceof HeightMap || o instanceof VoxelMap) return o.levelRaycast3D(ray);
-    if (!(o.mesh || o.tileInfo)) return;
-    if (o instanceof InstancedMesh3D) return; // its instances are not objects, and its one sphere is not a thing to hit
-    const matrix = render3DObjectMatrix(o), mesh = o.mesh;
-    if (!mesh) return render3DRaycastSprite(ray, o, matrix);
-    // a mesh that changed since it was measured is measured again, an upload may not have come yet
-    const radius = (mesh.dirty || !mesh.radius ? mesh.computeRadius() : mesh.radius) * render3DMaxStretch(matrix.m);
-    if (!(radius > 0)) return; // nothing to hit
-    // its place read from the matrix into a vector kept for this, a pick tests every object and most miss
-    const m = matrix.m, center = render3DRaycastCenter.set(m[12], m[13], m[14]);
-    const distance = raycastSphere(ray, center, radius);
-    if (distance === undefined) return;
-
-    // the sphere and then the box in the mesh's own space are quick rejects, and a ray that meets the box is tested
-    // against the triangles; the direction is not made unit length, so the distance holds in the world;
-    // a mesh flattened to nothing on an axis has no inverse, it is hit as a disc like a sprite
-    if (!matrix.determinant()) return render3DRaycastDisc(ray, center, radius);
-    const inverse = matrix.copy().invert(), bounds = mesh.bounds || mesh.getBounds();
-    const local = new Ray3D(inverse.transformPoint(ray.origin), inverse.transformDirection(ray.direction));
-    const hit = raycastBox(local, bounds.min.add(bounds.max).scale(.5), bounds.max.subtract(bounds.min));
-    if (hit === undefined || !ray.direction.lengthSquared())
-        return hit; // a ray of no length is where it starts, inside the box
-    return render3DRaycastMesh(local, mesh);
-}
-
-// how far along a ray, in the mesh's own space, its nearest triangle is hit, or undefined: the triangles that face
-// the ray as the pass draws them, clockwise from the front, and the back faces too of a doubleSided mesh; a strip's
-// triangle i is (i-2, i-1, i), the odd ones read the other way, and a join between its pieces has no area and is
-// never hit; nothing is kept between calls, so a mesh that changed is hit as it is now
-function render3DRaycastMesh(ray, mesh)
-{
-    const points = mesh.points, indices = mesh.indices, both = mesh.doubleSided;
-    const ox = ray.origin.x, oy = ray.origin.y, oz = ray.origin.z;
-    const dx = ray.direction.x, dy = ray.direction.y, dz = ray.direction.z;
-    const count = indices ? indices.length / 3 | 0 : points.length - 2;
-    let nearest;
-    for (let i = 0; i < count; ++i)
-    {
-        // the corners clockwise from the front: an indexed list is written the other way round
-        let a, b, c;
-        if (indices)
-            a = points[indices[i*3]], b = points[indices[i*3+2]], c = points[indices[i*3+1]];
-        else
-            a = points[i & 1 ? i + 1 : i], b = points[i & 1 ? i : i + 1], c = points[i + 2];
-
-        // Moller and Trumbore: the determinant is the ray along the face's normal, below zero from the front
-        const e1x = b.x - a.x, e1y = b.y - a.y, e1z = b.z - a.z;
-        const e2x = c.x - a.x, e2y = c.y - a.y, e2z = c.z - a.z;
-        const hx = dy * e2z - dz * e2y, hy = dz * e2x - dx * e2z, hz = dx * e2y - dy * e2x;
-        const det = e1x * hx + e1y * hy + e1z * hz;
-        if (both ? !det : !(det < 0)) continue;
-        const sx = ox - a.x, sy = oy - a.y, sz = oz - a.z;
-        const u = (sx * hx + sy * hy + sz * hz) / det;
-        if (!(u >= 0 && u <= 1)) continue;
-        const qx = sy * e1z - sz * e1y, qy = sz * e1x - sx * e1z, qz = sx * e1y - sy * e1x;
-        const v = (dx * qx + dy * qy + dz * qz) / det;
-        if (!(v >= 0 && u + v <= 1)) continue;
-        const t = (e2x * qx + e2y * qy + e2z * qz) / det;
-        if (t >= 0 && !(t >= nearest))
-            nearest = t;
-    }
-    return nearest;
-}
-
-// a sprite is the quad drawBillboard draws, its size3D grown by the x and y scale as the draw does, facing the camera
-// as it was last drawn; where the ray meets its plane, inside its half axes
-function render3DRaycastSprite(ray, o, matrix)
-{
-    const center = matrix.getTranslation(), worldSize = render3DWorldSize(o, matrix.m), size = vec2(worldSize.x, worldSize.y);
-    if (!(size.x > 0 && size.y > 0)) return; // nothing to hit
-    if (!ray.direction.lengthSquared()) // a ray of no length is where it starts
-        return render3DRaycastDisc(ray, center, hypot(size.x, size.y) / 2);
-    const a = render3DBillboardAxes(size, o.rotation3D.z, o.upright);
-    const right = vec3(a[0], a[1], a[2]), up = vec3(a[3], a[4], a[5]);
-    const t = raycastPlane(ray, center, right.cross(up));
-    if (t === undefined) return; // behind, or seen edge on
-    const p = ray.getPosition(t).subtract(center);
-    return abs(p.dot(right)) <= right.lengthSquared() && abs(p.dot(up)) <= up.lengthSquared() ? t : undefined;
-}
-
-// a mesh flattened to nothing, or a sprite for a ray of no length: a disc facing the ray at its center's depth
-function render3DRaycastDisc(ray, center, radius)
-{
-    const d = ray.direction, oc = center.subtract(ray.origin), dd = d.dot(d);
-    const t = dd ? oc.dot(d) / dd : 0; // its depth along the ray, in the ray's own units
-    return t >= 0 && oc.subtract(d.scale(t)).lengthSquared() <= radius*radius ? t : undefined;
-}
-
-/**
- * Collect every EngineObject3D a ray passes through, nearest first, the 3D twin of engineObjectsRaycast
- * - The ray has no end, so everything along it counts however far away it is
- * - Use render3D.pick for the nearest one on its own, with the distance to it
- * @param {Ray3D} ray - From render3D.screenToRay, or any ray
- * @param {Array<EngineObject>} [objects] - Defaults to every object; only those with a mesh or a sprite count
- * @return {Array<EngineObject3D>}
- * @memberof Render3D
- */
-function engineObjectsRaycast3D(ray, objects=engineObjects)
-{
-    const hits = [];
-    for (const o of objects)
-    {
-        const distance = render3DRaycastObject(ray, o);
-        if (distance !== undefined) // only a 3D object has a distance
-            hits.push({o: /** @type {EngineObject3D} */ (o), distance});
-    }
-    return hits.sort((a, b)=> a.distance - b.distance).map(hit=> hit.o);
-}
-
-/**
- * Call a function for each EngineObject3D whose box overlaps a sphere or a box
- * - An object destroyed by an earlier callback is skipped
- * @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 {function(EngineObject3D): void} callback
- * @param {Array<EngineObject>} [objects] - Defaults to every object
- * @param {boolean} [testCenters] - Test only each object's center, see engineObjectsCollect3D
- * @memberof Render3D
- */
-function engineObjectsCallback3D(pos, size, callback, objects=engineObjects, testCenters=false)
-{
-    for (const o of engineObjectsCollect3D(pos, size, objects, testCenters))
-        o.destroyed || callback(o);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-/**
- * InstancedMesh3D - Many copies of one mesh drawn as one call, with their transforms kept on the GPU
- * - For big sets that mostly stay put: an instance costs nothing per frame until it changes, so a hundred thousand
- *   trees cost what one tree does; objects and drawMesh batch by themselves too, but rebuild their batch every frame
- * - setTransformAt, setMatrixAt and setColorAt change one instance, and only the changed range uploads before the
- *   next draw; the matrices and the colors are kept apart, so moving instances uploads 64 bytes each
- * - For many instances moving every frame, setTransforms places a run of them from arrays of positions, rotations
- *   and scales in one loop, the fastest way; or write matrixData directly and call markDirtyRange
- * - The instances are in world space; the object's own pos3D, rotation3D and scale3D do not move them
- * - The whole set is culled by one bounding sphere around the origin, worked out when culling reads it, or set by hand
- *   with radius; it casts and receives shadows like any object
- * - The object's flags cover the whole set, one emissive, one tileInfo, one shader; only the colors are per instance
- * - A mirrored instance, one with a negative scale, shows its inside unless the mesh is doubleSided
- * - A transparent set draws in one go in the transparent stage, its instances are not sorted against each other;
- *   the set sorts against other transparent draws by the object's position, so put pos3D at its middle
- * - pick, the raycast and the collect helpers do not see the instances, test them yourself from matrixData
- * @extends EngineObject3D
- * @memberof Render3D
- * @example
- * const forest = new InstancedMesh3D(treeMesh, 1000);
- * for (let i = 0; i < 1000; ++i)
- *     forest.setTransformAt(i, randomGroundPos(), vec3(0, rand(2*PI), 0));
- */
-class InstancedMesh3D extends EngineObject3D
-{
-    /** Create a set of instances of a mesh, each at the origin in the object's color until it is set
-     *  @param {Mesh} mesh
-     *  @param {number} count - How many instances there is room for, all of them draw until count is lowered
-     *  @param {TileInfo|TextureInfo} [tileInfo] - Texture for all of them
-     *  @param {Color} [color] - The color they start with */
-    constructor(mesh, count, tileInfo, color=WHITE)
-    {
-        super(vec3(), mesh, tileInfo, color);
-        ASSERT(mesh instanceof Mesh, 'an InstancedMesh3D needs a Mesh');
-        ASSERT(count >= 1, 'an InstancedMesh3D needs room for at least one instance');
-        this.size3D = vec3(); // not a solid thing to pick or collect
-        /** @property {number} - How many instances draw, the first ones, up to the count it was made with */
-        this.count = count;
-        /** @property {number} - How many instances it was made with */
-        this.maxCount = count;
-        /** @property {Float32Array} - Each instance's matrix, 16 floats, what moving them uploads; edit it directly and
-         *  call markDirty for the instances changed */
-        this.matrixData = new Float32Array(count * RENDER3D_MATRIX_FLOATS);
-        /** @property {Float32Array} - Each instance's color and uv rect, 8 floats, uploaded only when they change; edit
-         *  it directly and call markColorDirty for the instances changed */
-        this.colorData = new Float32Array(count * RENDER3D_COLOR_FLOATS);
-        /** @property {number} - First instance whose matrix uploads before the next draw */
-        this.dirtyStart = 0;
-        /** @property {number} - One past the last instance whose matrix uploads, nothing when it is not past dirtyStart */
-        this.dirtyEnd = count;
-        /** @property {number} - First instance whose color uploads before the next draw */
-        this.colorDirtyStart = 0;
-        /** @property {number} - One past the last instance whose color uploads */
-        this.colorDirtyEnd = count;
-        // the farthest any instance's position has been from the origin, and the largest scale any has had, both
-        // squared, and the instances set since radius last took them in: setting one does no bounds work at all
-        this.reachSquared = 0;
-        this.scaleSquared = 0;
-        this.boundsStart = 0;
-        this.boundsEnd = count;
-        /** @type {number|undefined} */
-        this.fixedRadius = undefined; // a radius set by hand, see radius
-        this.buffer = undefined;      // the GPU copy of matrixData
-        /** @type {WebGLBuffer|undefined} */
-        this.colorBuffer = undefined; // and of colorData
-        this.bufferGeneration = -1;   // the context they were made under
-        this.uvTileInfo = tileInfo;   // the tile the uv rects were written for
-        const uv = render3DGetTileUVs(tileInfo), matrices = this.matrixData, colors = this.colorData;
-        for (let i = 0; i < count; ++i)
-        {
-            matrices.set(RENDER3D_IDENTITY.m, i * RENDER3D_MATRIX_FLOATS);
-            const k = i * RENDER3D_COLOR_FLOATS;
-            colors[k] = color.r; colors[k+1] = color.g; colors[k+2] = color.b; colors[k+3] = color.a;
-            colors[k+4] = uv.x; colors[k+5] = uv.y; colors[k+6] = uv.w; colors[k+7] = uv.h;
-        }
-    }
-
-    /** Place an instance by its position, rotation and scale, what buildMatrix takes, written straight in with no
-     *  matrix made; in world space
-     *  @param {number} i
-     *  @param {Vector3} [pos]
-     *  @param {Vector3} [rotation] - Euler angles in radians
-     *  @param {Vector3} [scale] */
-    setTransformAt(i, pos, rotation, scale)
-    {
-        ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        matrix4Compose(this.matrixData, i * RENDER3D_MATRIX_FLOATS, pos, rotation, scale);
-        this.markDirty(i);
-    }
-
-    /** Place a run of instances from arrays indexed by instance, plain or typed, as a game keeps them: each is placed
-     *  as setTransformAt places it, all in one loop with nothing made, the fastest way to move many every frame;
-     *  in world space
-     *  @param {number} start - First instance
-     *  @param {number} count - How many
-     *  @param {ArrayLike<number>} x - Positions
-     *  @param {ArrayLike<number>} y
-     *  @param {ArrayLike<number>} z
-     *  @param {ArrayLike<number>} [rx] - Euler angles in radians, all three or none for upright
-     *  @param {ArrayLike<number>} [ry]
-     *  @param {ArrayLike<number>} [rz]
-     *  @param {ArrayLike<number>} [sx] - Scales, all three or none for 1
-     *  @param {ArrayLike<number>} [sy]
-     *  @param {ArrayLike<number>} [sz] */
-    setTransforms(start, count, x, y, z, rx, ry, rz, sx, sy, sz)
-    {
-        ASSERT(start >= 0 && count >= 0 && start + count <= this.maxCount, 'instance range out of range');
-        ASSERT(!rx === !ry && !rx === !rz && !sx === !sy && !sx === !sz, 'rotations and scales come in threes');
-        const m = this.matrixData, end = start + count;
-        for (let i = start; i < end; ++i)
-        {
-            // matrix4Compose's expressions, so a run placed here is the same as each placed by setTransformAt
-            const k = i * RENDER3D_MATRIX_FLOATS;
-            const scaleX = sx ? sx[i] : 1, scaleY = sy ? sy[i] : 1, scaleZ = sz ? sz[i] : 1;
-            if (rx)
-            {
-                const cx = cos(rx[i]), sinX = sin(rx[i]);
-                const cy = cos(ry[i]), sinY = sin(ry[i]);
-                const cz = cos(rz[i]), sinZ = sin(rz[i]);
-                m[k]   = (cy*cz + sinY*sinX*sinZ) * scaleX;  m[k+1] = cx*sinZ * scaleX;
-                m[k+2] = (-sinY*cz + cy*sinX*sinZ) * scaleX;
-                m[k+4] = (-cy*sinZ + sinY*sinX*cz) * scaleY; m[k+5] = cx*cz * scaleY;
-                m[k+6] = (sinY*sinZ + cy*sinX*cz) * scaleY;
-                m[k+8] = sinY*cx * scaleZ;                   m[k+9] = -sinX * scaleZ; m[k+10] = cy*cx * scaleZ;
-            }
-            else
-            {
-                m[k]   = scaleX; m[k+1] = 0;      m[k+2]  = 0;
-                m[k+4] = 0;      m[k+5] = scaleY; m[k+6]  = 0;
-                m[k+8] = 0;      m[k+9] = 0;      m[k+10] = scaleZ;
-            }
-            m[k+3] = m[k+7] = m[k+11] = 0; m[k+15] = 1;
-            m[k+12] = x[i], m[k+13] = y[i], m[k+14] = z[i];
-        }
-        count && this.markDirtyRange(start, end);
-    }
-
-    /** Place an instance, in world space
-     *  @param {number} i
-     *  @param {Matrix4} matrix */
-    setMatrixAt(i, matrix)
-    {
-        ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        const data = this.matrixData, k = i * RENDER3D_MATRIX_FLOATS, m = matrix.m;
-        for (let j = 0; j < 16; ++j)
-            data[k+j] = m[j]; // for 16 floats a loop beats set's call
-        this.markDirty(i);
-    }
-
-    /** The matrix of an instance
-     *  @param {number} i
-     *  @return {Matrix4} */
-    getMatrixAt(i)
-    {
-        ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        const k = i * RENDER3D_MATRIX_FLOATS, matrix = new Matrix4;
-        matrix.m.set(this.matrixData.subarray(k, k + 16));
-        return matrix;
-    }
-
-    /** Color an instance
-     *  @param {number} i
-     *  @param {Color} color */
-    setColorAt(i, color)
-    {
-        ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        ASSERT(isColor(color), 'color must be a Color');
-        const data = this.colorData, k = i * RENDER3D_COLOR_FLOATS;
-        data[k] = color.r; data[k+1] = color.g; data[k+2] = color.b; data[k+3] = color.a;
-        this.markColorDirty(i);
-    }
-
-    /** Note that an instance's matrix changed, so it uploads before the next draw and the bounds take it in when
-     *  they are read; setTransformAt and setMatrixAt call this, and so must an edit made straight to matrixData
-     *  @param {number} i */
-    markDirty(i)
-    {
-        if (i < this.dirtyStart) this.dirtyStart = i;
-        if (i >= this.dirtyEnd) this.dirtyEnd = i + 1;
-        if (i < this.boundsStart) this.boundsStart = i;
-        if (i >= this.boundsEnd) this.boundsEnd = i + 1;
-    }
-
-    /** Note that a run of instances' matrices changed, for code that writes matrixData directly, the lowest level
-     *  way to move many: they upload before the next draw and the bounds take them in when they are read
-     *  @param {number} start - First instance
-     *  @param {number} end - One past the last */
-    markDirtyRange(start, end)
-    {
-        ASSERT(start >= 0 && end <= this.maxCount && start <= end, 'instance range out of range');
-        if (start < this.dirtyStart) this.dirtyStart = start;
-        if (end > this.dirtyEnd) this.dirtyEnd = end;
-        if (start < this.boundsStart) this.boundsStart = start;
-        if (end > this.boundsEnd) this.boundsEnd = end;
-    }
-
-    /** Note that an instance's color changed, so it uploads before the next draw; setColorAt calls this, and so must
-     *  an edit made straight to colorData
-     *  @param {number} i */
-    markColorDirty(i)
-    {
-        if (i < this.colorDirtyStart) this.colorDirtyStart = i;
-        if (i >= this.colorDirtyEnd) this.colorDirtyEnd = i + 1;
-    }
-
-    /** Radius of the sphere around the origin that holds every instance set so far, for culling: the farthest
-     *  instance, and the mesh's size at the largest scale; it only grows, and takes in the instances set since it
-     *  was last read, so with frustum culling off it is never worked out. Set it to fix the sphere, which a big set
-     *  that is culled can use to skip that work, and set it to undefined to go back to the bounds
-     *  @return {number} */
-    get radius()
-    {
-        if (this.fixedRadius !== undefined) return this.fixedRadius;
-        if (this.boundsEnd > this.boundsStart)
-        {
-            // the bounds grow to hold where each is now and how big, read back from its matrix, squared
-            const d = this.matrixData;
-            let reachSquared = this.reachSquared, scaleSquared = this.scaleSquared;
-            for (let i = this.boundsStart; i < this.boundsEnd; ++i)
-            {
-                const k = i * RENDER3D_MATRIX_FLOATS, x = d[k+12], y = d[k+13], z = d[k+14];
-                const reach = x*x + y*y + z*z, scale = render3DMaxStretchSquared(d, k);
-                if (reach > reachSquared) reachSquared = reach;
-                if (scale > scaleSquared) scaleSquared = scale;
-            }
-            this.reachSquared = reachSquared, this.scaleSquared = scaleSquared;
-            this.boundsStart = Infinity, this.boundsEnd = 0;
-        }
-        const mesh = this.mesh, meshRadius = mesh.radius || mesh.computeRadius(); // the mesh measured once
-        return this.reachSquared ** .5 + meshRadius * this.scaleSquared ** .5;
-    }
-    set radius(radius) { this.fixedRadius = radius; }
-
-    /** Draws every instance as one call, uploading the ones that changed first
-     *  @return {void} */
-    render3D()
-    {
-        const r = render3D, gl = glContext, mesh = this.mesh;
-        ASSERT(this.count >= 0 && this.count <= this.maxCount, 'count must be within the count it was made with');
-        if (r.transparentQueue) // sorted as one thing with the other transparent draws
-            return r.queueTransparent(this.getWorldPos3D(), ()=> this.render3D());
-        if (!mesh || !this.count || !render3DCanDraw()) return;
-        if (r.shadowPass && !r.lighting) return; // unlit things cast no shadow
-        render3DMeshUpload(mesh);
-        if (!mesh.bufferCount) return;
-        if (r.frustumCulling && !render3DSphereVisible(0, 0, 0, this.radius)) return;
-
-        // the uv rect is the object's tile for every instance, rewritten when the tile changes
-        if (this.uvTileInfo !== this.tileInfo)
-        {
-            const uv = render3DGetTileUVs(this.tileInfo), data = this.colorData;
-            for (let k = 4; k < data.length; k += RENDER3D_COLOR_FLOATS)
-                data[k] = uv.x, data[k+1] = uv.y, data[k+2] = uv.w, data[k+3] = uv.h;
-            this.uvTileInfo = this.tileInfo;
-            this.colorDirtyStart = 0, this.colorDirtyEnd = this.maxCount;
-        }
-
-        // the GPU copies: all of each under a fresh context, otherwise just the changed ranges
-        if (!this.buffer || this.bufferGeneration !== r.contextGeneration)
-        {
-            this.bufferGeneration = r.contextGeneration;
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer = gl.createBuffer());
-            gl.bufferData(gl.ARRAY_BUFFER, this.matrixData, gl.DYNAMIC_DRAW);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer = gl.createBuffer());
-            gl.bufferData(gl.ARRAY_BUFFER, this.colorData, gl.DYNAMIC_DRAW);
-        }
-        else
-        {
-            const upload = (buffer, data, floats, start, end)=>
-            {
-                if (end <= start) return;
-                gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-                gl.bufferSubData(gl.ARRAY_BUFFER, start * floats * 4, data, start * floats, (end - start) * floats);
-            };
-            upload(this.buffer, this.matrixData, RENDER3D_MATRIX_FLOATS, this.dirtyStart, this.dirtyEnd);
-            upload(this.colorBuffer, this.colorData, RENDER3D_COLOR_FLOATS, this.colorDirtyStart, this.colorDirtyEnd);
-        }
-        this.dirtyStart = this.colorDirtyStart = Infinity, this.dirtyEnd = this.colorDirtyEnd = 0;
-
-        // one draw under the object's state, the mesh setting the culling as drawMesh does
-        r.flush();
-        render3DFlushBeforeOverlay(); // as in drawMesh, what was drawn before goes under it
-        const cullBackFaces = r.cullBackFaces, tileInfo = this.tileInfo;
-        r.cullBackFaces = !mesh.doubleSided;
-        render3DDrawInstanced(mesh, this.buffer, this.count, render3DTextureOf(tileInfo), r, this.colorBuffer);
-        r.cullBackFaces = cullBackFaces;
-    }
-
-    /** Destroy the set and free its GPU buffer
-     *  @param {boolean} [immediate] */
-    destroy(immediate)
-    {
-        if (this.buffer && this.bufferGeneration === render3D?.contextGeneration)
-            glContext?.deleteBuffer(this.buffer), glContext?.deleteBuffer(this.colorBuffer);
-        this.buffer = this.colorBuffer = undefined;
-        super.destroy(immediate);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-/**
- * Light3D - A light that is an EngineObject3D, so it can move, follow a parent or be destroyed like anything else
- * - A point light: it lights what is near it and fades out by its radius, DirectionalLight3D shines from far away
- * - A coneAngle makes it a spotlight: it shines along its own forward, turned by rotation3D or by what it is
- *   attached to, inside the cone, fading over the part of it coneSoftness says
- * - The sun, render3D.sunDirection, casts the shadows; a spotlight can cast them in its place, see
- *   render3D.shadowLight; the other lights light and make highlights without one
- * - Only the 8 lights nearest the camera are used each frame
- * - radius is where the light fades out, and it fades fast, so a small radius wants a higher intensity
- * - intensity multiplies the color, above 1 for a light brighter than white
- * - radius is a world distance, so scale3D does not change it
- * - An alpha, an intensity or a radius of 0 switches it off, and a light that is off takes none of those slots
- * - Draws nothing but its glow, when it has one; add a small emissive mesh if the lamp itself should be seen
- * - addFlare gives it a lens flare, see LensFlare3D
- * @extends EngineObject3D
- * @memberof Render3D
- * @example
- * const torch = new Light3D(vec3(0, 3, 0), 10, hsl(.1, 1, .65));
- * torch.addFlare();   // light in the lens when the torch is in view
- */
-class Light3D extends EngineObject3D
-{
-    /** Create a point light
-     *  @param {Vector3} [pos3D] - Where it is
-     *  @param {number} [radius] - Distance where the light fades to nothing
-     *  @param {Color} [color] - Light color, its alpha fades it
-     *  @param {number} [intensity] - Brightness, multiplies the color, above 1 is brighter than white */
-    constructor(pos3D=vec3(), radius=5, color=WHITE, intensity=1)
-    {
-        super(pos3D, undefined, undefined, color);
-        ASSERT(radius >= 0, 'light radius cannot be negative, 0 is an off switch like an alpha of 0');
-        ASSERT(intensity >= 0, 'light intensity cannot be negative, 0 is an off switch');
-        this.size3D = vec3(); // not a solid thing to pick or collect
-        /** @property {number} - Distance where the light fades to nothing */
-        this.radius = radius;
-        /** @property {number} - Brightness, multiplies the color, above 1 is brighter than white */
-        this.intensity = intensity;
-        /** @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} - Makes it a spotlight: the angle in radians from its forward out to the edge of its
-         *  cone, so the beam is twice this across; 0 for a light that shines every way */
-        this.coneAngle = 0;
-        /** @property {number} - How much of the cone is its fading edge: 0 a hard edge, .2 by default, the outer
-         *  fifth, 1 fading all the way from the middle of the beam */
-        this.coneSoftness = .2;
-        /** @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;
-        /** @property {TextureInfo|TileInfo|undefined} - A gel: a picture the light shines through, like a stained glass
-         *  window or the leaves of a tree, cast along its cone in its colors, upright as the light looks out, the whole
-         *  texture of a TileInfo; only the spotlight that casts the shadows has one, with render3D.shadows on and it
-         *  as render3D.shadowLight, and only on what takes its shadows: an object with receiveShadow off is lit
-         *  without the gel; its alpha is not read, see through panes are dark
-         *  @type {TextureInfo|TileInfo|undefined} */
-        this.gel = undefined;
-        this.additive = true; // the glow is added on, in the transparent stage; a light with none draws nothing
-        /** @type {LensFlare3D|undefined} */
-        this.flareObject = undefined;
-    }
-
-    /** Give the light a lens flare, made with the arguments of LensFlare3D, in place of the one it had
-     *  @param {number} [size] - Scales every part of it
-     *  @param {number} [count] - How many ghosts there are, besides the glow at the light
-     *  @param {number} [intensity] - How bright it is
-     *  @param {number} [saturation] - How colorful the ghosts are
-     *  @param {Color} [color] - Tints the flare, with the light's own color
-     *  @return {LensFlare3D} - The flare, to change: light.addFlare().shapes = ['hex'] */
-    addFlare(size, count, intensity, saturation, color)
-    {
-        const flare = new LensFlare3D(size, count, intensity, saturation, color);
-        this.flare = flare;
-        return flare;
-    }
-
-    /** The light's lens flare, undefined for none: addFlare makes it, or set a LensFlare3D of your own, and
-     *  destroying the flare takes it away
-     *  - The flare is the light's: it is attached to the light as its child, so it stays through a scene change
-     *    when the light does, and is destroyed with the light or when another takes its place
-     *  @type {LensFlare3D|undefined} */
-    get flare() { return this.flareObject && !this.flareObject.destroyed ? this.flareObject : undefined; }
-
-    set flare(flare)
-    {
-        const old = this.flare; // a flare that was destroyed on its own is no flare
-        if (flare === old) return;
-        old && old.destroy();
-        if (flare)
-        {
-            flare.light = this;
-            flare.parent || this.addChild(flare);
-        }
-        this.flareObject = flare || undefined;
-    }
-
-    /** Destroy the light, and its flare with it
-     *  @param {boolean} [immediate] */
-    destroy(immediate)
-    {
-        this.flare = undefined;
-        super.destroy(immediate);
-    }
-
-    /** 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)), texture = engineGlowTexture(this.glowFalloff);
-        // a browser that can not make the glow's texture draws no glow, not a plain square
-        if (texture || !glContext)
-            r.drawBillboard(at, vec2(this.glow), texture, color);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-/**
- * DirectionalLight3D - A Light3D that shines from far away with no falloff, like sunlight
- * - It shines from its position toward the origin, like a three.js DirectionalLight: only the direction to it
- *   counts, so moving it or its parent swings the light around; parent it to a sun in the sky and it follows
- * - It cannot sit on the origin, since that leaves no direction
- * - It casts no shadow: the sun, render3D.sunDirection, does, or a spotlight set as render3D.shadowLight
- * @extends Light3D
- * @memberof Render3D
- * @example
- * const fill = new DirectionalLight3D(vec3(-1, 1, 1), hsl(.6, .5, .3)); // from the back left and above
- */
-class DirectionalLight3D extends Light3D
-{
-    /** Create a directional light
-     *  @param {Vector3} [pos3D] - Where it shines from, toward the origin
-     *  @param {Color} [color] - Light color, its alpha fades it
-     *  @param {number} [intensity] - Brightness, multiplies the color, above 1 is brighter than white */
-    constructor(pos3D=vec3(0, 1, 0), color=WHITE, intensity=1)
-    {
-        super(pos3D, 0, color, intensity);
-        this.directional = true;
-    }
-}