# packages/core/src/features/textures/lib/presentation.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/presentation.ts#L40). [Back to reference](/reference/types/textures/)
1 import type { ReactionDiffusionProps } from './reaction-diffusion.js';
2 import type { ProceduralTextureProps } from './procedural-texture.js';
3 import { rasterizeField } from "./wasm/memory.js";
4 /**
5  * Borrowed sources are valid only during the synchronous renderer callback.
6  *
7  * @see {@link TextureRenderer}
8  */
9 export interface TextureRenderFrame {
10   /** Current offscreen texture raster available to the presentation callback. See {@link TextureRenderFrame}. */
11   readonly source: OffscreenCanvas;
12   /** White with texture intensity as alpha, allocated lazily on first access. */
13   readonly mask: OffscreenCanvas;
14   /**
15    * Horizontal extent in the units of the containing geometry or surface. See
16    * {@link TextureRenderFrame}.
17    */
18   readonly width: number;
19   /**
20    * Vertical extent in the units of the containing geometry or surface. See
21    * {@link TextureRenderFrame}.
22    */
23   readonly height: number;
24   /** Width of the underlying texture raster in pixels. See {@link TextureRenderFrame}. */
25   readonly textureWidth: number;
26   /** Height of the underlying texture raster in pixels. See {@link TextureRenderFrame}. */
27   readonly textureHeight: number;
28 }
29 /**
30  * Custom presentation callback receiving an offscreen context and the current texture raster
31  * frame.
32  *
33  * @param context - Offscreen drawing context to paint into.
34  * @param texture - Current texture surface and frame metadata. See {@link TextureRenderFrame}.
35  *
36  * @see {@link TextureRenderFrame}
37  * @see {@link ReactionDiffusionProps}
38  * @see {@link ProceduralTextureProps}
39  */
40 export type TextureRenderer = (
41   context: OffscreenCanvasRenderingContext2D,
42   texture: Readonly<TextureRenderFrame>,
43 ) => void;
44 
45 export class TextureRaster {
46   readonly surface: OffscreenCanvas;
47   readonly context: OffscreenCanvasRenderingContext2D;
48   private maskRaster?: () => ImageData;
49   private maskSurface?: OffscreenCanvas;
50   private maskContext?: OffscreenCanvasRenderingContext2D;
51   private maskDirty = true;
52   constructor(
53     readonly width: number,
54     readonly height: number,
55   ) {
56     this.surface = new OffscreenCanvas(width, height);
57     const context = this.surface.getContext("2d");
58     if (!context) {
59       this.surface.width = this.surface.height = 0;
60       throw new Error("Textures require offscreen Canvas 2D.");
61     }
62     this.context = context;
63   }
64   update(field: Float32Array, lut: Uint8ClampedArray, gain = 1) {
65     const raster = rasterizeField(field, lut, gain);
66     this.maskRaster = raster.mask;
67     this.context.putImageData(raster.image, 0, 0);
68     this.maskDirty = true;
69   }
70   private getMask(): OffscreenCanvas {
71     if (!this.maskSurface) {
72       this.maskSurface = new OffscreenCanvas(this.width, this.height);
73       this.maskContext = this.maskSurface.getContext("2d") ?? undefined;
74       if (!this.maskContext)
75         throw new Error("Textures require offscreen Canvas 2D.");
76     }
77     if (this.maskDirty) {
78       if (!this.maskRaster)
79         throw new Error("Texture mask requires a live WASM raster.");
80       this.maskContext!.putImageData(this.maskRaster(), 0, 0);
81       this.maskDirty = false;
82     }
83     return this.maskSurface;
84   }
85   draw(
86     ctx: OffscreenCanvasRenderingContext2D,
87     width: number,
88     height: number,
89     backingWidth: number,
90     backingHeight: number,
91     render?: TextureRenderer,
92   ) {
93     ctx.save();
94     try {
95       ctx.resetTransform();
96       ctx.clearRect(0, 0, backingWidth, backingHeight);
97       if (width <= 0 || height <= 0) return;
98       ctx.scale(backingWidth / width, backingHeight / height);
99       if (render) {
100         const raster = this;
101         const result: unknown = render(
102           ctx,
103           Object.freeze({
104             source: this.surface,
105             get mask() {
106               return raster.getMask();
107             },
108             width,
109             height,
110             textureWidth: this.width,
111             textureHeight: this.height,
112           }),
113         );
114         if (result && typeof (result as { then?: unknown }).then === "function")
115           throw new TypeError("Texture render callbacks must be synchronous.");
116       } else ctx.drawImage(this.surface, 0, 0, width, height);
117     } finally {
118       ctx.restore();
119     }
120   }
121   dispose() {
122     this.surface.width = this.surface.height = 0;
123     if (this.maskSurface) this.maskSurface.width = this.maskSurface.height = 0;
124     this.maskSurface = undefined;
125     this.maskContext = undefined;
126 
127     this.maskRaster = undefined;
128   }
129 }
130
## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.