Fills a node's triangle faces with a material — the ordinary way to make a mesh look solid, giving its surface a color and shading rather than just an outline.
JavaScript API:
SurfacePaint
This is the surface member of the Paint family: like every paint it
applies a material to one part of a node's geometry; here that part is the
filled triangle surface, so the material's base color, tonemap, and lighting
response are what you see across the object's faces.
Key attributes. material (inherited from Paint) references the
material to render by id. cull-mode chooses which triangle faces to draw:
back draws only front faces — right for a closed solid; front draws only
back faces; and none draws both sides, which is what open or flat geometry
(a disc, a plane, a one-sided ribbon) needs so it does not vanish when viewed
from behind. Left unset, it follows the mesh's own default — back for most
solids, but none for open shapes like discs and planes. selection binds the
paint to a subset of the mesh's faces instead of the whole surface: it takes a
#id reference to a sk-selection authored on the same mesh, so several
paints on one mesh can fill disjoint face sets — a cube rendered as a die is six
selection-bound paints on one cube. Left unset, the paint fills the whole surface
(the original behavior); an unresolved selection draws nothing rather than
silently filling the whole mesh.
Related. A sk-selection names the faces this paint targets. Its
sibling paints cover the other parts of the geometry: sk-edge-paint
(wireframe edges) and sk-stroke-paint (spline strokes); several paints
can stack on one node in document order. The material it applies is a
sk-plain-material.
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.
<!-- One cube rendered as a die: six <sk-selection> children name the six face
triangle pairs of a size-2 cube (2 triangles per face, emitted in
+X, -X, +Y, -Y, +Z, -Z order), and six selection-bound surface paints each
fill one face with its own colour — six materials on a single mesh, no
per-face child geometry. The top paint sets cull-mode="back" explicitly (the
solid-cube default) to show the two controls together; the rest inherit it. -->
<sk-scene>
<sk-directional-light p="42deg" h="25deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.4"></sk-ambient-light>
<sk-plain-material id="pips1" base-color="crimson"></sk-plain-material>
<sk-plain-material id="pips2" base-color="goldenrod"></sk-plain-material>
<sk-plain-material id="pips3" base-color="seagreen"></sk-plain-material>
<sk-plain-material id="pips4" base-color="steelblue"></sk-plain-material>
<sk-plain-material id="pips5" base-color="darkorange"></sk-plain-material>
<sk-plain-material id="pips6" base-color="rebeccapurple"></sk-plain-material>
<sk-cube size="2">
<sk-selection id="die-right" indices="0-1"></sk-selection>
<sk-selection id="die-left" indices="2-3"></sk-selection>
<sk-selection id="die-top" indices="4-5"></sk-selection>
<sk-selection id="die-bottom" indices="6-7"></sk-selection>
<sk-selection id="die-front" indices="8-9"></sk-selection>
<sk-selection id="die-back" indices="10-11"></sk-selection>
<sk-surface-paint selection="#die-top" material="#pips1" cull-mode="back"></sk-surface-paint>
<sk-surface-paint selection="#die-bottom" material="#pips6"></sk-surface-paint>
<sk-surface-paint selection="#die-front" material="#pips2"></sk-surface-paint>
<sk-surface-paint selection="#die-back" material="#pips5"></sk-surface-paint>
<sk-surface-paint selection="#die-left" material="#pips3"></sk-surface-paint>
<sk-surface-paint selection="#die-right" material="#pips4"></sk-surface-paint>
</sk-cube>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
materialanimatable |
<id-ref> |
— | Gets the material this paint applies. reference by id |
selection |
<selection-token> |
— | A single-token reference to a Selection restricting which faces this reference by id |
cull-modeanimatable |
<cull-mode> ("front" | "back" | "none") |
"back" |
Face culling mode for triangle rendering. Left unset, the paint inherits the |
Optional spatial-field children (gradient/noise/random fields) modulating per-pixel surface coverage.
Used in guides: Scene basics