Fills the whole scene with flat, directionless light — the fill that lifts every surface out of pure black so shadowed areas stay readable.
JavaScript API:
AmbientLight
Ambient light is the second kind of light in the scene:
where the directional light is a sun with a direction, ambient light has none — it
brightens every surface equally, whatever way it faces, standing in for the
indirect bounce and skylight that would otherwise fill the shadows.
Key attributes. intensity sets how much fill is added (both intensity and
color are animatable, so the fill can breathe through a day/night cycle), and
color tints it. It has no direction, casts no shadows, and combines additively
with the directional key light — so a little ambient on its own reads as flat and
unshaded; its job is to complement a directional light, not replace it.
Related. Pair it with a sk-directional-light for the classic key + fill
setup: the directional light gives shape and shadow, the ambient light keeps the
shadow side from going fully dark.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<sk-scene>
<sk-plain-material id="mat" base-color="cornflowerblue"></sk-plain-material>
<sk-sphere radius="1.5" segments="8">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
<!-- A directional key light plus fill ambient. The ambient intensity
animates a day/night cycle (intensity is a keyframe attribute). -->
<sk-directional-light intensity="0.7" p="45deg"></sk-directional-light>
<sk-ambient-light intensity="0" color="white">
<sk-animation duration="1500ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" intensity="0"></sk-keyframe>
<sk-keyframe offset="1" intensity="1"></sk-keyframe>
</sk-animation>
</sk-ambient-light>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
draggable |
<boolean> |
false |
Gets whether this node can be dragged. |
intensityanimatable |
<number> |
1.0 |
Light brightness multiplier. |
coloranimatable |
<color> |
"white" |
The light's color. |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend