littlejsengine 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -39,7 +39,10 @@
     "plugins/",
     "!plugins/box2d.wasm.*",
     "COPYRIGHT.txt",
-    "FAQ.md"
+    "FAQ.md",
+    "CHANGELOG.md",
+    "REFERENCE.md",
+    "EDITOR.md"
   ],
   "scripts": {
     "build": "node src/engineBuild.mjs",
@@ -53,7 +56,6 @@
   },
   "devDependencies": {
     "bestzip": "^2.2.1",
-    "clean-jsdoc-theme": "~4.2.9",
     "electron": "^38.2.0",
     "electron-packager": "^17.1.2",
     "google-closure-compiler": "~20230502.0.0",

package/plugins/gltf.js

@@ -405,6 +405,11 @@ async function parseGLTF(data, baseUrl='')
     for (const name of json.extensionsRequired || [])
         if (name === 'KHR_draco_mesh_compression' || name === 'EXT_meshopt_compression')
             throw new Error(`glTF with ${name} is not read, export it uncompressed`);
+        else if (name === 'KHR_texture_basisu')
+            throw new Error('glTF with KHR_texture_basisu textures is not read, export them as png or jpeg');
+    // one that only may use them has other images to fall back on, or none: said, since it loads with them left out
+    if (json.extensionsUsed?.includes('KHR_texture_basisu') && !json.extensionsRequired?.includes('KHR_texture_basisu'))
+        console.warn('glTF: KHR_texture_basisu textures are not read and are left out, export them as png or jpeg');
 
     // the buffers: the GLB's own, a data uri, or a file beside the model
     const buffers = await Promise.all((json.buffers || []).map((buffer, i)=>
@@ -447,7 +452,8 @@ async function parseGLTF(data, baseUrl='')
             const bitmap = normalTextures.has(index) ?
                 await createImageBitmap(blob, {colorSpaceConversion: 'none', premultiplyAlpha: 'none'}) :
                 opaque ? await createImageBitmap(blob, {premultiplyAlpha: 'none'}).then(gltfOpaqueImage) : await createImageBitmap(blob);
-            return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497]); // REPEAT by default
+            // REPEAT by default, and hard edged only when its sampler says NEAREST, not as the game's tiles are
+            return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497], sampler.magFilter === 9728);
         }
         catch (e) { LOG('glTF image not loaded', e); }
     }));
@@ -557,17 +563,25 @@ function gltfOpaqueImage(image)
 {
     const gl = glContext, {width, height} = image;
     if (gl.isContextLost()) return image; // nothing to read back through, it keeps its alpha
-    const texture = gl.createTexture(), framebuffer = gl.createFramebuffer(), bound = gl.getParameter(gl.FRAMEBUFFER_BINDING);
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    // the room to read into first: for a huge image it can fail, and must not with the framebuffer bound
     const data = new Uint8ClampedArray(width * height * 4);
-    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); // row 0 is the image's first row, as uploaded
-    gl.bindFramebuffer(gl.FRAMEBUFFER, bound);
-    gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
-    gl.deleteFramebuffer(framebuffer);
-    gl.deleteTexture(texture);
+    const texture = gl.createTexture(), framebuffer = gl.createFramebuffer(), bound = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+    try
+    {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); // row 0 is the image's first row, as uploaded
+    }
+    finally
+    {
+        // the 2D renderer's own bindings back, whatever happened
+        gl.bindFramebuffer(gl.FRAMEBUFFER, bound);
+        gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteTexture(texture);
+    }
     for (let i = 3; i < data.length; i += 4)
         data[i] = 255;
     image.close();
@@ -704,7 +718,7 @@ function gltfAccessor(json, buffers, index)
     }
     if (scale !== 1)
         for (let i = 0; i < out.length; ++i)
-            out[i] /= scale;
+            out[i] = max(out[i] / scale, -1); // a signed type's lowest value is -1 too, as the format says
     return {data: out, components, count: a.count};
 }
 
@@ -768,8 +782,10 @@ function gltfPart(json, buffers, textures, primitive, matrix, name)
     const [er, eg, eb] = material.emissiveFactor || [0, 0, 0];
     if (er || eg || eb)
     {
+        // KHR_materials_emissive_strength makes it that many times brighter, emission above 1 in Blender
+        const strength = material.extensions?.KHR_materials_emissive_strength?.emissiveStrength ?? 1;
         part.emissiveMap = emissiveRef ? textures[emissiveRef.index] : gltfWhiteTexture();
-        part.emissiveMapColor = rgb(gltfSRGB(er), gltfSRGB(eg), gltfSRGB(eb));
+        part.emissiveMapColor = rgb(gltfSRGB(er) * strength, gltfSRGB(eg) * strength, gltfSRGB(eb) * strength);
     }
     return part;
 }

