littlejsengine 1.21.0 → 1.23.0

package/plugins/render3dExtras.js

@@ -908,7 +908,7 @@ const render3DParticlesCalling = new Set;
  *  @return {Particle3D} */
 function render3DParticleView(emitter)
 {
-    return {emitter, pos: vec3(), velocity: vec3(), age: 0, lifeTime: 0, destroyed: false,
+    return {emitter, pos: vec3(), velocity: vec3(), age: 0, lifeTime: 0, scale: 1, destroyed: false,
         destroy() { this.destroyed = true; }};
 }
 
@@ -921,6 +921,8 @@ function render3DParticleView(emitter)
  * @property {Vector3} velocity - How far it moves each frame
  * @property {number} age - Seconds it has lived
  * @property {number} lifeTime - Seconds it lives
+ * @property {number} scale - How much the emitter grows its effect, from its scale3D and its parents', as the 2D
+ *   particle's scale
  * @property {boolean} destroyed - Set by destroy
  * @property {function(): void} destroy - End it this update, the destroy callback gets it
  * @memberof Render3D
@@ -950,8 +952,9 @@ function render3DParticleView(emitter)
  * - emitConeAngle spreads them, PI sprays in every direction
  * - Speeds are per frame and sizes are world units, the same as the 2D emitter
  * - scale3D, its own or a parent's, grows the whole effect: the spawn area, the sizes, the speed and the fall
- * - gravity here is its own number added to velocity y each frame: it is neither the engine's 2D
- *   gravity nor render3D.gravity, so an effect keeps its own fall wherever it is used
+ * - gravity here is its own number added to velocity y each frame, so an effect keeps its own fall wherever it is
+ *   used, the same as the 2D emitter's gravity; gravityScale adds a share of render3D.gravity on top, as the 2D
+ *   emitter's gravityScale adds the engine's gravity
  * - An emitter with an emitTime destroys itself once its last particle is gone, like the 2D emitter
  * - Callbacks as the 2D emitter's: particleCreateCallback, particleUpdateCallback, particleCollideCallback and
  *   particleDestroyCallback, each given a Particle3D, one object the emitter reuses for every particle and call
@@ -981,8 +984,8 @@ class ParticleEmitter3D extends EngineObject3D
      *  @param {number} [sizeEnd] - Particle size at end of life
      *  @param {number} [speed] - Spawn speed in world units per frame
      *  @param {number} [damping] - Per frame velocity multiplier, 1 is none
-     *  @param {number} [gravity] - Per frame change to velocity y, negative pulls down; its own number,
-     *    not render3D.gravity, so the 2D emitter's gravityScale has no equivalent here
+     *  @param {number} [gravity] - Per frame change to velocity y, negative pulls down; its own number, and
+     *    gravityScale adds a share of render3D.gravity on top
      *  @param {number} [fadeRate] - Fraction of life spent fading, half in and half out
      *  @param {number} [randomness] - Extra randomness applied to speed, size and life
      *  @param {boolean} [additive] - Additive blending */
@@ -997,6 +1000,9 @@ class ParticleEmitter3D extends EngineObject3D
 
         /** @property {number|Vector3} - Spawn area, a number for a sphere diameter or a vec3 for a box */
         this.emitSize = emitSize;
+        /** @property {boolean} - Flatten the spawn area across the way it emits, its own up: a sphere becomes a disc
+         *  and a box a flat rectangle, for rain from a sheet of sky or flames from a patch of ground */
+        this.emitFlat = false;
         /** @property {number} - How long to keep emitting, 0 is forever */
         this.emitTime = emitTime;
         /** @property {number} - Particles per second, 0 does not emit */
@@ -1023,6 +1029,9 @@ class ParticleEmitter3D extends EngineObject3D
         this.damping = damping;
         /** @property {number} - Per frame change to velocity y, its own number and not render3D.gravity */
         this.gravity = gravity;
+        /** @property {number} - Share of render3D.gravity added each frame on top of its own gravity, 0 by default so
+         *  an effect keeps its own fall wherever it is used; 1 falls with the world, like debris */
+        this.gravityScale = 0;
         /** @property {number} - Fraction of life spent fading, half in and half out */
         this.fadeRate = fadeRate;
         /** @property {number} - Extra randomness applied to speed, size and life */
@@ -1049,6 +1058,9 @@ class ParticleEmitter3D extends EngineObject3D
         /** @property {boolean} - Particles hit the level, the height maps and voxel maps, bouncing by restitution and
          *  sliding along by friction; off by default, it tests each particle's move against the level every frame */
         this.collideLevel = false;
+        /** @property {number} - How much a particle grips where it lands, 0 to 1: its speed along the surface is
+         *  cut by this much on each hit, on top of the friction, 1 stops it there */
+        this.stick = 0;
         /** @property {Particle3DCallback|undefined} - Called with each particle as it is made
          *  @type {Particle3DCallback|undefined} */
         this.particleCreateCallback = undefined;
@@ -1068,7 +1080,7 @@ class ParticleEmitter3D extends EngineObject3D
         /** @property {Vector3|undefined} - Where the emitter was at its last update, for when its parent is destroyed
          *  @type {Vector3|undefined} */
         this.worldPos3D = undefined;
-        this.emitTimeBuffer = 0;
+        this.emitTimeBuffer = 1; // the first particle comes at once, as the 2D emitter's does
     }
 
     /** Spawn new particles, move the live ones, and go away when done */
