Draws a mesh's edges as a wireframe in a material — the way to reveal an object's structure as clean lines, on its own or laid over a filled surface.
JavaScript API:
EdgePaint
This is the edge 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 mesh
edges, rendered as a wireframe. Edges composite with the node's surface paints
in document order (source-over): an edge paint declared after a surface paint
renders above it, one declared before renders below — there is no depth-bias
separation, so ordering is how you control which shows on top.
Key attributes. material (inherited from Paint) references the
material to draw the wireframe with, by id. show toggles the wireframe on and
off (default true), so it can be hidden without removing the paint. Beyond
those, the visual result is governed by that material and by paint order relative
to the node's other paints.
Related. Its sibling paints cover the other parts of the geometry:
sk-surface-paint (filled faces) and sk-stroke-paint (spline
strokes); stack several on one node in document order to combine fill and
wireframe. 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.
<!-- A cube painted TWICE: a steel-blue surface fill, then a white wireframe on
top. The edge paint is declared AFTER the surface paint, so its lines render
above the fill — reorder them and the wireframe would sit behind. Read the
white edges tracing the cube's structure over the solid faces. -->
<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="fill" base-color="steelblue"></sk-plain-material>
<sk-plain-material id="wire" base-color="white"></sk-plain-material>
<sk-cube size="2">
<sk-surface-paint material="#fill"></sk-surface-paint>
<sk-edge-paint material="#wire"></sk-edge-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 |
show |
<boolean> |
true |
Whether edges are visible. |
Optional spatial-field children modulating per-pixel edge coverage.
Used in guides: Scene basics