littlejsengine 1.21.0 → 1.23.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,22 +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; emissiveMapColor is
-// compared by its values, so two objects with equal colors batch
+// 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', '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,
-        normalMap: r.normalMap, normalScale: r.normalScale, shininess: r.shininess, reflectivity: r.reflectivity,
-        emissiveMap: r.emissiveMap, emissiveMapColor: (r.emissiveMapColor || WHITE).copy()}; // the caller may change it
+    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
@@ -101,21 +131,23 @@ function render3DApplyBatchState(s)
     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
-        || r.normalMap !== s.normalMap || r.normalScale !== s.normalScale || r.shininess !== s.shininess
-        || r.reflectivity !== s.reflectivity || r.emissiveMap !== s.emissiveMap
-        || render3DColorChanged(r.emissiveMapColor || WHITE, s.emissiveMapColor);
-}
-
-// whether two colors differ in their rgb, for the batch key's emissiveMapColor
-function render3DColorChanged(a, b) { return a.r !== b.r || a.g !== b.g || a.b !== b.b;
+    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
@@ -193,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];
@@ -201,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
@@ -251,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
@@ -265,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);
     }
@@ -303,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;
@@ -318,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);
     }
@@ -369,11 +415,41 @@ 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;
+}
+
+// the widest cone a shadow map can look down, to each side; the light that casts the shadows lights no wider, or
+// what is past the map's edge would be lit with nothing to shade it
+const RENDER3D_SHADOW_CONE_MAX = 1.35;
+
+// 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 widest = light === render3DShadowCaster() ? RENDER3D_SHADOW_CONE_MAX : PI;
+    const angle = light.directional ? 0 : min(light.coneAngle, widest);
+    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)
@@ -425,7 +501,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 */
@@ -471,8 +555,16 @@ class Render3DPlugin
         // 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 */
@@ -485,50 +577,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; shininess sets its size */
-        this.specular = 0;
-        /** @property {number} - The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 100 sharp
-         *  like polished metal; set from each object's shininess */
-        this.shininess = 16;
-        /** @property {TextureInfo|undefined} - Normal map for the next draws, set from each object's normalMap
-         *  @type {TextureInfo|undefined} */
-        this.normalMap = undefined;
-        /** @property {number} - How strongly the normal map bends the surface, set from each object's normalScale */
-        this.normalScale = 1;
-        /** @property {number} - How much the surface reflects the sky, 0 to 1, set from each object's reflectivity */
-        this.reflectivity = 0;
-        /** @property {TextureInfo|undefined} - Emissive map for the next draws, set from each object's emissiveMap
-         *  @type {TextureInfo|undefined} */
-        this.emissiveMap = undefined;
-        /** @property {Color} - Multiplies the emissive map, set from each object's emissiveMapColor */
-        this.emissiveMapColor = WHITE;
-        /** @property {Shader|undefined} - Custom Shader for the next draws, set from each object's shader; undefined
-         *  draws with the plugin's own
-         *  @type {Shader|undefined} */
-        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} */
@@ -551,9 +599,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;
 
@@ -597,7 +642,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>>} */
@@ -637,6 +681,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} */
@@ -664,6 +711,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
 
@@ -773,7 +930,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]
@@ -787,7 +945,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();
@@ -851,15 +1011,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);
@@ -867,8 +1027,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
@@ -1064,6 +1224,24 @@ class Render3DPlugin
     /** 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);
+            // the near plane stays in front of the far one however small the light
+            const far = caster.radius, near = min(max(far / 500, .02), far / 2);
+            const fov = min(caster.coneAngle, RENDER3D_SHADOW_CONE_MAX) * 2 + .1;
+            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();
@@ -1493,6 +1671,7 @@ function render3DFragmentSource(fragmentCode)
         '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 vec4 materialParams,emissiveTint,skyTop,skyHorizon,skyBottom;' +
@@ -1501,12 +1680,14 @@ function render3DFragmentSource(fragmentCode)
         '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));' +
@@ -1534,7 +1715,9 @@ function render3DFragmentSource(fragmentCode)
         '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
@@ -1550,6 +1733,11 @@ 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.),materialParams.y)*step(0.,ln);' +
         '}' +
@@ -1604,6 +1792,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)
     {
@@ -1744,18 +1933,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');
@@ -1783,7 +1973,7 @@ function render3DBindTexture(tileInfo, state=render3D, unit=0)
                                     // or anisotropy, and filtering it that way costs every untextured fragment
     else
     {
-        gl.bindSampler(unit, render3DSampler(textureInfo?.wrap, state.pixelated));
+        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
         {
@@ -1963,7 +2153,9 @@ 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);
@@ -2029,6 +2221,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)=>
     {
@@ -2039,6 +2233,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
@@ -2110,6 +2305,7 @@ 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);
@@ -4162,20 +4358,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
 {
@@ -4194,39 +4394,112 @@ 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
      *  @param {number} i
      *  @param {Matrix4} matrix */
     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);
     }
 
