littlejsengine 1.20.0 → 1.22.0

package/plugins/render3d.js

@@ -29,6 +29,9 @@ const RENDER3D_VERTEX_BYTES = RENDER3D_VERTEX_FLOATS * 4;
 // uv rect (12); constants for one draw, one per instance for a batch; the shader derives the normal matrix
 const RENDER3D_INSTANCE_FLOATS = 24;
 const RENDER3D_INSTANCE_BYTES = RENDER3D_INSTANCE_FLOATS * 4;
+// an InstancedMesh3D keeps them apart: 16 floats of matrix, and 8 of tint and uv rect uploaded only when they change
+const RENDER3D_MATRIX_FLOATS = 16;
+const RENDER3D_COLOR_FLOATS = 8;
 const RENDER3D_INSTANCE_ATTRIBS = [[4, 4, 0], [5, 4, 16], [6, 4, 32], [7, 4, 48], [11, 4, 64], [12, 4, 80]];
 const RENDER3D_VERTEX_INPUTS =
     'layout(location=0) in vec3 p;layout(location=1) in vec3 n;layout(location=2) in vec2 t;layout(location=3) in vec4 c;' +
@@ -72,18 +75,49 @@ function render3DCanDraw()
 }
 
 // the draw state fields a batch is drawn under; lights and fog are not captured, they are read live at flush
-// the three functions below write them out by hand for speed, so a new field goes in all four
+// each is an accessor on the plugin over render3D.drawState, and a real change moves render3D.stateVersion, so a
+// batch checks that one number at each draw while the state holds; the three functions below write the fields out
+// by hand for speed, so a new field goes in all four, in drawState and gets an accessor; emissiveMapColor is
+// compared by its rgb, so two objects with equal colors batch
+/** The draw state's values, behind render3D's accessors, and the rgb emissiveMapColor had when it was set
+ *  @typedef {Object} Render3DDrawState
+ *  @property {boolean} blend
+ *  @property {boolean} additive
+ *  @property {boolean} depthTest
+ *  @property {boolean} depthWrite
+ *  @property {boolean} cullBackFaces
+ *  @property {boolean} mirrored
+ *  @property {boolean} lighting
+ *  @property {number} emissive
+ *  @property {boolean} receiveShadow
+ *  @property {number} specular
+ *  @property {boolean} pixelated
+ *  @property {Shader|undefined} shader
+ *  @property {TextureInfo|undefined} normalMap
+ *  @property {number} normalScale
+ *  @property {number} shininess
+ *  @property {number} reflectivity
+ *  @property {TextureInfo|undefined} emissiveMap
+ *  @property {Color} emissiveMapColor
+ *  @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'];
+    'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader', 'normalMap', 'normalScale', 'shininess',
+    'reflectivity', 'emissiveMap', 'emissiveMapColor'];
 
-// a copy of the draw state in one fixed shape, the fields of RENDER3D_STATE_FIELDS written out so the
-// compare below stays a handful of direct reads, it runs for every instance drawn
+// 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
 function render3DCaptureBatchState()
 {
-    const r = render3D;
-    return {blend: r.blend, additive: r.additive, depthTest: r.depthTest, depthWrite: r.depthWrite,
-        cullBackFaces: r.cullBackFaces, mirrored: r.mirrored, lighting: r.lighting, emissive: r.emissive,
-        receiveShadow: r.receiveShadow, specular: r.specular, pixelated: r.pixelated, shader: r.shader};
+    const r = render3D, d = r.drawState;
+    return {blend: d.blend, additive: d.additive, depthTest: d.depthTest, depthWrite: d.depthWrite,
+        cullBackFaces: d.cullBackFaces, mirrored: d.mirrored, lighting: d.lighting, emissive: d.emissive,
+        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};
 }
 
 // put a captured draw state back, written out the same way; the transparent stage does this for every queued draw
@@ -92,23 +126,34 @@ function render3DApplyBatchState(s)
     const r = render3D;
     r.blend = s.blend, r.additive = s.additive, r.depthTest = s.depthTest, r.depthWrite = s.depthWrite,
     r.cullBackFaces = s.cullBackFaces, r.mirrored = s.mirrored, r.lighting = s.lighting, r.emissive = s.emissive,
-    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader;
+    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader,
+    r.normalMap = s.normalMap, r.normalScale = s.normalScale, r.shininess = s.shininess,
+    r.reflectivity = s.reflectivity, r.emissiveMap = s.emissiveMap, r.emissiveMapColor = s.emissiveMapColor;
 }
 
-// true when the current draw state differs from a captured one, so a pending batch must flush first
+// true when the current draw state differs from a captured one, so a pending batch must flush first; it runs for
+// every instance drawn, so while nothing was set since the capture it checks the version alone
 function render3DStateChanged(s)
 {
     const r = render3D;
-    return r.blend !== s.blend || r.additive !== s.additive || r.depthTest !== s.depthTest
-        || r.depthWrite !== s.depthWrite || r.cullBackFaces !== s.cullBackFaces || r.mirrored !== s.mirrored
-        || r.lighting !== s.lighting || r.emissive !== s.emissive || r.receiveShadow !== s.receiveShadow
-        || r.specular !== s.specular || r.pixelated !== s.pixelated || r.shader !== s.shader;
+    if (s.version === r.stateVersion) return false;
+    const d = r.drawState, c = s.emissiveMapColor;
+    if (d.blend !== s.blend || d.additive !== s.additive || d.depthTest !== s.depthTest
+        || d.depthWrite !== s.depthWrite || d.cullBackFaces !== s.cullBackFaces || d.mirrored !== s.mirrored
+        || d.lighting !== s.lighting || d.emissive !== s.emissive || d.receiveShadow !== s.receiveShadow
+        || 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)
+        return true;
+    s.version = r.stateVersion; // set and set back to what it was: the batch goes on, checking the version again
+    return false;
 }
 
 // whether a sphere is inside the view, or the shadow map's box during the shadow pass, without a vector
 function render3DSphereVisible(x, y, z, radius)
 {
-    const planes = render3D.shadowPass ? render3D.shadowPlanes : render3D.frustumPlanes;
+    const planes = render3D.shadowPass && !render3D.depthPass ? render3D.shadowPlanes : render3D.frustumPlanes;
     for (let i = 0; i < planes.length; ++i)
     {
         const p = planes[i];
@@ -180,7 +225,10 @@ function render3DMaxScale(m)
 // how far a matrix at offset k can move a point that is one unit from its origin, for a bounding sphere: the
 // longest axis when the axes are square to each other, more when they are not, as a turned child under a parent
 // scaled on one axis leaves them; the axes' dot products bound the largest stretch by their largest row sum
-function render3DMaxStretch(m, k=0)
+function render3DMaxStretch(m, k=0) { return render3DMaxStretchSquared(m, k) ** .5; }
+
+// the same, squared, for bounds that grow many times before they are read
+function render3DMaxStretchSquared(m, k=0)
 {
     const xx = m[k]*m[k] + m[k+1]*m[k+1] + m[k+2]*m[k+2];
     const yy = m[k+4]*m[k+4] + m[k+5]*m[k+5] + m[k+6]*m[k+6];
@@ -188,7 +236,7 @@ function render3DMaxStretch(m, k=0)
     const xy = abs(m[k]*m[k+4] + m[k+1]*m[k+5] + m[k+2]*m[k+6]);
     const xz = abs(m[k]*m[k+8] + m[k+1]*m[k+9] + m[k+2]*m[k+10]);
     const yz = abs(m[k+4]*m[k+8] + m[k+5]*m[k+9] + m[k+6]*m[k+10]);
-    return max(xx + xy + xz, yy + xy + yz, zz + xz + yz) ** .5;
+    return max(xx + xy + xz, yy + xy + yz, zz + xz + yz);
 }
 
 // a quad as a strip from its center and half axes, the same corner order as render3DQuadStrip
@@ -208,6 +256,15 @@ function render3DSetObjectState(o)
     r.emissive = emissive;
     r.additive = !!o?.additive;
     r.specular = o?.specular || 0;
+    const shininess = o?.shininess ?? 16, reflectivity = o?.reflectivity || 0;
+    ASSERT(isNumber(shininess) && shininess > 0, 'shininess must be a number above 0', shininess);
+    ASSERT(isNumber(reflectivity) && reflectivity >= 0 && reflectivity <= 1, 'reflectivity must be 0 to 1', reflectivity);
+    r.shininess = shininess;
+    r.reflectivity = reflectivity;
+    r.normalMap = o?.normalMap || undefined;
+    r.normalScale = o?.normalScale ?? 1;
+    r.emissiveMap = o?.emissiveMap || undefined;
+    r.emissiveMapColor = o?.emissiveMapColor || WHITE;
     r.receiveShadow = !o || o.receiveShadow;
     r.cullBackFaces = r.mirrored = false; // each mesh sets these as it draws
     r.pixelated = !!o?.pixelated;
@@ -229,10 +286,11 @@ function render3DDrawObjects(objects)
     render3DSetObjectState();
 }
 
-// add a draw of a mesh to its batch; a batch is one mesh under one texture and draw state, so a change flushes it
+// add a draw of a mesh to its batch; a batch is one mesh under one texture and draw state, so a change flushes it,
+// and under one winding: a mirroring transform, one with a negative determinant, turns it around
 function render3DInstance(mesh, matrix, tileInfo, color)
 {
-    const k = render3DInstanceSlot(mesh, render3DTextureOf(tileInfo)), data = mesh.instanceData;
+    const k = render3DInstanceSlot(mesh, render3DTextureOf(tileInfo), render3DMirrors(matrix)), data = mesh.instanceData;
     data.set(matrix.m, k);
     // the tint; this batch is never blended, so in the shadow pass the depth shader cuts it by its texture alpha
     // alone, a see through caster draws blended instead and is cut by its tint alpha too
@@ -243,14 +301,18 @@ function render3DInstance(mesh, matrix, tileInfo, color)
 
 // make room for one more instance of a mesh under a texture and the current draw state, flushing a batch that
 // differs first, and return where its 24 floats go in mesh.instanceData: the matrix, the tint and the uv rect
-function render3DInstanceSlot(mesh, textureInfo)
+// drawMesh passes whether its matrix mirrors, and its batch then culls by the mesh and winds by that at the flush,
+// so it never sets the draw state for them, which would move the state's version at every draw
+function render3DInstanceSlot(mesh, textureInfo, mirrored)
 {
     const r = render3D;
-    if (mesh.instanceCount && (mesh.instanceTextureInfo !== textureInfo || render3DStateChanged(mesh.instanceState)))
+    if (mesh.instanceCount && (mesh.instanceTextureInfo !== textureInfo || mesh.instanceMirrored !== mirrored
+        || render3DStateChanged(mesh.instanceState)))
         render3DFlushInstances(mesh);
     if (!mesh.instanceCount)
     {
         mesh.instanceTextureInfo = textureInfo;
+        mesh.instanceMirrored = mirrored;
         mesh.instanceState = render3DCaptureBatchState();
         r.instanceMeshes.push(mesh);
     }
@@ -281,7 +343,10 @@ function render3DFlushInstances(only)
         const buffers = r.instanceBuffers, buffer = buffers[r.instanceBufferIndex = (r.instanceBufferIndex + 1) % buffers.length];
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, mesh.instanceData, gl.DYNAMIC_DRAW, 0, count * RENDER3D_INSTANCE_FLOATS);
-        render3DDrawInstanced(mesh, buffer, count, mesh.instanceTextureInfo, mesh.instanceState);
+        const state = mesh.instanceState;
+        if (mesh.instanceMirrored !== undefined) // a drawMesh batch: culled by its mesh, wound by its matrices
+            state.cullBackFaces = !mesh.doubleSided, state.mirrored = mesh.instanceMirrored;
+        render3DDrawInstanced(mesh, buffer, count, mesh.instanceTextureInfo, state);
     }
     if (!only)
         r.instanceMeshes.length = 0;
@@ -296,13 +361,16 @@ function render3DFlushInstances(only)
 // the arrays are turned on with their instance divisor for this one call and both are turned off after: a single
 // draw reads these slots as constant attributes, and in Firefox a draw that reads a constant through a slot whose
 // divisor is set leaves the next batch on that slot reading the wrong values
-function render3DDrawInstanced(mesh, buffer, count, textureInfo, state)
+// colorBuffer holds the tint and uv rect apart from the matrices, as an InstancedMesh3D keeps them
+function render3DDrawInstanced(mesh, buffer, count, textureInfo, state, colorBuffer)
 {
-    const gl = glContext;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    const gl = glContext, matrixBytes = RENDER3D_MATRIX_FLOATS * 4;
     for (const [location, size, offset] of RENDER3D_INSTANCE_ATTRIBS)
     {
-        gl.vertexAttribPointer(location, size, gl.FLOAT, false, RENDER3D_INSTANCE_BYTES, offset);
+        const inColors = colorBuffer && offset >= matrixBytes;
+        const stride = !colorBuffer ? RENDER3D_INSTANCE_BYTES : inColors ? RENDER3D_COLOR_FLOATS * 4 : matrixBytes;
+        gl.bindBuffer(gl.ARRAY_BUFFER, inColors ? colorBuffer : buffer);
+        gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, inColors ? offset - matrixBytes : offset);
         gl.enableVertexAttribArray(location);
         gl.vertexAttribDivisor(location, 1);
     }
@@ -347,11 +415,36 @@ function render3DCollectLights()
         for (const light of lights)
             distances.set(light, light.directional ? -1 : light.getWorldPos3D().distanceSquared(cameraPos));
         lights.sort((a, b)=> distances.get(a) - distances.get(b));
+        // the light that casts the shadows keeps a slot however far it is, in place of the farthest
+        const caster = render3DShadowCaster();
+        if (caster && lights.indexOf(caster) >= RENDER3D_MAX_LIGHTS)
+            lights[RENDER3D_MAX_LIGHTS - 1] = caster;
         lights.length = RENDER3D_MAX_LIGHTS;
     }
     return lights;
 }
 
+// the spotlight that casts the shadows in place of the sun: render3D.shadowLight while it is a light that is on
+// and has a cone, undefined for the sun
+function render3DShadowCaster()
+{
+    const light = render3D.shadowLight;
+    return light && !light.destroyed && !light.directional && light.coneAngle > 0 && light.radius > 0 &&
+        light.intensity > 0 && light.color.a > 0 ? light : undefined;
+}
+
+// a light's cone as the four numbers the shader gets: the way it shines, scaled so that its dot with the way to
+// a point, less the fourth number, is 0 at the edge of the cone and 1 where its fade starts; a light with no cone
+// gets numbers that make it 1 every way
+function render3DLightCone(light)
+{
+    const angle = light.directional ? 0 : min(light.coneAngle, PI);
+    if (!(angle > 0)) return [0, 0, 0, -1];
+    const outer = cos(angle), inner = cos(angle * (1 - clamp(light.coneSoftness)));
+    const k = 1 / max(inner - outer, 1e-4), forward = light.getForward3D();
+    return [forward.x * k, forward.y * k, forward.z * k, outer * k];
+}
+
 // unit circle directions for a number of sides, [cos, sin, cos, sin, ...] including the closing point, cached
 const render3DCircleCache = new Map;
 function render3DCircle(sides)
@@ -403,7 +496,15 @@ class Render3DPlugin
     {
         ASSERT(!render3D, 'Render3D plugin already initialized');
         render3D = this;
-        ASSERT(Object.keys(render3DCaptureBatchState()).join() === RENDER3D_STATE_FIELDS.join(),
+        // the draw state, read at each draw through the accessors below the constructor
+        /** @type {Render3DDrawState} */
+        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};
+        /** @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(),
             'the batch state functions must list RENDER3D_STATE_FIELDS');
 
         /** @property {Camera3D} - The camera */
