shaderpad 1.0.0-beta.40 → 1.0.0-beta.42

package/README.md

@@ -280,7 +280,54 @@ 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
+
+### Event Listeners
+
+#### `on(event, callback)`
+
+Register a callback for a lifecycle event.
+
+```typescript
+shader.on('resize', (width, height) => {
+	console.log(`Canvas resized to ${width}x${height}`);
+});
+```
+
+**Parameters:**
+
+-   `event` (string): The event name
+-   `callback` (Function): The callback function
+
+#### `off(event, callback)`
+
+Remove a previously registered callback.
+
+**Parameters:**
+
+-   `event` (string): The event name
+-   `callback` (Function): The callback function to remove
+
+#### Available Events
+
+| Event               | Callback Arguments                      | Description                                      |
+| ------------------- | --------------------------------------- | ------------------------------------------------ |
+| `init`              | none                                    | Fired after initialization is complete           |
+| `resize`            | `(width: number, height: number)`       | Fired when the canvas element is resized         |
+| `updateResolution`  | `(width: number, height: number)`       | Fired when the drawing buffer resolution changes |
+| `play`              | none                                    | Fired when the render loop starts                |
+| `pause`             | none                                    | Fired when the render loop is paused             |
+| `reset`             | none                                    | Fired when the shader is reset                   |
+| `destroy`           | none                                    | Fired when the shader is destroyed               |
+| `beforeStep`        | `(time: number, options?: StepOptions)` | Fired before each render step                    |
+| `afterStep`         | `(time: number, options?: StepOptions)` | Fired after each render step                     |
+| `beforeDraw`        | `(options?: StepOptions)`               | Fired before each draw call                      |
+| `afterDraw`         | `(options?: StepOptions)`               | Fired after each draw call                       |
+| `initializeTexture` | `(name, source, options?)`              | Fired after a texture is initialized             |
+| `initializeUniform` | `(name, type, value, options?)`         | Fired after a uniform is initialized             |
+| `updateTextures`    | `(updates, options?)`                   | Fired after textures are updated                 |
+| `updateUniforms`    | `(updates, options?)`                   | Fired after uniforms are updated                 |
+
+Plugins may emit additional namespaced events (e.g., `face:ready`, `pose:results`).
 
 ## Options
 
@@ -293,10 +340,10 @@ The `canvas` option allows you to pass in an existing canvas element. If not pro
 ```typescript
 const canvas = document.createElement('canvas');
 const shader = new ShaderPad(fragmentShaderSrc, { canvas });
-shader.onResize = (width, height) => {
+shader.on('resize', (width, height) => {
 	canvas.width = width;
 	canvas.height = height;
-};
+});
 ```
 
 ### history
@@ -352,22 +399,22 @@ const shader = new ShaderPad(fragmentShaderSrc, { debug: true });
 
 ### plugins
 
-Plugins add additional functionality. Imported from separate paths to keep bundle sizes small.
+ShaderPad adds additional functionality through plugins, which keeps bundle sizes small.
 
 #### helpers
 
-Convenience functions and constants. See [helpers.glsl](./src/plugins/helpers.glsl).
+The `helpers` plugin provides convenience functions and constants. See [helpers.glsl](./src/plugins/helpers.glsl) for the implementation.
 
 ```typescript
 import helpers from 'shaderpad/plugins/helpers';
 const shader = new ShaderPad(fragmentShaderSrc, { plugins: [helpers()] });
 ```
 
-**Note:** Automatically injects `u_resolution`. Don't declare it yourself.
+**Note:** The `helpers` plugin automatically injects the `u_resolution` uniform into your shader. Do not declare it yourself.
 
 #### save
 
-Adds `.save()` method to save the current frame as PNG.
+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 save, { WithSave } from 'shaderpad/plugins/save';
@@ -377,7 +424,7 @@ shader.save('filename', 'Optional mobile share text');
 
 #### face
 
