NatureGL Grassv1.1.0

Guides

Fireflies

Blinking additive points that hover over the terrain around a focus point. They wrap around it as it moves, so the swarm never runs out, and they stay away from masked-out ground such as water and paths.

night, with the demo clock run from 18:18 to 19:12. The demo sets fireflies.intensity to its night factor, so the swarm fades in as the sky darkens.

#Add them

js
import { Fireflies } from 'naturegl-grass';

const flies = await Fireflies.create({ scene, grass, count: 700 });

renderer.setAnimationLoop(() => {
  flies.intensity = nightFactor;                       // 0 hides them
  flies.update(dt, player.position, camera, renderer);
  renderer.render(scene, camera);
});

grass shares its baked terrain. Without a grass system, pass terrain (a description or a TerrainField). A description is baked at 256² for the fireflies.

#Options

OptionDefault
count700Number of points. Change later with setCount(n)
radius28Half-width in metres of the square the swarm fills around the focus
size0.14Point size in metres
color0xbfff4dGlow colour
intensity10 = off, 1 = full glow. Also a property
heightRange[0.35, 1.75]Hover height above the terrain in metres

#The update call

update(dt, focus, camera?, renderer?) advances the blink clock and moves the swarm centre to focus. Pass the camera and renderer to keep the point size right after a resize. The size is computed from the drawing-buffer height and the camera's field of view. The points object hides itself while intensity is below 0.01, so a daytime swarm costs nothing to draw.

#Where they fly

  • Each point drifts slowly on its own loop and bobs up and down within heightRange.
  • Points wrap around the focus square, so walking forward never leaves the swarm behind.
  • The height comes from the baked terrain, so they follow hills.
  • They blink in sharp pulses, and the glow is suppressed where the terrain mask is near 0. None hover over water or paths you masked out.

#Fade with your sky

Drive intensity from whatever says "night" in your scene. With NatureGL Sky, that is sky.night:

js
flies.intensity = sky.night;

The demo computes its own night factor from the sun elevation of its time-of-day slider.

Member
objectThe THREE.Points (added to scene, additive blending, no depth write)
intensityGetter and setter
setCount(n)Rebuilds the point buffers
dispose()Removes the points and frees the geometry, material and any terrain bake it owns