@@ -441,11 +542,24 @@ class Render3DPlugin
          *  flat faces */
         this.smoothShading = false;
 
+        /** @property {boolean} - Draw the camera's depth into a texture each frame for post processing:
+         *  PostProcessPlugin hands it to its shader as iChannel2, read with sceneDepth(uv); off by default and free
+         *  when off, on it draws the solid objects of the default layer once more, depth only */
+        this.depthTexture = false;
+
         // shadows
         /** @property {boolean} - Cast real shadows from the sun, off by default and free when off */
         this.shadows = false;
+        /** @property {number} - How far a sound played with playSound is heard when it was made with no range of
+         *  its own, in world units; further than the 2D soundDefaultRange, a 3D world is bigger */
+        this.soundDefaultRange = 100;
         /** @property {number} - Size of the shadow map in pixels, bigger is sharper and slower */
         this.shadowMapSize = 1024;
+        /** @property {Light3D|undefined} - A spotlight, a Light3D with a coneAngle, to cast the shadows in place
+         *  of the sun, a flashlight in the dark: the shadow map looks down its cone, as far as its radius, and the
+         *  sun still lights the scene but casts none; undefined for the sun, as is a light that is off or has no cone
+         *  @type {Light3D|undefined} */
+        this.shadowLight = undefined;
         /** @property {number} - World size the shadow map covers around shadowCenter, smaller is sharper; it is a
          *  square facing the light, so it turns as the light does, and about 1.5 times an area's width covers it from
          *  any angle */
@@ -458,35 +572,6 @@ class Render3DPlugin
         /** @property {number} - How much to blur the shadow edges */
         this.shadowSoftness = 1;
 
-        // draw state, read at each draw
-        /** @property {boolean} - Apply lighting, when false draws plain vertex color times texture and casts no shadow;
-         *  off for billboards, lines, ribbons and soft discs, an object sets emissive instead */
-        this.lighting = true;
-        /** @property {number} - How much a surface lights itself, set per object by its emissive */
-        this.emissive = 0;
-        /** @property {boolean} - Additive blending instead of alpha, in the transparent stage */
-        this.additive = false;
-        /** @property {boolean} - Test against the depth buffer, reset to true before each object and callback; a draw
-         *  with it off goes over what was drawn before it and under what is drawn after, by render order, which
-         *  ends the batch of meshes before it, so one per object costs a draw per object */
-        this.depthTest = true;
-        /** @property {boolean} - Write to the depth buffer, owned by the stages: on for opaque, off for transparent */
-        this.depthWrite = true;
-        // batch state set by drawMesh from each mesh: whether its back faces are skipped, off for strips so they
-        // show from both sides, and whether its transform mirrors it so the other winding is the front
-        this.cullBackFaces = false;
-        this.mirrored = false;
-        /** @property {number} - Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and
-         *  1 adds a light's full color at its brightest; its size is fixed */
-        this.specular = 0;
-        /** @property {Shader|undefined} - Custom Shader for the next draws, set from each object's shader; undefined
-         *  draws with the plugin's own
-         *  @type {Shader|undefined} */
-        this.shader = undefined;
-        /** @property {boolean} - Darken by the shadow map when shadows are on, turn it off for things that should stay
-         *  lit inside a shadow */
-        this.receiveShadow = true;
-
         // the pass
         /** @property {Function|undefined} - Draw solid world here, it runs again for shadows so only draw in it
          *  @type {Function|undefined} */
@@ -509,9 +594,6 @@ class Render3DPlugin
         /** @property {boolean} - Sample textures through mipmaps so they do not shimmer in the distance, false uses
          *  each texture's own filtering like 2D */
         this.mipmaps = true;
-        /** @property {boolean} - Draw state: keep texture pixels hard edged, no mipmaps and no blending between them,
-         *  set per object by pixelated */
-        this.pixelated = false;
         /** @property {number} - Anisotropic filtering for textures seen at an angle, 1 to 16, 1 is off; needs mipmaps */
         this.anisotropy = 4;
 
@@ -555,7 +637,6 @@ class Render3DPlugin
         this.cameraBack = vec3(0, 0, 1); // its opposite, the normal of camera facing draws
 
         // internal state
-        this.blend = false;          // blending on, set by the stages
         /** @type {Array<Array<number>>} */
         this.frustumPlanes = [];     // the view as six inward planes [x, y, z, w]
         /** @type {Array<Array<number>>} */
@@ -580,6 +661,13 @@ class Render3DPlugin
         /** @type {WebGLFramebuffer|undefined} */
         this.shadowFramebuffer = undefined;
         this.shadowTextureSize = 0;
+        /** @type {WebGLTexture|undefined} */
+        this.cameraDepthTexture = undefined; // the camera's depth, drawn when depthTexture is on
+        /** @type {WebGLFramebuffer|undefined} */
+        this.cameraDepthFramebuffer = undefined;
+        this.cameraDepthWidth = 0;
+        this.cameraDepthHeight = 0;
+        this.depthPass = false; // drawing the camera's depth, a shadow pass seen from the camera
         this.contextGeneration = 0;  // counts context losses, a mesh uploaded under an older one uploads again
         this.uniforms = new Map;     // uniform locations by program
         /** @type {Object<string, Array<number>>} */
@@ -588,6 +676,9 @@ class Render3DPlugin
         this.passIsDefault = true;   // the running pass is the default layer, the only one shadowed
         this.lightPositions = new Float32Array(RENDER3D_MAX_LIGHTS * 4); // Light3D uniforms, filled each pass
         this.lightColors = new Float32Array(RENDER3D_MAX_LIGHTS * 4);
