### Install VFX-JS using npm

Source: https://amagi.dev/vfx-js/docs/index

This snippet shows how to install the VFX-JS core package using npm. It is a prerequisite for using the library in your project.

```bash
npm i @vfx-js/core
```

--------------------------------

### PostEffectPass Methods

Source: https://amagi.dev/vfx-js/docs/classes/PostEffectPass

Details the methods available for interacting with and updating the PostEffectPass, including setting uniforms, updating custom uniforms, and managing the backbuffer.

```APIDOC
## Methods PostEffectPass

### Description
Details the methods available for interacting with and updating the PostEffectPass, including setting uniforms, updating custom uniforms, and managing the backbuffer.

### Method
Various (POST, GET, PUT, DELETE, etc.)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example for setUniforms
postEffectPassInstance.setUniforms(
  texture,
  pixelRatio,
  { x: 0, y: 0, w: 100, h: 100 },
  performance.now(),
  mouseX,
  mouseY
);

// Example for updateCustomUniforms
postEffectPassInstance.updateCustomUniforms({
  myUniform: () => Math.random()
});

// Example for initializeBackbuffer
postEffectPassInstance.initializeBackbuffer(800, 600, 1);

// Example for resizeBackbuffer
postEffectPassInstance.resizeBackbuffer(1024, 768);
```

### Response
#### Success Response (200)
- **setUniforms**: void
- **updateCustomUniforms**: void
- **initializeBackbuffer**: void
- **resizeBackbuffer**: void

#### Response Example
N/A
```

--------------------------------

### CopyPass Class Documentation

Source: https://amagi.dev/vfx-js/docs/classes/CopyPass

Provides details on the CopyPass class, including its constructor, uniforms, scene accessor, and the setUniforms method.

```APIDOC
## Class CopyPass

### Description
The CopyPass class is part of the VFX-JS library, likely used for rendering or post-processing effects. It provides methods to manage uniforms and access the scene.

### Constructors

#### constructor

*   **Signature**: `new CopyPass(): CopyPass`
*   **Description**: Initializes a new instance of the CopyPass class.
*   **Returns**: `CopyPass` - The newly created CopyPass instance.

### Accessors

#### uniforms

*   **Signature**: `get uniforms(): { [name: string]: IUniform<any> }`
*   **Description**: Retrieves the uniforms associated with the CopyPass.
*   **Returns**: `{ [name: string]: IUniform<any> }` - An object containing the uniforms.

#### scene

*   **Signature**: `get scene(): Scene`
*   **Description**: Retrieves the scene object associated with the CopyPass.
*   **Returns**: `Scene` - The Scene object.

### Methods

#### setUniforms

*   **Signature**: `setUniforms(tex: Texture, pixelRatio: number, xywh: GLRect): void`
*   **Description**: Sets the uniforms for the CopyPass, likely used to update rendering parameters.
*   **Parameters**:
    *   `tex` (Texture) - Required - The texture to be used.
    *   `pixelRatio` (number) - Required - The pixel ratio.
    *   `xywh` (GLRect) - Required - The rectangular area (x, y, width, height).
*   **Returns**: `void`
```

--------------------------------

### PostEffectPass Constructor

Source: https://amagi.dev/vfx-js/docs/classes/PostEffectPass

Initializes a new instance of the PostEffectPass class. This constructor sets up the pass with a fragment shader and optional uniforms and backbuffer usage.

```APIDOC
## constructor PostEffectPass

### Description
Initializes a new instance of the PostEffectPass class.

### Method
CONSTRUCTOR

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
new PostEffectPass(
  "varying vec2 vUv;\nvoid main() {\n  gl_FragColor = texture2D(t_texture, vUv);\n}",
  { t_texture: { value: null } },
  true
);
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Initialize and Add Effect with VFX-JS

Source: https://amagi.dev/vfx-js/docs/index

This snippet demonstrates the basic usage of VFX-JS to initialize the library and apply a 'glitch' shader effect to an HTML element. It requires the VFX class to be imported from the core package.

```javascript
import { VFX } from "@vfx-js/core";

const vfx = new VFX();
vfx.add(element, { shader: "glitch" });
```

--------------------------------

### Accessing Shader Code with JavaScript

Source: https://amagi.dev/vfx-js/docs/variables/shaders

Demonstrates how to retrieve a specific shader's code from the 'shaders' record using a ShaderPreset key (e.g., 'glitch') and log it to the console. This is a fundamental operation for applying custom visual effects.

```javascript
const shader = shaders["glitch"];
console.log(shader);
```

--------------------------------

### Passing Uniforms to Shaders in VFX-JS

Source: https://amagi.dev/vfx-js/docs/types/VFXProps

Demonstrates how to pass uniform values to shaders in VFX-JS. Uniforms can be static values or dynamic functions that update per frame. Supported types include numbers, arrays, and color vectors. These are then accessible within the GLSL shader code.

