# packages/core/src/features/textures/lib/procedural-texture.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/textures/lib/procedural-texture.ts#L101). [Back to reference](/reference/components/procedural-texture/)
1 import { releaseField } from "./wasm/memory.js";
2 import { defineRenderLayer } from "@pibbl/core";
3 import {
4   paletteLut,
5   texturePalettes,
6   validateResolution,
7   validateSeed,
8   type TexturePalette,
9   type TextureResolution,
10 } from "./palette.js";
11 import { TextureRaster, type TextureRenderer } from "./presentation.js";
12 import { materialField, type TextureKind } from "./material-field.js";
13 
14 /**
15  * Authored inputs for ProceduralTexture, including the declared data and presentation options.
16  *
17  * @see {@link TextureKind}
18  * @see {@link TextureResolution}
19  * @see {@link TexturePalette}
20  * @see {@link TextureRenderer}
21  * @see {@link ProceduralTexture}
22  */
23 export interface ProceduralTextureProps {
24   /** Selects the kind of geometry, material, or result. See {@link TextureKind}. */
25   readonly kind: TextureKind;
26   /**
27    * Seed used for deterministic sampling or simulation initialization. See
28    * {@link ProceduralTextureProps}.
29    */
30   readonly seed?: number;
31   /** Dimensions of the simulation or raster grid. See {@link TextureResolution}. */
32   readonly resolution?: TextureResolution;
33   /** Feature frequency across the texture, from 1 to 32. */
34   readonly scale?: number;
35   /** Distortion, grain strength, or cellular jitter, from 0 to 1. */
36   readonly detail?: number;
37   /** Ordered colors used to present texture intensity. See {@link TexturePalette}. */
38   readonly palette?: TexturePalette;
39   /**
40    * Renders the current data or resources using the supplied context. See {@link TextureRenderer}
41    * .
42    */
43   readonly render?: TextureRenderer;
44 }
45 function normalize(p: ProceduralTextureProps) {
46   if (!["marble", "paper", "cellular"].includes(p.kind))
47     throw new TypeError("Unknown procedural texture kind.");
48   const scale = p.scale ?? 6,
49     detail = p.detail ?? 0.65;
50   if (
51     !Number.isFinite(scale) ||
52     scale < 1 ||
53     scale > 32 ||
54     !Number.isFinite(detail) ||
55     detail < 0 ||
56     detail > 1
57   )
58     throw new RangeError(
59       "Texture scale must be in [1,32] and detail in [0,1].",
60     );
61   return {
62     kind: p.kind,
63     seed: validateSeed(p.seed),
64     resolution: validateResolution(p.resolution),
65     scale,
66     detail,
67     palette: [...(p.palette ?? texturePalettes.porcelain)],
68     render: p.render,
69   };
70 }
71 type Options = ReturnType<typeof normalize>;
72 interface Resources {
73   options: Options;
74   field: Float32Array;
75   raster: TextureRaster;
76   lut: Uint8ClampedArray;
77   output: OffscreenCanvasRenderingContext2D;
78   dirty: boolean;
79 }
80 function generate(o: Options, previous?: Float32Array) {
81   return materialField(
82     o.resolution.width,
83     o.resolution.height,
84     o.kind,
85     o.seed,
86     o.scale,
87     o.detail,
88     previous,
89   );
90 }
91 
92 /**
93  * A seeded static material. It requests no continuing animation frames.
94  *
95  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
96  * props and style types.
97  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
98  *
99  * @see {@link ProceduralTextureProps}
100  */
101 export const ProceduralTexture = /* @__PURE__ */ defineRenderLayer<
102   ProceduralTextureProps,
103   Resources
104 >({
105   create(context, props) {
106     const options = normalize(props),
107       lut = paletteLut(options.palette);
108     const output = context.canvas.getContext("2d");
109     if (!output) throw new Error("ProceduralTexture requires Canvas 2D.");
110     const raster = new TextureRaster(
111       options.resolution.width,
112       options.resolution.height,
113     );
114     try {
115       return {
116         options,
117         lut,
118         output,
119         raster,
120         field: generate(options),
121         dirty: true,
122       };
123     } catch (error) {
124       raster.dispose();
125       throw error;
126     }
127   },
128   update(r, props) {
129     const next = normalize(props),
130       old = r.options;
131     if (next.palette.join() !== old.palette.join()) {
132       r.lut = paletteLut(next.palette);
133       r.dirty = true;
134     }
135     const resized =
136       next.resolution.width !== old.resolution.width ||
137       next.resolution.height !== old.resolution.height;
138     if (
139       resized ||
140       next.kind !== old.kind ||
141       next.seed !== old.seed ||
142       next.scale !== old.scale ||
143       next.detail !== old.detail
144     ) {
145       const field = generate(next, r.field);
146       if (resized) {
147         const raster = new TextureRaster(
148           next.resolution.width,
149           next.resolution.height,
150         );
151         r.raster.dispose();
152         r.raster = raster;
153       }
154       if (field !== r.field) releaseField(r.field);
155       r.field = field;
156       r.dirty = true;
157     }
158     r.options = next;
159   },
160   render(r, _frame, context) {
161     if (r.dirty) {
162       r.raster.update(r.field, r.lut);
163       r.dirty = false;
164     }
165     r.raster.draw(
166       r.output,
167       context.size.width,
168       context.size.height,
169       context.size.backingWidth,
170       context.size.backingHeight,
171       r.options.render,
172     );
173   },
174   dispose(r) {
175     r.raster.dispose();
176     releaseField(r.field);
177     r.field = new Float32Array(0);
178     r.options.render = undefined;
179   },
180 });
181
## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.