littlejsengine 1.20.0 → 1.21.0

package/plugins/render3d.js

@@ -72,9 +72,11 @@ function render3DCanDraw()
 }
 
 // the draw state fields a batch is drawn under; lights and fog are not captured, they are read live at flush
-// the three functions below write them out by hand for speed, so a new field goes in all four
+// the three functions below write them out by hand for speed, so a new field goes in all four; emissiveMapColor is
+// compared by its values, so two objects with equal colors batch
 const RENDER3D_STATE_FIELDS = ['blend', 'additive', 'depthTest', 'depthWrite', 'cullBackFaces', 'mirrored', 'lighting',
-    'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader'];
+    'emissive', 'receiveShadow', 'specular', 'pixelated', 'shader', 'normalMap', 'normalScale', 'shininess',
+    'reflectivity', 'emissiveMap', 'emissiveMapColor'];
 
 // a copy of the draw state in one fixed shape, the fields of RENDER3D_STATE_FIELDS written out so the
 // compare below stays a handful of direct reads, it runs for every instance drawn
@@ -83,7 +85,9 @@ function render3DCaptureBatchState()
     const r = render3D;
     return {blend: r.blend, additive: r.additive, depthTest: r.depthTest, depthWrite: r.depthWrite,
         cullBackFaces: r.cullBackFaces, mirrored: r.mirrored, lighting: r.lighting, emissive: r.emissive,
-        receiveShadow: r.receiveShadow, specular: r.specular, pixelated: r.pixelated, shader: r.shader};
+        receiveShadow: r.receiveShadow, specular: r.specular, pixelated: r.pixelated, shader: r.shader,
+        normalMap: r.normalMap, normalScale: r.normalScale, shininess: r.shininess, reflectivity: r.reflectivity,
+        emissiveMap: r.emissiveMap, emissiveMapColor: (r.emissiveMapColor || WHITE).copy()}; // the caller may change it
 }
 
 // put a captured draw state back, written out the same way; the transparent stage does this for every queued draw
@@ -92,7 +96,9 @@ function render3DApplyBatchState(s)
     const r = render3D;
     r.blend = s.blend, r.additive = s.additive, r.depthTest = s.depthTest, r.depthWrite = s.depthWrite,
     r.cullBackFaces = s.cullBackFaces, r.mirrored = s.mirrored, r.lighting = s.lighting, r.emissive = s.emissive,
-    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader;
+    r.receiveShadow = s.receiveShadow, r.specular = s.specular, r.pixelated = s.pixelated, r.shader = s.shader,
+    r.normalMap = s.normalMap, r.normalScale = s.normalScale, r.shininess = s.shininess,
+    r.reflectivity = s.reflectivity, r.emissiveMap = s.emissiveMap, r.emissiveMapColor = s.emissiveMapColor;
 }
 
 // true when the current draw state differs from a captured one, so a pending batch must flush first
@@ -102,13 +108,20 @@ function render3DStateChanged(s)
     return r.blend !== s.blend || r.additive !== s.additive || r.depthTest !== s.depthTest
         || r.depthWrite !== s.depthWrite || r.cullBackFaces !== s.cullBackFaces || r.mirrored !== s.mirrored
         || r.lighting !== s.lighting || r.emissive !== s.emissive || r.receiveShadow !== s.receiveShadow