+        this.lightCones = new Float32Array(RENDER3D_MAX_LIGHTS * 4); // each light's cone, see render3DLightCone
+        this.shadowLightIndex = -1;  // which of the lights sent casts the shadows, -1 for the sun
+        this.shadowDepthBias = 0;    // the bias as the shadow lookup takes it, set with the shadow matrix
 
         // the stream of immediate mode draws
         /** @type {WebGLBuffer|undefined} */
@@ -615,6 +706,116 @@ class Render3DPlugin
         engineAddPlugin(undefined, render3DRender, render3DContextLost, render3DContextRestored, render3DPreRender);
     }
 
+    ///////////////////////////////////////////////////////////////////////////
+    // Draw state: each field an accessor over drawState, whose setter moves stateVersion only on a real change
+
+    /** Apply lighting, when false draws plain vertex color times texture and casts no shadow;
+     *  off for billboards, lines, ribbons and soft discs, an object sets emissive instead
+     *  @return {boolean} */
+    get lighting() { return this.drawState.lighting; }
+    set lighting(v) { const d = this.drawState; d.lighting === v || (d.lighting = v, ++this.stateVersion); }
+
+    /** How much a surface lights itself, set per object by its emissive
+     *  @return {number} */
+    get emissive() { return this.drawState.emissive; }
+    set emissive(v) { const d = this.drawState; d.emissive === v || (d.emissive = v, ++this.stateVersion); }
+
+    /** Additive blending instead of alpha, in the transparent stage
+     *  @return {boolean} */
+    get additive() { return this.drawState.additive; }
+    set additive(v) { const d = this.drawState; d.additive === v || (d.additive = v, ++this.stateVersion); }
+
+    /** Test against the depth buffer, reset to true before each object and callback; a draw
+     *  with it off goes over what was drawn before it and under what is drawn after, by render order, which
+     *  ends the batch of meshes before it, so one per object costs a draw per object
+     *  @return {boolean} */
+    get depthTest() { return this.drawState.depthTest; }
+    set depthTest(v) { const d = this.drawState; d.depthTest === v || (d.depthTest = v, ++this.stateVersion); }
+
+    /** Write to the depth buffer, owned by the stages: on for opaque, off for transparent
+     *  @return {boolean} */
+    get depthWrite() { return this.drawState.depthWrite; }
+    set depthWrite(v) { const d = this.drawState; d.depthWrite === v || (d.depthWrite = v, ++this.stateVersion); }
+
+    /** Skip back faces, set by drawMesh from each mesh: off for strips so they show from
+     *  both sides
+     *  @return {boolean} */
+    get cullBackFaces() { return this.drawState.cullBackFaces; }
+    set cullBackFaces(v) { const d = this.drawState; d.cullBackFaces === v || (d.cullBackFaces = v, ++this.stateVersion); }
+
+    /** The transform mirrors the draw, so the other winding is the front, set by drawMesh
+     *  from each transform
+     *  @return {boolean} */
+    get mirrored() { return this.drawState.mirrored; }
+    set mirrored(v) { const d = this.drawState; d.mirrored === v || (d.mirrored = v, ++this.stateVersion); }
+
+    /** 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
+     *  @return {number} */
+    get specular() { return this.drawState.specular; }
+    set specular(v) { const d = this.drawState; d.specular === v || (d.specular = v, ++this.stateVersion); }
+
+    /** The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 100 sharp
+     *  like polished metal; set from each object's shininess
+     *  @return {number} */
+    get shininess() { return this.drawState.shininess; }
+    set shininess(v) { const d = this.drawState; d.shininess === v || (d.shininess = v, ++this.stateVersion); }
+
+    /** Normal map for the next draws, set from each object's normalMap
+     *  @return {TextureInfo|undefined} */
+    get normalMap() { return this.drawState.normalMap; }
+    set normalMap(v) { const d = this.drawState; d.normalMap === v || (d.normalMap = v, ++this.stateVersion); }
+
+    /** How strongly the normal map bends the surface, set from each object's normalScale
+     *  @return {number} */
+    get normalScale() { return this.drawState.normalScale; }
+    set normalScale(v) { const d = this.drawState; d.normalScale === v || (d.normalScale = v, ++this.stateVersion); }
+
+    /** How much the surface reflects the sky, 0 to 1, set from each object's reflectivity
+     *  @return {number} */
+    get reflectivity() { return this.drawState.reflectivity; }
+    set reflectivity(v) { const d = this.drawState; d.reflectivity === v || (d.reflectivity = v, ++this.stateVersion); }
+
+    /** Emissive map for the next draws, set from each object's emissiveMap
+     *  @return {TextureInfo|undefined} */
+    get emissiveMap() { return this.drawState.emissiveMap; }
+    set emissiveMap(v) { const d = this.drawState; d.emissiveMap === v || (d.emissiveMap = 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} */
+    get emissiveMapColor() { return this.drawState.emissiveMapColor; }
+    set emissiveMapColor(v)
+    {
+        const d = this.drawState, c = v || WHITE;
+        d.emissiveMapColor = v;
+        if (c.r !== d.emissiveR || c.g !== d.emissiveG || c.b !== d.emissiveB)
+            d.emissiveR = c.r, d.emissiveG = c.g, d.emissiveB = c.b, ++this.stateVersion;
+    }
+
+    /** Custom Shader for the next draws, set from each object's shader; undefined draws
+     *  with the plugin's own
+     *  @return {Shader|undefined} */
+    get shader() { return this.drawState.shader; }
+    set shader(v) { const d = this.drawState; d.shader === v || (d.shader = v, ++this.stateVersion); }
+
+    /** Darken by the shadow map when shadows are on, turn it off for things that should
+     *  stay lit inside a shadow
+     *  @return {boolean} */
+    get receiveShadow() { return this.drawState.receiveShadow; }
+    set receiveShadow(v) { const d = this.drawState; d.receiveShadow === v || (d.receiveShadow = v, ++this.stateVersion); }
+
+    /** Keep texture pixels hard edged, no mipmaps and no blending between them, set per
+     *  object by pixelated
+     *  @return {boolean} */
+    get pixelated() { return this.drawState.pixelated; }
+    set pixelated(v) { const d = this.drawState; d.pixelated === v || (d.pixelated = v, ++this.stateVersion); }
+
+    /** Blending on, set by the stages
+     *  @return {boolean} */
+    get blend() { return this.drawState.blend; }
+    set blend(v) { const d = this.drawState; d.blend === v || (d.blend = v, ++this.stateVersion); }
+
     ///////////////////////////////////////////////////////////////////////////
     // Matrices and picking
 
@@ -724,7 +925,8 @@ class Render3DPlugin
     }
 
     /** Play a sound at a 3D position, quieter with distance from the camera and panned by its side, like Sound.play
-     *  with a 2D position
+     *  with a 2D position; a sound made with no range of its own is heard to soundDefaultRange, 100, and one given
+     *  a range keeps it
      *  @param {Sound} sound
      *  @param {Vector3} pos3D
      *  @param {number} [volume]
@@ -738,7 +940,9 @@ class Render3DPlugin
         // the 3D range fade and pan, Sound.play with no position does the rest
         ASSERT(sound instanceof Sound, 'sound must be a Sound');
         ASSERT(isVector3(pos3D), 'pos3D must be a vec3');
-        const offset = pos3D.subtract(this.camera.pos), range = sound.range;
+        // a sound with no range of its own is heard further in 3D than in 2D
+        const offset = pos3D.subtract(this.camera.pos);
+        const range = sound.rangeIsDefault ? this.soundDefaultRange : sound.range;
         if (range)
         {
             const distance = offset.length();
@@ -802,15 +1006,15 @@ class Render3DPlugin
         if (this.frustumCulling && !render3DSphereVisible(m[12], m[13], m[14], mesh.radius * render3DMaxStretch(m)))
             return;
         // the mesh says whether its back faces can be skipped, and a mirroring transform, one with a negative
-        // determinant, turns the winding around so the other one is its front
-        const cullBackFaces = this.cullBackFaces, mirrored = this.mirrored;
-        this.cullBackFaces = !mesh.doubleSided;
-        this.mirrored = render3DMirrors(matrix);
-        // the stage draws the batch at its end
+        // determinant, turns the winding around so the other one is its front; the stage draws a batch at its
+        // end, which keys on those itself
         if (!this.blend && this.depthTest && (mesh.instanced ?? this.instancing))
             render3DInstance(mesh, matrix, tileInfo, color);
         else
         {
+            const cullBackFaces = this.cullBackFaces, mirrored = this.mirrored;
+            this.cullBackFaces = !mesh.doubleSided;
+            this.mirrored = render3DMirrors(matrix);
             this.flush();
             render3DFlushBeforeOverlay();
             render3DSetDrawUniforms(matrix, tileInfo, color);
@@ -818,8 +1022,8 @@ class Render3DPlugin
             glContext.drawElements(glContext.TRIANGLES, mesh.bufferCount, mesh.indexType, 0);
             ++drawCount;
             primitiveCount += mesh.bufferCount / 3;
+            this.cullBackFaces = cullBackFaces, this.mirrored = mirrored;
         }
-        this.cullBackFaces = cullBackFaces, this.mirrored = mirrored;
     }
 
     /** Draw a triangle strip, batched into the stream with the current draw state
@@ -1007,13 +1211,31 @@ class Render3DPlugin
         // a far plane at Infinity has no midpoint, so put it a long way out instead
         const {near, far} = this.camera;
         const radius = far == Infinity ? near * 1e4 : (near + far) / 2;
-        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined}, ()=>
+        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined,
+            emissiveMap: undefined}, ()=>
             this.drawMesh(this.sky, buildMatrix(this.camera.pos, undefined, vec3(radius))));
     }
 
     /** Rebuild the light's view projection around the shadow center, called automatically each frame shadows are on */
     updateShadowMatrix()
     {
+        const caster = render3DShadowCaster();
+        if (caster)
+        {
+            // a spotlight's map looks down its cone with perspective, from just in front of it out to its radius
+            const pos = caster.getWorldPos3D(), forward = caster.getForward3D();
+            const up = abs(forward.y) > .99 ? vec3(0, 0, 1) : vec3(0, 1, 0);
+            const far = caster.radius, near = max(far / 500, .02);
+            const fov = min(min(caster.coneAngle, PI) * 2 + .1, 2.8);
+            this.shadowMatrix = Matrix4.perspective(fov, 1, near, far).multiply(
+                Matrix4.lookAt(pos, pos.add(forward), up).invert());
+            this.shadowPlanes = render3DFrustumPlanes(this.shadowMatrix);
+            // depth is not even with perspective: the lookup divides this by the distance squared, which makes
+            // the bias the same distance in the world near the light and far from it
+            this.shadowDepthBias = this.shadowBias * far * far * near / (far - near);
+            return;
+        }
+        this.shadowDepthBias = this.shadowBias; // the sun's map is flat, its depth even
         ASSERT(this.shadowRange > 0, 'shadowRange must be positive');
         const range = this.shadowRange > 0 ? this.shadowRange : 1, half = range / 2;
         const toSun = this.sunDirection.normalize();
@@ -1132,8 +1354,10 @@ class Render3DPlugin
     drawQuad(a, b, c, d, tileInfo, color=WHITE)
     {
         if (this.transparentQueue) // the queue replays later, so it keeps copies of what a caller may reuse
+        {
             a = a.copy(), b = b.copy(), c = c.copy(), d = d.copy();
             color = isArray(color) ? color.map(k=> k.copy()) : color.copy();
+        }
         this.drawStrip(render3DQuadStrip(a, b, c, d), render3DFaceNormal(a, b, c, d), RENDER3D_QUAD_UVS,
             render3DQuadValues(color), tileInfo);
     }
@@ -1432,30 +1656,47 @@ const RENDER3D_SNIPPET_NAMES =
 // uniforms: lightDir (xyz the way the sunlight travels, w = emissive, 1 or more skips the lighting),
 //   lightColor (the sun's rgb, a = specular), ambientFog (rgb, a = fogEnd), fogColor (rgb, a = fogStart),
 //   cameraPos, tex, shadowMap, shadowParams (x = shadows on, y = bias, z = blur step in texture space,
-//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive)
+//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive),
+//   materialParams (x = normal map scale, 0 skips it, y = shininess, z = reflectivity), emissiveTint (rgb, a = the
+//   emissive map is on), skyTop, skyHorizon, skyBottom (what a reflection shows), normalTex, emissiveTex
 function render3DFragmentSource(fragmentCode)
 {
     return '#version 300 es\n' +
         'precision highp float;' +
         'uniform vec4 lightDir,lightColor,ambientFog,ambientGround,fogColor,shadowParams;' +
         'uniform vec4 extraLights[' + RENDER3D_MAX_LIGHTS + '],extraLightColors[' + RENDER3D_MAX_LIGHTS + '];' +
+        'uniform vec4 extraLightCones[' + RENDER3D_MAX_LIGHTS + '];' +
         'uniform int extraLightCount;' +
         'uniform vec3 cameraPos;' +
-        'uniform sampler2D tex;' +
+        'uniform vec4 materialParams,emissiveTint,skyTop,skyHorizon,skyBottom;' +
+        'uniform sampler2D tex,normalTex,emissiveTex;' +
         'uniform bool premultipliedTexture;' + // is the texture a render target, which holds premultiplied color
         'uniform highp sampler2DShadow shadowMap;' +
         'in vec3 P,N;in vec2 T,L;in vec4 C,S;' +
         'out vec4 o;' +
-        // the sun shadow at this fragment, 0 to 1: the light's depth map with a 3x3 blur, outside the map is lit
+        // the shadow at this fragment, 0 to 1: the light's depth map with a 3x3 blur, outside the map is lit; the
+        // sun's map is flat and S.w is 1, a spotlight's has perspective and S.w is the distance from it, where the
+        // bias shrinks by its square to stay the same distance in the world
         'float shadow(){' +
-        'if(shadowParams.x<=0.)return 1.;' +
+        'if(shadowParams.x<=0.||S.w<=0.)return 1.;' +
         'vec3 q=S.xyz/S.w*.5+.5;' +
         'if(any(greaterThanEqual(abs(q-.5),vec3(.5))))return 1.;' +
-        'q.z-=shadowParams.y;' +
+        'q.z-=shadowParams.y/(S.w*S.w);' +
         'float s=0.;' +
         'for(int x=-1;x<=1;++x)for(int y=-1;y<=1;++y)' +
         's+=texture(shadowMap,vec3(q.xy+vec2(x,y)*shadowParams.z,q.z));' +
         'return s/9.;}' +
+        // the normal map's normal here, in the frame that the position and texture coordinate change along across the
+        // screen, so a mesh needs no tangents; green points up the image and v runs down it, so up is -v;
+        // a mesh with no texture coordinates has no frame and keeps its own normal
+        'vec3 normalMapNormal(vec3 n){' +
+        'vec3 p1=dFdx(P),p2=dFdy(P);vec2 t1=dFdx(T),t2=dFdy(T);' +
+        'vec3 a=cross(p2,n),b=cross(n,p1),u=a*t1.x+b*t2.x,v=a*t1.y+b*t2.y;' +
+        'float k=max(dot(u,u),dot(v,v));' +
+        'if(k<=0.)return n;' +
+        'vec3 m=texture(normalTex,T).xyz*2.-1.;' +
+        'm.xy*=materialParams.x;' +
+        'return normalize((u*m.x-v*m.y)*inversesqrt(k)+n*m.z);}' +
         (fragmentCode ? RENDER3D_SNIPPET_NAMES + fragmentCode + '\n' : '') +
         'void main(){' +
         (fragmentCode ? 'vec4 t;mainImage(t,T);' : 'vec4 t=texture(tex,T);') +
@@ -1466,8 +1707,11 @@ function render3DFragmentSource(fragmentCode)
         'if(e<1.){' +
         'vec3 n=dot(N,N)>0.?normalize(N):vec3(0,1,0);' +
         'if(!gl_FrontFacing)n=-n;' + // only a double sided mesh shows a back face, light it on the side that is seen
+        'if(materialParams.x!=0.)n=normalMapNormal(n);' +
         'float nl=dot(n,-lightDir.xyz);' +
-        'float s=shadow();' +
+        // the shadow is the sun's, or one spotlight's: shadowParams.x is 1 for the sun, 2 and up for that Light3D
+        'float sh=shadow(),s=shadowParams.x<1.5?sh:1.;' +
+        'int si=int(shadowParams.x+.5)-2;' +
         // the ambient: one color, or blended from the ground color below to the sky color above by the way the face points
         'vec3 l=(ambientGround.a>0.?mix(ambientGround.rgb,ambientFog.rgb,n.y*.5+.5):ambientFog.rgb)+lightColor.rgb*max(nl,0.)*s;' +
         // the Light3D objects: a point light falls off with distance, a directional one does not and carries the
@@ -1483,16 +1727,30 @@ function render3DFragmentSource(fragmentCode)
         'v/=max(d,1e-6);' +
         'float ln=dot(n,v);' +
         'vec3 lc=extraLightColors[i].rgb*extraLightColors[i].a*a*a;' +
+        // a spotlight's cone: full where its fade starts, nothing at its edge, smooth between; 1 with no cone
+        'vec4 K=extraLightCones[i];' +
+        'float k=clamp(dot(K.xyz,-v)-K.w,0.,1.);' +
+        'lc*=k*k*(3.-2.*k);' +
+        'if(i==si)lc*=sh;' +
         'l+=lc*max(0.,ln);' +
-        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),16.)*step(0.,ln);' +
+        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),materialParams.y)*step(0.,ln);' +
         '}' +
         'c.rgb*=l*(1.-e)+e;' + // lit, blended toward its own color by how emissive it is
         // specular: the sun's only where its light hits and out of shadow, then the Light3D highlights,
         // skipped entirely when the strength is zero
         'if(lightColor.a>0.){' +
         'vec3 r=reflect(lightDir.xyz,n);' +