```javascript
vfx.add(element, { shader, uniforms: {  
  myParam1: 1,
  myParam2: [1.0, 2.0],
  myColor:  [0, 0, 1, 1] // blue  
}});

vfx.add(element, { shader, uniforms: {  
  scroll: () => window.scrollY,  
}});
```

--------------------------------

### VFX Class - Main Interface

Source: https://amagi.dev/vfx-js/docs/classes/VFX

The main interface of VFX-JS, providing methods to add, remove, update, play, stop, render, and destroy visual effects.

```APIDOC
## Class VFX

The main interface of VFX-JS.

### Index

#### Constructors

* constructor

#### Methods

* add
* remove
* update
* play
* stop
* render
* destroy

## Constructors

### constructor

* `new VFX(options?: VFXOpts): VFX`

Creates a VFX instance and starts playing immediately.

#### Parameters

* `options` (VFXOpts) - Optional - Configuration options for VFX.

#### Returns

* `VFX` - The created VFX instance.

## Methods

### add

* `add(element: HTMLElement, opts: VFXProps): Promise<void>`

Registers an element to track its position and render visual effects in its area.

#### Parameters

* `element` (HTMLElement) - The HTML element to track.
* `opts` (VFXProps) - Options for the visual effect.

#### Returns

* `Promise<void>` - A promise that resolves when the element is added.

### remove

* `remove(element: HTMLElement): void`

Removes the element from VFX and stops rendering the shader for it.

#### Parameters

* `element` (HTMLElement) - The HTML element to remove.

#### Returns

* `void`

### update

* `update(element: HTMLElement): Promise<void>`

Updates the texture for the given element. If the element is an `HTMLImageElement` or `HTMLVideoElement`, VFX-JS does nothing. Otherwise, VFX-JS captures a new snapshot of the DOM tree under the element and updates the WebGL texture with it. This is useful to apply effects to elements whose contents change dynamically (e.g., input, textarea, etc.).

#### Parameters

* `element` (HTMLElement) - The HTML element to update.

#### Returns

* `Promise<void>` - A promise that resolves when the update is complete.

### play

* `play(): void`

Starts rendering VFX.

#### Returns

* `void`

### stop

* `stop(): void`

Stops rendering VFX. Rendering can be restarted by calling `VFX.play()` later.

#### Returns

* `void`

### render

* `render(): void`

Renders the whole scene once, manually. This is useful when you want to control the rendering timings manually by combining with `autoplay: false`.

#### Returns

* `void`

### destroy

* `destroy(): void`

Destroys the VFX instance and stops rendering.

#### Returns

* `void`
```

--------------------------------

### VFXOpts Type Alias Definition

Source: https://amagi.dev/vfx-js/docs/types/VFXOpts

Defines the structure for options used to initialize the VFX class. It includes optional properties for controlling rendering, autoplay, scroll behavior, and post-effects.

```typescript
type VFXOpts = {
  pixelRatio?: number;
  zIndex?: number;
  autoplay?: boolean;
  scrollPadding?: number | [number, number] | false;
  postEffect?: VFXPostEffect;
};
```

--------------------------------

### GLSL Shader Uniform Declarations

Source: https://amagi.dev/vfx-js/docs/types/VFXProps

Illustrates how uniform variables passed from VFX-JS are declared and used within GLSL shader code. This shows the mapping between JavaScript uniform names and their GLSL counterparts.

```glsl
uniform float myParam1;
uniform vec2 myParam2;
uniform vec4 myColor;
```

--------------------------------

### VFXPostEffect Type Alias

Source: https://amagi.dev/vfx-js/docs/types/VFXPostEffect

Defines the structure for configuring post effects, including the shader, custom uniforms, and backbuffer usage.

```APIDOC
## Type Alias VFXPostEffect

### Description
Configuration for post effects that are applied to the final canvas output.

### Type Declaration
`VFXPostEffect: { shader: ShaderPreset | string; uniforms?: VFXUniforms; backbuffer?: boolean; }`

### Properties
#### shader
- **Type**: `ShaderPreset | string`
- **Description**: Fragment shader code or preset name to be applied as a post effect. You can pass a preset name from `ShaderPreset` (e.g., "invert", "grayscale", "sepia") or provide custom shader code. The shader will receive the rendered canvas as a `sampler2D src` uniform.
- **Standard Uniforms Available**:
    - `sampler2D src`: The input texture (rendered canvas)
    - `vec2 resolution`: Canvas resolution in pixels
    - `vec2 offset`: Offset values
    - `vec4 viewport`: Viewport information
    - `float time`: Time in seconds since VFX started
    - `vec2 mouse`: Mouse position in pixels
    - `sampler2D backbuffer`: Previous frame texture (if backbuffer is enabled)

#### uniforms (Optional)
- **Type**: `VFXUniforms`
- **Description**: Custom uniform values to be passed to the post effect shader. Works the same way as element uniforms.

#### backbuffer (Optional)
- **Type**: `boolean`
- **Description**: Whether the post effect should use a backbuffer for feedback effects. When enabled, the previous frame's output is available as `sampler2D backbuffer`.
```