-        || r.specular !== s.specular || r.pixelated !== s.pixelated || r.shader !== s.shader;
+        || r.specular !== s.specular || r.pixelated !== s.pixelated || r.shader !== s.shader
+        || r.normalMap !== s.normalMap || r.normalScale !== s.normalScale || r.shininess !== s.shininess
+        || r.reflectivity !== s.reflectivity || r.emissiveMap !== s.emissiveMap
+        || render3DColorChanged(r.emissiveMapColor || WHITE, s.emissiveMapColor);
+}
+
+// whether two colors differ in their rgb, for the batch key's emissiveMapColor
+function render3DColorChanged(a, b) { return a.r !== b.r || a.g !== b.g || a.b !== b.b;
 }
 
 // whether a sphere is inside the view, or the shadow map's box during the shadow pass, without a vector
 function render3DSphereVisible(x, y, z, radius)
 {
-    const planes = render3D.shadowPass ? render3D.shadowPlanes : render3D.frustumPlanes;
+    const planes = render3D.shadowPass && !render3D.depthPass ? render3D.shadowPlanes : render3D.frustumPlanes;
     for (let i = 0; i < planes.length; ++i)
     {
         const p = planes[i];
@@ -208,6 +221,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;
@@ -441,6 +463,11 @@ class Render3DPlugin
          *  flat faces */
         this.smoothShading = false;
 
+        /** @property {boolean} - Draw the camera's depth into a texture each frame for post processing:
+         *  PostProcessPlugin hands it to its shader as iChannel2, read with sceneDepth(uv); off by default and free
+         *  when off, on it draws the solid objects of the default layer once more, depth only */
+        this.depthTexture = false;
+
         // shadows
         /** @property {boolean} - Cast real shadows from the sun, off by default and free when off */
         this.shadows = false;
@@ -477,8 +504,23 @@ class Render3DPlugin
         this.cullBackFaces = false;
         this.mirrored = false;
         /** @property {number} - Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and
-         *  1 adds a light's full color at its brightest; its size is fixed */
+         *  1 adds a light's full color at its brightest; shininess sets its size */
         this.specular = 0;
+        /** @property {number} - The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 100 sharp
+         *  like polished metal; set from each object's shininess */
+        this.shininess = 16;
+        /** @property {TextureInfo|undefined} - Normal map for the next draws, set from each object's normalMap
+         *  @type {TextureInfo|undefined} */
+        this.normalMap = undefined;
+        /** @property {number} - How strongly the normal map bends the surface, set from each object's normalScale */
+        this.normalScale = 1;
+        /** @property {number} - How much the surface reflects the sky, 0 to 1, set from each object's reflectivity */
+        this.reflectivity = 0;
+        /** @property {TextureInfo|undefined} - Emissive map for the next draws, set from each object's emissiveMap
+         *  @type {TextureInfo|undefined} */
+        this.emissiveMap = undefined;
+        /** @property {Color} - Multiplies the emissive map, set from each object's emissiveMapColor */
+        this.emissiveMapColor = WHITE;
         /** @property {Shader|undefined} - Custom Shader for the next draws, set from each object's shader; undefined
          *  draws with the plugin's own
          *  @type {Shader|undefined} */
@@ -580,6 +622,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>>} */
@@ -1007,7 +1056,8 @@ class Render3DPlugin
         // a far plane at Infinity has no midpoint, so put it a long way out instead
         const {near, far} = this.camera;
         const radius = far == Infinity ? near * 1e4 : (near + far) / 2;
-        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined}, ()=>
+        render3DWithState({lighting: false, blend: false, depthTest: false, depthWrite: false, fogEnd: 0, shader: undefined,
+            emissiveMap: undefined}, ()=>
             this.drawMesh(this.sky, buildMatrix(this.camera.pos, undefined, vec3(radius))));
     }
 
@@ -1132,8 +1182,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,7 +1484,9 @@ const RENDER3D_SNIPPET_NAMES =
 // uniforms: lightDir (xyz the way the sunlight travels, w = emissive, 1 or more skips the lighting),
 //   lightColor (the sun's rgb, a = specular), ambientFog (rgb, a = fogEnd), fogColor (rgb, a = fogStart),
 //   cameraPos, tex, shadowMap, shadowParams (x = shadows on, y = bias, z = blur step in texture space,