-        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),16.)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),materialParams.y)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        '}' +
+        // the sky along the reflected view, more at a glancing angle (Schlick's Fresnel); sky light, so the sun's
+        // shadow does not dim it
+        'if(materialParams.z>0.){' +
+        'vec3 w=normalize(P-cameraPos),q=reflect(w,n);' +
+        'float f=materialParams.z+(1.-materialParams.z)*pow(1.-max(dot(n,-w),0.),5.);' +
+        'c.rgb=mix(c.rgb,q.y>0.?mix(skyHorizon.rgb,skyTop.rgb,q.y):mix(skyHorizon.rgb,skyBottom.rgb,-q.y),f);' +
         '}}else c.rgb*=e;' + // fully emissive: its own color, or brighter, with no lighting to work out
+        // the emissive map adds its light on top, lit or not
+        'if(emissiveTint.a>0.)c.rgb+=texture(emissiveTex,T).rgb*emissiveTint.rgb;' +
         'if(ambientFog.a>0.){' +
         'float z=distance(cameraPos,P);' +
         'c.rgb=mix(c.rgb,shadowParams.w<0.?vec3(0):fogColor.rgb,smoothstep(fogColor.a,ambientFog.a,z));' +
@@ -1519,6 +1777,8 @@ function render3DUseProgram(program)
     gl.uniformMatrix4fv(render3DUniform('lightViewProj'), false, r.shadowMatrix.m);
     gl.uniform1i(render3DUniform('tex'), 0);
     gl.uniform1i(render3DUniform('shadowMap'), 1);
+    gl.uniform1i(render3DUniform('normalTex'), 2);
+    gl.uniform1i(render3DUniform('emissiveTex'), 3);
     const c = r.camera.pos;
     gl.uniform3f(render3DUniform('cameraPos'), c.x, c.y, c.z);
     gl.uniform1i(render3DUniform('extraLightCount'), r.lightCount);
@@ -1526,6 +1786,7 @@ function render3DUseProgram(program)
     {
         gl.uniform4fv(render3DUniform('extraLights'), r.lightPositions, 0, r.lightCount * 4);
         gl.uniform4fv(render3DUniform('extraLightColors'), r.lightColors, 0, r.lightCount * 4);
+        gl.uniform4fv(render3DUniform('extraLightCones'), r.lightCones, 0, r.lightCount * 4);
     }
     if (program !== r.program)
     {
@@ -1611,6 +1872,8 @@ function render3DContextLost()
     render3DClearInstances();
     r.shadowFramebuffer = r.shadowTexture = undefined;
     r.shadowTextureSize = 0;
+    r.cameraDepthFramebuffer = r.cameraDepthTexture = undefined;
+    r.cameraDepthWidth = r.cameraDepthHeight = 0;
     r.streamCount = 0;
     ++r.contextGeneration; // every uploaded mesh is stale now, the soft dot is a TextureInfo the engine restores
 }
@@ -1664,18 +1927,19 @@ function render3DUpdateSamplers()
     r.samplers.clear();
 }
 