package/plugins/pluginExport.js

@@ -44,10 +44,6 @@ export
     LightSystemPlugin,
     Light,
 
-    // ZzFXMusic
-    ZzFXMusic,
-    zzfxM,
-
     // Audio Effects
     AudioEffect,
     AudioFilter,

package/plugins/postProcess.js

@@ -158,8 +158,11 @@ class PostProcessPlugin
             {
                 // copy main canvas to work canvas at the backing store size,
                 // mainCanvasSize is css pixels so it would lose resolution
-                workCanvas.width = mainCanvas.width;
-                workCanvas.height = mainCanvas.height;
+                // sized again only when the canvas changed, setting a size remakes the canvas even to the same one
+                if (workCanvas.width !== mainCanvas.width || workCanvas.height !== mainCanvas.height)
+                    workCanvas.width = mainCanvas.width, workCanvas.height = mainCanvas.height;
+                else
+                    workContext.clearRect(0, 0, workCanvas.width, workCanvas.height);
                 glCopyToContext(workContext);
                 workContext.drawImage(mainCanvas, 0, 0);
                 // clear the main canvas with clearRect, resizing it would also

package/plugins/render3d.js

@@ -302,17 +302,19 @@ 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
 // 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)
+// so it never sets the draw state for them, which would move the state's version at every draw; drawBillboard
+// passes that its batch is unlit, for the same reason
+function render3DInstanceSlot(mesh, textureInfo, mirrored, unlit=false)
 {
     const r = render3D;
     if (mesh.instanceCount && (mesh.instanceTextureInfo !== textureInfo || mesh.instanceMirrored !== mirrored
-        || render3DStateChanged(mesh.instanceState)))
+        || mesh.instanceUnlit !== unlit || render3DStateChanged(mesh.instanceState)))
         render3DFlushInstances(mesh);
     if (!mesh.instanceCount)
     {
         mesh.instanceTextureInfo = textureInfo;
         mesh.instanceMirrored = mirrored;
+        mesh.instanceUnlit = unlit;
         mesh.instanceState = render3DCaptureBatchState();
         r.instanceMeshes.push(mesh);
     }
@@ -346,6 +348,8 @@ function render3DFlushInstances(only)
         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;
+        if (mesh.instanceUnlit) // a batch of sprites
+            state.lighting = false;
         render3DDrawInstanced(mesh, buffer, count, mesh.instanceTextureInfo, state);
     }
     if (!only)
@@ -702,6 +706,7 @@ class Render3DPlugin
         /** @type {TextureInfo|undefined} */
         this.streamTileInfo = undefined;
         this.streamState = undefined; // captured state the pending batch was drawn under
+        this.streamUnlit = false;     // the pending batch is drawn unlit whatever that state says, billboards are
         /** @type {Mesh|undefined} */
         this.capture = undefined;     // the mesh a bake is filling
         /** @type {Array<{distance: number, state: Object, draw: function(): void}>|undefined} */
@@ -910,8 +915,8 @@ class Render3DPlugin
     }
 
     /** Find the nearest object under a screen position or along a ray, for clicking on things
-     *  - Each object is tested as the box around its mesh in its own space, or a sprite as the quad it draws,
-     *    not triangle by triangle
+     *  - A mesh is hit on its triangles, the ones that face the ray as they are drawn, both sides of a doubleSided
+     *    mesh; a sprite is hit as the quad it draws, and a height map or a voxel map on its surface
      *  - engineObjectsRaycast3D is the other half of this, every object along a ray instead of the nearest
      *  @param {Vector2|Ray3D} from - A screen position like mousePosScreen, or a ray to look along
      *  @param {Array<EngineObject>} [objects] - Defaults to every object; only those with a mesh or a sprite count
@@ -1092,6 +1097,8 @@ class Render3DPlugin
     {
         if (!this.streamCount || !render3DCanDraw()) return;
         const gl = glContext;
+        if (this.streamUnlit)
+            this.streamState.lighting = false; // its own copy of the state
         render3DSetDrawUniforms(RENDER3D_IDENTITY, this.streamTileInfo, WHITE, RENDER3D_FULL_UV_RECT, this.streamState);
         render3DBindVertexBuffer(this.streamBuffer);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.streamFloats, 0, this.streamCount * RENDER3D_VERTEX_FLOATS);
@@ -1326,13 +1333,34 @@ class Render3DPlugin
             return this.queueTransparent(p, ()=> this.drawBillboard(p, s, tileInfo, c, angle, upright));
         }
 
-        // the quad's six stream vertices written straight in with no vectors made, unlit, for sprites, and for
-        // particles when instancing is off
-        const lit = this.lighting;
-        this.lighting = this.shadowPass && lit; // unlit on screen, in the shadow map the object's flag decides
-        let uvRect;
-        try { uvRect = render3DBeginStrip(6, tileInfo); }
-        finally { this.lighting = lit; }
+        // unlit on screen, in the shadow map the object's flag decides; the batch is told, the draw state is not
+        // set, which would move its version at every sprite
+        const unlit = !this.shadowPass;
+        if (!this.blend && this.depthTest && this.instancing)
+        {
+            // an opaque sprite is one more instance of the shared quad, as a mesh's uses are: every sprite of a
+            // sheet is one instanced draw at the end of the stage, with nothing written per corner; the shader
+            // drops its see through texels, so it needs no sorting
+            if (!render3DCanDraw() || this.shadowPass && !this.lighting) return; // unlit things cast no shadow
+            if (this.frustumCulling && !render3DSphereVisible(pos.x, pos.y, pos.z, hypot(size.x, size.y) / 2))
+                return;
+            const quad = this.billboardMesh, cb = this.cameraBack, uv = render3DGetTileUVs(tileInfo);
+            render3DMeshUpload(quad);
+            // the quad's half axes, doubled for its unit square
+            const a = render3DBillboardAxes(size, angle, upright);
+            const k = render3DInstanceSlot(quad, render3DTextureOf(tileInfo), false, unlit), data = quad.instanceData;
+            data[k]    = a[0] * 2; data[k+1]  = a[1] * 2; data[k+2]  = a[2] * 2; data[k+3]  = 0;
+            data[k+4]  = a[3] * 2; data[k+5]  = a[4] * 2; data[k+6]  = a[5] * 2; data[k+7]  = 0;
+            data[k+8]  = cb.x;     data[k+9]  = cb.y;     data[k+10] = cb.z;     data[k+11] = 0;
+            data[k+12] = pos.x;    data[k+13] = pos.y;    data[k+14] = pos.z;    data[k+15] = 1;
+            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;
+            return;
+        }
+
+        // one that blends is drawn in its sorted place: the quad's six stream vertices written straight in with no
+        // vectors made, for sprites that blend, and for particles when instancing is off
+        const uvRect = render3DBeginStrip(6, tileInfo, unlit);
         if (!uvRect) return;
         const a = render3DBillboardAxes(size, angle, upright);
         const rx = a[0], ry = a[1], rz = a[2], ux = a[3], uy = a[4], uz = a[5];
@@ -2444,8 +2472,9 @@ function render3DRenderDepth()
 // which way they face, so keeping the count even keeps every strip facing out.
 
 // make room in the stream for a strip of count vertices under the current state and texture, flushing a batch that
-// differs first; returns the uv rect to map the vertices with, or undefined when nothing can be drawn
-function render3DBeginStrip(count, tileInfo)
+// differs first; returns the uv rect to map the vertices with, or undefined when nothing can be drawn; unlit draws
+// the batch unlit whatever the state says, so a billboard does not set the state and set it back at every draw
+function render3DBeginStrip(count, tileInfo, unlit=false)
 {
     const r = render3D;
     if (!render3DCanDraw()) return;
@@ -2453,12 +2482,13 @@ function render3DBeginStrip(count, tileInfo)
     ASSERT(count <= RENDER3D_MAX_STREAM_VERTS, 'strip is too large for the stream, bake it into a mesh');
     if (count > RENDER3D_MAX_STREAM_VERTS) return;
     const textureInfo = render3DTextureOf(tileInfo);
-    if (r.streamCount && (textureInfo !== r.streamTileInfo || render3DStateChanged(r.streamState)
-        || r.streamCount + count > RENDER3D_MAX_STREAM_VERTS))
+    if (r.streamCount && (textureInfo !== r.streamTileInfo || r.streamUnlit !== unlit
+        || render3DStateChanged(r.streamState) || r.streamCount + count > RENDER3D_MAX_STREAM_VERTS))
         r.flush();
     render3DFlushBeforeOverlay();
     if (!r.streamCount)
         r.streamState = render3DCaptureBatchState();
+    r.streamUnlit = unlit;
     r.streamTileInfo = textureInfo;
     return render3DGetTileUVs(tileInfo);
 }
@@ -4253,8 +4283,8 @@ function engineObjectsCollect3D(pos, size, objects=engineObjects, testCenters=fa
     return collected;
 }
 
-// how far along a ray an object is hit, or undefined for a miss; each one is tested as the box around its mesh in
-// its own space, or a sprite as the quad it draws, not triangle by triangle
+// how far along a ray an object is hit, or undefined for a miss; a mesh is hit on its triangles, in its own space,
+// and a sprite as the quad it draws
 function render3DRaycastObject(ray, o)
 {
     if (o.destroyed || !(o instanceof EngineObject3D)) return;
@@ -4271,25 +4301,55 @@ function render3DRaycastObject(ray, o)
     const distance = raycastSphere(ray, center, radius);
     if (distance === undefined) return;
 
-    // the sphere is a quick reject, a mesh is hit where the ray meets its box in its own space, since a wide floor's
-    // sphere reaches far above it; the direction is not made unit length, so the distance holds in the world;
+    // the sphere and then the box in the mesh's own space are quick rejects, and a ray that meets the box is tested
+    // against the triangles; the direction is not made unit length, so the distance holds in the world;
     // a mesh flattened to nothing on an axis has no inverse, it is hit as a disc like a sprite
     if (!matrix.determinant()) return render3DRaycastDisc(ray, center, radius);
     const inverse = matrix.copy().invert(), bounds = mesh.bounds || mesh.getBounds();
     const local = new Ray3D(inverse.transformPoint(ray.origin), inverse.transformDirection(ray.direction));
     const hit = raycastBox(local, bounds.min.add(bounds.max).scale(.5), bounds.max.subtract(bounds.min));
-    if (hit !== 0) return hit;
+    if (hit === undefined || !ray.direction.lengthSquared())
+        return hit; // a ray of no length is where it starts, inside the box
+    return render3DRaycastMesh(local, mesh);
+}
 
-    // it starts inside the box, like a camera on terrain or in a room, so it is hit where it leaves, and what stands
-    // inside comes first
-    let exit = Infinity;
-    for (const k of ['x', 'y', 'z'])
-    {
-        const d = local.direction[k];
-        if (d)
-            exit = min(exit, ((d > 0 ? bounds.max[k] : bounds.min[k]) - local.origin[k]) / d);
-    }
-    return exit === Infinity ? 0 : exit; // a ray of no length is where it starts
+// how far along a ray, in the mesh's own space, its nearest triangle is hit, or undefined: the triangles that face
+// the ray as the pass draws them, clockwise from the front, and the back faces too of a doubleSided mesh; a strip's
+// triangle i is (i-2, i-1, i), the odd ones read the other way, and a join between its pieces has no area and is
+// never hit; nothing is kept between calls, so a mesh that changed is hit as it is now
+function render3DRaycastMesh(ray, mesh)
+{
+    const points = mesh.points, indices = mesh.indices, both = mesh.doubleSided;
+    const ox = ray.origin.x, oy = ray.origin.y, oz = ray.origin.z;
+    const dx = ray.direction.x, dy = ray.direction.y, dz = ray.direction.z;
+    const count = indices ? indices.length / 3 | 0 : points.length - 2;
+    let nearest;
+    for (let i = 0; i < count; ++i)
+    {
+        // the corners clockwise from the front: an indexed list is written the other way round
+        let a, b, c;
+        if (indices)
+            a = points[indices[i*3]], b = points[indices[i*3+2]], c = points[indices[i*3+1]];
+        else
+            a = points[i & 1 ? i + 1 : i], b = points[i & 1 ? i : i + 1], c = points[i + 2];
+
+        // Moller and Trumbore: the determinant is the ray along the face's normal, below zero from the front
+        const e1x = b.x - a.x, e1y = b.y - a.y, e1z = b.z - a.z;
+        const e2x = c.x - a.x, e2y = c.y - a.y, e2z = c.z - a.z;
+        const hx = dy * e2z - dz * e2y, hy = dz * e2x - dx * e2z, hz = dx * e2y - dy * e2x;
+        const det = e1x * hx + e1y * hy + e1z * hz;
+        if (both ? !det : !(det < 0)) continue;
+        const sx = ox - a.x, sy = oy - a.y, sz = oz - a.z;
+        const u = (sx * hx + sy * hy + sz * hz) / det;
+        if (!(u >= 0 && u <= 1)) continue;
+        const qx = sy * e1z - sz * e1y, qy = sz * e1x - sx * e1z, qz = sx * e1y - sy * e1x;
+        const v = (dx * qx + dy * qy + dz * qz) / det;
+        if (!(v >= 0 && u + v <= 1)) continue;
+        const t = (e2x * qx + e2y * qy + e2z * qz) / det;
+        if (t >= 0 && !(t >= nearest))
+            nearest = t;
+    }
+    return nearest;
 }
 
 // a sprite is the quad drawBillboard draws, its size3D grown by the x and y scale as the draw does, facing the camera
@@ -4667,10 +4727,12 @@ class InstancedMesh3D extends EngineObject3D
  * - radius is a world distance, so scale3D does not change it
  * - An alpha, an intensity or a radius of 0 switches it off, and a light that is off takes none of those slots
  * - Draws nothing but its glow, when it has one; add a small emissive mesh if the lamp itself should be seen
+ * - addFlare gives it a lens flare, see LensFlare3D
  * @extends EngineObject3D
  * @memberof Render3D
  * @example
  * const torch = new Light3D(vec3(0, 3, 0), 10, hsl(.1, 1, .65));
+ * torch.addFlare();   // light in the lens when the torch is in view
  */
 class Light3D extends EngineObject3D
 {
@@ -4705,6 +4767,49 @@ class Light3D extends EngineObject3D
          *  bright core */
         this.glowFalloff = 1;
         this.additive = true; // the glow is added on, in the transparent stage; a light with none draws nothing
+        /** @type {LensFlare3D|undefined} */
+        this.flareObject = undefined;
+    }
+
+    /** Give the light a lens flare, made with the arguments of LensFlare3D, in place of the one it had
+     *  @param {number} [size] - Scales every part of it
+     *  @param {number} [count] - How many ghosts there are, besides the glow at the light
+     *  @param {number} [intensity] - How bright it is
+     *  @param {number} [saturation] - How colorful the ghosts are
+     *  @return {LensFlare3D} - The flare, to change: light.addFlare().shapes = ['hex'] */
+    addFlare(size, count, intensity, saturation)
+    {
+        const flare = new LensFlare3D(size, count, intensity, saturation);
+        this.flare = flare;
+        return flare;
+    }
+
+    /** The light's lens flare, undefined for none: addFlare makes it, or set a LensFlare3D of your own, and
+     *  destroying the flare takes it away
+     *  - The flare is the light's: it is attached to the light as its child, so it stays through a scene change
+     *    when the light does, and is destroyed with the light or when another takes its place
+     *  @type {LensFlare3D|undefined} */
+    get flare() { return this.flareObject && !this.flareObject.destroyed ? this.flareObject : undefined; }
+
+    set flare(flare)
+    {
+        const old = this.flare; // a flare that was destroyed on its own is no flare
+        if (flare === old) return;
+        old && old.destroy();
+        if (flare)
+        {
+            flare.light = this;
+            flare.parent || this.addChild(flare);
+        }
+        this.flareObject = flare || undefined;
+    }
+
+    /** Destroy the light, and its flare with it
+     *  @param {boolean} [immediate] */
+    destroy(immediate)
+    {
+        this.flare = undefined;
+        super.destroy(immediate);
     }
 
     /** Draw the glow, a quad facing the camera with a soft round glow on it, pulled toward the camera by half its

package/plugins/render3dEditor.js

@@ -354,7 +354,7 @@ function editor3DSceneState()
     const r = render3D;
     return {sky: r.sky, ambientColor: r.ambientColor.copy(), ambientGroundColor: r.ambientGroundColor?.copy(),
         fogStart: r.fogStart, fogEnd: r.fogEnd, fogColor: r.fogColor?.copy(), sunDirection: r.sunDirection.copy(),
-        sunColor: r.sunColor.copy(), shadows: r.shadows};
+        sunColor: r.sunColor.copy(), shadows: r.shadows, sunFlare: !!level3DSunFlare && !level3DSunFlare.destroyed};
 }
 function editor3DSceneRestore(state)
 {
@@ -369,6 +369,7 @@ function editor3DSceneRestore(state)
     r.sunDirection = state.sunDirection.copy();
     r.sunColor = state.sunColor.copy();
     r.shadows = state.shadows;
+    level3DSceneFlare(state.sunFlare); // a flare an earlier level's scene gave the sun, never the game's own
 }
 
 // the scene on screen as a block, to start a level's scene from: a sky only when the dome's colors are known
@@ -390,6 +391,7 @@ function editor3DSceneFromView()
     scene.fog = [editor3DRound(r.fogStart || 0), editor3DRound(r.fogEnd || 0)];
     scene.fogColor = editor3DHex(r.fogColor || canvasClearColor);
     scene.shadows = !!r.shadows;
+    scene.lensFlare = level3DSunHasFlare();
     return scene;
 }
 
@@ -528,7 +530,7 @@ function editor3DLevelLoaded(level)
     const original = editor3DCopy(editor3DObjects()), originalParts = editor3DLevelParts();
     const hash = editor3DContentHash(original, originalParts);
     // sceneBase is the scene the game set, taken before the level's own block is applied
-    const record = {fileName: url ? url.split('/').pop() : 'level3D.json', key: url ?? 'level #' + hash, original,
+    const record = {fileName: editorFileName(url, 'level3D.json'), key: url ?? 'level #' + hash, original,
         originalParts, sceneBase: render3D ? editor3DSceneState() : undefined, hash, pending: undefined,
         fileHandle: undefined, undo: [], redo: []};
     editor3DRecords.set(level, record);
@@ -629,6 +631,7 @@ function editor3DChange(change)
     const before = editor3DCopy(editor3DObjects()), after = editor3DCopy(before);
     change(after);
     if (editor3DSame(before, after)) return false;
+    editor3DFixIds(after); // an object added with no id, or with one in use, gets one of its own
     editor3DSetObjects(after);
     editor3DStroke ||= {before, parts: editor3DLevelParts()};
     return true;
@@ -1402,7 +1405,7 @@ function editor3DPrefabJSON(name)
 
 // the prefabs opened one inside the other, each with the level it was opened from, its name, the selection there
 // and the ids of that level's objects that had something made for them
-/** @type {Array<{level: Object, name: string, selection: Array<number>, made: Set<number>, entered?: string, saved?: string}>} */
+/** @type {Array<{level: Object, name: string, selection: Array<number>, made: Set<number>, entered?: string}>} */
 const editor3DPrefabStack = [];
 // the levels that are a prefab being edited, they have no autosave of their own
 const editor3DPrefabLevels = new WeakSet;
