`<sk-paper-texture-color-source>`

← prev index next →

Overlays a procedural paper grain on a material — a neutral, achromatic texture of mottling, tooth, and fine granulation — the way to give a flat color the tactile feel of ink on real paper.

JavaScript API: PaperTextureColorSource

Remarks

This is the paper-grain member of the ColorSource family: like every color-source it gives a material a base color that varies across the surface, but uniquely it outputs pure texture — a gray field centered on 50% neutral — and never reads the material's own color. Because it carries no baked-in color, it composes onto any base through a blend mode, so the same sheet of paper can texture many different colors.

Key attributes. mottle, tooth, and fine are the strengths of the three noise scales (broad density variation, paper tooth, pixel-scale grain); mottle-scale / tooth-scale set their cell sizes in pixels. speck adds rare pigment flecks. contrast shapes the grain from soft/felt-like (0) to crisp paper (1+). seed selects an independent sheet (whole numbers). projection is screen (the printed look, default) or triplanar (grain attached to the surface). In the default screen projection the grain is screen-space, so every material sharing these parameters shows one continuous sheet across the image; triplanar instead samples the grain in a world (or, with a projection-node, that node's local) frame, so it stays fixed to space rather than to the screen.

The blend mode carries the look. Since the source is neutral, pair it with base-color-source-blend-mode="overlay" (the paper look — neutral leaves the base untouched, swings modulate proportionally, flecks hit true black/white on any base) or "soft-light" (gentler). As a layer of sk-composite-color-source the same modes blend the paper over a sibling source such as a ramp.

Related. A material selects it with base-color-source="#id" (see sk-plain-material). It layers naturally under a sk-color-map-source inside a sk-composite-color-source.

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 flat card color textured by one continuous sheet of procedural paper.
     `tooth="1.5"` and `fine="2"` strengthen the grain; the neutral texture is
     laid onto the base color via `base-color-source-blend-mode="overlay"`, so
     the card gains tactile paper feel without changing its hue. -->
<sk-scene>
    <sk-directional-light p="42deg" h="25deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.5"></sk-ambient-light>

    <sk-paper-texture-color-source id="paper" tooth="1.5" fine="2"></sk-paper-texture-color-source>
    <sk-plain-material id="card" base-color="#c9c3a6" base-color-source="#paper"
                       base-color-source-blend-mode="overlay"></sk-plain-material>

    <sk-plane width="4" height="4" orientation="+y">
        <sk-surface-paint material="#card"></sk-surface-paint>
    </sk-plane>
</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.
`mottle`animatable	`<number>`	`1`	Broad paper-density mottling strength multiplier (0 disables). Default `1`.
`mottle-scale`animatable	`<number>`	`130`	Cell size of the mottling noise, in pixels (>= 1). Default `130`.
`tooth`animatable	`<number>`	`1`	Paper-tooth strength multiplier (0 disables). Default `1`.
`tooth-scale`animatable	`<number>`	`11`	Cell size of the tooth noise, in pixels (>= 1). Default `11`.
`fine`animatable	`<number>`	`1`	Pixel-scale granulation strength multiplier (0 disables). Default `1`.
`speck`animatable	`<number>`	`0`	Rare pigment-fleck strength multiplier (0 disables) — maps to fleck
`contrast`animatable	`<number>`	`1`	Amplitude shaping of the tooth/fine grain: `0` leaves the raw noise
`seed`animatable	`<number>`	`0`	Selects which paper field is drawn; whole numbers only. Default `0`.
`screen-anchor`	`<id-ref>`	—	Node whose projected screen position re-origins the texture domain reference by id
`projection`	`<paper-projection> ("screen" \| "triplanar")`	`"screen"`	How the texture domain is built: `'screen'` (fragCoord — the printed
`projection-node`	`<id-ref>`	—	Tri-planar frame node: the texture samples in this node's LOCAL frame reference by id
`texture-scale`animatable	`<number>`	`0.01`	World units per texture pixel (tri-planar only). Default `0.01`.
`blend-sharpness`animatable	`<number>`	`4`	Tri-planar normal-weight sharpness, `[1, 16]`. Default `4`.
`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