Skip to content
Docs
Open Promoeyes
gradient-glass

gradient-glass

GRADIENT GLASS — the field-sampled physical material, every knob on screen.

Read the rig's notes
`gradient-glass` (packages/engine/lib/gradient-glass) is a MeshPhysicalMaterial
whose diffuse colour is an object-space RBF colour field: up to 12 lobes,
each `field#id(color position spread strength drift speed phase)`, sampled
in the normalized [-1,1] frame of whatever it lands on. Colour is injected
at <color_fragment>, BEFORE lighting and transmission, so clearcoat, env
reflections, shadows and tone mapping behave like any physical surface.
Authored ONCE in <materials>, attached by name; every attachment forks its
own material (its own gradient frame) but shares ONE field set.

One scene per axis of the control surface — every knob authored at its
default (or the value it is demonstrating) so a frame is a lookup table:

   1. PRESETS      — preset=frosted|glossy|subtle, and the body knobs under it
                     (frost→roughness gloss→clearcoat transmission thickness ior …).
                     `preset=` works PER ELEMENT too.
   2. FIELDS       — seed=none + five hand-placed lobes: position / spread /
                     strength / color / drift / speed / phase, on a sphere, a
                     box and a knot sharing the same set.
   3. MAPPING      — mapping=object|sphere|cylinder on the same capsule.
   4. MOTION + KFS — motion (drift amount) · speed (drift rate) — and the
                     KEYFRAMES: tracks on the DEFINITION (scene-level
                     `materials`: gradient-mix + a field's colour + a field's
                     position — every attachment re-tints together) and tracks
                     on an ELEMENT (frost / gloss / gradient-mix / gradient-spread
                     — that sphere only; a field-level track detaches it).
   5. OVERRIDES    — one definition, per-element gradient-spread /
                     gradient-strength / base-color+base-weight / tint /
                     mapping+gradient-mix. Which of them opt out of sharing.
   6. SURFACES     — the SAME definition on a sphere, a <ui3d> card, an
                     iphone body and <text3d>, under one HDR.

Knob table (definition AND element; kebab canonical):
  body   preset frost gloss transmission thickness ior clearcoat-roughness
         metalness envmap-intensity attenuation-color attenuation-distance
         specular-intensity specular-color sheen sheen-roughness sheen-color
         emissive emissive-intensity opacity tint side
  field  seed mapping gradient-mix gradient-strength gradient-spread
         base-color base-weight motion speed
  lobe   field#id( color position spread strength drift speed phase )
Keyframable: everything above except preset/seed/mapping/side — as a kf
block on the element, or on the definition / a field.

Stage: fov 34 at (0 0 808), dark #0a0d16→#141a2b gradient, three additive
haze lobes (match-carried), photo-studio HDR (never as background) so the
clearcoat has something to reflect. mm units.

Preview: /packages/runtime/index.html?project=promos/primitives/effects/gradient-glass.promo
Topic
effects
Scenes
6
Kind
reference rig
//
    GRADIENT GLASS — the field-sampled physical material, every knob on screen.

    `gradient-glass` (packages/engine/lib/gradient-glass) is a MeshPhysicalMaterial
    whose diffuse colour is an object-space RBF colour field: up to 12 lobes,
    each `field#id(color position spread strength drift speed phase)`, sampled
    in the normalized [-1,1] frame of whatever it lands on. Colour is injected
    at <color_fragment>, BEFORE lighting and transmission, so clearcoat, env
    reflections, shadows and tone mapping behave like any physical surface.
    Authored ONCE in <materials>, attached by name; every attachment forks its
    own material (its own gradient frame) but shares ONE field set.

    One scene per axis of the control surface — every knob authored at its
    default (or the value it is demonstrating) so a frame is a lookup table:

       1. PRESETS      — preset=frosted|glossy|subtle, and the body knobs under it
                         (frost→roughness gloss→clearcoat transmission thickness ior …).
                         `preset=` works PER ELEMENT too.
       2. FIELDS       — seed=none + five hand-placed lobes: position / spread /
                         strength / color / drift / speed / phase, on a sphere, a
                         box and a knot sharing the same set.
       3. MAPPING      — mapping=object|sphere|cylinder on the same capsule.
       4. MOTION + KFS — motion (drift amount) · speed (drift rate) — and the
                         KEYFRAMES: tracks on the DEFINITION (scene-level
                         `materials`: gradient-mix + a field's colour + a field's
                         position — every attachment re-tints together) and tracks
                         on an ELEMENT (frost / gloss / gradient-mix / gradient-spread
                         — that sphere only; a field-level track detaches it).
       5. OVERRIDES    — one definition, per-element gradient-spread /
                         gradient-strength / base-color+base-weight / tint /
                         mapping+gradient-mix. Which of them opt out of sharing.
       6. SURFACES     — the SAME definition on a sphere, a <ui3d> card, an
                         iphone body and <text3d>, under one HDR.

    Knob table (definition AND element; kebab canonical):
      body   preset frost gloss transmission thickness ior clearcoat-roughness
             metalness envmap-intensity attenuation-color attenuation-distance
             specular-intensity specular-color sheen sheen-roughness sheen-color
             emissive emissive-intensity opacity tint side
      field  seed mapping gradient-mix gradient-strength gradient-spread
             base-color base-weight motion speed
      lobe   field#id( color position spread strength drift speed phase )
    Keyframable: everything above except preset/seed/mapping/side — as a kf
    block on the element, or on the definition / a field.

    Stage: fov 34 at (0 0 808), dark #0a0d16→#141a2b gradient, three additive
    haze lobes (match-carried), photo-studio HDR (never as background) so the
    clearcoat has something to reflect. mm units.

    Preview: /packages/runtime/index.html?project=promos/primitives/effects/gradient-glass.promo
promo#gradient-glass
  materials
    // the house look — codex seed, two lobes recoloured, frosted body
    gradient-glass#house(preset=frosted seed=codex mapping=object frost=0.28 gloss=0.8 transmission=0.26 thickness=0.3 ior=1.27 gradient-mix=1 gradient-strength=1 gradient-spread=1 motion=1 speed=1)
      field#amber(color=#ff9f1c)
      field#cyan(color=#2ec4ff)
    // an empty palette + five authored lobes — positions/spreads in the [-1,1] frame
    gradient-glass#custom(preset=glossy seed=none base-color=#1b2440 base-weight=0.35 frost=0.18 gloss=0.9 transmission=0.3)
      field#ember(color=#ff5a1f position="-0.7 0.6 0.9" spread="0.45 0.4 1.2" strength=6 drift="0.05 0.04 0.02" speed=0.2 phase=0)
      field#gold(color=#ffc857 position="-0.1 0.85 0.8