@@ -1411,6 +1414,28 @@ const editor3DPrefabLevels = new WeakSet;
 let editor3DPrefabEdits = {};
 // the prefabs of the game's own that were edited and are not in a file yet
 const editor3DPrefabDirty = new Set;
+// what is known of each prefab's file, by its name, so it outlasts the prefab being closed and opened again: the
+// save being written, for the next to wait on, what the file has since a Save, and what the prefab holds now
+/** @type {Map<string, {saving?: Promise<any>, saved?: string, content?: string}>} */
+const editor3DPrefabFiles = new Map;
+function editor3DPrefabFile(name)
+{
+    editor3DPrefabFiles.has(name) || editor3DPrefabFiles.set(name, {});
+    return editor3DPrefabFiles.get(name);
+}
+
+// say if a prefab of the game's own is in its file, now that it holds this: once a Save has written it, it is
+// when what it holds is what was written; before any Save it is not once it was edited
+function editor3DPrefabFileCheck(name, content, edited=false)
+{
+    const file = editor3DPrefabFile(name);
+    file.content = content;
+    if (level3DPrefabs.get(name)?.fromLevel) return; // one of the level's own is saved with the level
+    if (file.saved !== undefined)
+        content === file.saved ? editor3DPrefabDirty.delete(name) : editor3DPrefabDirty.add(name);
+    else if (edited)
+        editor3DPrefabDirty.add(name);
+}
 
 // destroy what the level being edited has in the world, its objects' and its maps'
 function editor3DPrefabClear()