@@ -1078,15 +1090,17 @@ class ParticleEmitter3D extends EngineObject3D
         const matrix = render3DObjectMatrix(this); // the object's own, read only
         this.worldPos3D = matrix.getTranslation(); // remembered for when the parent is destroyed
         const scale = render3DMaxScale(matrix.m);
+        this.particleView.scale = scale; // the callbacks read it from the view instead of working it out each time
 
         // emit until the emit time is up, then wait for the last particle and go away
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // a rate of zero is an emitter fed by hand, and the global scale only quiets it,
             // neither is a reason to stop counting down the emit time
-            if (this.emitRate && particleEmitRateScale)
+            const rate = this.emitRate * particleEmitRateScale;
+            if (rate > 0 && rate < Infinity)
             {
-                this.emitTimeBuffer += this.emitRate * particleEmitRateScale * timeDelta;
+                this.emitTimeBuffer += rate * timeDelta;
                 for (; this.emitTimeBuffer >= 1; --this.emitTimeBuffer)
                     this.emitParticle();
             }
@@ -1110,7 +1124,11 @@ class ParticleEmitter3D extends EngineObject3D
         const F = RENDER3D_PARTICLE_FLOATS;
         let data = this.particleData, trail = this.trailData;
         const reread = ()=> { data = this.particleData, trail = this.trailData; };
-        const damping = this.damping, gravity = this.gravity * scale, angleDamping = this.angleDamping; // a bigger effect has to fall faster to keep the same arc
+        // its own fall and a share of the world's, grown by the scale: a bigger effect has to fall faster to keep the
+        // same arc
+        const damping = this.damping, angleDamping = this.angleDamping, g = render3D.gravity, share = this.gravityScale;
+        const gravityX = g.x * share * scale, gravityY = (this.gravity + g.y * share) * scale;
+        const gravityZ = g.z * share * scale;
         const collideLevel = this.collideLevel && render3DLevel.length;
         const updateCallback = this.particleUpdateCallback, destroyCallback = this.particleDestroyCallback;
         for (let i = this.particleCount; i--;)
@@ -1118,10 +1136,13 @@ class ParticleEmitter3D extends EngineObject3D
             // damped first and gravity added after, the order the 2D particle uses, so the same
             // damping and gravity give the same arc in both
             const k = i * F;
-            const vx = data[k+3] *= damping, vy = data[k+4] = data[k+4] * damping + gravity, vz = data[k+5] *= damping;
+            const vx = data[k+3] = data[k+3] * damping + gravityX, vy = data[k+4] = data[k+4] * damping + gravityY;
+            const vz = data[k+5] = data[k+5] * damping + gravityZ;
             data[k] += vx, data[k+1] += vy, data[k+2] += vz;
             data[k+18] += data[k+19] *= angleDamping;
-            collideLevel && (this.particleCollide(k, data[k] - vx, data[k+1] - vy, data[k+2] - vz), reread());
+            // true when its collide callback destroyed it, it has had its last callback but the destroy one
+            const gone = collideLevel && this.particleCollide(k, data[k] - vx, data[k+1] - vy, data[k+2] - vz);
+            collideLevel && reread();
             const t = i * trailMax * 3;
             if (trailMax)
             {
@@ -1133,7 +1154,7 @@ class ParticleEmitter3D extends EngineObject3D
                 trail[j] = data[k], trail[j+1] = data[k+1], trail[j+2] = data[k+2];
                 data[k+20] = n + 1;
             }
