shaderpad 1.0.0-beta.18 → 1.0.0-beta.20

package/README.md

@@ -1,6 +1,8 @@
-# ShaderPad
+![ShaderPad logo](./ShaderPad.png)
 
-ShaderPad is a lightweight, dependency-free library to reduce boilerplate when writing fragment shaders. It provides a simple interface to initialize shaders, manage uniforms, maintain an animation loop, and handle user interactions such as mouse movements and window resizing.
+**Minimal setup. Tiny footprint.**
+
+ShaderPad is a lightweight, dependency-free library that reduces boilerplate when working with fragment shaders. It provides a simple interface for setup, texture and uniform management, and user interactions such as mouse movements and window resizing. It comes “batteries included” for common needs, with optional plugins — from PNG export to face/pose tracking — for more advanced use cases. Simple, performant, and portable, ShaderPad lets you focus on the fun part: writing GLSL.
 
 ## Installation
 
@@ -21,7 +23,7 @@ precision highp float;
 in vec2 v_uv;
 uniform float u_time;
 uniform vec2 u_resolution;
-uniform vec4 u_cursor; // [cursorX, cursorY, scrollX, scrollY]
+uniform vec2 u_cursor;
 
 // Custom variables.
 uniform vec3 u_cursorColor;
@@ -34,7 +36,7 @@ void main() {
   float dotDist = length(dotGrid);
   float dot = step(dotDist, 5.);
 
-  float cursorDist = distance(uv, u_cursor.xy * u_resolution);
+  float cursorDist = distance(uv, u_cursor * u_resolution);
   float cursor = step(cursorDist, 25. + sin(u_time * 5.) * 5.);
 
   vec3 color = mix(vec3(0., 0., 1.), vec3(1.), dot);
@@ -71,6 +73,173 @@ shader.play(time => {
 
 See the [`examples/` directory](./examples/) for more.
 
+## Usage
+
+### Uniforms
+
+#### `initializeUniform(name, type, value, options?)`
+
+Initialize a uniform variable. The uniform must be declared in your fragment shader.
+
+```typescript
+// Initialize a float uniform.
+shader.initializeUniform('u_speed', 'float', 1.5);
+
+// Initialize a vec3 uniform.
+shader.initializeUniform('u_color', 'float', [1.0, 0.5, 0.0]);
+```
+
+**Parameters:**
+
+-   `name` (string): The name of the uniform as declared in your shader
+-   `type` ('float' | 'int'): The uniform type
+-   `value` (number | number[] | (number | number[])[]): Initial value(s)
+-   `options` (optional): `{ arrayLength?: number }` - Required for uniform arrays
+
+#### `updateUniforms(updates, options?)`
+
+Update one or more uniform values.
+
+```typescript
+shader.updateUniforms({
+	u_speed: 2.0,
+	u_color: [1.0, 0.0, 0.0],
+});
+```
+
+**Parameters:**
+
+-   `updates` (Record<string, number | number[] | (number | number[])[]>): Object mapping uniform names to their new values
+-   `options` (optional): `{ startIndex?: number }` - Starting index for partial array updates
+
+#### Uniform arrays
+
+ShaderPad supports uniform arrays. Initialize them by passing an `arrayLength` option:
+
+```typescript
+// Initialize a vec2 array with 5 elements.
+shader.initializeUniform(
+	'u_positions',
+	'float',
+	[
+		[0, 0],
+		[1, 1],
+		[2, 2],
+		[3, 3],
+		[4, 4],
+	],
+	{
+		arrayLength: 5,
+	}
+);
+
+// Update all elements.
+shader.updateUniforms({
+	u_positions: [
+		[0.1, 0.2],
+		[1.1, 1.2],
+		[2.1, 2.2],
+		[3.1, 3.2],
+		[4.1, 4.2],
+	],
+});
+
+// Update a subset starting at index 2.
+shader.updateUniforms(
+	{
+		u_positions: [
+			[2.5, 2.5],
+			[3.5, 3.5],
+		],
+	},
+	{ startIndex: 2 }
+);
+```
+
+#### Included uniforms
+
+| Uniform                | Type           | Description                                                                       |
+| ---------------------- | -------------- | --------------------------------------------------------------------------------- |
+| `u_time`               | float          | The current time in seconds.                                                      |
+| `u_frame`              | int            | The current frame number.                                                         |
+| `u_resolution`         | float[2]       | The canvas element's dimensions.                                                  |
+| `u_cursor`             | float[2]       | Cursor position (x, y).                                                           |
+| `u_click`              | float[3]       | Click position (x, y) and left click state (z).                                   |
+| `u_history`            | sampler2DArray | Buffer texture of prior frames. Available if `history` option is set.             |
+| `u_historyFrameOffset` | int            | Frame offset for accessing history texture. Available if `history` option is set. |
+
+#### Included varyings
+
+| Varying | Type     | Description                         |
+| ------- | -------- | ----------------------------------- |
+| `v_uv`  | float[2] | The UV coordinates of the fragment. |
+
+### Textures
+
+#### `initializeTexture(name, source, options?)`
+
+Initialize a texture from an image, video, or canvas element.
+
+```typescript
+// Initialize a texture from an image.
+const img = new Image();
+img.src = 'texture.png';
+img.onload = () => {
+	shader.initializeTexture('u_texture', img);
+};
+
+// Initialize a texture with history (stores previous frames).
+shader.initializeTexture('u_webcam', videoElement, { history: 30 });
+```
+
+**Parameters:**
+
+-   `name` (string): The name of the texture uniform as declared in your shader
+-   `source` (HTMLImageElement | HTMLVideoElement | HTMLCanvasElement): The texture source
+-   `options` (optional): `{ history?: number }` - Number of previous frames to store
+
+#### `updateTextures(updates)`
+
+Update one or more textures. Useful for updating video textures each frame.
+
+```typescript
+shader.updateTextures({
+	u_webcam: videoElement,
+	u_overlay: overlayCanvas,
+});
+```
+
+**Parameters:**
+
+-   `updates` (Record<string, TextureSource>): Object mapping texture names to their new sources
+
+### Lifecycle methods
+
+#### `play(callback?)`
+
+Start the render loop. The callback is invoked each frame with the current time and frame number.
+
+```typescript
+shader.play();
+// Can optionally take a callback to invoke each frame.
+shader.play((time, frame) => {
+	shader.updateTextures({ u_webcam: videoElement });
+});
+```
+
+#### `pause()`, `reset()`, `destroy()`
+
+```typescript
+shader.pause(); // Pause the render loop.
+shader.reset(); // Reset frame counter and clear history buffers.
+shader.destroy(); // Clean up resources.
+```
+
+### Properties
+
+-   `canvas` (HTMLCanvasElement): The canvas element used for rendering
+-   `onResize?: (width: number, height: number) => void`: Callback fired when the canvas is resized
+
 ## Options
 
 ShaderPad’s constructor accepts an optional `options` object.
@@ -88,51 +257,219 @@ shader.onResize = (width, height) => {
 };
 ```
 
-### plugins
+### history
 
-ShaderPad supports plugins to add additional functionality.
+The `history` option enables framebuffer history, allowing you to access previous frames in your shader. Pass a number to specify how many frames to keep.
 
-#### history
+```typescript
+// Store the last 10 frames of shader output.
+const shader = new ShaderPad(fragmentShaderSrc, { history: 10 });
 
-The `history` plugin can capture both the framebuffer output and texture history. The plugin argument controls how many frames to keep for the framebuffer (defaults to `1`).
+// In your shader, access history using the u_history uniform:
+// uniform highp sampler2DArray u_history;
+// It’s stored as a ringbuffer, so you can access specific frames with the provided offset uniform:
+// uniform int u_historyFrameOffset;
+```
+
+You can also enable history for individual textures:
 
 ```typescript
-import ShaderPad, { history, WithHistory } from 'shaderpad';
+// Store the last 30 webcam frames.
+shader.initializeTexture('u_webcam', videoElement, { history: 30 });
+// In your shader, access history using the u_webcam and u_webcamFrameOffset uniforms:
+// uniform highp sampler2DArray u_webcam;
+// uniform int u_webcamFrameOffset;
+```
 
-// Store the last 10 frames of shader output.
-const shaderWithOutputHistory = new ShaderPad(fragmentShaderSrc, { plugins: [history(10)] });
+It’s recommended to use the `helpers` plugin to simplify access to history textures:
 
-// Store the last 30 webcam frames.
-const shader = new ShaderPad(fragmentShaderSrc, { plugins: [history()] }) as WithHistory<ShaderPad>;
-shader.initializeTexture('u_webcam', videoElement, 30);
+```glsl
+int nFramesAgo = 2; // Get the color 2 frames ago.
+float zIndex = historyZ(u_webcam, u_webcamFrameOffset, nFramesAgo);
+vec4 historyColor = texture(u_webcam, vec3(v_uv, zIndex));
+```
+
+### plugins
+
+ShaderPad supports plugins to add additional functionality. Plugins are imported from separate paths to keep bundle sizes small.
+
+#### helpers
+
+The `helpers` plugin provides convenience functions and constants. See [helpers.glsl](./src/plugins/helpers.glsl) for the implementation.
+
+```typescript
+import ShaderPad from 'shaderpad';
+import { helpers } from 'shaderpad/plugins/helpers';
+
+const shader = new ShaderPad(fragmentShaderSrc, {
+	plugins: [helpers()],
+});
 ```
 
 #### save
 
-The `save` plugin adds a `.save()` method to the shader that saves the current frame to a PNG file.
+The `save` plugin adds a `.save()` method to the shader that saves the current frame to a PNG file. It works on desktop and mobile.
 
 ```typescript
-import ShaderPad, { save, WithSave } from 'shaderpad';
+import ShaderPad from 'shaderpad';
+import { save, WithSave } from 'shaderpad/plugins/save';
+
 const shader = new ShaderPad(fragmentShaderSrc, { plugins: [save()] }) as WithSave<ShaderPad>;
 shader.save('my-frame');
 ```
 
-## Included uniforms
+#### face
 
-| Uniform        | Type           | Description                                                                     |
-| -------------- | -------------- | ------------------------------------------------------------------------------- |
-| `u_time`       | float          | The current time in seconds.                                                    |
-| `u_frame`      | int            | The current frame number.                                                       |
-| `u_resolution` | float[2]       | The canvas element's dimensions.                                                |
-| `u_cursor`     | float[2]       | Cursor position (x, y).                                                         |
-| `u_click`      | float[3]       | Click position (x, y) and left click state (z).                                 |
-| `u_history`    | sampler2DArray | Buffer texture of prior frames. Only available if the `history` plugin is used. |
+The `face` plugin uses [MediaPipe](https://ai.google.dev/edge/mediapipe/solutions/vision/face_landmarker) to detect faces in video or image textures.
 
-## Included varyings
+```typescript
+import ShaderPad from 'shaderpad';
+import { face } from 'shaderpad/plugins/face';
+
+const shader = new ShaderPad(fragmentShaderSrc, {
+	plugins: [
+		face({
+			textureName: 'u_webcam',
+			options: { maxFaces: 3 },
+		}),
+	],
+});
+```
 
-| Varying | Type     | Description                         |
-| ------- | -------- | ----------------------------------- |
-| `v_uv`  | float[2] | The UV coordinates of the fragment. |
+**Uniforms:**
+
+| Uniform        | Type           | Description                                    |
+| -------------- | -------------- | ---------------------------------------------- |
+| `u_maxFaces`   | int            | Maximum number of faces to detect              |
+| `u_nFaces`     | int            | Current number of detected faces               |
+| `u_faceCenter` | vec2[maxFaces] | Face center positions                          |
+| `u_leftEye`    | vec2[maxFaces] | Left eye positions                             |
+| `u_rightEye`   | vec2[maxFaces] | Right eye positions                            |
+| `u_noseTip`    | vec2[maxFaces] | Nose tip positions                             |
+| `u_faceMask`   | sampler2D      | Face mask texture (R: mouth, G: face, B: eyes) |
+
+**Helper functions:** `getFace(vec2 pos)`, `getEye(vec2 pos)`, `getMouth(vec2 pos)`
+
+**Note:** The face plugin requires `@mediapipe/tasks-vision` as a peer dependency.
+
+#### pose
+
+The `pose` plugin uses [MediaPipe Pose Landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker) to expose a flat array of 2D landmarks. Each pose contributes 33 landmarks, enumerated below.
+
+```typescript
+import ShaderPad from 'shaderpad';
+import { pose } from 'shaderpad/plugins/pose';
+
+const shader = new ShaderPad(fragmentShaderSrc, {
+	plugins: [pose({ textureName: 'u_video', options: { maxPoses: 3 } })],
+});
+```
+
+**Uniforms:**
+
+| Uniform           | Type                | Description                              |
+| ----------------- | ------------------- | ---------------------------------------- |
+| `u_maxPoses`      | int                 | Maximum number of poses to track         |
+| `u_nPoses`        | int                 | Current number of detected poses         |
+| `u_poseLandmarks` | vec2[maxPoses * 33] | Landmark positions in UV space           |
+| `u_poseMask`      | sampler2D           | Pose mask texture (G: body, B: skeleton) |
+
+**Helper functions:** `poseLandmark(int poseIndex, int landmarkIndex)`, `getBody(vec2 pos)`, `getSkeleton(vec2 pos)`
+
+Use `poseLandmark(int poseIndex, int landmarkIndex)` in GLSL to retrieve a specific point. Landmark indices are:
+
+| Index | Landmark          | Index | Landmark         |
+| ----- | ----------------- | ----- | ---------------- |
+| 0     | nose              | 17    | left pinky       |
+| 1     | left eye (inner)  | 18    | right pinky      |
+| 2     | left eye          | 19    | left index       |
+| 3     | left eye (outer)  | 20    | right index      |
+| 4     | right eye (inner) | 21    | left thumb       |
+| 5     | right eye         | 22    | right thumb      |
+| 6     | right eye (outer) | 23    | left hip         |
+| 7     | left ear          | 24    | right hip        |
+| 8     | right ear         | 25    | left knee        |
+| 9     | mouth (left)      | 26    | right knee       |
+| 10    | mouth (right)     | 27    | left ankle       |
+| 11    | left shoulder     | 28    | right ankle      |
+| 12    | right shoulder    | 29    | left heel        |
+| 13    | left elbow        | 30    | right heel       |
+| 14    | right elbow       | 31    | left foot index  |
+| 15    | left wrist        | 32    | right foot index |
+| 16    | right wrist       |       |                  |
+
+[Source](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker#pose_landmarker_model)
+
+A minimal fragment shader loop looks like:
+
+```glsl
+int POSE_LANDMARK_LEFT_HIP = 23;
+int POSE_LANDMARK_RIGHT_HIP = 24;
+for (int i = 0; i < u_maxPoses; ++i) {
+	if (i >= u_nPoses) break;
+	vec2 leftHip = poseLandmark(i, POSE_LANDMARK_LEFT_HIP);
+	vec2 rightHip = poseLandmark(i, POSE_LANDMARK_RIGHT_HIP);
+	// …
+}
+```
+
+#### hands
+
+The `hands` plugin uses [MediaPipe Hand Landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker) to expose a flat array of 2D landmarks. Each hand contributes 22 landmarks, enumerated below.
+
+```typescript
+import ShaderPad from 'shaderpad';
+import { hands } from 'shaderpad/plugins/hands';
+
+const shader = new ShaderPad(fragmentShaderSrc, {
+	plugins: [hands({ textureName: 'u_video', options: { maxHands: 2 } })],
+});
+```
+
+**Uniforms:**
+
+| Uniform           | Type                | Description                      |
+| ----------------- | ------------------- | -------------------------------- |
+| `u_maxHands`      | int                 | Maximum number of hands to track |
+| `u_nHands`        | int                 | Current number of detected hands |
+| `u_handLandmarks` | vec2[maxHands * 22] | Landmark positions in UV space   |
+
+**Helper functions:** `handLandmark(int handIndex, int landmarkIndex)`
+
+Use `handLandmark(int handIndex, int landmarkIndex)` in GLSL to retrieve a specific point. Landmark indices are:
+
+| Index | Landmark          | Index | Landmark          |
+| ----- | ----------------- | ----- | ----------------- |
+| 0     | WRIST             | 11    | MIDDLE_FINGER_DIP |
+| 1     | THUMB_CMC         | 12    | MIDDLE_FINGER_TIP |
+| 2     | THUMB_MCP         | 13    | RING_FINGER_MCP   |
+| 3     | THUMB_IP          | 14    | RING_FINGER_PIP   |
+| 4     | THUMB_TIP         | 15    | RING_FINGER_DIP   |
+| 5     | INDEX_FINGER_MCP  | 16    | RING_FINGER_TIP   |
+| 6     | INDEX_FINGER_PIP  | 17    | PINKY_MCP         |
+| 7     | INDEX_FINGER_DIP  | 18    | PINKY_PIP         |
+| 8     | INDEX_FINGER_TIP  | 19    | PINKY_DIP         |
+| 9     | MIDDLE_FINGER_MCP | 20    | PINKY_TIP         |
+| 10    | MIDDLE_FINGER_PIP | 21    | HAND_CENTER       |
+
+[Source](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker#models)
+
+A minimal fragment shader loop looks like:
+
+```glsl
+int HAND_LANDMARK_WRIST = 0;
+int HAND_LANDMARK_THUMB_TIP = 4;
+int HAND_LANDMARK_INDEX_TIP = 8;
+for (int i = 0; i < u_maxHands; ++i) {
+	if (i >= u_nHands) break;
+	vec2 wrist = handLandmark(i, HAND_LANDMARK_WRIST);
+	vec2 thumbTip = handLandmark(i, HAND_LANDMARK_THUMB_TIP);
+	vec2 indexTip = handLandmark(i, HAND_LANDMARK_INDEX_TIP);
+	// …
+}
+```
+
+**Note:** The hands plugin requires `@mediapipe/tasks-vision` as a peer dependency.
 
 ## Contributing
 
@@ -149,7 +486,7 @@ npm install
 npm run dev
 ```
 
-This will launch a local server. Open the provided URL (usually `http://localhost:5173`) in your browser to view and interact with the examples. Use the select box to view a different example.
+This will launch a local server. Open the provided URL (usually `http://localhost:5173`) in your browser to view and interact with the examples. Use the select box to view different examples.
 
 ### Adding an example
 

package/dist/index.d.mts

@@ -1,50 +1,41 @@
-type WithHistory<T extends ShaderPad> = T & {
-    initializeTexture(name: string, source: HTMLImageElement | HTMLVideoElement, historyDepth?: number): void;
-};
-declare function history(framebufferDepth?: number): (shaderPad: ShaderPad, context: PluginContext) => void;
-
-declare module '../index' {
-    interface ShaderPad {
-        save(filename: string): Promise<void>;
-    }
-}
-declare function save(): (shaderPad: ShaderPad, context: PluginContext) => void;
-type WithSave<T extends ShaderPad> = T & {
-    save(filename: string): Promise<void>;
-};
-
 interface Uniform {
     type: 'float' | 'int';
     length: 1 | 2 | 3 | 4;
     location: WebGLUniformLocation;
+    arrayLength?: number;
 }
 interface Texture {
     texture: WebGLTexture;
     unitIndex: number;
-    historyDepth?: number;
-    writeIndex?: number;
+    width: number;
+    height: number;
+    history?: {
+        depth: number;
+        writeIndex: number;
+    };
 }
-type TextureSource = HTMLImageElement | HTMLVideoElement;
+type TextureSource = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
 interface PluginContext {
     gl: WebGL2RenderingContext;
     uniforms: Map<string, Uniform>;
-    textures: Map<string, Texture>;
+    textures: Map<string | symbol, Texture>;
     get program(): WebGLProgram | null;
     canvas: HTMLCanvasElement;
-    reserveTextureUnit: (name: string) => number;
-    releaseTextureUnit: (name: string) => void;
+    reserveTextureUnit: (name: string | symbol) => number;
+    releaseTextureUnit: (name: string | symbol) => void;
+    injectGLSL: (code: string) => void;
 }
 type Plugin = (shaderPad: ShaderPad, context: PluginContext) => void;
-type LifecycleMethod = 'init' | 'step' | 'destroy' | 'updateResolution' | 'reset';
+type LifecycleMethod = 'init' | 'step' | 'destroy' | 'updateResolution' | 'reset' | 'initializeTexture' | 'updateTextures' | 'initializeUniform' | 'updateUniforms';
 interface Options {
     canvas?: HTMLCanvasElement | null;
     plugins?: Plugin[];
+    history?: number;
 }
 declare class ShaderPad {
     private isInternalCanvas;
     private isTouchDevice;
     private gl;
-    private downloadLink;
     private fragmentShaderSrc;
     private uniforms;
     private textures;
@@ -65,6 +56,7 @@ declare class ShaderPad {
     canvas: HTMLCanvasElement;
     onResize?: (width: number, height: number) => void;
     private hooks;
+    private historyDepth;
     constructor(fragmentShaderSrc: string, options?: Options);
     registerHook(name: LifecycleMethod, fn: Function): void;
     private init;
@@ -74,18 +66,28 @@ declare class ShaderPad {
     private handleResize;
     private addEventListeners;
     private updateResolution;
-    initializeUniform(name: string, type: 'float' | 'int', value: number | number[]): void;
-    updateUniforms(updates: Record<string, number | number[]>): void;
+    private reserveTextureUnit;
+    private releaseTextureUnit;
+    private clearHistoryTextureLayers;
+    initializeUniform(name: string, type: 'float' | 'int', value: number | number[] | (number | number[])[], options?: {
+        arrayLength?: number;
+    }): void;
+    updateUniforms(updates: Record<string, number | number[] | (number | number[])[]>, options?: {
+        startIndex?: number;
+    }): void;
+    private createTexture;
+    private _initializeTexture;
+    initializeTexture(name: string, source: TextureSource, options?: {
+        history?: number;
+    }): void;
+    updateTextures(updates: Record<string, TextureSource>): void;
+    private updateTexture;
+    draw(): void;
     step(time: number): void;
     play(callback?: (time: number, frame: number) => void): void;
     pause(): void;
     reset(): void;
-    initializeTexture(name: string, source: HTMLImageElement | HTMLVideoElement): void;
-    updateTextures(updates: Record<string, HTMLImageElement | HTMLVideoElement>): void;
-    save(filename: string): Promise<void>;
     destroy(): void;
-    private reserveTextureUnit;
-    private releaseTextureUnit;
 }
 
-export { type PluginContext, type TextureSource, type WithHistory, type WithSave, ShaderPad as default, history, save };
+export { type Options, type PluginContext, type TextureSource, ShaderPad as default };

package/dist/index.d.ts

@@ -1,50 +1,41 @@
-type WithHistory<T extends ShaderPad> = T & {
-    initializeTexture(name: string, source: HTMLImageElement | HTMLVideoElement, historyDepth?: number): void;
-};
-declare function history(framebufferDepth?: number): (shaderPad: ShaderPad, context: PluginContext) => void;
-
-declare module '../index' {
-    interface ShaderPad {
-        save(filename: string): Promise<void>;
-    }
-}
-declare function save(): (shaderPad: ShaderPad, context: PluginContext) => void;
-type WithSave<T extends ShaderPad> = T & {
-    save(filename: string): Promise<void>;
-};
-
 interface Uniform {
     type: 'float' | 'int';
     length: 1 | 2 | 3 | 4;
     location: WebGLUniformLocation;
+    arrayLength?: number;
 }
 interface Texture {
     texture: WebGLTexture;
     unitIndex: number;
-    historyDepth?: number;
-    writeIndex?: number;
+    width: number;
+    height: number;
+    history?: {
+        depth: number;
+        writeIndex: number;
+    };
 }
-type TextureSource = HTMLImageElement | HTMLVideoElement;
+type TextureSource = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
 interface PluginContext {
     gl: WebGL2RenderingContext;
     uniforms: Map<string, Uniform>;
-    textures: Map<string, Texture>;
+    textures: Map<string | symbol, Texture>;
     get program(): WebGLProgram | null;
     canvas: HTMLCanvasElement;
-    reserveTextureUnit: (name: string) => number;
-    releaseTextureUnit: (name: string) => void;
+    reserveTextureUnit: (name: string | symbol) => number;
+    releaseTextureUnit: (name: string | symbol) => void;
+    injectGLSL: (code: string) => void;
 }
 type Plugin = (shaderPad: ShaderPad, context: PluginContext) => void;
-type LifecycleMethod = 'init' | 'step' | 'destroy' | 'updateResolution' | 'reset';
+type LifecycleMethod = 'init' | 'step' | 'destroy' | 'updateResolution' | 'reset' | 'initializeTexture' | 'updateTextures' | 'initializeUniform' | 'updateUniforms';
 interface Options {
     canvas?: HTMLCanvasElement | null;
     plugins?: Plugin[];
+    history?: number;
 }
 declare class ShaderPad {
     private isInternalCanvas;
     private isTouchDevice;
     private gl;
-    private downloadLink;
     private fragmentShaderSrc;
     private uniforms;
     private textures;
@@ -65,6 +56,7 @@ declare class ShaderPad {
     canvas: HTMLCanvasElement;
     onResize?: (width: number, height: number) => void;
     private hooks;
+    private historyDepth;
     constructor(fragmentShaderSrc: string, options?: Options);
     registerHook(name: LifecycleMethod, fn: Function): void;
     private init;
@@ -74,18 +66,28 @@ declare class ShaderPad {
     private handleResize;
     private addEventListeners;
     private updateResolution;
-    initializeUniform(name: string, type: 'float' | 'int', value: number | number[]): void;
-    updateUniforms(updates: Record<string, number | number[]>): void;
+    private reserveTextureUnit;
+    private releaseTextureUnit;
+    private clearHistoryTextureLayers;
+    initializeUniform(name: string, type: 'float' | 'int', value: number | number[] | (number | number[])[], options?: {
+        arrayLength?: number;
+    }): void;
+    updateUniforms(updates: Record<string, number | number[] | (number | number[])[]>, options?: {
+        startIndex?: number;
+    }): void;
+    private createTexture;
+    private _initializeTexture;
+    initializeTexture(name: string, source: TextureSource, options?: {
+        history?: number;
+    }): void;
+    updateTextures(updates: Record<string, TextureSource>): void;
+    private updateTexture;
+    draw(): void;
     step(time: number): void;
     play(callback?: (time: number, frame: number) => void): void;
     pause(): void;
     reset(): void;
-    initializeTexture(name: string, source: HTMLImageElement | HTMLVideoElement): void;
-    updateTextures(updates: Record<string, HTMLImageElement | HTMLVideoElement>): void;
-    save(filename: string): Promise<void>;
     destroy(): void;
-    private reserveTextureUnit;
-    private releaseTextureUnit;
 }
 
-export { type PluginContext, type TextureSource, type WithHistory, type WithSave, ShaderPad as default, history, save };
+export { type Options, type PluginContext, type TextureSource, ShaderPad as default };