-//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive)
+//   w = how the draw finishes: 1 opaque and alpha tested, 0 blended, -1 additive),
+//   materialParams (x = normal map scale, 0 skips it, y = shininess, z = reflectivity), emissiveTint (rgb, a = the
+//   emissive map is on), skyTop, skyHorizon, skyBottom (what a reflection shows), normalTex, emissiveTex
 function render3DFragmentSource(fragmentCode)
 {
     return '#version 300 es\n' +
@@ -1441,7 +1495,8 @@ function render3DFragmentSource(fragmentCode)
         'uniform vec4 extraLights[' + RENDER3D_MAX_LIGHTS + '],extraLightColors[' + RENDER3D_MAX_LIGHTS + '];' +
         'uniform int extraLightCount;' +
         'uniform vec3 cameraPos;' +
-        'uniform sampler2D tex;' +
+        'uniform vec4 materialParams,emissiveTint,skyTop,skyHorizon,skyBottom;' +
+        'uniform sampler2D tex,normalTex,emissiveTex;' +
         'uniform bool premultipliedTexture;' + // is the texture a render target, which holds premultiplied color
         'uniform highp sampler2DShadow shadowMap;' +
         'in vec3 P,N;in vec2 T,L;in vec4 C,S;' +
@@ -1456,6 +1511,17 @@ function render3DFragmentSource(fragmentCode)
         'for(int x=-1;x<=1;++x)for(int y=-1;y<=1;++y)' +
         's+=texture(shadowMap,vec3(q.xy+vec2(x,y)*shadowParams.z,q.z));' +
         'return s/9.;}' +
+        // the normal map's normal here, in the frame that the position and texture coordinate change along across the
+        // screen, so a mesh needs no tangents; green points up the image and v runs down it, so up is -v;
+        // a mesh with no texture coordinates has no frame and keeps its own normal
+        'vec3 normalMapNormal(vec3 n){' +
+        'vec3 p1=dFdx(P),p2=dFdy(P);vec2 t1=dFdx(T),t2=dFdy(T);' +
+        'vec3 a=cross(p2,n),b=cross(n,p1),u=a*t1.x+b*t2.x,v=a*t1.y+b*t2.y;' +
+        'float k=max(dot(u,u),dot(v,v));' +
+        'if(k<=0.)return n;' +
+        'vec3 m=texture(normalTex,T).xyz*2.-1.;' +
+        'm.xy*=materialParams.x;' +
+        'return normalize((u*m.x-v*m.y)*inversesqrt(k)+n*m.z);}' +
         (fragmentCode ? RENDER3D_SNIPPET_NAMES + fragmentCode + '\n' : '') +
         'void main(){' +
         (fragmentCode ? 'vec4 t;mainImage(t,T);' : 'vec4 t=texture(tex,T);') +
@@ -1466,6 +1532,7 @@ function render3DFragmentSource(fragmentCode)
         'if(e<1.){' +
         'vec3 n=dot(N,N)>0.?normalize(N):vec3(0,1,0);' +
         'if(!gl_FrontFacing)n=-n;' + // only a double sided mesh shows a back face, light it on the side that is seen
+        'if(materialParams.x!=0.)n=normalMapNormal(n);' +
         'float nl=dot(n,-lightDir.xyz);' +
         'float s=shadow();' +
         // the ambient: one color, or blended from the ground color below to the sky color above by the way the face points
@@ -1484,15 +1551,24 @@ function render3DFragmentSource(fragmentCode)
         'float ln=dot(n,v);' +
         'vec3 lc=extraLightColors[i].rgb*extraLightColors[i].a*a*a;' +
         'l+=lc*max(0.,ln);' +
-        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),16.)*step(0.,ln);' +
+        'if(lightColor.a>0.)sp+=lc*pow(max(dot(reflect(-v,n),eye),0.),materialParams.y)*step(0.,ln);' +
         '}' +
         'c.rgb*=l*(1.-e)+e;' + // lit, blended toward its own color by how emissive it is
         // specular: the sun's only where its light hits and out of shadow, then the Light3D highlights,
         // skipped entirely when the strength is zero
         'if(lightColor.a>0.){' +
         'vec3 r=reflect(lightDir.xyz,n);' +
-        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),16.)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        'c.rgb+=lightColor.rgb*pow(max(dot(r,eye),0.),materialParams.y)*lightColor.a*step(0.,nl)*s*(1.-e)+sp*lightColor.a*(1.-e);' +
+        '}' +
+        // the sky along the reflected view, more at a glancing angle (Schlick's Fresnel); sky light, so the sun's
+        // shadow does not dim it
+        'if(materialParams.z>0.){' +
+        'vec3 w=normalize(P-cameraPos),q=reflect(w,n);' +
+        'float f=materialParams.z+(1.-materialParams.z)*pow(1.-max(dot(n,-w),0.),5.);' +
+        'c.rgb=mix(c.rgb,q.y>0.?mix(skyHorizon.rgb,skyTop.rgb,q.y):mix(skyHorizon.rgb,skyBottom.rgb,-q.y),f);' +
         '}}else c.rgb*=e;' + // fully emissive: its own color, or brighter, with no lighting to work out
+        // the emissive map adds its light on top, lit or not
+        'if(emissiveTint.a>0.)c.rgb+=texture(emissiveTex,T).rgb*emissiveTint.rgb;' +
         'if(ambientFog.a>0.){' +
         'float z=distance(cameraPos,P);' +
         'c.rgb=mix(c.rgb,shadowParams.w<0.?vec3(0):fogColor.rgb,smoothstep(fogColor.a,ambientFog.a,z));' +
@@ -1519,6 +1595,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);
@@ -1611,6 +1689,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
 }
@@ -1689,25 +1769,68 @@ function render3DSampler(wrap, pixelated)
 }
 
 // bind the texture of a tile or texture, white when there is none or it is not loaded, with the 3D sampler that
-// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps
-function render3DBindTexture(tileInfo, state=render3D)
+// matches its wrap mode; the first time a texture is used in 3D it gets its mipmaps; on unit 0, the color texture,
+// or another unit, the material maps, after which unit 0 is active again
+function render3DBindTexture(tileInfo, state=render3D, unit=0)
 {
     const gl = glContext, r = render3D;
     const textureInfo = render3DTextureOf(tileInfo);
     const texture = textureInfo?.glTexture || r.whiteTexture;
+    unit && gl.activeTexture(gl.TEXTURE0 + unit);
     gl.bindTexture(gl.TEXTURE_2D, texture);
     if (texture === r.whiteTexture || !r.mipmaps && !state.pixelated)
-        return gl.bindSampler(0, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
-                                        // or anisotropy, and filtering it that way costs every untextured fragment
-    gl.bindSampler(0, render3DSampler(textureInfo?.wrap, state.pixelated));
-    glUpdateMipmaps(texture); // drawn into since its mipmaps were made
-    if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        gl.bindSampler(unit, null); // the texture's own filtering, as in 2D; the white texel needs no mipmaps
+                                    // or anisotropy, and filtering it that way costs every untextured fragment
+    else
+    {
+        gl.bindSampler(unit, render3DSampler(textureInfo?.wrap, state.pixelated));
+        glUpdateMipmaps(texture); // drawn into since its mipmaps were made
+        if (!state.pixelated && !glMipmappedTextures.has(texture)) // a hard edged draw never reads them
+        {
+            glMipmappedTextures.add(texture); // the core makes them again when the texture changes
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+    }
+    unit && gl.activeTexture(gl.TEXTURE0);
+}
+
+// the material's uniforms and maps for a draw: the normal map on unit 2 and the emissive map on unit 3, white when
+// unused and bound only when they change, and the sky a reflection shows, the colors setSky was given or the
+// ambient ones; with nothing set every part of it is skipped in the shader, and a map with no GL texture yet, or
+// one freed, counts as none, since the white texture in its place would bend every normal or light the surface
+function render3DSetMaterialUniforms(state)
+{
+    const r = render3D, loaded = (map)=> render3DTextureOf(map)?.glTexture ? map : undefined;
+    const normalMap = state.normalScale ? loaded(state.normalMap) : undefined, emissiveMap = loaded(state.emissiveMap);
+    render3DUniform4f('materialParams', normalMap ? state.normalScale : 0, state.shininess, state.reflectivity, 0);
+    const ec = state.emissiveMapColor || WHITE;
+    emissiveMap ? render3DUniform4f('emissiveTint', ec.r, ec.g, ec.b, 1) : render3DUniform4f('emissiveTint', 0, 0, 0, 0);
+    render3DBindMap(2, normalMap, state);
+    render3DBindMap(3, emissiveMap, state);
+    if (state.reflectivity > 0)
     {
-        glMipmappedTextures.add(texture); // the core makes them again when the texture changes
-        gl.generateMipmap(gl.TEXTURE_2D);
+        const sky = r.sky && render3DSkyColors.get(r.sky), a = r.ambientColor, g = r.ambientGroundColor || a;
+        const top = sky ? sky[0] : a, bottom = sky ? sky[2] : g;
+        render3DUniform4f('skyTop', top.r, top.g, top.b, 1);
+        render3DUniform4f('skyBottom', bottom.r, bottom.g, bottom.b, 1);
+        sky ? render3DUniform4f('skyHorizon', sky[1].r, sky[1].g, sky[1].b, 1) :
+            render3DUniform4f('skyHorizon', (a.r + g.r) / 2, (a.g + g.g) / 2, (a.b + g.b) / 2, 1);
     }
 }
 
+// what each material map unit has bound, index 2 and 3 the maps and 4 and 5 whether each is pixelated, forgotten at
+// the start and end of each pass
+let render3DBoundMaps = [];
+
+// bind a material map to its unit, or white for none, only when it or its filtering changed since the last draw
+function render3DBindMap(unit, map, state)
+{
+    const bound = render3DBoundMaps, pixelated = !!map && state.pixelated;
+    if (bound[unit] === map && bound[unit + 2] === pixelated) return;
+    bound[unit] = map, bound[unit + 2] = pixelated;
+    render3DBindTexture(map, state, unit);
+}
+
 // send a vec4 uniform of the main shader only when its value changed since the last send
 function render3DUniform4f(name, x, y, z, w)
 {
@@ -1845,6 +1968,7 @@ function render3DSetDrawUniforms(matrix, tileInfo, tint, uvRect, state=render3D)
     // a render target's texture holds premultiplied color, the blend writes it that way, so the shader undoes it
     const textureInfo = render3DTextureOf(tileInfo);
     render3DUniform1i('premultipliedTexture', +!!(textureInfo?.glTexture && glPremultipliedTextures.has(textureInfo.glTexture)));
+    render3DSetMaterialUniforms(state);
 }
 
 // the six flat sides of the camera's visible box, each as [x, y, z, w] facing inward
@@ -1866,6 +1990,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 +2000,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
@@ -1924,7 +2050,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 +2064,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 +2081,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,6 +2090,21 @@ function render3DRenderPass(after2D)
     }
 }
 