@@ -4236,8 +4509,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;
     }
 
@@ -4248,26 +4521,71 @@ 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;
+    }
+
+    /** 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;
+    }
 
-        // 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 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} */
@@ -4281,41 +4599,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;
     }
 
@@ -4324,8 +4647,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);
     }
 }
@@ -4334,13 +4657,16 @@ 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
  * - radius is a world distance, so scale3D does not change it
  * - An alpha, an intensity or a radius of 0 switches it off, and a light that is off takes none of those slots
- * - Draws nothing itself, add a glow with drawSoftDisc or a small emissive mesh if it should be seen
+ * - Draws nothing but its glow, when it has one; add a small emissive mesh if the lamp itself should be seen
  * @extends EngineObject3D
  * @memberof Render3D
  * @example
@@ -4366,6 +4692,12 @@ 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;
@@ -4383,45 +4715,20 @@ class Light3D extends EngineObject3D
         const r = render3D, c = this.color, pos = render3DObjectMatrix(this).getTranslation();
         const toCamera = r.camera.pos.subtract(pos), distance = toCamera.length();
         const at = distance ? pos.add(toCamera.scale(min(this.glow, distance) / 2 / distance)) : pos;
-        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1));
-        r.drawBillboard(at, vec2(this.glow), render3DGlow(this.glowFalloff), color);
+        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1)), texture = engineGlowTexture(this.glowFalloff);
+        // a browser that can not make the glow's texture draws no glow, not a plain square
+        if (texture || !glContext)
+            r.drawBillboard(at, vec2(this.glow), texture, color);
     }
 }
 
-// how strong a light's glow is at a distance from its middle, 0 there to 1 at the edge: a bell, full in the middle
-// and nothing at the edge, fading faster the higher the falloff
-function render3DGlowAlpha(r, falloff)
-{
-    const k = 3.5 * falloff, edge = Math.exp(-k);
-    return (Math.exp(-k * r * r) - edge) / (1 - edge);
-}
-
-// the soft round glow of the lights, one texture for each falloff, rounded to a tenth so a changing falloff makes
-// only a few, each made once from a canvas; undefined headless or without a canvas
-const render3DGlowTextures = new Map;
-function render3DGlow(falloff=1)
-{
-    ASSERT(isNumber(falloff) && falloff > 0, 'glowFalloff must be a number above 0');
-    const key = max(round(falloff * 10), 1) / 10;
-    let texture = render3DGlowTextures.get(key);
-    if (texture || !glContext || typeof OffscreenCanvas == 'undefined') return texture;
-    const size = 64, context = createCanvasContext(size), steps = 16;
-    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
-    for (let i = 0; i <= steps; ++i)
-        gradient.addColorStop(i / steps, 'rgba(255,255,255,' + render3DGlowAlpha(i / steps, key).toFixed(4) + ')');
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, size, size);
-    render3DGlowTextures.set(key, texture = new TextureInfo(context.canvas));
-    return texture;
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * DirectionalLight3D - A Light3D that shines from far away with no falloff, like sunlight
  * - It shines from its position toward the origin, like a three.js DirectionalLight: only the direction to it
  *   counts, so moving it or its parent swings the light around; parent it to a sun in the sky and it follows
  * - It cannot sit on the origin, since that leaves no direction
- * - Like every Light3D it casts no shadow, only the sun, render3D.sunDirection, does
+ * - It casts no shadow: the sun, render3D.sunDirection, does, or a spotlight set as render3D.shadowLight
  * @extends Light3D
  * @memberof Render3D
  * @example