@@ -1464,9 +1489,10 @@ function editor3DPrefabBack()
         level3DPrefabSet(frame.name, prefab, fromLevel);
         if (fromLevel)
             editor3DPrefabEdits[frame.name] = prefab;
-        else if (JSON.stringify(objects) !== frame.saved)
-            editor3DPrefabDirty.add(frame.name); // not what Save wrote while it was open
     }
+    // one of the game's own is in its file or not by what it holds now, edited here or not: undone back to how it
+    // was opened after a Save, it is not what the file has
+    editor3DPrefabFileCheck(frame.name, JSON.stringify(objects), changed);
 
     // the level it was opened from is the editor's again, with its own undo
     const level = editor3DLevel = frame.level, record = editor3DRecords.get(level);
@@ -1794,8 +1820,10 @@ function editor3DAutosave(level=editor3DLevel, known)
             if (known?.fromLevel && JSON.stringify(objects) !== frame.entered)
                 edits[frame.name] = known.attached ? {attached: true, objects} : {objects};
         });
-        if (root && Object.keys(edits).length)
-            editor3DAutosave({...root, prefabs: {...editor3DLevelPart('prefabs', root), ...edits}}, editor3DRecords.get(root));
+        // with nothing edited any more, an undo back to how the prefab was, the level's autosave is the level's own
+        // again, which takes away one of an edit that was undone and keeps the level's other edits
+        const prefabs = {...editor3DLevelPart('prefabs', root), ...edits};
+        root && editor3DAutosave(Object.keys(prefabs).length ? {...root, prefabs} : root, editor3DRecords.get(root));
         return;
     }
     const record = known ?? editor3DRecords.get(level);
