`<sk-raster-color-source>`

← prev index next →

Paints a material's base color straight from an image — projecting a loaded raster onto a surface like a slide projector — the way to stamp a logo, decal, or texture onto geometry instead of computing the color.

JavaScript API: RasterColorSource

Remarks

This is the image-driven member of the ColorSource family: like every color-source it gives a material a base color that varies across the surface, but instead of computing that color it samples a loaded raster and returns the texel's RGBA — including its alpha — wherever the source applies. It is a full scene node, so its own transform and every ancestor's carries the image, and it projects with foreshortening: a tilted source narrows its decal on the receiving surface, never widens it.

Key attributes. src is the image URL (http(s), relative, or a data: URI); SVG sources are rasterized and sampled like any other. projection-plane is a signed two-axis token (default xz) mapping image u/v onto world axes — a standing XY surface reads upright with x-y. width/height size one raster copy in local units (0 = AUTO: width → one unit, height → the image's aspect ratio); anchor (a box keyword or content(x, y) in image pixels, default center) sits at the source's local origin. tile is none (one bounded decal, default) or repeat (seamless tiling). visualize draws the projection quad so the placement is visible while composing.

Projection & loading. With projection="auto" (default) the paint drives the parametrization — stroke paints project stroke-parametrically, surface paints planarly; projection="uv" samples the mesh's authored texture coordinates instead. The raster loads asynchronously: until it arrives the flat base-color shows through, and a load event re-renders the consumers once texel data is available. Scene readiness does not await the load.

Related. A material selects it with base-color-source="#id" (see sk-plain-material). Its scalar-driven sibling is sk-color-map-source; to layer it under or over other sources, use sk-composite-color-source (at most one raster child per 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.

<!-- Projects a raster — a self-contained inline data: SVG target decal — onto a
     sphere as its base color. `projection-plane="x-y"` stands the image upright,
     `width="2"` sizes one copy, `anchor="center"` pins it to the origin, and
     `tile="none"` places a single decal. Read the placement against the sphere. -->
<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-raster-color-source id="decal"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f4a259'/%3E%3Ccircle cx='32' cy='32' r='20' fill='%23216869'/%3E%3Ccircle cx='32' cy='32' r='9' fill='%23f4f1de'/%3E%3C/svg%3E"
        projection-plane="x-y" width="2" anchor="center"
        x="0" y="0" z="0" tile="none"></sk-raster-color-source>
    <sk-plain-material id="mat" base-color="white"
        base-color-source="#decal"></sk-plain-material>

    <sk-sphere radius="2" segments="6">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-sphere>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`src`required	`<string>`	—	The raster URL (http(s)/relative/`data:`). Assigning starts a load.
`projection`	`<raster-projection> ("auto" \| "uv")`	`"auto"`	Projection mode.
`projection-plane`	`<coordinate-space>`	`"xz"`	The signed 2-axis `<coordinate-space>` token naming which LOCAL axes
`tile`animatable	`<raster-tile> ("none" \| "repeat")`	`"none"`	Tile mode outside the unit uv square (a params flag — data-only).
`width`animatable	`<number>`	`0`	Local units one raster copy spans along u — or, sampled from a stroke
`height`animatable	`<number>`	`0`	Local units one raster copy spans along v. 0 = AUTO: derived from the
`anchor`	`<content-anchor> (<anchor>)`	`"center"`	The image point pinned to the source's local origin: a box-anchor
`field`animatable	`<id-ref>`	—	Gets the optional applicability field that masks where this source reference by id
`x`animatable	`<number>`	`0`	Gets the X position component.
`y`animatable	`<number>`	`0`	Gets the Y position component.
`z`animatable	`<number>`	`0`	Gets the Z position component.
`h`animatable	`<angle>`	`0`	Gets the heading (Y-axis) rotation in radians.
`p`animatable	`<angle>`	`0`	Gets the pitch (X-axis) rotation in radians.
`b`animatable	`<angle>`	`0`	Gets the bank (Z-axis) rotation in radians.
`visualize`	`<boolean>`	`false`	Whether the visualization is visible (wireframe splines + center marker).
`interactive-controls`	`<boolean>`	`false`	Whether interactive controls are shown (draggable markers for adjusting parameters).

↑ Documentation home · ← All elements