-// the sampler for a texture's wrap modes, smooth or hard edged, made the first time it is needed
-function render3DSampler(wrap, pixelated)
+// the sampler for a texture's wrap modes, smooth or hard edged, made the first time it is needed; pixelated is the
+// draw's, texturePixelated the texture's own, which a smooth texture in a pixel art game sets false
+function render3DSampler(wrap, pixelated, texturePixelated=tilesPixelated)
 {
     const gl = glContext, r = render3D, [wrapS, wrapT] = glWrapModes(wrap);
-    const key = wrapS * 1e5 + wrapT * 2 + (pixelated ? 1 : 0); // the modes are 5 digit numbers
+    const key = wrapS * 1e5 + wrapT * 4 + (pixelated ? 1 : 0) + (texturePixelated ? 2 : 0); // the modes are 5 digit numbers
     let sampler = r.samplers.get(key);
     if (sampler) return sampler;
     sampler = gl.createSampler();
-    const sharp = pixelated || tilesPixelated;
+    const sharp = pixelated || texturePixelated;
     gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, sharp ? gl.NEAREST : gl.LINEAR);
     gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, pixelated ? gl.NEAREST
-        : tilesPixelated ? gl.NEAREST_MIPMAP_LINEAR : gl.LINEAR_MIPMAP_LINEAR);
+        : texturePixelated ? gl.NEAREST_MIPMAP_LINEAR : gl.LINEAR_MIPMAP_LINEAR);
     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, wrapS);
     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, wrapT);
     const anisotropy = gl.getExtension('EXT_texture_filter_anisotropic');
@@ -1689,25 +1953,68 @@ function render3DSampler(wrap, pixelated)
 }
 
 // bind the texture of a tile or texture, white when there is none or it is not loaded, with the 3D sampler that
-// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps
-function render3DBindTexture(tileInfo, state=render3D)
+// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps; on unit 0, the color texture,
+// or another unit, the material maps, after which unit 0 is active again
+function render3DBindTexture(tileInfo, state=render3D, unit=0)
 {
     const gl = glContext, r = render3D;
     const textureInfo = render3DTextureOf(tileInfo);
     const texture = textureInfo?.glTexture || r.whiteTexture;
+    unit && gl.activeTexture(gl.TEXTURE0 + unit);
     gl.bindTexture(gl.TEXTURE_2D, texture);
     if (texture === r.whiteTexture || !r.mipmaps && !state.pixelated)
-        return gl.bindSampler(0, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
-                                        // or anisotropy, and filtering it that way costs every untextured fragment
-    gl.bindSampler(0, render3DSampler(textureInfo?.wrap, state.pixelated));
-    glUpdateMipmaps(texture); // drawn into since its mipmaps were made
-    if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        gl.bindSampler(unit, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
+                                    // or anisotropy, and filtering it that way costs every untextured fragment
+    else
     {
-        glMipmappedTextures.add(texture); // the core makes them again when the texture changes
-        gl.generateMipmap(gl.TEXTURE_2D);
+        gl.bindSampler(unit, render3DSampler(textureInfo?.wrap, state.pixelated, textureInfo?.pixelated ?? tilesPixelated));
+        glUpdateMipmaps(texture); // drawn into since its mipmaps were made
+        if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        {
+            glMipmappedTextures.add(texture); // the core makes them again when the texture changes
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+    }
+    unit && gl.activeTexture(gl.TEXTURE0);
+}
+
+// the material's uniforms and maps for a draw: the normal map on unit 2 and the emissive map on unit 3, white when
+// unused and bound only when they change, and the sky a reflection shows, the colors setSky was given or the
+// ambient ones; with nothing set every part of it is skipped in the shader, and a map with no GL texture yet, or
+// one freed, counts as none, since the white texture in its place would bend every normal or light the surface
+function render3DSetMaterialUniforms(state)
+{
+    const r = render3D, loaded = (map)=> render3DTextureOf(map)?.glTexture ? map : undefined;
+    const normalMap = state.normalScale ? loaded(state.normalMap) : undefined, emissiveMap = loaded(state.emissiveMap);
+    render3DUniform4f('materialParams', normalMap ? state.normalScale : 0, state.shininess, state.reflectivity, 0);
+    const ec = state.emissiveMapColor || WHITE;
+    emissiveMap ? render3DUniform4f('emissiveTint', ec.r, ec.g, ec.b, 1) : render3DUniform4f('emissiveTint', 0, 0, 0, 0);
+    render3DBindMap(2, normalMap, state);
+    render3DBindMap(3, emissiveMap, state);
+    if (state.reflectivity > 0)
+    {
+        const sky = r.sky && render3DSkyColors.get(r.sky), a = r.ambientColor, g = r.ambientGroundColor || a;
+        const top = sky ? sky[0] : a, bottom = sky ? sky[2] : g;
+        render3DUniform4f('skyTop', top.r, top.g, top.b, 1);
+        render3DUniform4f('skyBottom', bottom.r, bottom.g, bottom.b, 1);
+        sky ? render3DUniform4f('skyHorizon', sky[1].r, sky[1].g, sky[1].b, 1) :
+            render3DUniform4f('skyHorizon', (a.r + g.r) / 2, (a.g + g.g) / 2, (a.b + g.b) / 2, 1);
     }
 }
 
+// what each material map unit has bound, index 2 and 3 the maps and 4 and 5 whether each is pixelated, forgotten at
+// the start and end of each pass
+let render3DBoundMaps = [];
+
+// bind a material map to its unit, or white for none, only when it or its filtering changed since the last draw
+function render3DBindMap(unit, map, state)
+{
+    const bound = render3DBoundMaps, pixelated = !!map && state.pixelated;
+    if (bound[unit] === map && bound[unit + 2] === pixelated) return;
+    bound[unit] = map, bound[unit + 2] = pixelated;
+    render3DBindTexture(map, state, unit);
+}
+
 // send a vec4 uniform of the main shader only when its value changed since the last send
 function render3DUniform4f(name, x, y, z, w)
 {
@@ -1840,11 +2147,14 @@ function render3DSetDrawUniforms(matrix, tileInfo, tint, uvRect, state=render3D)
     // 0 blends them away instead, and -1 is additive, which has to fade into fog differently
     const blendMode = state.blend ? (state.additive ? -1 : 0) : 1;
     const receives = r.shadows && r.passIsDefault && state.receiveShadow ? 1 : 0;
-    render3DUniform4f('shadowParams', receives, r.shadowBias, r.shadowSoftness / r.shadowTextureSize, blendMode);
+    // 1 the sun's shadow, 2 and up the shadow of that Light3D, the spotlight that casts them
+    const shadowOf = receives && r.shadowLightIndex >= 0 ? 2 + r.shadowLightIndex : receives;
+    render3DUniform4f('shadowParams', shadowOf, r.shadowDepthBias, r.shadowSoftness / r.shadowTextureSize, blendMode);
 
     // a render target's texture holds premultiplied color, the blend writes it that way, so the shader undoes it
     const textureInfo = render3DTextureOf(tileInfo);
     render3DUniform1i('premultipliedTexture', +!!(textureInfo?.glTexture && glPremultipliedTextures.has(textureInfo.glTexture)));
+    render3DSetMaterialUniforms(state);
 }
 
 // the six flat sides of the camera's visible box, each as [x, y, z, w] facing inward
@@ -1866,6 +2176,7 @@ function render3DFrustumPlanes(matrix)
 function render3DPreRender()
 {
     const r = render3D;
+    editor3DCameraBegin(); // debug builds draw with the free camera or the 3D editor's, the game's is back after
     r.updateMatrices();
     r.shadowMapDrawn = false;
     render3DRenderPass(false);
@@ -1875,6 +2186,7 @@ function render3DPreRender()
 function render3DRender()
 {
     render3DRenderPass(true);
+    editor3DCameraEnd();
 }
 
 // one 3D pass for the objects of a layer: take over the gl state, draw the shadow map once a frame and the stages, hand
@@ -1903,6 +2215,8 @@ function render3DRenderPass(after2D)
     // gathered before the gl state is taken over, so an assert here leaves nothing to hand back
     const lights = render3DCollectLights();
     r.lightCount = lights.length;
+    const caster = render3DShadowCaster();
+    r.shadowLightIndex = caster ? lights.indexOf(caster) : -1;
     const positions = r.lightPositions, colors = r.lightColors;
     lights.forEach((light, i)=>
     {
@@ -1913,6 +2227,7 @@ function render3DRenderPass(after2D)
         positions[k] = p.x, positions[k+1] = p.y, positions[k+2] = p.z;
         positions[k+3] = light.directional ? -1 : max(0, light.radius); // a negative radius marks a direction
         colors[k] = c.r, colors[k+1] = c.g, colors[k+2] = c.b, colors[k+3] = c.a * light.intensity;
+        r.lightCones.set(render3DLightCone(light), k);
     });
 
     // take over the gl state
@@ -1924,7 +2239,8 @@ function render3DRenderPass(after2D)
     // may have left its own texture, which fails every draw; the shadow map goes back there even with shadows off
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, r.shadowTexture || null);
-    gl.activeTexture(gl.TEXTURE0);
+    // the material maps' units start white, a 2D plugin may have left its own textures there
+    render3DSetMapUnits(r.whiteTexture);
     gl.depthMask(true);
     gl.clear(gl.DEPTH_BUFFER_BIT);
 
@@ -1937,6 +2253,8 @@ function render3DRenderPass(after2D)
             render3DRenderShadowMap();
             r.shadowMapDrawn = true;
         }
+        // the camera's depth for post processing, from the default layer
+        r.depthTexture && isDefault && render3DRenderDepth();
         render3DUseProgram(r.program); // after the shadow map, so the light matrix it sends is this frame's
         r.renderStages(objects, isDefault);
     }
@@ -1952,6 +2270,7 @@ function render3DRenderPass(after2D)
         gl.depthMask(true);
         gl.frontFace(gl.CCW);
         gl.bindSampler(0, null); // back to the textures' own filtering for 2D
+        render3DSetMapUnits(null); // the material maps leave no texture or sampler behind for 2D
         if (glActiveTexture)
             gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
         // ARRAY_BUFFER is not part of VAO state in WebGL2, so bindVertexArray alone would not restore it
@@ -1960,11 +2279,27 @@ function render3DRenderPass(after2D)
     }
 }
 
+// put a texture on both material map units with no sampler, white at the start of the pass and none at its end, and
+// forget what the map cache thought was bound; unit 0 is active after
+function render3DSetMapUnits(texture)
+{
+    const gl = glContext;
+    for (const unit of [2, 3])
+    {
+        gl.activeTexture(gl.TEXTURE0 + unit);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.bindSampler(unit, null);
+    }
+    gl.activeTexture(gl.TEXTURE0);
+    render3DBoundMaps = [];
+}
+
 // create the shadow map depth texture and framebuffer at a size, or keep them when the size matches
 function render3DUpdateShadowMap(size)
 {
     const gl = glContext, r = render3D;
     ASSERT(size > 0, 'shadowMapSize must be positive');
+    size = glClampTextureSize(size); // a size the device does not have falls back to the largest it has
     if (r.shadowTexture && r.shadowTextureSize === size) return;
     r.shadowTexture && gl.deleteTexture(r.shadowTexture);
     r.shadowFramebuffer && gl.deleteFramebuffer(r.shadowFramebuffer);
@@ -2036,6 +2371,65 @@ function render3DRenderShadowMap()
     }
 }
 
