littlejsengine 1.22.0 → 1.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -39,7 +39,9 @@
     "plugins/",
     "!plugins/box2d.wasm.*",
     "COPYRIGHT.txt",
-    "FAQ.md"
+    "FAQ.md",
+    "REFERENCE.md",
+    "EDITOR.md"
   ],
   "scripts": {
     "build": "node src/engineBuild.mjs",
@@ -53,7 +55,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/lightSystem.js

@@ -425,13 +425,13 @@ class LightSystemPlugin
             // an automatic size follows the canvas, so reallocate the lightmap when
             // the canvas changed size, after the flush so the batch keeps its texture
             const size = lightSystem.textureSize;
-            if (lightSystem.textureSizeAuto &&
-                (size.x !== mainCanvasSize.x || size.y !== mainCanvasSize.y))
+            const wantX = glClampTextureSize(mainCanvasSize.x), wantY = glClampTextureSize(mainCanvasSize.y);
+            if (lightSystem.textureSizeAuto && (size.x !== wantX || size.y !== wantY))
             {
-                lightSystem.textureSize = mainCanvasSize.copy();
+                lightSystem.textureSize = vec2(wantX, wantY);
                 glContext.bindTexture(glContext.TEXTURE_2D, lightSystem.texture);
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA,
-                    mainCanvasSize.x, mainCanvasSize.y, 0,
+                    wantX, wantY, 0,
                     glContext.RGBA, glContext.UNSIGNED_BYTE, null);
                 // put back the texture the engine tracks, a draw in renderLight must not sample the lightmap
                 if (glActiveTexture)
@@ -571,8 +571,10 @@ class LightSystemPlugin
         this.shadowMapSize = glClampTextureSize(this.shadowMapSize);
         this.shadowTextureSize = glClampTextureSize(this.shadowTextureSize);
         const size = this.textureSize;
-        if (size)
-            this.textureSize = vec2(glClampTextureSize(size.x), glClampTextureSize(size.y));
+        if (!size) return;
+        const x = glClampTextureSize(size.x), y = glClampTextureSize(size.y);
+        if (x !== size.x || y !== size.y)
+            this.textureSize = vec2(x, y); // only when it is too large, this runs every frame
     }
 
     /** Draw a single Light's falloff blob into the currently bound lightmap.

package/plugins/parallax.js

@@ -0,0 +1,174 @@
+/**
+ * LittleJS Parallax Plugin
+ * - A background layer that follows the camera by a part of its movement, so it looks far away
+ * - Repeats across the view, so a level of any width has a background
+ * - Draws mountains by default, or anything a game draws into it
+ * @namespace Parallax
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * A background layer with parallax: an image that follows the camera by a part of its movement and repeats across
+ * the view, drawn once into a canvas by a function, mountains when none is given
+ * - A far layer has a parallax near 1 and a low renderOrder, a near one a smaller parallax and a higher renderOrder
+ * - The image should meet itself at its left and right edges to repeat without a seam, as the mountains do
+ * @memberof Parallax
+ * @extends CanvasLayer
+ * @example
+ * // three ranges of mountains, the far ones lighter and slower
+ * for (let i = 3; i--;)
+ *     new ParallaxLayer(vec2(0, i*2), vec2(40, 20), .9 - i*.2, -1e3 + i,
+ *         parallaxMountains(hsl(.6, .3, .7 - i*.2), hsl(.6, .5, .2), i));
+ *
+ * // or draw your own image into the layer
+ * new ParallaxLayer(vec2(), vec2(40, 20), .5, -1e3, (context, size)=>
+ * {
+ *     context.fillStyle = '#fff';
+ *     context.fillRect(size.x/2 - 20, size.y/2 - 20, 40, 40);
+ * });
+ */
+class ParallaxLayer extends CanvasLayer
+{
+    /** Create a parallax layer and draw its image
+     *  @param {Vector2} [pos] - Where the middle of the image is in the world when the camera is there too
+     *  @param {Vector2} [size] - World size of one copy of the image
+     *  @param {number|Vector2} [parallax] - How much of the camera's movement it follows, 0 stays with the world
+     *    and 1 with the screen, a Vector2 to follow x and y by different amounts
+     *  @param {number} [renderOrder] - Low to draw behind the game, far layers lowest
+     *  @param {function(OffscreenCanvasRenderingContext2D, Vector2, ParallaxLayer): void} [drawFunction] - Draws
+     *    the image, given the canvas context, its size in pixels and the layer; mountains when not given
+     *  @param {Vector2} [canvasSize] - Size of the image in pixels */
+    constructor(pos=vec2(), size=vec2(32, 16), parallax=.5, renderOrder=-1e3, drawFunction=parallaxMountains(),
+        canvasSize=vec2(512, 256))
+    {
+        ASSERT(isNumber(parallax) || isVector2(parallax), 'parallax must be a number or a Vector2');
+        ASSERT(typeof drawFunction == 'function', 'drawFunction must be a function');
+        super(pos, size, 0, renderOrder, canvasSize);
+
+        /** @property {Vector2} - How much of the camera's movement it follows on each axis, 0 stays with the world
+         *  and 1 with the screen */
+        this.parallax = isVector2(parallax) ? /** @type {Vector2} */ (parallax).copy() :
+            vec2(/** @type {number} */ (parallax));
+        /** @property {boolean} - Repeat the image across the view, left and right */
+        this.wrapX = true;
+        /** @property {boolean} - Repeat the image up and down the view */
+        this.wrapY = false;
+        /** @property {number} - How much the camera's zoom changes its size on the screen: 1 like the world, 0 not
+         *  at all, the same on the screen at any zoom as it is at zoomScale */
+        this.zoomFollow = 1;
+        /** @property {number} - The camera scale its size is given for, used when zoomFollow is under 1 */
+        this.zoomScale = cameraScale;
+        /** @property {function(OffscreenCanvasRenderingContext2D, Vector2, ParallaxLayer): void} - Draws the
+         *  image, redraw() after changing it */
+        this.drawFunction = drawFunction;
+        this.redraw();
+    }
+
+    /** Draw the image again with drawFunction, after changing it or what it draws from */
+    redraw()
+    {
+        const context = this.context;
+        if (!context) return; // headless
+        const size = vec2(this.canvas.width, this.canvas.height);
+        context.clearRect(0, 0, size.x, size.y);
+        this.drawFunction(context, size, this);
+        this.updateWebGL();
+    }
+
+    // how much smaller it is drawn than its size, from the camera's zoom and how much of it the layer follows
+    zoomFactor()
+    { return this.zoomFollow < 1 && cameraScale > 0 ? (this.zoomScale / cameraScale) ** (1 - this.zoomFollow) : 1; }
+
+    /** World size one copy of the image is drawn at now, its size unless zoomFollow is under 1
+     *  @return {Vector2} */
+    getDrawSize() { return this.size.scale(this.zoomFactor()); }
+
+    /** Where each copy of the image is drawn now, in the world: one place, or with wrapping every place that
+     *  shows in the view
+     *  @return {Array<Vector2>} */
+    getDrawPositions()
+    {
+        // its place seen from the camera is cut down by the parallax, and by the zoom it does not follow
+        const zoom = this.zoomFactor(), size = this.size.scale(zoom), p = this.parallax;
+        const offset = this.pos.subtract(cameraPos);
+        const center = cameraPos.add(vec2(offset.x * (1 - p.x) * zoom, offset.y * (1 - p.y) * zoom));
+
+        // the copies that reach into the view; a turned camera sees as far as its corner each way
+        const view = mainCanvasSize.scale(.5 / (cameraScale || 1));
+        const reach = cameraAngle ? vec2(view.length()) : view;
+        const range = (wrap, axis)=>
+        {
+            if (!wrap || !(size[axis] > 0)) return [0, 0];
+            const from = cameraPos[axis] - reach[axis] - size[axis] / 2 - center[axis];
+            const to = cameraPos[axis] + reach[axis] + size[axis] / 2 - center[axis];
+            const first = ceil(from / size[axis]);
+            return [first, min(floor(to / size[axis]), first + 99)]; // a tiny image does not draw without end
+        };
+        const [x0, x1] = range(this.wrapX, 'x'), [y0, y1] = range(this.wrapY, 'y'), positions = [];
+        for (let y = y0; y <= y1; ++y)
+        for (let x = x0; x <= x1; ++x)
+            positions.push(vec2(center.x + x * size.x, center.y + y * size.y));
+        return positions;
+    }
+
+    // Render the layer, called automatically by the engine
+    render()
+    {
+        const size = this.getDrawSize();
+        for (const pos of this.getDrawPositions())
+            this.draw(pos, size, this.color, 0, this.mirror, this.additiveColor, false);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+// the ridge of a range of mountains: a height for each column of an image and one more, the last the same as the
+// first so the image repeats with no step; it wanders about the middle, turning now and then
+function parallaxRidge(width, height, random)
+{
+    const pointiness = .2, levelness = .005, slopeRange = height / 256; // how often it turns, how hard it is
+    const ridge = new Float32Array(width + 1), middle = height / 2;     // pulled level, how steep it gets
+    let y = middle, slope = random.float(-slopeRange, slopeRange);
+    for (let x = 0; x <= width; ++x)
+    {
+        ridge[x] = y;
+        y += slope -= (y - middle) * levelness;
+        if (random.float() < pointiness)
+            slope = random.float(-slopeRange, slopeRange);
+    }
+    // take out the difference between its ends, a little from each column, and keep it inside the image
+    const drift = ridge[width] - ridge[0];
+    for (let x = 0; x <= width; ++x)
+        ridge[x] = clamp(ridge[x] - drift * x / width, 0, height);
+    return ridge;
+}
+
+/** A draw function for a ParallaxLayer: a range of mountains across the image, shaded from the color of their
+ *  peaks down to the color of their feet, that repeats with no seam
+ *  @param {Color} [topColor] - Color at the peaks
+ *  @param {Color} [bottomColor] - Color at the bottom of the image
+ *  @param {number} [seed] - The same seed gives the same mountains, random when not given
+ *  @return {function(OffscreenCanvasRenderingContext2D, Vector2): void}
+ *  @memberof Parallax */
+function parallaxMountains(topColor=hsl(.6, .2, .6), bottomColor=hsl(.6, .3, .25), seed)
+{
+    return (context, size)=>
+    {
+        const w = size.x, h = size.y;
+        const random = new RandomGenerator(seed === undefined ? randInt(1e9) + 1 : seed * 7919 + 1);
+        const ridge = parallaxRidge(w, h, random);
+
+        // a strip one pixel wide with the shading, stretched down each column from its peak
+        const strip = createCanvasContext(1, h);
+        for (let i = h; i--;)
+        {
+            strip.fillStyle = topColor.lerp(bottomColor, i / h).toString();
+            strip.fillRect(0, i, 1, 1);
+        }
+        for (let x = w; x--;)
+            ridge[x] < h && context.drawImage(strip.canvas, 0, 0, 1, h, x, ridge[x], 1, h - ridge[x]);
+    };
+}

package/plugins/particleEffects.js

@@ -178,7 +178,9 @@ function particleEffectSanitize(raw)
             settings[setting.name] = value === '' || particleEffectShapes.includes(value) ? value : fallback;
         else if (isNumber(value))
         {
-            const clamped = clamp(value, setting.hardMin, setting.hardMax);
+            // an angle past half a turn comes around, a clamp would point it the other way
+            const wraps = setting.name === 'angle' && isFinite(value) && abs(value) > PI;
+            const clamped = clamp(wraps ? mod(value + PI, 2*PI) - PI : value, setting.hardMin, setting.hardMax);
             settings[setting.name] = setting.step >= 1 ? round(clamped) : clamped;
         }
         else
@@ -257,9 +259,11 @@ function particleEffectsGet(name) { return particleEffectsByName.get(String(name
  *  @param {string} text
  *  @return {Array<Object>}
  *  @memberof ParticleEffects */
-function particleEffectsParse(text)
+function particleEffectsParse(text) { return particleEffectsFromData(JSON.parse(text)); }
+
+// a library file's data, or one effect's, into sanitized effects
+function particleEffectsFromData(data)
 {
-    const data = JSON.parse(text);
     const list = isArray(data?.effects) ? data.effects : data?.settings ? [data] : undefined;
     if (!list || !list.length)
         throw new Error('no effects in this file');
@@ -278,7 +282,7 @@ function particleEffectsText(effects) { return JSON.stringify({version:1, effect
  *  @memberof ParticleEffects */
 async function particleEffectsLoad(url)
 {
-    const effects = particleEffectsParse(JSON.stringify(await fetchJSON(url)));
+    const effects = particleEffectsFromData(await fetchJSON(url));
     particleEffectsAdd(effects);
     return effects;
 }
@@ -456,7 +460,13 @@ function particleEffectTileInfo(s)
  *  @memberof ParticleEffects */
 function particleEffectApply(emitter, effect)
 {
-    effect = particleEffectSanitize(effect); // an effect written by hand or changed since it was added
+    // an effect written by hand or changed since it was added
+    particleEffectSet(emitter, particleEffectSanitize(effect));
+}
+
+// set a 2D emitter to an effect that is sanitized already, as a play's is
+function particleEffectSet(emitter, effect)
+{
     const s = effect.settings, ended = emitter.emitTime < 0; // destroyed, its last particles going
     for (const setting of particleEffectSettings)
         if (!particleEffectIndirect.includes(setting.name))
@@ -492,15 +502,14 @@ function particleEffectResolve(nameOrEffect, options)
  *  - Attach it to an object with addChild to follow it
  *  @param {string|Object} nameOrEffect - A built-in or added effect's name, or an effect
  *  @param {Vector2} [pos]
- *  @param {Object} [options]
- *  @param {number} [options.scale] - Grows the whole effect, the built-ins fit a one unit object at 1
- *  @param {number} [options.hue] - Turns its colors around the color wheel, 1 is all the way
- *  @param {number} [options.saturation] - Multiplies its saturation, 0 is grey
- *  @param {number} [options.angle] - Direction, 0 is up; the effect's own angle when not given
- *  @param {TileInfo|TextureInfo} [options.tileInfo] - The game's own art to draw with in place of the effect's shape,
- *    tinted by its colors; a whole texture draws as one tile
- *  @param {*} [options.settings] - Any effect setting by its name, emitTime, emitRate, speed and the rest, replacing
- *    the effect's own for this play
+ *  @param {Object} [options] - What to change for this play, each left out when not wanted:
+ *    scale grows the whole effect, the built-ins fit a one unit object at 1;
+ *    hue turns its colors around the color wheel, 1 is all the way;
+ *    saturation multiplies its saturation, 0 is grey;
+ *    angle is its direction, 0 is up, the effect's own angle when not given;
+ *    tileInfo, a TileInfo or a TextureInfo, is the game's own art to draw with in place of the effect's shape,
+ *    tinted by its colors, a whole texture drawn as one tile;
+ *    and any effect setting by its name, emitTime, emitRate, speed and the rest, replaces the effect's own
  *  @return {ParticleEmitter|undefined} - undefined when there is no such effect
  *  @memberof ParticleEffects */
 function particleEffect(nameOrEffect, pos=vec2(), options={})
@@ -508,7 +517,7 @@ function particleEffect(nameOrEffect, pos=vec2(), options={})
     const effect = particleEffectResolve(nameOrEffect, options);
     if (!effect) return;
     const emitter = new ParticleEmitter(pos.copy());
-    particleEffectApply(emitter, effect);
+    particleEffectSet(emitter, effect);
     emitter.scale = options.scale ?? 1;
     if (options.angle !== undefined)
         emitter.angle = options.angle;
@@ -572,7 +581,7 @@ function particleEffectFromEmitter(emitter, name='Effect')
         p.velocity.y += (p.pos.x - c.x) * s * .002;
     };
     b('wind').update3D = (p, s)=> p.velocity.x += s * .004 * p.scale * min(p.age / p.lifeTime, 1);
-    // stick has no 3D push: particleEffect3D makes it the friction a particle lands with
+    // stick has no 3D push: particleEffectApply3D makes it the emitter's stick, its grip on landing
 }
 
 /** Set a 3D emitter to an effect, live, so a running one keeps its particles; its place, scale and flatten stay
@@ -581,7 +590,13 @@ function particleEffectFromEmitter(emitter, name='Effect')
  *  @memberof ParticleEffects */
 function particleEffectApply3D(emitter, effect)
 {
-    effect = particleEffectSanitize(effect); // an effect written by hand or changed since it was added
+    // an effect written by hand or changed since it was added
+    particleEffectSet3D(emitter, particleEffectSanitize(effect));
+}
+
+// set a 3D emitter to an effect that is sanitized already, as a play's is
+function particleEffectSet3D(emitter, effect)
+{
     const s = effect.settings, e = emitter;
     // a circle is a sphere and a rectangle a box as deep as it is wide
     e.emitSize = s.emitRect ? vec3(s.emitSize, s.emitHeight, s.emitSize) : s.emitSize;
@@ -594,8 +609,8 @@ function particleEffectApply3D(emitter, effect)
         'randomness', 'additive', 'gravityScale', 'angleSpeed', 'angleDamping', 'collideLevel', 'restitution'])
         e[name] = s[name];
     e.trailTime = s.trailScale / 60; // a stretch of speed times trailScale is a streak of that many frames
-    const stick = effect.behaviors.find(b=> b.name == 'stick'); // in 3D, a grip on landing is less sliding
-    e.friction = stick ? min(s.friction, 1 - stick.strength) : s.friction;
+    e.friction = s.friction;
+    e.stick = effect.behaviors.find(b=> b.name == 'stick')?.strength ?? 0; // in 3D the emitter grips on landing
     // a 2D emitter at angle a shoots along (sin a, cos a), a z turn r takes up to (-sin r, cos r), so r is -a
     e.rotation3D = vec3(0, 0, -s.angle);
     e.particleUpdateCallback = particleEffectUpdateCallback(effect.behaviors, true);
@@ -605,8 +620,8 @@ function particleEffectApply3D(emitter, effect)
  *  - The same effect data as particleEffect, so the look carries across: a circle spawn area becomes a sphere and a
  *    rectangle a box as deep as it is wide, both flat across the way it emits with options.flatten, a disc or a
  *    sheet; a trail becomes a streak of the same length, and the settings the 3D emitter lacks (particleConeAngle,
- *    randomColorLinear, velocityInheritance, localSpace) are left out; the stick behavior becomes the friction a
- *    particle lands with
+ *    randomColorLinear, velocityInheritance, localSpace) are left out; the stick behavior becomes the emitter's
+ *    stick, its grip where a particle lands
  *  @param {string|Object} nameOrEffect - A built-in or added effect's name, or an effect
  *  @param {Vector3} [pos3D]
  *  @param {Object} [options] - scale, hue, saturation, angle, tileInfo and any setting as particleEffect; angle turns it
@@ -618,7 +633,7 @@ function particleEffect3D(nameOrEffect, pos3D=vec3(), options={})
     const effect = particleEffectResolve(nameOrEffect, options);
     if (!effect) return;
     const e = new ParticleEmitter3D(pos3D.copy());
-    particleEffectApply3D(e, effect);
+    particleEffectSet3D(e, effect);
     if (options.angle !== undefined)
         e.rotation3D = vec3(0, 0, -options.angle);
     e.scale3D = vec3(options.scale ?? 1);

package/plugins/pluginExport.js

@@ -116,6 +116,10 @@ export
     setScene,
     getScene,
 
+    // Parallax
+    ParallaxLayer,
+    parallaxMountains,
+
     // Path Finding
     PathFinder,
     PathFinderNode,
@@ -196,6 +200,10 @@ export
     level3DAddType,
     level3DAddMesh,
     level3DLoad,
+    level3DAddPrefab,
+    level3DLoadPrefab,
+    level3DSpawn,
+    Prefab3D,
     level3DVoxelSetup,
 
     // Three.js

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