--------------------------------

### PostEffectPass Accessors

Source: https://amagi.dev/vfx-js/docs/classes/PostEffectPass

Provides access to the uniforms, backbuffer, and scene associated with the PostEffectPass.

```APIDOC
## Accessors PostEffectPass

### Description
Provides access to the uniforms, backbuffer, and scene associated with the PostEffectPass.

### Method
GETTER

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const uniforms = postEffectPassInstance.uniforms;
const backbuffer = postEffectPassInstance.backbuffer;
const scene = postEffectPassInstance.scene;
```

### Response
#### Success Response (200)
- **uniforms** ({ [name: string]: IUniform<any> }) - The uniforms used by the post-processing effect.
- **backbuffer** (undefined | Backbuffer) - The backbuffer used for rendering.
- **scene** (Scene) - The scene associated with this pass.

#### Response Example
```json
{
  "uniforms": { "t_texture": { "value": null } },
  "backbuffer": null, // or an instance of Backbuffer
  "scene": {} // representation of the Scene object
}
```
```

--------------------------------

### VFXProps Type Alias

Source: https://amagi.dev/vfx-js/docs/types/VFXProps

Defines the structure and types of properties that can be passed to configure VFX elements.

```APIDOC
## Type Alias VFXProps

VFXProps: {
  shader?: ShaderPreset | string;
  release?: number;
  uniforms?: VFXUniforms;
  overlay?: true | number;
  intersection?: { threshold?: number; rootMargin?: MarginOpts };
  overflow?: true | MarginOpts;
  wrap?: VFXWrap | [VFXWrap, VFXWrap];
  zIndex?: number;
  glslVersion?: "100" | "300 es";
  backbuffer?: boolean;
  autoCrop?: boolean;
}

Properties for the element passed to `VFX.add()`.
```

--------------------------------

### VFXOptsInner Type Alias Definition (TypeScript)

Source: https://amagi.dev/vfx-js/docs/types/VFXOptsInner

Defines the structure for options related to visual effects (VFX) within the VFX-JS library. It specifies properties like pixelRatio, zIndex, autoplay, fixedCanvas, scrollPadding, and postEffect, along with their expected data types. This type is crucial for configuring VFX behavior.

```typescript
type VFXOptsInner = {
  pixelRatio: number;
  zIndex: number | undefined;
  autoplay: boolean;
  fixedCanvas: boolean;
  scrollPadding: [number, number];
  postEffect: VFXPostEffect | undefined;
};
```

--------------------------------

### VFXProps Type Alias Definition (TypeScript)

Source: https://amagi.dev/vfx-js/docs/types/VFXProps

Defines the structure for properties passed to the `VFX.add()` function in VFX-JS. It includes optional properties for shaders, release timing, uniforms, overlays, intersection observers, overflow handling, wrapping, z-index, GLSL version, backbuffer usage, and auto-cropping.

```typescript
type VFXProps = {
  shader?: ShaderPreset | string;
  release?: number;
  uniforms?: VFXUniforms;
  overlay?: true | number;
  intersection?: { threshold?: number; rootMargin?: MarginOpts };
  overflow?: true | MarginOpts;
  wrap?: VFXWrap | [VFXWrap, VFXWrap];
  zIndex?: number;
  glslVersion?: "100" | "300 es";
  backbuffer?: boolean;
  autoCrop?: boolean;
};
```

--------------------------------

### MarginOpts Type Alias Definition (VFX-JS)

Source: https://amagi.dev/vfx-js/docs/types/MarginOpts

Defines the MarginOpts type alias, which accepts a single number, an array of four numbers (top, right, bottom, left), or an object with optional top, right, bottom, and left properties. This alias is commonly used for properties like margin, padding, and overflow.

```typescript
type MarginOpts =
  | number
  | [top: number, right: number, bottom: number, left: number]
  | { top?: number; right?: number; bottom?: number; left?: number };
```

--------------------------------

### VFXUniformValue Type Alias Definition (VFX-JS)

Source: https://amagi.dev/vfx-js/docs/types/VFXUniformValue

Defines the VFXUniformValue type alias, which represents the possible data types for uniform variables in GLSL. It supports single numbers (float) and arrays of numbers for vec2, vec3, and vec4.

```typescript
type VFXUniformValue =
  | number
  | [number, number]
  | [number, number, number]
  | [number, number, number, number];
```

--------------------------------

### VFXElementIntersection Type Alias Definition (TypeScript)

Source: https://amagi.dev/vfx-js/docs/types/VFXElementIntersection

Defines the VFXElementIntersection type alias, which is used to configure intersection observations. It includes a 'threshold' for the intersection ratio and 'rootMargin' for adjusting the bounding box of the root element.

```typescript
type VFXElementIntersection = {
  threshold: number;
  rootMargin: Margin;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.