+// the camera's depth texture and its framebuffer at a size, made again when the canvas changes size; depth values
+// are not filtered, so it is read texel by texel
+function render3DUpdateCameraDepth(width, height)
+{
+    const gl = glContext, r = render3D;
+    if (r.cameraDepthTexture && r.cameraDepthWidth === width && r.cameraDepthHeight === height) return;
+    r.cameraDepthTexture && gl.deleteTexture(r.cameraDepthTexture);
+    r.cameraDepthFramebuffer && gl.deleteFramebuffer(r.cameraDepthFramebuffer);
+    const texture = r.cameraDepthTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    const framebuffer = r.cameraDepthFramebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, texture, 0);
+    gl.drawBuffers([gl.NONE]); // depth only
+    gl.readBuffer(gl.NONE);
+    ASSERT(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE, 'camera depth framebuffer is incomplete');
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    r.cameraDepthWidth = width, r.cameraDepthHeight = height;
+}
+
+// draw the camera's depth for post processing: the solid objects from the camera with the shadow map's depth only
+// shader, into a texture the size of the canvas; what is see through is cut by its alpha as it is for shadows
+function render3DRenderDepth()
+{
+    const gl = glContext, r = render3D, width = glCanvas.width, height = glCanvas.height;
+    render3DUpdateCameraDepth(width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, r.cameraDepthFramebuffer);
+    gl.viewport(0, 0, width, height);
+    gl.clear(gl.DEPTH_BUFFER_BIT);
+    gl.useProgram(r.shadowShader);
+    gl.uniformMatrix4fv(render3DUniform('viewProj', r.shadowShader), false, r.viewProjection.m);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.CULL_FACE);
+
+    r.shadowPass = r.depthPass = true;
+    try
+    {
+        const solids = render3DLayerObjects(!!r.renderAfter2D).filter(o=> !o.additive && (!o.transparent || o.tileInfo));
+        render3DDrawObjects(solids);
+        r.onRenderOpaque?.();
+        r.flush();
+        render3DFlushInstances();
+    }
+    finally
+    {
+        r.shadowPass = r.depthPass = false;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, width, height);
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Strips: every strip repeats its first point once at the start and its last
 // point once at the end. Those repeats make flat triangles with no area, which
@@ -2189,18 +2583,26 @@ function render3DStripTriangles(count, remap, place)
 }
 
 // a mesh's packed vertex data for the GPU, one vertex per entry of a layout, which is the strip index of each,