-Uses [MediaPipe Face Landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/face_landmarker) to detect faces.
+The `face` plugin uses [MediaPipe](https://ai.google.dev/edge/mediapipe/solutions/vision/face_landmarker) to detect faces in video or image textures.
 
 ```typescript
 import face from 'shaderpad/plugins/face';
@@ -386,28 +433,89 @@ const shader = new ShaderPad(fragmentShaderSrc, {
 });
 ```
 
-**Options:** `onReady?: () => void`, `onResults?: (results: FaceLandmarkerResult) => void`
+**Options:**
 
-**Uniforms:** `u_maxFaces` (int), `u_nFaces` (int), `u_faceLandmarksTex` (sampler2D), `u_faceMask` (sampler2D)
+-   `maxFaces?: number` - Maximum faces to detect (default: 1)
+-   `history?: number` - Frames of history to store for landmarks and mask textures
 
-**Helper functions:** All region functions return `vec2(confidence, faceIndex)`. faceIndex is 0-indexed (-1 = no face).
+**Events:**
 
--   `faceLandmark(int faceIndex, int landmarkIndex) -> vec4` - Returns `vec4(x, y, z, visibility)`
--   `leftEyebrowAt(vec2 pos) -> vec2`, `rightEyebrowAt(vec2 pos) -> vec2`
--   `leftEyeAt(vec2 pos) -> vec2`, `rightEyeAt(vec2 pos) -> vec2`
--   `lipsAt(vec2 pos) -> vec2`, `outerMouthAt(vec2 pos) -> vec2`, `innerMouthAt(vec2 pos) -> vec2`
--   `faceOvalAt(vec2 pos) -> vec2`, `faceAt(vec2 pos) -> vec2`
--   `eyeAt(vec2 pos) -> vec2`, `eyebrowAt(vec2 pos) -> vec2`
+| Event         | Callback Arguments               | Description                              |
+| ------------- | -------------------------------- | ---------------------------------------- |
+| `face:ready`  | none                             | Fired when the detection model is loaded |
+| `face:result` | `(result: FaceLandmarkerResult)` | Fired with detection results each frame  |
 
-**Convenience functions:** `inFace(vec2 pos) -> float`, `inEye(vec2 pos) -> float`, `inEyebrow(vec2 pos) -> float`, `inOuterMouth(vec2 pos) -> float`, `inInnerMouth(vec2 pos) -> float`, `inLips(vec2 pos) -> float`
+**Uniforms:**
 
-**Constants:** `FACE_LANDMARK_L_EYE_CENTER`, `FACE_LANDMARK_R_EYE_CENTER`, `FACE_LANDMARK_NOSE_TIP`, `FACE_LANDMARK_FACE_CENTER`, `FACE_LANDMARK_MOUTH_CENTER`
+| Uniform              | Type                          | Description                                                                 |
+| -------------------- | ----------------------------- | --------------------------------------------------------------------------- |
+| `u_maxFaces`         | int                           | Maximum number of faces to detect                                           |
+| `u_nFaces`           | int                           | Current number of detected faces                                            |
+| `u_faceLandmarksTex` | sampler2D (or sampler2DArray) | Raw landmark data texture (use `faceLandmark()` to access)                  |
+| `u_faceMask`         | sampler2D (or sampler2DArray) | Face mask texture (R: region type, G: confidence, B: normalized face index) |
 
-**Note:** Requires `@mediapipe/tasks-vision` as a peer dependency. Adds two custom landmarks (`FACE_CENTER`, `MOUTH_CENTER`), bringing total to 480.
+**Helper functions:**
+
+All region functions return `vec2(confidence, faceIndex)`. faceIndex is 0-indexed (-1 = no face). When `history` is enabled, all functions accept an optional `int framesAgo` parameter.
+
+-   `faceLandmark(int faceIndex, int landmarkIndex) -> vec4` - Returns landmark data as `vec4(x, y, z, visibility)`. Use `vec2(faceLandmark(...))` to get just the screen position.
+-   `leftEyebrowAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in left eyebrow, `vec2(0.0, -1.0)` otherwise.
+-   `rightEyebrowAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in right eyebrow, `vec2(0.0, -1.0)` otherwise.
+-   `leftEyeAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in left eye, `vec2(0.0, -1.0)` otherwise.
+-   `rightEyeAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in right eye, `vec2(0.0, -1.0)` otherwise.
+-   `lipsAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in lips, `vec2(0.0, -1.0)` otherwise.
+-   `outerMouthAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in outer mouth (lips + inner mouth), `vec2(0.0, -1.0)` otherwise.
+-   `innerMouthAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in inner mouth region, `vec2(0.0, -1.0)` otherwise.
+-   `faceOvalAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in face oval contour, `vec2(0.0, -1.0)` otherwise.
+-   `faceAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in face mesh or oval contour, `vec2(0.0, -1.0)` otherwise.
+-   `eyeAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in either eye, `vec2(0.0, -1.0)` otherwise.
+-   `eyebrowAt(vec2 pos) -> vec2` - Returns `vec2(1.0, faceIndex)` if position is in either eyebrow, `vec2(0.0, -1.0)` otherwise.
+
+**Convenience functions** (return `1.0` if true, `0.0` if false):
+
+-   `inFace(vec2 pos) -> float` - Returns `1.0` if position is in face mesh, `0.0` otherwise.
+-   `inEye(vec2 pos) -> float` - Returns `1.0` if position is in either eye, `0.0` otherwise.
+-   `inEyebrow(vec2 pos) -> float` - Returns `1.0` if position is in either eyebrow, `0.0` otherwise.
+-   `inOuterMouth(vec2 pos) -> float` - Returns `1.0` if position is in outer mouth (lips + inner mouth), `0.0` otherwise.
+-   `inInnerMouth(vec2 pos) -> float` - Returns `1.0` if position is in inner mouth, `0.0` otherwise.
+-   `inLips(vec2 pos) -> float` - Returns `1.0` if position is in lips, `0.0` otherwise.
+
+**Landmark Constants:**
+
+-   `FACE_LANDMARK_L_EYE_CENTER` - Left eye center landmark index
+-   `FACE_LANDMARK_R_EYE_CENTER` - Right eye center landmark index
+-   `FACE_LANDMARK_NOSE_TIP` - Nose tip landmark index
+-   `FACE_LANDMARK_FACE_CENTER` - Face center landmark index (custom, calculated from all landmarks)
+-   `FACE_LANDMARK_MOUTH_CENTER` - Mouth center landmark index (custom, calculated from inner mouth landmarks)
+
+**Example usage:**
+
+```glsl
+// Get a specific landmark position.
+vec2 nosePos = vec2(faceLandmark(0, FACE_LANDMARK_NOSE_TIP));
+
+// Use in* convenience functions for simple boolean checks.
+float eyeMask = inEye(v_uv);
+
+// Use faceLandmark or *At functions when you need to check a specific face index.
+vec2 leftEye = leftEyeAt(v_uv);
+for (int i = 0; i < u_nFaces; ++i) {
+    vec4 leftEyeCenter = faceLandmark(i, FACE_LANDMARK_L_EYE_CENTER);
+    vec4 rightEyeCenter = faceLandmark(i, FACE_LANDMARK_R_EYE_CENTER);
+	if (leftEye.x > 0.0 && int(leftEye.y) == i) {
+		// Position is inside the left eye of face i.
+	}
+    // ...
+}
+```
+
+[Landmark indices are documented here.](https://ai.google.dev/edge/mediapipe/solutions/vision/face_landmarker#face_landmarker_model) This library adds two custom landmarks: `FACE_CENTER` and `MOUTH_CENTER`. This brings the total landmark count to 480.
+
+**Note:** The face plugin requires `@mediapipe/tasks-vision` as a peer dependency.
 
 #### pose
 
-Uses [MediaPipe Pose Landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker). Each pose contributes 39 landmarks (33 standard + 6 custom).
+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 39 landmarks (33 standard + 6 custom), enumerated below.
 
 ```typescript
 import pose from 'shaderpad/plugins/pose';
@@ -416,23 +524,99 @@ const shader = new ShaderPad(fragmentShaderSrc, {
 });
 ```
 
-**Options:** `onReady?: () => void`, `onResults?: (results: PoseLandmarkerResult) => void`
+**Options:**
+
+-   `maxPoses?: number` - Maximum poses to detect (default: 1)
+-   `history?: number` - Frames of history to store for landmarks and mask textures
 
-**Uniforms:** `u_maxPoses` (int), `u_nPoses` (int), `u_poseLandmarksTex` (sampler2D), `u_poseMask` (sampler2D)
+**Events:**
 
-**Helper functions:**
+| Event         | Callback Arguments               | Description                              |
+| ------------- | -------------------------------- | ---------------------------------------- |
+| `pose:ready`  | none                             | Fired when the detection model is loaded |
+| `pose:result` | `(result: PoseLandmarkerResult)` | Fired with detection results each frame  |
 
--   `poseLandmark(int poseIndex, int landmarkIndex) -> vec4` - Returns `vec4(x, y, z, visibility)`
--   `poseAt(vec2 pos) -> vec2` - Returns `vec2(confidence, poseIndex)`
--   `inPose(vec2 pos) -> float`
+**Uniforms:**
 
-**Constants:** `POSE_LANDMARK_LEFT_EYE`, `POSE_LANDMARK_RIGHT_EYE`, `POSE_LANDMARK_LEFT_SHOULDER`, `POSE_LANDMARK_RIGHT_SHOULDER`, `POSE_LANDMARK_LEFT_ELBOW`, `POSE_LANDMARK_RIGHT_ELBOW`, `POSE_LANDMARK_LEFT_HIP`, `POSE_LANDMARK_RIGHT_HIP`, `POSE_LANDMARK_LEFT_KNEE`, `POSE_LANDMARK_RIGHT_KNEE`, `POSE_LANDMARK_BODY_CENTER`, `POSE_LANDMARK_LEFT_HAND_CENTER`, `POSE_LANDMARK_RIGHT_HAND_CENTER`, `POSE_LANDMARK_LEFT_FOOT_CENTER`, `POSE_LANDMARK_RIGHT_FOOT_CENTER`, `POSE_LANDMARK_TORSO_CENTER`
+| Uniform              | Type                          | Description                                                                   |
+| -------------------- | ----------------------------- | ----------------------------------------------------------------------------- |
+| `u_maxPoses`         | int                           | Maximum number of poses to track                                              |
+| `u_nPoses`           | int                           | Current number of detected poses                                              |
+| `u_poseLandmarksTex` | sampler2D (or sampler2DArray) | Raw landmark data texture (RGBA: x, y, z, visibility)                         |
+| `u_poseMask`         | sampler2D (or sampler2DArray) | Pose mask texture (R: body detected, G: confidence, B: normalized pose index) |
 
-**Note:** Requires `@mediapipe/tasks-vision`. Use `PoseLandmarker.POSE_CONNECTIONS` for skeleton connections. [Landmark indices](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker#pose_landmarker_model)
+**Helper functions:**
+
+When `history` is enabled, all functions accept an optional `int framesAgo` parameter.
+
+-   `poseLandmark(int poseIndex, int landmarkIndex) -> vec4` - Returns landmark data as `vec4(x, y, z, visibility)`. Use `vec2(poseLandmark(...))` to get just the screen position.
+-   `poseAt(vec2 pos) -> vec2` - Returns `vec2(confidence, poseIndex)`. poseIndex is 0-indexed (-1 = no pose), confidence is the segmentation confidence.
+-   `inPose(vec2 pos) -> float` - Returns `1.0` if position is in any pose, `0.0` otherwise.
+
+**Constants:**
+
+-   `POSE_LANDMARK_LEFT_EYE` - Left eye landmark index (2)
+-   `POSE_LANDMARK_RIGHT_EYE` - Right eye landmark index (5)
+-   `POSE_LANDMARK_LEFT_SHOULDER` - Left shoulder landmark index (11)
+-   `POSE_LANDMARK_RIGHT_SHOULDER` - Right shoulder landmark index (12)
+-   `POSE_LANDMARK_LEFT_ELBOW` - Left elbow landmark index (13)
+-   `POSE_LANDMARK_RIGHT_ELBOW` - Right elbow landmark index (14)
+-   `POSE_LANDMARK_LEFT_HIP` - Left hip landmark index (23)
+-   `POSE_LANDMARK_RIGHT_HIP` - Right hip landmark index (24)
+-   `POSE_LANDMARK_LEFT_KNEE` - Left knee landmark index (25)
+-   `POSE_LANDMARK_RIGHT_KNEE` - Right knee landmark index (26)
+-   `POSE_LANDMARK_BODY_CENTER` - Body center landmark index (33, custom, calculated from all landmarks)
+-   `POSE_LANDMARK_LEFT_HAND_CENTER` - Left hand center landmark index (34, custom, calculated from pinky, thumb, wrist, index)
+-   `POSE_LANDMARK_RIGHT_HAND_CENTER` - Right hand center landmark index (35, custom, calculated from pinky, thumb, wrist, index)
+-   `POSE_LANDMARK_LEFT_FOOT_CENTER` - Left foot center landmark index (36, custom, calculated from ankle, heel, foot index)
+-   `POSE_LANDMARK_RIGHT_FOOT_CENTER` - Right foot center landmark index (37, custom, calculated from ankle, heel, foot index)
+-   `POSE_LANDMARK_TORSO_CENTER` - Torso center landmark index (38, custom, calculated from shoulders and hips)
+
+**Note:** For connecting pose landmarks (e.g., drawing skeleton lines), `PoseLandmarker.POSE_CONNECTIONS` from `@mediapipe/tasks-vision` provides an array of `{ start, end }` pairs that define which landmarks should be connected.
+
+Use `poseLandmark(int poseIndex, int landmarkIndex)` in GLSL to retrieve a specific point. Landmark indices are:
+
+| Index | Landmark          | Index | Landmark                   |
+| ----- | ----------------- | ----- | -------------------------- |
+| 0     | nose              | 20    | right index                |
+| 1     | left eye (inner)  | 21    | left thumb                 |
+| 2     | left eye          | 22    | right thumb                |
+| 3     | left eye (outer)  | 23    | left hip                   |
+| 4     | right eye (inner) | 24    | right hip                  |
+| 5     | right eye         | 25    | left knee                  |
+| 6     | right eye (outer) | 26    | right knee                 |
+| 7     | left ear          | 27    | left ankle                 |
+| 8     | right ear         | 28    | right ankle                |
+| 9     | mouth (left)      | 29    | left heel                  |
+| 10    | mouth (right)     | 30    | right heel                 |
+| 11    | left shoulder     | 31    | left foot index            |
+| 12    | right shoulder    | 32    | right foot index           |
+| 13    | left elbow        | 33    | body center (custom)       |
+| 14    | right elbow       | 34    | left hand center (custom)  |
+| 15    | left wrist        | 35    | right hand center (custom) |
+| 16    | right wrist       | 36    | left foot center (custom)  |
+| 17    | left pinky        | 37    | right foot center (custom) |
+| 18    | right pinky       | 38    | torso center (custom)      |
+| 19    | left index        |       |                            |
+
+[Source](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker#pose_landmarker_model)
+
+[Landmark indices are documented here.](https://ai.google.dev/edge/mediapipe/solutions/vision/pose_landmarker#pose_landmarker_model) This library adds six custom landmarks: `BODY_CENTER`, `LEFT_HAND_CENTER`, `RIGHT_HAND_CENTER`, `LEFT_FOOT_CENTER`, `RIGHT_FOOT_CENTER`, and `TORSO_CENTER`. This brings the total landmark count to 39.
+
+A minimal fragment shader loop looks like:
+
+```glsl
+for (int i = 0; i < u_maxPoses; ++i) {
+	if (i >= u_nPoses) break;
+	vec2 leftHip = vec2(poseLandmark(i, POSE_LANDMARK_LEFT_HIP));
+	vec2 rightHip = vec2(poseLandmark(i, POSE_LANDMARK_RIGHT_HIP));
+	// …
+}
+```
 
 #### hands
 
-Uses [MediaPipe Hand Landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker). Each hand contributes 22 landmarks.
+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 hands from 'shaderpad/plugins/hands';
@@ -441,37 +625,135 @@ const shader = new ShaderPad(fragmentShaderSrc, {
 });
 ```
 
-**Options:** `onReady?: () => void`, `onResults?: (results: HandLandmarkerResult) => void`
+**Options:**
+
+-   `maxHands?: number` - Maximum hands to detect (default: 2)
+-   `history?: number` - Frames of history to store for landmarks texture
+
+**Events:**
 
-**Uniforms:** `u_maxHands` (int), `u_nHands` (int), `u_handLandmarksTex` (sampler2D)
+| Event          | Callback Arguments               | Description                              |
+| -------------- | -------------------------------- | ---------------------------------------- |
+| `hands:ready`  | none                             | Fired when the detection model is loaded |
+| `hands:result` | `(result: HandLandmarkerResult)` | Fired with detection results each frame  |
+
+**Uniforms:**
+
+| Uniform              | Type                          | Description                                           |
+| -------------------- | ----------------------------- | ----------------------------------------------------- |
+| `u_maxHands`         | int                           | Maximum number of hands to track                      |
+| `u_nHands`           | int                           | Current number of detected hands                      |
+| `u_handLandmarksTex` | sampler2D (or sampler2DArray) | Raw landmark data texture (RGBA: x, y, z, handedness) |
 
 **Helper functions:**
 
--   `handLandmark(int handIndex, int landmarkIndex) -> vec4` - Returns `vec4(x, y, z, handedness)`. Handedness: 0.0 = left, 1.0 = right.
--   `isRightHand(int handIndex) -> float`, `isLeftHand(int handIndex) -> float`
+When `history` is enabled, all functions accept an optional `int framesAgo` parameter.
+
+-   `handLandmark(int handIndex, int landmarkIndex) -> vec4` - Returns landmark data as `vec4(x, y, z, handedness)`. Use `vec2(handLandmark(...))` to get just the screen position. Handedness: 0.0 = left hand, 1.0 = right hand.
+-   `isRightHand(int handIndex) -> float` - Returns 1.0 if the hand is a right hand, 0.0 if left.
+-   `isLeftHand(int handIndex) -> float` - Returns 1.0 if the hand is a left hand, 0.0 if right.
+
+**Landmark Indices:**
+
+| 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       |
 
-**Note:** Requires `@mediapipe/tasks-vision`. [Landmark indices](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker#models)
+[Source](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker#models)
+
+A minimal fragment shader loop looks like:
+
+```glsl
+#define WRIST 0
+#define THUMB_TIP 4
+#define INDEX_TIP 8
+#define HAND_CENTER 21
+
+for (int i = 0; i < u_maxHands; ++i) {
+	if (i >= u_nHands) break;
+	vec2 wrist = vec2(handLandmark(i, WRIST));
+	vec2 thumbTip = vec2(handLandmark(i, THUMB_TIP));
+	vec2 indexTip = vec2(handLandmark(i, INDEX_TIP));
+	vec2 handCenter = vec2(handLandmark(i, HAND_CENTER));
+
+	// Use handedness for coloring (0.0 = left/black, 1.0 = right/white).
+	vec3 handColor = vec3(isRightHand(i));
+	// …
+}
+```
+
+**Note:** The hands plugin requires `@mediapipe/tasks-vision` as a peer dependency.
 
 #### segmenter
 
-Uses [MediaPipe Image Segmenter](https://ai.google.dev/edge/mediapipe/solutions/vision/image_segmenter). Supports multi-category models. Defaults to [hair segmentation model](https://ai.google.dev/edge/mediapipe/solutions/vision/image_segmenter#hair-model).
+The `segmenter` plugin uses [MediaPipe Image Segmenter](https://ai.google.dev/edge/mediapipe/solutions/vision/image_segmenter) to segment objects in video or image textures. It supports models with multiple categories (e.g., background, hair, chair, dog…). By default, it uses the [hair segmentation model](https://ai.google.dev/edge/mediapipe/solutions/vision/image_segmenter#hair-model).
 
 ```typescript
+import ShaderPad from 'shaderpad';
 import segmenter from 'shaderpad/plugins/segmenter';
+
 const shader = new ShaderPad(fragmentShaderSrc, {
-	plugins: [segmenter({ textureName: 'u_webcam', options: { outputCategoryMask: true } })],
+	plugins: [
+		segmenter({
+			textureName: 'u_webcam',
+			options: {
+				modelPath:
+					'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_multiclass_256x256/float32/latest/selfie_multiclass_256x256.tflite',
+				outputCategoryMask: true,
+			},
+		}),
+	],
 });
 ```
 
-**Options:** `onReady?: () => void`, `onResults?: (results: ImageSegmenterResult) => void`
+**Options:**
+
+-   `history?: number` - Frames of history to store for mask texture
+
+**Events:**
+
+| Event              | Callback Arguments               | Description                                 |
+| ------------------ | -------------------------------- | ------------------------------------------- |
+| `segmenter:ready`  | none                             | Fired when the segmentation model is loaded |
+| `segmenter:result` | `(result: ImageSegmenterResult)` | Fired with segmentation results each frame  |
 
-**Uniforms:** `u_segmentMask` (sampler2D), `u_numCategories` (int)
+**Uniforms:**
+
+| Uniform           | Type                          | Description                                                             |
+| ----------------- | ----------------------------- | ----------------------------------------------------------------------- |
+| `u_segmentMask`   | sampler2D (or sampler2DArray) | Segment mask texture (R: normalized category, G: confidence, B: unused) |
+| `u_numCategories` | int                           | Number of segmentation categories (including background)                |
 
 **Helper functions:**
 
--   `segmentAt(vec2 pos) -> vec2` - Returns `vec2(confidence, categoryIndex)`. categoryIndex is 0-indexed (-1 = background).
+When `history` is enabled, all functions accept an optional `int framesAgo` parameter.
+
+-   `segmentAt(vec2 pos) -> vec2` - Returns `vec2(confidence, categoryIndex)`. categoryIndex is 0-indexed (-1 = background). confidence is the segmentation confidence (0-1).
+
+**Example usage:**
+
+```glsl
+vec2 segment = segmentAt(v_uv);
+float confidence = segment.x;  // Segmentation confidence
+float category = segment.y;    // Category index (0-indexed, -1 = background)
+
+if (category >= 0.0) {
+	// Apply effect based on confidence.
+	color = mix(color, vec3(1.0, 0.0, 1.0), confidence);
+}
+```
 
-**Note:** Requires `@mediapipe/tasks-vision` as a peer dependency.
+**Note:** The segmenter plugin requires `@mediapipe/tasks-vision` as a peer dependency.
 
 ## Contributing
 

package/dist/chunk-5CBGNOA3.mjs

@@ -0,0 +1,10 @@
+var F=`#version 300 es
+in vec2 aPosition;
+out vec2 v_uv;
+void main() {
+    v_uv = aPosition * 0.5 + 0.5;
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+}`,w=33.333333333333336,L=new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),v=Symbol("u_history"),b=Symbol("__SHADERPAD_BUFFER");function A(a,e){if(!e?.length)return a;let t=a.split(`
+`),s=t.findLastIndex(i=>{let r=i.trimStart();return r.startsWith("precision ")||r.startsWith("#version ")})+1;return t.splice(s,0,...e),t.join(`
+`)}function y(a){return a instanceof WebGLTexture?{width:0,height:0}:a instanceof E?{width:a.canvas.width,height:a.canvas.height}:a instanceof HTMLVideoElement?{width:a.videoWidth,height:a.videoHeight}:a instanceof HTMLImageElement?{width:a.naturalWidth??a.width,height:a.naturalHeight??a.height}:{width:a.width,height:a.height}}function x(a){return typeof a=="symbol"?a.description??"":a}var E=class a{isInternalCanvas=!1;isTouchDevice=!1;gl;uniforms=new Map;textures=new Map;textureUnitPool;buffer=null;program=null;aPositionLocation=0;animationFrameId;resolutionObserver;resizeObserver;resizeTimeout=null;lastResizeTime=-1/0;eventListeners=new Map;frame=0;startTime=0;cursorPosition=[.5,.5];clickPosition=[.5,.5];isMouseDown=!1;canvas;hooks=new Map;historyDepth=0;textureOptions;debug;intermediateFbo=null;constructor(e,{canvas:t,plugins:s,history:i,debug:r,...o}={}){if(this.canvas=t||document.createElement("canvas"),!t){this.isInternalCanvas=!0;let f=this.canvas;f.style.position="fixed",f.style.inset="0",f.style.height="100dvh",f.style.width="100dvw",document.body.appendChild(f)}if(this.canvas instanceof OffscreenCanvas){let f=d=>{let g=Object.getOwnPropertyDescriptor(OffscreenCanvas.prototype,d);Object.defineProperty(this.canvas,d,{get:()=>g.get.call(this.canvas),set:R=>{g.set.call(this.canvas,R),this.updateResolution()},configurable:g.configurable,enumerable:g.enumerable})};f("width"),f("height")}let n=this.canvas.getContext("webgl2",{antialias:!1});if(!n)throw new Error("WebGL2 not supported. Please use a browser that supports WebGL2.");this.gl=n,this.textureUnitPool={free:[],next:0,max:n.getParameter(n.MAX_COMBINED_TEXTURE_IMAGE_UNITS)},this.textureOptions=o;let{internalFormat:h,type:c}=o;(c===n.FLOAT||c===n.HALF_FLOAT||h===n.RGBA16F||h===n.RGBA32F||h===n.R16F||h===n.R32F||h===n.RG16F||h===n.RG32F)&&!n.getExtension("EXT_color_buffer_float")&&(console.warn("EXT_color_buffer_float not supported, falling back to RGBA8"),delete this.textureOptions?.internalFormat,delete this.textureOptions?.format,delete this.textureOptions?.type),i&&(this.historyDepth=i),this.debug=r??(typeof process<"u"&&!1),this.animationFrameId=null,this.resolutionObserver=new MutationObserver(()=>this.updateResolution()),this.resizeObserver=new ResizeObserver(()=>this.throttledHandleResize());let m=[];s&&s.forEach(f=>f(this,{gl:n,canvas:this.canvas,injectGLSL:d=>{m.push(d)},emitHook:this.emitHook.bind(this)}));let u=this.gl.createProgram();if(!u)throw new Error("Failed to create WebGL program");this.program=u;let p=this.createShader(this.gl.VERTEX_SHADER,F),T=this.createShader(n.FRAGMENT_SHADER,A(e,m));if(n.attachShader(u,p),n.attachShader(u,T),n.linkProgram(u),n.deleteShader(p),n.deleteShader(T),!n.getProgramParameter(u,n.LINK_STATUS))throw console.error("Program link error:",n.getProgramInfoLog(u)),n.deleteProgram(u),new Error("Failed to link WebGL program");this.aPositionLocation=n.getAttribLocation(u,"aPosition"),this.buffer=n.createBuffer(),n.bindBuffer(n.ARRAY_BUFFER,this.buffer),n.bufferData(n.ARRAY_BUFFER,L,n.STATIC_DRAW),n.viewport(0,0,n.drawingBufferWidth,n.drawingBufferHeight),n.enableVertexAttribArray(this.aPositionLocation),n.vertexAttribPointer(this.aPositionLocation,2,n.FLOAT,!1,0,0),n.useProgram(u),this.canvas instanceof HTMLCanvasElement&&(this.resolutionObserver.observe(this.canvas,{attributes:!0,attributeFilter:["width","height"]}),this.resizeObserver.observe(this.canvas)),this.isInternalCanvas||this.updateResolution(),this.initializeUniform("u_cursor","float",this.cursorPosition),this.initializeUniform("u_click","float",[...this.clickPosition,this.isMouseDown?1:0]),this.initializeUniform("u_time","float",0),this.initializeUniform("u_frame","int",0),this._initializeTexture(b,this.canvas,{...this.textureOptions}),this.intermediateFbo=n.createFramebuffer(),this.historyDepth>0&&this._initializeTexture(v,this.canvas,{history:this.historyDepth,...this.textureOptions}),this.canvas instanceof HTMLCanvasElement&&this.addEventListeners(),this.emitHook("init")}emitHook(e,...t){this.hooks.get(e)?.forEach(s=>s.call(this,...t))}on(e,t){this.hooks.has(e)||this.hooks.set(e,[]),this.hooks.get(e).push(t)}off(e,t){let s=this.hooks.get(e);s&&s.splice(s.indexOf(t),1)}createShader(e,t){let s=this.gl.createShader(e);if(this.gl.shaderSource(s,t),this.gl.compileShader(s),!this.gl.getShaderParameter(s,this.gl.COMPILE_STATUS))throw console.error("Shader compilation failed:",t),console.error(this.gl.getShaderInfoLog(s)),this.gl.deleteShader(s),new Error("Shader compilation failed");return s}throttledHandleResize(){clearTimeout(this.resizeTimeout);let e=performance.now(),t=this.lastResizeTime+w-e;t<=0?(this.lastResizeTime=e,this.handleResize()):this.resizeTimeout=setTimeout(()=>this.throttledHandleResize(),t)}handleResize(){if(!(this.canvas instanceof HTMLCanvasElement))return;let e=window.devicePixelRatio||1,t=this.canvas.clientWidth*e,s=this.canvas.clientHeight*e;this.isInternalCanvas&&(this.canvas.width!==t||this.canvas.height!==s)&&(this.canvas.width=t,this.canvas.height=s),this.emitHook("resize",t,s)}addEventListeners(){let e=this.canvas,t=(i,r)=>{if(!this.uniforms.has("u_cursor"))return;let o=e.getBoundingClientRect();this.cursorPosition[0]=(i-o.left)/o.width,this.cursorPosition[1]=1-(r-o.top)/o.height,this.updateUniforms({u_cursor:this.cursorPosition})},s=(i,r,o)=>{if(this.uniforms.has("u_click")){if(this.isMouseDown=i,i){let n=e.getBoundingClientRect(),h=r,c=o;this.clickPosition[0]=(h-n.left)/n.width,this.clickPosition[1]=1-(c-n.top)/n.height}this.updateUniforms({u_click:[...this.clickPosition,this.isMouseDown?1:0]})}};this.eventListeners.set("mousemove",i=>{let r=i;this.isTouchDevice||t(r.clientX,r.clientY)}),this.eventListeners.set("mousedown",i=>{let r=i;this.isTouchDevice||r.button===0&&(this.isMouseDown=!0,s(!0,r.clientX,r.clientY))}),this.eventListeners.set("mouseup",i=>{let r=i;this.isTouchDevice||r.button===0&&s(!1)}),this.eventListeners.set("touchmove",i=>{let r=i;r.touches.length>0&&t(r.touches[0].clientX,r.touches[0].clientY)}),this.eventListeners.set("touchstart",i=>{let r=i;this.isTouchDevice=!0,r.touches.length>0&&(t(r.touches[0].clientX,r.touches[0].clientY),s(!0,r.touches[0].clientX,r.touches[0].clientY))}),this.eventListeners.set("touchend",i=>{i.touches.length===0&&s(!1)}),this.eventListeners.forEach((i,r)=>{e.addEventListener(r,i)})}updateResolution(){let e=[this.gl.drawingBufferWidth,this.gl.drawingBufferHeight];this.gl.viewport(0,0,...e),this.uniforms.has("u_resolution")?this.updateUniforms({u_resolution:e}):this.initializeUniform("u_resolution","float",e),this.resizeTexture(b,...e),this.historyDepth>0&&this.resizeTexture(v,...e),this.emitHook("updateResolution",...e)}resizeTexture(e,t,s){let i=this.textures.get(e);if(!i||i.width===t&&i.height===s)return;this.gl.deleteTexture(i.texture),i.width=t,i.height=s;let{texture:r}=this.createTexture(e,i);i.texture=r,i.history&&(i.history.writeIndex=0,this.clearHistoryTextureLayers(i))}reserveTextureUnit(e){let t=this.textures.get(e);if(t)return t.unitIndex;if(this.textureUnitPool.free.length>0)return this.textureUnitPool.free.pop();if(this.textureUnitPool.next>=this.textureUnitPool.max)throw new Error("Exceeded the available texture units for this device.");return this.textureUnitPool.next++}releaseTextureUnit(e){let t=this.textures.get(e);t&&this.textureUnitPool.free.push(t.unitIndex)}resolveTextureOptions(e){let{gl:t}=this,s=e?.type??t.UNSIGNED_BYTE;return{type:s,format:e?.format??t.RGBA,internalFormat:e?.internalFormat??(s===t.FLOAT?t.RGBA32F:s===t.HALF_FLOAT?t.RGBA16F:t.RGBA8),minFilter:e?.minFilter??t.LINEAR,magFilter:e?.magFilter??t.LINEAR,wrapS:e?.wrapS??t.CLAMP_TO_EDGE,wrapT:e?.wrapT??t.CLAMP_TO_EDGE,preserveY:e?.preserveY}}getPixelArray(e,t){return e===this.gl.FLOAT?new Float32Array(t):e===this.gl.HALF_FLOAT?new Uint16Array(t):new Uint8Array(t)}clearHistoryTextureLayers(e){if(!e.history)return;let t=this.gl,{type:s,format:i}=e.options,r=this.getPixelArray(s,e.width*e.height*4);t.activeTexture(t.TEXTURE0+e.unitIndex),t.bindTexture(t.TEXTURE_2D_ARRAY,e.texture);for(let o=0;o<e.history.depth;++o)t.texSubImage3D(t.TEXTURE_2D_ARRAY,0,0,0,o,e.width,e.height,1,i,s,r)}initializeUniform(e,t,s,i){let r=i?.arrayLength;if(this.uniforms.has(e))throw new Error(`${e} is already initialized.`);if(t!=="float"&&t!=="int")throw new Error(`Invalid uniform type: ${t}. Expected 'float' or 'int'.`);if(r&&!(Array.isArray(s)&&s.length===r))throw new Error(`${e} array length mismatch: must initialize with ${r} elements.`);let o=this.gl.getUniformLocation(this.program,e);if(!o&&r&&(o=this.gl.getUniformLocation(this.program,`${e}[0]`)),!o){this.log(`${e} not in shader. Skipping initialization.`);return}let n=r?s[0]:s,h=Array.isArray(n)?n.length:1;this.uniforms.set(e,{type:t,length:h,location:o,arrayLength:r});try{this.updateUniforms({[e]:s})}catch(c){throw this.uniforms.delete(e),c}this.emitHook("initializeUniform",...arguments)}log(...e){this.debug&&console.debug(...e)}updateUniforms(e,t){this.gl.useProgram(this.program),Object.entries(e).forEach(([s,i])=>{let r=this.uniforms.get(s);if(!r){this.log(`${s} not in shader. Skipping update.`);return}let o=`uniform${r.length}${r.type.charAt(0)}`;if(r.arrayLength){if(!Array.isArray(i))throw new Error(`${s} is an array, but the value passed to updateUniforms is not an array.`);let n=i.length;if(!n)return;if(n>r.arrayLength)throw new Error(`${s} received ${n} values, but maximum length is ${r.arrayLength}.`);if(i.some(l=>(Array.isArray(l)?l.length:1)!==r.length))throw new Error(`Tried to update ${s} with some elements that are not length ${r.length}.`);let h=new(r.type==="float"?Float32Array:Int32Array)(i.flat()),c=r.location;if(t?.startIndex){let l=this.gl.getUniformLocation(this.program,`${s}[${t.startIndex}]`);if(!l)throw new Error(`${s}[${t.startIndex}] not in shader. Did you pass an invalid startIndex?`);c=l}this.gl[o+"v"](c,h)}else{if(Array.isArray(i)||(i=[i]),i.length!==r.length)throw new Error(`Invalid uniform value length: ${i.length}. Expected ${r.length}.`);this.gl[o](r.location,...i)}}),this.emitHook("updateUniforms",...arguments)}createTexture(e,t){let{width:s,height:i}=t,r=t.history?.depth??0,o=this.gl.createTexture();if(!o)throw new Error("Failed to create texture");let n=t.unitIndex;if(typeof n!="number")try{n=this.reserveTextureUnit(e)}catch(m){throw this.gl.deleteTexture(o),m}let h=r>0,c=h?this.gl.TEXTURE_2D_ARRAY:this.gl.TEXTURE_2D,{options:l}=t;return this.gl.activeTexture(this.gl.TEXTURE0+n),this.gl.bindTexture(c,o),this.gl.texParameteri(c,this.gl.TEXTURE_WRAP_S,l.wrapS),this.gl.texParameteri(c,this.gl.TEXTURE_WRAP_T,l.wrapT),this.gl.texParameteri(c,this.gl.TEXTURE_MIN_FILTER,l.minFilter),this.gl.texParameteri(c,this.gl.TEXTURE_MAG_FILTER,l.magFilter),h?this.gl.texStorage3D(c,1,l.internalFormat,s,i,r):e===b&&this.gl.texImage2D(this.gl.TEXTURE_2D,0,l.internalFormat,s,i,0,l.format,l.type,null),{texture:o,unitIndex:n}}_initializeTexture(e,t,s){if(this.textures.has(e))throw new Error(`Texture '${x(e)}' is already initialized.`);let{history:i=0,...r}=s??{},{width:o,height:n}=y(t);if(!o||!n)throw new Error("Texture source must have valid dimensions");let h={width:o,height:n,options:this.resolveTextureOptions(r)};i>0&&(h.history={depth:i,writeIndex:0});let{texture:c,unitIndex:l}=this.createTexture(e,h),m={texture:c,unitIndex:l,...h};i>0&&(this.initializeUniform(`${x(e)}FrameOffset`,"int",0),this.clearHistoryTextureLayers(m)),this.textures.set(e,m),this.updateTexture(e,t);let u=this.gl.getUniformLocation(this.program,x(e));u&&this.gl.uniform1i(u,l)}initializeTexture(e,t,s){this._initializeTexture(e,t,s),this.emitHook("initializeTexture",...arguments)}updateTextures(e,t){Object.entries(e).forEach(([s,i])=>{this.updateTexture(s,i,t)}),this.emitHook("updateTextures",...arguments)}updateTexture(e,t,s){let i=this.textures.get(e);if(!i)throw new Error(`Texture '${x(e)}' is not initialized.`);if(t instanceof WebGLTexture){this.gl.activeTexture(this.gl.TEXTURE0+i.unitIndex),this.gl.bindTexture(this.gl.TEXTURE_2D,t);return}let r=t;if(t instanceof a){let u=t.textures.get(b);if(t.gl===this.gl){this.gl.activeTexture(this.gl.TEXTURE0+i.unitIndex),this.gl.bindTexture(this.gl.TEXTURE_2D,u.texture);return}let{width:p,height:T,options:{format:f,type:d}}=u,g=this.getPixelArray(d,p*T*4);t.gl.bindFramebuffer(t.gl.FRAMEBUFFER,t.intermediateFbo),t.gl.readPixels(0,0,p,T,f,d,g),t.gl.bindFramebuffer(t.gl.FRAMEBUFFER,null),r={data:g,width:p,height:T}}let{width:o,height:n}=y(r);if(!o||!n)return;let h="isPartial"in r&&r.isPartial;h||this.resizeTexture(e,o,n);let l=!("data"in r&&r.data)&&!i.options?.preserveY,m=this.gl.getParameter(this.gl.UNPACK_FLIP_Y_WEBGL);if(i.history){if(this.gl.activeTexture(this.gl.TEXTURE0+i.unitIndex),this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY,i.texture),!s?.skipHistoryWrite){this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,l),this.gl.texSubImage3D(this.gl.TEXTURE_2D_ARRAY,0,0,0,i.history.writeIndex,o,n,1,i.options.format,i.options.type,r.data??r),this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,m);let u=`${x(e)}FrameOffset`;this.updateUniforms({[u]:i.history.writeIndex}),i.history.writeIndex=(i.history.writeIndex+1)%i.history.depth}}else{if(this.gl.activeTexture(this.gl.TEXTURE0+i.unitIndex),this.gl.bindTexture(this.gl.TEXTURE_2D,i.texture),this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,l),h){let u=r;this.gl.texSubImage2D(this.gl.TEXTURE_2D,0,u.x??0,u.y??0,o,n,i.options.format,i.options.type,u.data)}else this.gl.texImage2D(this.gl.TEXTURE_2D,0,i.options.internalFormat,o,n,0,i.options.format,i.options.type,r.data??r);this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,m)}}draw(e){this.emitHook("beforeDraw",...arguments);let t=this.gl,s=t.drawingBufferWidth,i=t.drawingBufferHeight,r=this.textures.get(b);t.bindFramebuffer(t.FRAMEBUFFER,this.intermediateFbo),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,r.texture,0),t.useProgram(this.program),t.bindBuffer(t.ARRAY_BUFFER,this.buffer),t.vertexAttribPointer(this.aPositionLocation,2,t.FLOAT,!1,0,0),t.enableVertexAttribArray(this.aPositionLocation),t.viewport(0,0,s,i),e?.skipClear||t.clear(t.COLOR_BUFFER_BIT),t.drawArrays(t.TRIANGLES,0,6);let o=this.textures.get(v);o&&!e?.skipHistoryWrite&&(t.bindTexture(t.TEXTURE_2D_ARRAY,o.texture),t.copyTexSubImage3D(t.TEXTURE_2D_ARRAY,0,0,0,o.history.writeIndex,0,0,s,i)),t.bindFramebuffer(t.READ_FRAMEBUFFER,this.intermediateFbo),t.bindFramebuffer(t.DRAW_FRAMEBUFFER,null),t.blitFramebuffer(0,0,s,i,0,0,s,i,t.COLOR_BUFFER_BIT,t.NEAREST),t.bindFramebuffer(t.FRAMEBUFFER,null),this.emitHook("afterDraw",...arguments)}step(e,t){this.emitHook("beforeStep",...arguments);let s={};this.uniforms.has("u_time")&&(s.u_time=e),this.uniforms.has("u_frame")&&(s.u_frame=this.frame),this.updateUniforms(s),this.draw(t);let i=this.textures.get(v);if(i&&!t?.skipHistoryWrite){let{writeIndex:r,depth:o}=i.history;this.updateUniforms({[`${x(v)}FrameOffset`]:r}),i.history.writeIndex=(r+1)%o}++this.frame,this.emitHook("afterStep",...arguments)}play(e,t){this.pause();let s=i=>{i=(i-this.startTime)/1e3;let r=t?.(i,this.frame)??void 0;this.step(i,r),this.animationFrameId=requestAnimationFrame(s),e?.(i,this.frame)};this.animationFrameId=requestAnimationFrame(s),this.emitHook("play")}pause(){this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.emitHook("pause")}reset(){this.frame=0,this.startTime=performance.now(),this.textures.forEach(e=>{e.history&&(e.history.writeIndex=0,this.clearHistoryTextureLayers(e))}),this.emitHook("reset")}destroy(){this.emitHook("destroy"),this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),this.resolutionObserver.disconnect(),this.resizeObserver.disconnect(),this.canvas instanceof HTMLCanvasElement&&this.eventListeners.forEach((e,t)=>{this.canvas.removeEventListener(t,e)}),this.program&&this.gl.deleteProgram(this.program),this.intermediateFbo&&(this.gl.deleteFramebuffer(this.intermediateFbo),this.intermediateFbo=null),this.textures.forEach(e=>{this.gl.deleteTexture(e.texture)}),this.textureUnitPool.free=[],this.textureUnitPool.next=0,this.buffer&&(this.gl.deleteBuffer(this.buffer),this.buffer=null),this.isInternalCanvas&&this.canvas instanceof HTMLCanvasElement&&this.canvas.remove()}},_=E;export{_ as a};
+//# sourceMappingURL=chunk-5CBGNOA3.mjs.map