@@ -1809,12 +1837,9 @@ function editor3DAutosave(level=editor3DLevel, known)
     else
         saves[record.key] = {hash: record.hash, savedHash: record.savedHash, objects: editor3DCopy(objects),
             ...parts};
-    try
-    {
-        localStorage.setItem(editor3DSaveName(), JSON.stringify(saves));
-        editor3DSaveFailed = false;
-    }
-    catch { editor3DSaveFailed = true; }
+    const failed = editorSaveFailed; // the 2D editor's own flag is its own
+    editor3DSaveFailed = editorWriteSaves(saves, record.key, editor3DSaveName());
+    editorSaveFailed = failed;
 }
 
 // put the autosaved edits of a file that changed into the level, as one undo
@@ -1871,16 +1896,23 @@ async function editor3DSave(pickAgain=false)
         // inside a prefab, Save writes the prefab as a file of its own, or the game keeps it itself
         const text = editor3DLevelJSON(level), name = open.name + '.json';
         const written = JSON.stringify(editor3DObjects()); // as the file has it
+        // its place in line is the prefab's, by its name: closed and opened again it is a new level here, and its
+        // saves still go in the order they were asked for
+        const file = editor3DPrefabFile(open.name), before = file.saving;
         const saved = (async ()=>
         {
-            await record.saving; // in the order asked for, as a level's saves are
+            await before;
             const kept = await editorCall('onSave', text, name) === true;
             kept || saveText(text, name, 'application/json');
-            editor3DPrefabDirty.delete(open.name);
-            open.saved = written;
+            file.saved = written;
+            // it is in its file when what it holds now is what was written: edited again while the save was
+            // kept, or gone back from with more edits, it still waits
+            const at = editor3DPrefabStack.indexOf(open);
+            const now = at < 0 ? file.content : JSON.stringify((editor3DPrefabStack[at + 1]?.level ?? editor3DLevel).objects);
+            editor3DPrefabFileCheck(open.name, now ?? written);
             return kept ? 'kept' : 'downloaded';
         })();
-        record.saving = saved.catch(()=> {});
+        file.saving = saved.catch(()=> {});
         return saved;
     }
     // what is written, kept as it is now: the level can change while the file is picked and written, and those
@@ -3348,6 +3380,8 @@ function editor3DSceneUpdate(box)
     color('Fog color', 'The sky\'s horizon color when the level has a sky and no fog color',
         scene.fogColor ?? (sky ? sky[1] : view.fogColor), (hex)=> change('fogColor', hex));
     toggle('Shadows', 'The sun casts shadows', !!value('shadows'), (on)=> change('shadows', on));
+    toggle('Lens flare', 'The sun flares in the lens when it is in view', !!value('lensFlare'), (on)=>
+        change('lensFlare', on));
 }
 
 // the properties box: the position, rotation and scale of the one selected object and an input for each default