-            updateCallback && (this.particleCall(updateCallback, k), reread());
+            updateCallback && !gone && (this.particleCall(updateCallback, k), reread());
             if ((data[k+17] += timeDelta) >= data[k+16])
             {
                 // dead: the last particle takes its slot, trail and all, order does not matter
@@ -1166,10 +1187,18 @@ class ParticleEmitter3D extends EngineObject3D
         // the whole effect grows with the emitter, not just the area the particles start in
         const scale = render3DMaxScale(matrix.m);
 
-        // spawn offset: inside a box or a sphere
-        const size = this.emitSize, box = /** @type {Vector3} */ (size);
-        const offset = isVector3(size) ? vec3(rand(-.5, .5) * box.x, rand(-.5, .5) * box.y, rand(-.5, .5) * box.z)
-            : randInSphere(/** @type {number} */ (size) / 2);
+        // spawn offset: inside a box or a sphere, or flat across the emitter's up, a flat rectangle or a disc
+        const size = this.emitSize, box = /** @type {Vector3} */ (size), flat = this.emitFlat;
+        let offset;
+        if (isVector3(size))
+            offset = vec3(rand(-.5, .5) * box.x, flat ? 0 : rand(-.5, .5) * box.y, rand(-.5, .5) * box.z);
+        else if (flat)
+        {
+            const disc = randInCircle(/** @type {number} */ (size) / 2);
+            offset = vec3(disc.x, 0, disc.y);
+        }
+        else
+            offset = randInSphere(/** @type {number} */ (size) / 2);
 
         // direction inside the cone around local +Y
         const direction = matrix.transformDirection(randVector3(1, this.emitConeAngle)).normalize();
@@ -1227,13 +1256,14 @@ class ParticleEmitter3D extends EngineObject3D
         out[k] = view.pos.x, out[k+1] = view.pos.y, out[k+2] = view.pos.z;
         out[k+3] = view.velocity.x, out[k+4] = view.velocity.y, out[k+5] = view.velocity.z;
         if (view.destroyed)
-            out[k+17] = max(out[k+17], out[k+16] - timeDelta); // aged past its life this update
+            out[k+17] = max(out[k+17], out[k+16]); // its life lived: a step short of it can round to just under
         return result;
     }
 
     // stop the particle at k where its last move went into the level, from where it was: back at the surface, a hair
     // off it, its speed into it turned around by restitution and its speed along it kept by friction, unless the
-    // collide callback lets it through; one that starts inside is let go, as a 2D one is
+    // collide callback lets it through; one that starts inside is let go, as a 2D one is; true when the callback
+    // destroyed it
     particleCollide(k, x, y, z)
     {
         let data = this.particleData;
@@ -1246,18 +1276,21 @@ class ParticleEmitter3D extends EngineObject3D
             if (h && (!hit || h.distance < hit.distance))
                 hit = h, level = l;
         }
-        if (!hit) return;
+        if (!hit) return false;
         const point = from.lerp(to, hit.distance);
         const callback = this.particleCollideCallback;
         if (callback && (!this.particleCall(callback, k, level, point.copy()) || this.particleView.destroyed))
-            return; // let through, or destroyed by the callback
+            return this.particleView.destroyed; // let through, or destroyed by the callback
         data = this.particleData; // as the callback left it, an emit may have grown it
 
         const n = hit.normal, v = vec3(data[k+3], data[k+4], data[k+5]), into = n.scale(v.dot(n));
-        const restitution = max(this.restitution, level.restitution), friction = max(this.friction, level.friction);
+        // the larger friction of the two, as objects take it, then the emitter's own grip, which a level can not undo
+        const restitution = max(this.restitution, level.restitution);
+        const friction = max(this.friction, level.friction) * (1 - clamp(this.stick));
         const out = v.subtract(into).scale(friction).subtract(into.scale(restitution)), p = point.add(n.scale(1e-3));
         data[k] = p.x, data[k+1] = p.y, data[k+2] = p.z;
         data[k+3] = out.x, data[k+4] = out.y, data[k+5] = out.z;