+// put a texture on both material map units with no sampler, white at the start of the pass and none at its end, and
+// forget what the map cache thought was bound; unit 0 is active after
+function render3DSetMapUnits(texture)
+{
+    const gl = glContext;
+    for (const unit of [2, 3])
+    {
+        gl.activeTexture(gl.TEXTURE0 + unit);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.bindSampler(unit, null);
+    }
+    gl.activeTexture(gl.TEXTURE0);
+    render3DBoundMaps = [];
+}
+
 // create the shadow map depth texture and framebuffer at a size, or keep them when the size matches
 function render3DUpdateShadowMap(size)
 {
@@ -2036,6 +2181,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 +2393,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 +2924,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 +3427,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 +3498,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 +3529,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 +3557,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 +3590,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 +3648,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 +3836,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 +3875,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 +3909,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 +3958,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 +3967,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 +4000,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 +4023,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
@@ -4040,10 +4366,53 @@ class Light3D extends EngineObject3D
         /** @property {boolean} - Shine from far away, from its position toward the origin, instead of out from its
          *  position with a falloff; DirectionalLight3D sets it */
         this.directional = false;
+        /** @property {number} - Size of a soft hazy glow drawn over the light, like a lamp at night, 0 for none; it
+         *  is added onto what is behind it, and what is in front of the light hides it */
+        this.glow = 0;
+        /** @property {number} - How fast the glow fades from its middle: 1 by default, .5 a wide haze, 2 a tight
+         *  bright core */
+        this.glowFalloff = 1;
+        this.additive = true; // the glow is added on, in the transparent stage; a light with none draws nothing
     }
 
-    /** Lights draw nothing */
-    render3D() {}
+    /** Draw the glow, a quad facing the camera with a soft round glow on it, pulled toward the camera by half its
+     *  size so a lamp at the light does not cut into it, but never past the camera */
+    render3D()
+    {
+        if (!(this.glow > 0) || this.directional) return;
+        const r = render3D, c = this.color, pos = render3DObjectMatrix(this).getTranslation();
+        const toCamera = r.camera.pos.subtract(pos), distance = toCamera.length();
+        const at = distance ? pos.add(toCamera.scale(min(this.glow, distance) / 2 / distance)) : pos;
+        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1));
+        r.drawBillboard(at, vec2(this.glow), render3DGlow(this.glowFalloff), color);
+    }
+}
+
+// how strong a light's glow is at a distance from its middle, 0 there to 1 at the edge: a bell, full in the middle
+// and nothing at the edge, fading faster the higher the falloff
+function render3DGlowAlpha(r, falloff)
+{
+    const k = 3.5 * falloff, edge = Math.exp(-k);
+    return (Math.exp(-k * r * r) - edge) / (1 - edge);
+}
+
+// the soft round glow of the lights, one texture for each falloff, rounded to a tenth so a changing falloff makes
+// only a few, each made once from a canvas; undefined headless or without a canvas
+const render3DGlowTextures = new Map;
+function render3DGlow(falloff=1)
+{
+    ASSERT(isNumber(falloff) && falloff > 0, 'glowFalloff must be a number above 0');
+    const key = max(round(falloff * 10), 1) / 10;
+    let texture = render3DGlowTextures.get(key);
+    if (texture || !glContext || typeof OffscreenCanvas == 'undefined') return texture;
+    const size = 64, context = createCanvasContext(size), steps = 16;
+    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    for (let i = 0; i <= steps; ++i)
+        gradient.addColorStop(i / steps, 'rgba(255,255,255,' + render3DGlowAlpha(i / steps, key).toFixed(4) + ')');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, size, size);
+    render3DGlowTextures.set(key, texture = new TextureInfo(context.canvas));
+    return texture;
 }
 
 ///////////////////////////////////////////////////////////////////////////////