-// written into data when given, the buffer an earlier call returned for the same layout
+// written into data when given, the buffer an earlier call returned for the same layout; it measures the mesh's
+// radius and box as it goes, as computeRadius does, over the vertices once instead of every strip entry
 function render3DMeshVertexData(mesh, vertices, data=new ArrayBuffer(vertices.length * RENDER3D_VERTEX_BYTES))
 {
     const count = vertices.length;
     const floats = new Float32Array(data), ints = new Uint32Array(data);
+    let r = 0, x0 = Infinity, y0 = Infinity, z0 = Infinity, x1 = -Infinity, y1 = -Infinity, z1 = -Infinity;
     for (let j = 0; j < count; ++j)
     {
         // a hand built mesh may leave normals, uvs and colors empty
         const i = vertices[j], p = mesh.points[i], uv = mesh.uvs[i] || RENDER3D_DEFAULT_UV;
-        render3DWriteVertex(floats, ints, j * RENDER3D_VERTEX_FLOATS, p.x, p.y, p.z,
+        const x = p.x, y = p.y, z = p.z;
+        render3DWriteVertex(floats, ints, j * RENDER3D_VERTEX_FLOATS, x, y, z,
             mesh.normals[i] || RENDER3D_DEFAULT_NORMAL, uv.x, uv.y, (mesh.colors[i] || WHITE).rgbaInt());
+        r = max(r, x*x + y*y + z*z);
+        x0 = min(x0, x), y0 = min(y0, y), z0 = min(z0, z);
+        x1 = max(x1, x), y1 = max(y1, y), z1 = max(z1, z);
     }
+    mesh.radius = r ** .5;
+    mesh.bounds = count ? {min: vec3(x0, y0, z0), max: vec3(x1, y1, z1)} : {min: vec3(), max: vec3()};
     return data;
 }
 
@@ -2712,8 +3114,8 @@ class Mesh
      *  @return {Mesh} */
     upload()
     {
-        this.computeRadius();
-        if (!render3D?.program || !glContext) return this;
+        // the packing below measures the radius and box, with nothing to pack to they are measured here
+        if (!render3D?.program || !glContext) return this.computeRadius(), this;
         const gl = glContext, layout = this.vertexLayout;
         // no layout when dynamicDraw was turned on after an upload, the next upload makes one
         if (this.dynamicDraw && layout && this.buffer && this.contextGeneration === render3D.contextGeneration)
@@ -3215,25 +3617,30 @@ function buildSky(topColor=hsl(.6, .8, .55), horizonColor=hsl(.6, 1, .9), bottom
     // a sphere turned inside out so it is seen from within, each point colored by how high it is
     const mesh = buildSphere(2, sides, rings, true).flipNormals();
     mesh.colors = mesh.points.map(p=> p.y < 0 ? horizonColor.lerp(bottomColor, -p.y) : horizonColor.lerp(topColor, p.y));
+    render3DSkyColors.set(mesh, [topColor.copy(), horizonColor.copy(), bottomColor.copy()]);
     return mesh;
 }
 
+// the top, horizon and bottom colors of each sky dome buildSky made, which a reflection shows while that dome is
+// render3D.sky, whether setSky set it or the game did
+const render3DSkyColors = new WeakMap;
+
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * EngineObject3D - An EngineObject with a 3D transform and a mesh
  * - Set pos3D, rotation3D and scale3D instead of the 2D pos, size and angle
  * - Gets update, children, timers, destroy and renderOrder from EngineObject
- * - velocity3D is added to pos3D each frame, along with render3D.gravity and damping once it has a mass
+ * - velocity3D is added to pos3D each frame, slowed by damping, and render3D.gravity pulls it once it has a mass
  * - Objects face -Z, the same way the camera does, so lookAt turns them to face a point
  * - The 2D pos and velocity are still there but nothing draws them
- * - These inherited fields are 2D only and do nothing here: angle, angleVelocity, angleDamping,
- *   additiveColor, drawSize, mirror, clampSpeed, friction and groundObject
+ * - These inherited fields are 2D only and do nothing here: angle, angleVelocity, additiveColor, drawSize and mirror;
+ *   damping, angleDamping, clampSpeed, friction and groundObject work as in 2D, on velocity3D and angleVelocity3D
  * - The inherited shader works here as in 2D, and with emissive at 1 its snippet does its own lighting
  * - Set sync2D for a 2D game with 3D looks, pos and angle then drive pos3D and rotation3D,
  *   which is the one way those 2D fields reach a 3D object
  * - setCollision takes the same flags as in 2D, but the solid collision happens in 3D against size3D
- * - The solid box is axis aligned in the world, rotation3D is ignored like angle is in 2D, so give a turned wall a
- *   size3D along the world axes
+ * - The solid box turns with rotation3D, so a turned wall or a ramp collides as it looks; resting on one no steeper
+ *   than groundAngle stands there
  * - Its tile and raycast halves are 2D only so they default off here, and a child sits solid collision out
  * - A sync2D object collides in 2D instead, which needs the 2D size set as well as size3D
  * - setMesh swaps the mesh and frees the old one, for text and terrain that get built again
@@ -3281,7 +3688,7 @@ class EngineObject3D extends EngineObject
         /** @property {Vector3} - Added to pos3D each frame by the engine before update, like the 2D velocity, no super
          *  call needed; damping and render3D.gravity act on it once the object has a mass */
         this.velocity3D = vec3();
-        /** @property {Vector3} - Added to rotation3D each frame by the engine before update, angleDamping is 2D only */
+        /** @property {Vector3} - Added to rotation3D each frame by the engine before update, slowed by angleDamping */
         this.angleVelocity3D = vec3();
         /** @property {Mesh|undefined} - Mesh to draw
          *  @type {Mesh|undefined} */
@@ -3312,8 +3719,27 @@ class EngineObject3D extends EngineObject
          *  lamps and glowing things, between is partly self lit, and above 1 is brighter than its color, for bloom */
         this.emissive = 0;
         /** @property {number} - Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and
-         *  1 adds a light's full color at its brightest; its size is fixed */
+         *  1 adds a light's full color at its brightest; shininess sets its size */
         this.specular = 0;
+        /** @property {number} - The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 16 the
+         *  default, 100 sharp like polished metal; shows only with specular above 0 */
+        this.shininess = 16;
+        /** @property {TextureInfo|undefined} - A normal map that bends the surface at each texel so it catches the
+         *  light like bumps and grooves, green pointing up the image as OpenGL and glTF have it; read at the color
+         *  texture's coordinates, see normalMapFromHeight to make one in code
+         *  @type {TextureInfo|undefined} */
+        this.normalMap = undefined;
+        /** @property {number} - How strongly the normal map bends the surface, 0 turns it off, as glTF's scale */
+        this.normalScale = 1;
+        /** @property {number} - How much it reflects the sky, 0 none and 1 a mirror of it; the edges seen at a
+         *  glancing angle reflect more either way, as water and glass do */
+        this.reflectivity = 0;
+        /** @property {TextureInfo|undefined} - A texture of where it glows, added on top of the lit surface so it
+         *  shows in the dark, like lit windows; read at the color texture's coordinates
+         *  @type {TextureInfo|undefined} */
+        this.emissiveMap = undefined;
+        /** @property {Color} - Multiplies the emissive map, as glTF's emissiveFactor */
+        this.emissiveMapColor = WHITE;
         /** @property {boolean} - Draw into the shadow map when render3D.shadows is on; sprites and cut out textures
          *  cast their outline, an object faded below half its alpha casts nothing, a see through one casts only when
          *  textured, and additive objects never cast */
@@ -3321,6 +3747,9 @@ class EngineObject3D extends EngineObject
         /** @property {boolean} - Collide as the sphere that fits size3D instead of as the size3D box, so it rolls
          *  around corners */
         this.collideAsSphere3D = false;
+        /** @property {number} - The steepest slope it stands on, in radians from level, PI/4 by default: resting on
+         *  a solid within this of flat sets groundObject and holds it still, steeper it slides down */
+        this.groundAngle = PI / 4;
         /** @property {boolean} - Darkened by the shadow map when render3D.shadows is on */
         this.receiveShadow = true;
         /** @property {boolean|undefined} - Draw this object over the 2D scene, undefined uses render3D.renderAfter2D
@@ -3351,10 +3780,32 @@ class EngineObject3D extends EngineObject
             'a sync2D object collides in 2D, so give it a 2D size as well as a size3D', this.size);
         if (this.sync2D)
             super.updatePhysics();
+        ASSERT(isNumber(this.groundAngle) && this.groundAngle >= 0 && this.groundAngle < PI / 2,
+            'groundAngle must be 0 to less than PI/2, a slope from level', this.groundAngle);
+        // what it stands on is found again each frame, by the level and by the solids it rests on; a sync2D
+        // object's is the 2D physics'
+        const ground = this.groundObject;
+        this.sync2D || (this.groundObject = undefined);
+        if (this.clampSpeed && !this.sync2D && (this.collideSolidObjects || this.collideLevel && this.mass))
+        {
+            // each axis within objectMaxSpeed, as in 2D, so a fast object does not pass through a thin wall; only
+            // for what collides, anything else moves as fast as it is told
+            const v = this.velocity3D, s = objectMaxSpeed;
+            v.x = clamp(v.x, -s, s), v.y = clamp(v.y, -s, s), v.z = clamp(v.z, -s, s);
+        }
         // a moving object keeps out of the level, the height maps and voxel maps, from where it was before it moved
         const oldPos = this.collideLevel && this.mass && !this.sync2D ? this.pos3D.copy() : undefined;
         render3DMove(this);
-        oldPos && render3DCollideLevel(this, oldPos);
+        if (ground && this.mass && !this.sync2D)
+        {
+            // sliding on what it stood on slows by friction, the less grippy of the two, relative to that one's own
+            // speed so a moving platform carries it, as in 2D
+            const friction = max(this.friction, ground.friction), v = this.velocity3D;
+            const moving = ground instanceof EngineObject3D ? ground.velocity3D : undefined;
+            const gx = moving?.x ?? 0, gz = moving?.z ?? 0;
+            v.x = gx + (v.x - gx) * friction, v.z = gz + (v.z - gz) * friction;
+        }
+        oldPos && render3DCollideLevel(this, oldPos, ground);
         // the engine only runs this for objects that own where they are, a child rides along with its parent
         if (this.collideSolidObjects && !this.sync2D)
             render3DCollideSolid(this);
@@ -3387,7 +3838,7 @@ class EngineObject3D extends EngineObject
 
     /** Set how this object collides, the same flags as in 2D
      *  - Solid collision happens in 3D here, against size3D boxes or spheres; a child sits it out
-     *  - The boxes are axis aligned in the world, rotation3D is ignored
+     *  - The boxes turn with rotation3D, against height maps and voxel maps an object is still its upright box
      *  - A sync2D object collides in 2D instead, against the 2D size, so set that as well as size3D
      *  @param {boolean} [collideSolidObjects] - Take part in solid collision
      *  @param {boolean} [isSolid] - Block other objects, a pair where neither one blocks passes through;
@@ -3575,27 +4026,29 @@ function render3DObjectMatrix(o)
     return o.worldMatrix;
 }
 
-// move an object by its 3D velocities, an object with mass falling with render3D.gravity and slowing by its damping
+// move an object by its 3D velocities, each slowed by its damping, an object with mass falling with render3D.gravity
 function render3DMove(o)
 {
     // the vectors change in place, as the 2D object's do: this runs for every object every frame
+    // a sync2D object's damping is the 2D physics', its 3D velocities are its own to set
     const p = o.pos3D, v = o.velocity3D, r = o.rotation3D, a = o.angleVelocity3D;
+    const d = o.sync2D ? 1 : o.damping, e = o.sync2D ? 1 : o.angleDamping;
+    // damped first and gravity added after, the order EngineObject.updatePhysics uses,
+    // so the same mass, damping and gravity fall the same way in both
+    v.x *= d, v.y *= d, v.z *= d;
     if (o.mass && !o.sync2D) // a 2D driven object gets the 2D gravity instead
     {
-        // damped first and gravity added after, the order EngineObject.updatePhysics uses,
-        // so the same mass, damping and gravity fall the same way in both
-        const g = render3D.gravity, s = o.gravityScale, d = o.damping;
-        v.x = v.x * d + g.x * s, v.y = v.y * d + g.y * s, v.z = v.z * d + g.z * s;
+        const g = render3D.gravity, s = o.gravityScale;
+        v.x += g.x * s, v.y += g.y * s, v.z += g.z * s;
     }
     p.x += v.x, p.y += v.y, p.z += v.z;
-    r.x += a.x, r.y += a.y, r.z += a.z;
+    r.x += a.x *= e, r.y += a.y *= e, r.z += a.z *= e;
 }
 
 // keep an object that moved out of the level's solid geometry, clearing what it stood on for the level to set again
-function render3DCollideLevel(o, oldPos)
+// ground is what it stood on last frame, which a height map keeps it on going down a slope
+function render3DCollideLevel(o, oldPos, ground)
 {
-    const ground = o.groundObject;
-    o.groundObject = undefined;
     for (const level of render3DLevel)
         level.destroyed || level.levelCollide3D(o, oldPos, level === ground);
 }
@@ -3612,7 +4065,23 @@ function render3DSolidShape(o)
     const kx = abs(k.x), ky = abs(k.y), kz = abs(k.z);
     if (o.collideAsSphere3D)
         return {pos: o.pos3D.copy(), radius: max(s.x, s.y, s.z) / 2 * max(kx, ky, kz)};
-    return {pos: o.pos3D.copy(), size: vec3(s.x * kx, s.y * ky, s.z * kz)};
+    // a turned box has its axes, a solid is never a child so its rotation is the world's; an upright one has none, and
+    // neither does a sprite, whose rotation turns how it faces the camera, not its box
+    const axes = !render3DIsSprite(o) && isTurned3D(o.rotation3D) ? render3DSolidAxes(o) : undefined;
+    return {pos: o.pos3D.copy(), size: vec3(s.x * kx, s.y * ky, s.z * kz), axes};
+}
+
+// a turned solid's three axes, worked out when its rotation changes and kept until then, so the pairs it is tested
+// against each frame do not each work them out again
+const render3DSolidAxesCache = new WeakMap;
+function render3DSolidAxes(o)
+{
+    const r = o.rotation3D, kept = render3DSolidAxesCache.get(o);
+    if (kept && kept.x === r.x && kept.y === r.y && kept.z === r.z)
+        return kept.axes;
+    const axes = boxAxes3D(r);
+    render3DSolidAxesCache.set(o, {x: r.x, y: r.y, z: r.z, axes});
+    return axes;
 }
 
 // how far a solid shape can reach from its own center, for a quick reject before the exact test
@@ -3630,15 +4099,30 @@ function render3DSolidReach(o)
 // what it takes to move shape a clear of shape b, whichever pair of shapes they are, or undefined for no touch
 function render3DSolidPush(a, b)
 {
+    // a turned box is tested by its kept axes, the upright pairs as they always were
+    const sphereBox = (sphere, box)=> box.axes ? collideSphereOrientedBox3D(sphere.pos, sphere.radius, box.pos,
+        box.size, box.axes) : collideSphereBox(sphere.pos, sphere.radius, box.pos, box.size);
     if (!a.size) // a is a sphere
-        return b.size ? collideSphereBox(a.pos, a.radius, b.pos, b.size)
-            : collideSphereSphere(a.pos, a.radius, b.pos, b.radius);
+        return b.size ? sphereBox(a, b) : collideSphereSphere(a.pos, a.radius, b.pos, b.radius);
     if (!b.size) // only b is, so push b out of a and turn it around
     {
-        const push = collideSphereBox(b.pos, b.radius, a.pos, a.size);
+        const push = sphereBox(b, a);
         return push && push.scale(-1);
     }
-    return collideBoxBox3D(a.pos, a.size, b.pos, b.size);
+    return a.axes || b.axes ? collideOrientedBoxes3D(a.pos, a.size, a.axes ?? BOX_WORLD_AXES, b.pos, b.size,
+        b.axes ?? BOX_WORLD_AXES) : collideBoxBox3D(a.pos, a.size, b.pos, b.size);
+}
+
+// a sprite, a tile with no mesh, which faces the camera however it is turned
+const render3DIsSprite = (o)=> !o.mesh && !!o.tileInfo;
+
+// whether a push leaves a box by one of its faces, along one of its axes, not by an edge or a corner; a sphere has
+// no face to stand on
+function render3DOnFace(push, shape)
+{
+    if (!shape.size) return false;
+    const n = push.normalize(), axes = shape.axes ?? BOX_WORLD_AXES;
+    return max(abs(n.dot(axes[0])), abs(n.dot(axes[1])), abs(n.dot(axes[2]))) > 1 - 1e-6;
 }
 
 // push a solid object out of the solids before it in the engine's list of them, so each pair is resolved once:
@@ -3664,7 +4148,8 @@ function render3DCollideSolid(a)
         if (dx*dx + dy*dy + dz*dz > reach*reach)
             continue;
 
-        const push = render3DSolidPush(shapeA, render3DSolidShape(b));
+        const shapeB = render3DSolidShape(b);
+        let push = render3DSolidPush(shapeA, shapeB);
         if (!push) continue;
 
         // both objects hear about it, and either one can take the touch over
@@ -3672,6 +4157,19 @@ function render3DCollideSolid(a)
         const resolveB = b.collideWithObject(a, push.scale(-1));
         if (!resolveA || !resolveB) continue;
 
+        // standing: resting on a box's face within the upper one's groundAngle of level holds it there, the push
+        // turned straight up, as far as it takes to leave the surface, so it does not creep down a ramp; only what
+        // moves stands, and a sphere, an edge or a corner is nothing to stand on, what rests there rolls off
+        const lengthSquared = push.lengthSquared(), up = push.y / lengthSquared ** .5;
+        const aStands = up > 0 && a.mass && up >= cos(a.groundAngle) && render3DOnFace(push, shapeB);
+        const bStands = up < 0 && b.mass && -up >= cos(b.groundAngle) && render3DOnFace(push, shapeA);
+        if (aStands || bStands)
+        {
+            aStands ? a.groundObject = b : b.groundObject = a;
+            if (push.x || push.z) // one straight up already is used as it is
+                push = vec3(0, lengthSquared / push.y, 0);
+        }
+
         // heavier objects move less, mass 0 stays put; then bounce apart when moving toward each other
         const total = a.mass + b.mass;
         const weightA = !a.mass ? 0 : !b.mass ? 1 : b.mass / total;
@@ -3692,8 +4190,8 @@ function render3DCollideSolid(a)
 
 /**
  * Collect the EngineObject3D objects whose boxes overlap a sphere or a box, the 3D twin of engineObjectsCollect
- * - Boxes are axis aligned around the world position, rotation3D is ignored; lights, emitters and trails have no size
- *   and are never collected
+ * - Each object is its size3D box at its world position, turned as it is turned; lights, emitters and trails have no
+ *   size and are never collected
  * @param {Vector3} pos - Center of the area
  * @param {Vector3|number} size - Diameter of a sphere if a number, 0 for a point, full size of a box if a Vector3
  * @param {Array<EngineObject>} [objects] - Defaults to every object
@@ -3715,9 +4213,27 @@ function engineObjectsCollect3D(pos, size, objects=engineObjects, testCenters=fa
         if (!(s.x || s.y || s.z)) continue;
         const center = vec3(m[12], m[13], m[14]);
         const worldSize = testCenters ? vec3() : render3DWorldSize(o, m);
+        // a turned box is tested as turned, its axes read off the matrix, its columns with the scale taken out
+        const turned = !testCenters && !render3DIsSprite(o) && (m[1] || m[2] || m[4] || m[6] || m[8] || m[9]);
+        const axis = (i)=> vec3(m[i], m[i+1], m[i+2]).normalize();
+        let axes = turned ? [axis(0), axis(4), axis(8)] : undefined;
+        if (axes && (abs(axes[0].dot(axes[1])) > 1e-6 || abs(axes[0].dot(axes[2])) > 1e-6 ||
+            abs(axes[1].dot(axes[2])) > 1e-6))
+        {
+            // a turned child of an unevenly scaled parent is sheared, its edges no longer square, which the box
+            // tests do not take; the upright box around it stands in, which may take a little more but never misses
+            const e = axes.map((a, i)=> a.scale(i ? i > 1 ? worldSize.z / 2 : worldSize.y / 2 : worldSize.x / 2));
+            const reach = (c)=> 2 * (abs(e[0][c]) + abs(e[1][c]) + abs(e[2][c]));
+            worldSize.set(reach('x'), reach('y'), reach('z'));
+            axes = undefined;
+        }
         let hit;
-        if (box)
+        if (box && axes)
+            hit = !!collideOrientedBoxes3D(pos, box, BOX_WORLD_AXES, center, worldSize, axes);
+        else if (box)
             hit = isOverlapping3D(pos, box, center, worldSize);
+        else if (axes)
+            hit = !!collideSphereOrientedBox3D(pos, radiusSquared ** .5, center, worldSize, axes);
         else
         {
             // a sphere against the nearest point of the box
@@ -3836,20 +4352,24 @@ function engineObjectsCallback3D(pos, size, callback, objects=engineObjects, tes
  * 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
- * - setMatrixAt and setColorAt change one instance, and only the changed range uploads before the next draw
+ * - 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, and casts and receives shadows like any object
+ * - 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 instanceData
+ * - 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.setMatrixAt(i, buildMatrix(randomGroundPos(), vec3(0, rand(2*PI), 0)));
+ *     forest.setTransformAt(i, randomGroundPos(), vec3(0, rand(2*PI), 0));
  */
 class InstancedMesh3D extends EngineObject3D
 {
@@ -3868,29 +4388,101 @@ class InstancedMesh3D extends EngineObject3D
         this.count = count;
         /** @property {number} - How many instances it was made with */
         this.maxCount = count;
-        /** @property {Float32Array} - The per instance values the shader reads, 24 floats each: the matrix, the color
-         *  and the uv rect; edit it directly and call markDirty for the instances changed */
-        this.instanceData = new Float32Array(count * RENDER3D_INSTANCE_FLOATS);
-        /** @property {number} - Radius of the sphere around the origin that holds every instance set so far, for
-         *  culling; from the farthest instance and the largest scale, and the mesh's size when it draws */
-        this.radius = 0;
-        this.reach = 0;    // the farthest any instance's position has been from the origin
-        this.maxScale = 0; // and the largest scale any instance has had
-        /** @property {number} - First instance to upload before the next draw */
+        /** @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 to upload, so nothing uploads when it is not past dirtyStart */
+        /** @property {number} - One past the last instance whose matrix uploads, nothing when it is not past dirtyStart */
         this.dirtyEnd = count;
-        this.buffer = undefined;    // the GPU copy of instanceData
-        this.bufferGeneration = -1; // the context it was made under
-        this.uvTileInfo = tileInfo; // the tile the uv rects were written for
-        const uv = render3DGetTileUVs(tileInfo), data = this.instanceData;
+        /** @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)
         {
-            this.setMatrixAt(i, RENDER3D_IDENTITY);
-            const k = i * RENDER3D_INSTANCE_FLOATS;
-            data[k+16] = color.r; data[k+17] = color.g; data[k+18] = color.b; data[k+19] = color.a;
-            data[k+20] = uv.x; data[k+21] = uv.y; data[k+22] = uv.w; data[k+23] = uv.h;
+            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
@@ -3899,8 +4491,9 @@ class InstancedMesh3D extends EngineObject3D
     setMatrixAt(i, matrix)
     {
         ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        const data = this.instanceData, k = i * RENDER3D_INSTANCE_FLOATS, m = matrix.m;
-        data.set(m, k);
+        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);
     }
 
@@ -3910,8 +4503,8 @@ class InstancedMesh3D extends EngineObject3D
     getMatrixAt(i)
     {
         ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
-        const k = i * RENDER3D_INSTANCE_FLOATS, matrix = new Matrix4;
-        matrix.m.set(this.instanceData.subarray(k, k + 16));
+        const k = i * RENDER3D_MATRIX_FLOATS, matrix = new Matrix4;
+        matrix.m.set(this.matrixData.subarray(k, k + 16));
         return matrix;
     }
 
@@ -3922,27 +4515,72 @@ class InstancedMesh3D extends EngineObject3D
     {
         ASSERT(i >= 0 && i < this.maxCount, 'instance index out of range');
         ASSERT(isColor(color), 'color must be a Color');
-        const data = this.instanceData, k = i * RENDER3D_INSTANCE_FLOATS;
-        data[k+16] = color.r; data[k+17] = color.g; data[k+18] = color.b; data[k+19] = color.a;
-        this.markDirty(i);
+        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 changed, so it uploads before the next draw and the bounds hold it; setMatrixAt and
-     *  setColorAt call this, and so must an edit made straight to instanceData
+    /** 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)
     {
-        this.dirtyStart = min(this.dirtyStart, i);
-        this.dirtyEnd = max(this.dirtyEnd, i + 1);
+        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;
+    }
 
-        // the bounds grow to hold where it is now and how big, read back from the matrix it has
-        const d = this.instanceData, k = i * RENDER3D_INSTANCE_FLOATS;
-        this.reach = max(this.reach, hypot(d[k+12], d[k+13], d[k+14]));
-        this.maxScale = max(this.maxScale, render3DMaxStretch(d, k));
-        const meshRadius = this.mesh.radius || this.mesh.computeRadius(); // measured once, the draw takes a new size up
-        this.radius = this.reach + meshRadius * this.maxScale;
+    /** 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()
@@ -3955,41 +4593,46 @@ class InstancedMesh3D extends EngineObject3D
         if (r.shadowPass && !r.lighting) return; // unlit things cast no shadow
         render3DMeshUpload(mesh);
         if (!mesh.bufferCount) return;
-        this.radius = this.reach + mesh.radius * this.maxScale; // the mesh may have grown since
         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.instanceData;
-            for (let k = 20; k < data.length; k += RENDER3D_INSTANCE_FLOATS)
+            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.dirtyStart = 0, this.dirtyEnd = this.maxCount;
+            this.colorDirtyStart = 0, this.colorDirtyEnd = this.maxCount;
         }
 
-        // the GPU copy: all of it under a fresh context, otherwise just the changed range
+        // the GPU copies: all of each under a fresh context, otherwise just the changed ranges
         if (!this.buffer || this.bufferGeneration !== r.contextGeneration)
         {
-            this.buffer = gl.createBuffer();
             this.bufferGeneration = r.contextGeneration;
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-            gl.bufferData(gl.ARRAY_BUFFER, this.instanceData, gl.DYNAMIC_DRAW);
+            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 if (this.dirtyEnd > this.dirtyStart)
+        else
         {
-            const start = this.dirtyStart * RENDER3D_INSTANCE_FLOATS, end = this.dirtyEnd * RENDER3D_INSTANCE_FLOATS;
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-            gl.bufferSubData(gl.ARRAY_BUFFER, start * 4, this.instanceData, start, end - start);
+            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 = Infinity, this.dirtyEnd = 0;
+        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);
+        render3DDrawInstanced(mesh, this.buffer, this.count, render3DTextureOf(tileInfo), r, this.colorBuffer);
         r.cullBackFaces = cullBackFaces;
     }
 
@@ -3998,8 +4641,8 @@ class InstancedMesh3D extends EngineObject3D
     destroy(immediate)
     {
         if (this.buffer && this.bufferGeneration === render3D?.contextGeneration)
-            glContext?.deleteBuffer(this.buffer);
-        this.buffer = undefined;
+            glContext?.deleteBuffer(this.buffer), glContext?.deleteBuffer(this.colorBuffer);
+        this.buffer = this.colorBuffer = undefined;
         super.destroy(immediate);
     }
 }
@@ -4008,7 +4651,10 @@ class InstancedMesh3D extends EngineObject3D
 /**
  * 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
- * - Only the sun, render3D.sunDirection, casts shadows; these light and make highlights without one
+ * - 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
@@ -4040,10 +4686,32 @@ class Light3D extends EngineObject3D
         /** @property {boolean} - Shine from far away, from its position toward the origin, instead of out from its
          *  position with a falloff; DirectionalLight3D sets it */
         this.directional = false;
+        /** @property {number} - 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;
+        this.additive = true; // the glow is added on, in the transparent stage; a light with none draws nothing
     }
 
-    /** Lights draw nothing */
-    render3D() {}
+    /** Draw the glow, a quad facing the camera with a soft round glow on it, pulled toward the camera by half its
+     *  size so a lamp at the light does not cut into it, but never past the camera */
+    render3D()
+    {
+        if (!(this.glow > 0) || this.directional) return;
+        const r = render3D, c = this.color, pos = render3DObjectMatrix(this).getTranslation();
+        const toCamera = r.camera.pos.subtract(pos), distance = toCamera.length();
+        const at = distance ? pos.add(toCamera.scale(min(this.glow, distance) / 2 / distance)) : pos;
+        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1));
+        r.drawBillboard(at, vec2(this.glow), engineGlowTexture(this.glowFalloff), color);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////