+        return false;
     }
 
     /** Draw the particles, as flat squares or as streaks when trailTime is set
@@ -1439,6 +1472,246 @@ class Trail3D extends EngineObject3D
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// lens flare
+
+// the shapes a flare is made of, white on clear on one smooth texture made the first time it is asked for: a soft
+// glow, a flat disc with a brighter rim, and a ring; undefined headless or without a canvas
+let render3DFlareTiles;
+function render3DFlareTile(shape)
+{
+    if (!render3DFlareTiles)
+    {
+        if (headlessMode || !glContext || typeof OffscreenCanvas == 'undefined') return;
+        const cell = 128, shapes = ['glow', 'disc', 'ring'], context = createCanvasContext(cell * shapes.length, cell);
+        // each shape is how see-through it is from its middle out
+        const alpha =
+        {
+            glow: (t)=> engineGlowAlpha(t, 1),
+            disc: (t)=> t < .8 ? .4 + .1 * t : t < .92 ? .48 + (t - .8) * 3 : (1 - t) / .08 * .84,
+            ring: (t)=> max(0, 1 - abs(t - .86) / .12),
+        };
+        shapes.forEach((shape, i)=>
+        {
+            const x = i * cell + cell / 2, y = cell / 2, r = cell / 2 - 2, steps = 32;
+            const gradient = context.createRadialGradient(x, y, 0, x, y, r);
+            for (let k = 0; k <= steps; ++k)
+                gradient.addColorStop(k / steps, 'rgba(255,255,255,' + clamp(alpha[shape](k / steps)).toFixed(4) + ')');
+            context.fillStyle = gradient;
+            context.beginPath();
+            context.arc(x, y, r, 0, 2 * PI);
+            context.fill();
+        });
+        const texture = new TextureInfo(context.canvas, true, false, false); // smooth even in a pixel art game
+        render3DFlareTiles = new Map(shapes.map((shape, i)=>
+            [shape, new TileInfo(vec2(i * cell, 0), vec2(cell), texture)]));
+    }
+    return render3DFlareTiles.get(shape) || render3DFlareTiles.get('glow');
+}
+
+/**
+ * LensFlare3D - The sun's lens flare, the old kind: a glow at the sun and a row of discs and rings of different
+ * sizes along the line from the sun through the middle of the screen
+ * - Make one and it shows, over the 3D scene and under what the game draws after, a HUD; destroy it to take it away
+ * - It follows render3D.sunDirection, and fades out as the sun leaves the screen or goes behind something
+ * - flareSize, count, intensity and saturation set its look, seed picks another arrangement, and its color tints it,
+ *   with the sun's own color; or give it elements of your own
+ * - visible is how much of the sun shows, 0 to 1, eased over fadeTime, there for a game to read
+ * - What hides the sun is found with a ray from the camera, against the level and every object that is not see
+ *   through, each as the box around its mesh, see render3D.pick; turn it off with occlusion
+ * - It needs WebGL, and it draws nothing in the shadow of renderAfter2D
+ * @extends EngineObject3D
+ * @memberof Render3D
+ * @example
+ * new LensFlare3D;                // the sun flares
+ * new LensFlare3D(1.5, 10, .7, 0); // bigger, 10 ghosts, dimmer, all one color
+ */
+class LensFlare3D extends EngineObject3D
+{
+    /** Create the sun's lens flare
+     *  @param {number} [size] - Scales every part of it, 1 by default
+     *  @param {number} [count] - How many ghosts there are along the line, besides the glow at the sun
+     *  @param {number} [intensity] - How bright it is
+     *  @param {number} [saturation] - How colorful the ghosts are, 0 for all the flare's own color, 1 a rainbow
+     *  @param {Color} [color] - Tints the whole flare, with the sun's color */
+    constructor(size=1, count=7, intensity=1, saturation=1, color=WHITE)
+    {
+        super(vec3(), undefined, undefined, color);
+        this.size3D = vec3(); // not a thing to pick or collect
+        /** @property {number} - Scales every part of the flare */
+        this.flareSize = size;
+        /** @property {number} - How many ghosts there are along the line, besides the glow at the sun */
+        this.count = count;
+        /** @property {number} - How bright it is */
+        this.intensity = intensity;
+        /** @property {number} - How colorful the ghosts are, 0 for all the flare's own color, 1 a rainbow */
+        this.saturation = saturation;
+        /** @property {number} - Picks the arrangement of the ghosts, another seed is another flare */
+        this.seed = 1;
+        /** @property {Array<{at: number, size: number, color: Color, shape: string}>|undefined} - The parts of the
+         *  flare, to set your own in place of the ones made from count, seed and saturation: at is where along the
+         *  line, 0 the sun, 1 the middle of the screen, 2 as far past it; size is across, as a part of the screen's
+         *  height; shape is glow, disc or ring
+         *  @type {Array<{at: number, size: number, color: Color, shape: string}>|undefined} */
+        this.elements = undefined;
+        /** @property {Light3D|undefined} - A light the flare is of in place of the sun, a lamp or a spotlight: the
+         *  flare is at the light and in its color, smaller from farther than the light reaches, hidden by what is
+         *  in front of the light, and a spotlight's shows from inside its beam only
+         *  @type {Light3D|undefined} */
+        this.light = undefined;
+        /** @property {boolean} - Fade out when something is between the camera and the sun */
+        this.occlusion = true;
+        /** @property {number} - Seconds the flare takes to fade out or in when the sun is hidden or shows again */
+        this.fadeTime = .15;
+        /** @property {number} - How much of the sun shows, 0 hidden or behind the camera to 1 in plain view, eased */
+        this.visible = 1;
+        this.renderOrder = 1e9; // over the game's sprites, it is light in the lens
+        this.madeKey = '';
+        /** @type {Array<{at: number, size: number, color: Color, shape: string}>} */
+        this.made = [];
+    }
+
+    /** The parts of the flare: the elements set by hand, or the ones made from count, seed and saturation, a glow
+     *  and a core at the sun and the ghosts, made again when one of those changes
+     *  @return {Array<{at: number, size: number, color: Color, shape: string}>} */
+    getElements()
+    {
+        if (this.elements) return this.elements;
+        const key = [this.count, this.seed, this.saturation].join();
+        if (key !== this.madeKey)
+        {
+            const random = new RandomGenerator(this.seed * 7919 + 1), s = clamp(this.saturation);
+            const made = this.made = [
+                {at: 0, size: .7, color: hsl(0, 0, 1, .5), shape: 'glow'},
+                {at: 0, size: .25, color: hsl(0, 0, 1, .9), shape: 'glow'}];
+            for (let i = 0; i < this.count; ++i)
+            {
+                // spread along the line, each a place of its own, the far ones bigger
+                const at = (i + random.float(.2, .8)) / max(this.count, 1) * 1.9 + .2;
+                const pick = random.float(), shape = pick < .5 ? 'disc' : pick < .8 ? 'ring' : 'glow';
+                made.push({at, size: random.float(.04, .1) * (1 + at), shape,
+                    color: hsl(random.float(), s * .9, .6, random.float(.15, .4))});
+            }
+            this.madeKey = key;
+        }
+        return this.made;
+    }
+
+    // what the flare is of, seen from the camera: the way to it, how far it is, Infinity for the sun, and a point
+    // to find it on the screen by; undefined with no sun direction, or a light that is gone or at the camera
+    flareSource()
+    {
+        const camera = render3D.camera.pos, light = this.light;
+        if (!light)
+        {
+            const sun = render3D.sunDirection;
+            if (!sun.lengthSquared()) return;
+            const direction = sun.normalize();
+            return {direction, distance: Infinity, pos: camera.add(direction.scale(100))};
+        }
+        if (light.destroyed) return;
+        const pos = light.getWorldPos3D(), offset = pos.subtract(camera), distance = offset.length();
+        return distance ? {direction: offset.scale(1 / distance), distance, pos} : undefined;
+    }
+
+    /** Where the sun, or the flare's light, is on the screen, in pixels like mousePosScreen, undefined when it is
+     *  behind the camera
+     *  @return {Vector2|undefined} */
+    getSunScreenPos()
+    {
+        const source = this.flareSource();
+        return source && render3D.worldToScreen(source.pos);
+    }
+
+    /** The parts of the flare as they are drawn now: each one's place on the screen, its size in pixels and its
+     *  color, dimmed by how much of the sun shows; empty when there is nothing to draw
+     *  @return {Array<{pos: Vector2, size: number, color: Color, shape: string}>} */
+    getScreenElements()
+    {
+        const sun = this.getSunScreenPos(), center = mainCanvasSize.scale(.5);
+        if (!sun || !center.x || !center.y) return [];
+        // it fades as the sun leaves the screen, gone when it is a third of the screen past the edge
+        const off = max(abs(sun.x - center.x) / center.x, abs(sun.y - center.y) / center.y);
+        const strength = this.visible * clamp((1.3 - off) / .5) * this.intensity;
+        if (!(strength > 0)) return [];
+        let tint = this.color.multiply(render3D.sunColor), height = mainCanvasSize.y * this.flareSize;
+        const light = this.light, source = light && this.flareSource();
+        if (light)
+        {
+            if (!source) return [];
+            // a light's flare is the light's color, as bright as the light up to 1, and only from inside its cone
+            const cone = render3DLightCone(light), d = source.direction;
+            const inCone = clamp(-(cone[0] * d.x + cone[1] * d.y + cone[2] * d.z) - cone[3]);
+            const c = light.color, bright = c.a * clamp(light.intensity) * inCone;
+            if (!(bright > 0)) return [];
+            tint = this.color.multiply(rgb(c.r, c.g, c.b, bright));
+            height *= min(1, light.radius / source.distance); // smaller from farther than it reaches
+        }
+        return this.getElements().map((e)=>
+        {
+            const c = e.color.multiply(tint);
+            // along the line and past the middle, a lerp would stop there
+            return {pos: sun.add(center.subtract(sun).scale(e.at)), size: e.size * height, shape: e.shape,
+                color: rgb(c.r, c.g, c.b, c.a * strength)};
+        });
+    }
+
+    /** Is something between the camera and the sun, or the flare's light: the level, or an object that is not see
+     *  through
+     *  @return {boolean} */
+    isSunHidden()
+    {
+        const source = this.flareSource();
+        if (!source) return true;
+        const ray = new Ray3D(render3D.camera.pos, source.direction), reach = source.distance;
+        const blockers = engineObjects.filter((o)=> o !== this && o instanceof EngineObject3D && !o.destroyed &&
+            !o.transparent && !o.additive);
+        // a voxel map says block by block what is see through: glass, water and leaves let the sun by, and the
+        // ray goes on to the blocks behind them
+        const maps = /** @type {Array<VoxelMap>} */ (typeof VoxelMap == 'undefined' ? [] :
+            blockers.filter((o)=> o instanceof VoxelMap));
+        for (const map of maps)
+            if (map.raycast(ray, reach, (type)=> !map.blockType(type).seeThrough))
+                return true;
+        // an object is hit by its box, and a box the camera is inside, a room, a wide floor or the player's own
+        // body, says nothing of what is in the way: the ray the other way hits it too, and it is left out; so is
+        // one the light is inside, its lamp
+        const backward = ray.direction.scale(-1), back = new Ray3D(ray.origin, backward);
+        const lamp = this.light && [new Ray3D(source.pos, ray.direction), new Ray3D(source.pos, backward)];
+        const hits = (r, o)=> render3DRaycastObject(r, o) !== undefined;
+        const around = (o)=> !(o instanceof HeightMap) && (hits(back, o) || lamp && hits(lamp[0], o) && hits(lamp[1], o));
+        const hit = render3D.pick(ray, blockers.filter((o)=> !maps.some((map)=> map === o) && !around(o)));
+        return !!hit && hit.distance < reach;
+    }
+
+    /** Ease visible toward whether the sun shows, called automatically each frame */
+    update()
+    {
+        super.update();
+        const shows = !!this.getSunScreenPos() && !(this.occlusion && this.isSunHidden());
+        const step = this.fadeTime > 0 ? timeDelta / this.fadeTime : 1;
+        this.visible = clamp(this.visible + (shows ? step : -step));
+    }
+
+    /** Draw the flare over the 3D scene, added onto it, called automatically in the 2D pass */
+    render()
+    {
+        if (headlessMode || !glEnable) return;
+        const elements = this.getScreenElements();
+        if (!elements.length) return;
+        setAdditiveBlendMode(true);
+        for (const e of elements)
+        {
+            const tileInfo = render3DFlareTile(e.shape);
+            tileInfo && drawTile(e.pos, vec2(e.size), tileInfo, e.color, 0, false, undefined, true, true);
+        }
+        setAdditiveBlendMode(false);
+    }
+
+    /** A flare has nothing to draw in the 3D pass */
+    render3D() {}
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // OBJ meshes