The three-layer neon glow

One exponential falloff around a distance field gives you a blurry shape. It does not give you a light. The difference is three falloffs instead of one, and it costs two extra exp calls.

Left: a single falloff. Right: three. Same shape, same hue, same tonemapper.

The tube on the left is what almost every first attempt looks like. It reads as fog around a line. The one on the right reads as a lit object, and nothing changed except how many falloffs are stacked and how wide each one is.

The stack

A single glow, the thing that looks cheap:

col += hue * glowExp(d, r) * 2.0;

And the three that do not:

col += hue * glowExp(d, r * 4.0) * 0.40;   // 1. wide ambient bath
col += hue * glowExp(d, r * 1.0) * 2.00;   // 2. the tube halo
col += hue * glowExp(d, r * 0.3) * 6.00;   // 3. hot core, clips past 1.0

Each layer is doing a different job. Layer 1 is wide and dim, and it is the room being lit by the sign rather than the sign itself. Layer 2 is the tube you would point at if someone asked where the neon is. Layer 3 is the filament, and it is deliberately scaled past 1.0.

The core is the part people get wrong

The instinct is to blend the middle of the tube toward white. Do not do that. A mix(hue, vec3(1.0), t) reads as a gray dot sitting inside a colored tube, because you have desaturated it without brightening it.

Instead multiply the saturated hue by a large scalar so the brightest channel clips past 1.0, and let the tonemapper roll it toward white on its own. With a cyan of (0.10, 0.85, 1.00) at gain 6, blue saturates first, then green, and red arrives last. That staggered arrival across the three channels is exactly the hue-in-the-halo, white-in-the-core signature real neon has, and you get it for free from a curve you were already applying.

Which also means the effect only exists if you tonemap. Clamp instead and the core posterizes into a flat block of the wrong color.

The fourth layer

Glow says "this emits light". It does not say "this is an object". Without a crisp stroke the shape dissolves, especially when it overlaps anything. One thin smoothstep at the edge puts the geometry back.

Rules of thumb

  1. Radii around 4r, 1r, 0.3r. Ratios matter more than absolutes.
  2. Gains around 0.4, 2, 6. Only the last should exceed 1.
  3. Never mix toward white. Multiply the hue and let the curve whiten it.
  4. Never a pure black background. Neon needs something to spill onto.
  5. Dither before the 8-bit write, or the wide dim layer bands visibly.

The whole thing

Runs here and on Shadertoy unmodified.

The full stack: four tubes, three layers each, one crisp stroke.

All 61 notes How to use them Credits