### Installation and Import

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Instructions on how to install Curtains.js using npm and import its core classes.

```APIDOC
## Installation

```bash
npm i curtainsjs
```

```javascript
import {Curtains, Plane} from 'curtainsjs';
```

Or use UMD build directly:

```html
<script src="dist/curtains.umd.min.js"></script>
```
```

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

### Install Curtains.js

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Installation methods via npm or UMD script tag.

```bash
npm i curtainsjs
```

```javascript
import {Curtains, Plane} from 'curtainsjs';
```

```html
<script src="dist/curtains.umd.min.js"></script>
```

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

### Install curtains.js via npm

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/README.md

Use the npm package manager to add the library to your project.

```bash
npm i curtainsjs
```

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

### Setup Asynchronous Textures with Curtains.js

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/asynchronous-textures/index.html

This JavaScript code initializes Curtains.js and sets up a plane to load textures asynchronously. It includes event listeners for user interaction to trigger texture changes.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141413267-1');
```

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

### Import curtains.js as an ES6 module

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/README.md

Import the library after installation via npm.

```javascript
import {Curtains, Plane} from 'curtainsjs';
```

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

### Chain Mat4 methods

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/mat-4-class.html

Most Mat4 methods return the instance, allowing for method chaining to perform multiple operations sequentially. This example chains multiplication and scaling.

```javascript
const matrix = new Mat4().multiply(new Mat4()).scale(new Vec3(2, 2, 2));
```

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

### Initialize Curtains and Texture

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/texture-class.html

Demonstrates creating a Curtains instance and a new Texture with specific sampler options.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

// create a new texture using our curtains object

// use "uTexture" as sampler name and set a few options as well

const texture = new Texture(curtains, {

// set premultiplyAlpha to true, minFilter, anisotropy and use half-floating point texture

sampler: "uTexture",

premultiplyAlpha: true,

minFilter: curtains.gl.LINEAR_MIPMAP_NEAREST,

anisotropy: 16,

floatingPoint: "half-float"

});

// ...you could add it to a plane or a shader pass later with the addParent() method
```

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

### Curtains Class Initialization

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Demonstrates how to initialize the Curtains class with various configuration options and event callbacks.

```APIDOC
## Curtains Class

The main WebGL context wrapper that initializes the renderer, handles scroll/resize events, and manages the animation loop.

```javascript
import {Curtains, Plane} from 'curtainsjs';

// Initialize the WebGL context with configuration
const curtains = new Curtains({
    container: "canvas",           // Container element ID or element
    alpha: true,                   // Handle transparency (default: true)
    premultipliedAlpha: false,     // Premultiplied alpha (default: false)
    antialias: true,               // Antialiasing (default: true)
    depth: true,                   // Depth buffer (default: true)
    preserveDrawingBuffer: false,  // Preserve buffer (default: false)
    pixelRatio: Math.min(1.5, window.devicePixelRatio), // Limit for performance
    renderingScale: 1,             // Downscale rendering (0.25-1, default: 1)
    autoRender: true,              // Auto animation loop (default: true)
    autoResize: true,              // Auto resize handling (default: true)
    watchScroll: true,             // Watch scroll events (default: true)
    production: false              // Disable warnings in production
});

// Event callbacks for lifecycle management
curtains.onSuccess(() => {
    console.log("WebGL context created successfully");
}).onError(() => {
    console.log("WebGL not supported, show fallback");
    document.body.classList.add("no-webgl");
}).onContextLost(() => {
    console.log("WebGL context lost");
}).onContextRestored(() => {
    console.log("WebGL context restored");
}).onRender(() => {
    // Called every frame - use for global animations
}).onScroll(() => {
    // Called on scroll events
}).onAfterResize(() => {
    // Called after container resize
});
```
```

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

### Plane Video Controls

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Controls the playback of videos associated with the plane. Use `playVideos()` to start and `pauseVideos()` to stop.

```javascript
// Video controls
plane.playVideos();
plane.pauseVideos();
```

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

### Initialize curtains.js with ES6 modules

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/README.md

Import the library and instantiate the Curtains and Plane classes to begin rendering.

```javascript
import {Curtains, Plane} from 'path/to/src/index.mjs';

const curtains = new Curtains({
    container: "canvas"
});

const plane = new Plane(curtains, document.querySelector("#plane"));
```

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

### Get WebGL Bounding Rectangle - JavaScript

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

Retrieves the WebGL bounding rectangle for the plane. This method is useful for obtaining rendering-related dimensions.

```javascript
getWebGLBoundingRect()
```

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

### Initialize Curtains.js Plane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/README.md

Sets up the WebGL context and creates a plane with custom time uniforms.

```javascript
import {Curtains, Plane} from 'curtainsjs';

window.addEventListener("load", () => {
    // set up our WebGL context and append the canvas to our wrapper
    const curtains = new Curtains({
        container: "canvas"
    });
    
    // get our plane element
    const planeElement = document.getElementsByClassName("plane")[0];
    
    // set our initial parameters (basic uniforms)
    const params = {
        vertexShaderID: "plane-vs", // our vertex shader ID
        fragmentShaderID: "plane-fs", // our fragment shader ID
        uniforms: {
            time: {
                name: "uTime", // uniform name that will be passed to our shaders
                type: "1f", // this means our uniform is a float
                value: 0,
            },
        },
    };
    
    // create our plane using our curtains object, the bound HTML element and the parameters
    const plane = new Plane(curtains, planeElement, params);
    
    plane.onRender(() => {
        // use the onRender method of our plane fired at each requestAnimationFrame call
        plane.uniforms.time.value++; // update our time uniform value
    });
    
});
```

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

### Plane Class Initialization and Parameters

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Demonstrates how to initialize a Plane object with various configuration parameters, including shaders, geometry, rendering options, and uniforms.

```APIDOC
## Plane Class Initialization

Creates a WebGL textured plane bound to an HTML element, with automatic sizing based on CSS.

### Parameters

- **vertexShaderID** (string) - Optional - The ID of the script tag containing the vertex shader.
- **fragmentShaderID** (string) - Optional - The ID of the script tag containing the fragment shader.
- **vertexShader** (string) - Optional - The vertex shader code as a string.
- **fragmentShader** (string) - Optional - The fragment shader code as a string.
- **widthSegments** (number) - Optional - The number of segments along the plane's width (default: 1).
- **heightSegments** (number) - Optional - The number of segments along the plane's height (default: 1).
- **renderOrder** (number) - Optional - The draw order of the plane (higher values are drawn later).
- **depthTest** (boolean) - Optional - Enables or disables depth testing (default: true).
- **cullFace** (string) - Optional - Specifies face culling: "back", "front", or "none" (default: "back").
- **alwaysDraw** (boolean) - Optional - Disables frustum culling, always drawing the plane (default: false).
- **visible** (boolean) - Optional - Sets the initial visibility of the plane (default: true).
- **transparent** (boolean) - Optional - Enables transparency for the plane (default: false).
- **autoloadSources** (boolean) - Optional - Automatically loads images or videos specified in the HTML element (default: true).
- **watchScroll** (boolean) - Optional - Updates the plane's position on DOM scroll events (default: true).
- **fov** (number) - Optional - The field of view for the camera (default: 50).
- **drawCheckMargins** (object) - Optional - Margins in pixels for frustum culling checks. Example: `{ top: 0, right: 0, bottom: 0, left: 0 }`.
- **uniforms** (object) - Optional - An object defining custom uniforms for the shaders. Each uniform should have a `name`, `type`, and `value`. Example: `{ time: { name: "uTime", type: "1f", value: 0 } }`.

### Request Example

```javascript
const params = {
    vertexShaderID: "plane-vs",
    fragmentShaderID: "plane-fs",
    widthSegments: 10,
    heightSegments: 10,
    uniforms: {
        time: {
            name: "uTime",
            type: "1f",
            value: 0
        },
        mousePosition: {
            name: "uMouse",
            type: "2f",
            value: new Vec2(0.5, 0.5)
        }
    }
};

const plane = new Plane(curtains, planeElement, params);
```
```

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

### Get inverse of a Mat4 matrix

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/mat-4-class.html

Calculates and returns a new Mat4 matrix that is the inverse of the current matrix. The original matrix is not modified.

```javascript
const inverseMatrix = matrix.getInverse();
```

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

### Chain Quat methods

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/quat-class.html

Demonstrates chaining multiple Quat methods for concise initialization. This is possible because most methods return the quaternion instance.

```javascript
const quaternion = new Quat().setAxisOrder("YXZ").setFromVec3(new Vec3(1, 1, 1));
```

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

### GET Plane Bounding Rectangle

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

Retrieves the plane's bounding rectangle relative to the viewport, including all applied transformations. This is useful for frustum culling.

```APIDOC
## GET Plane Bounding Rectangle

### Description
Useful to get our plane WebGL element bounding rectangle relative to the viewport, with all transformations applied. Used internally in the draw check function (frustum culling).

### Method
GET

### Endpoint
/plane/getBoundingRect

### Response
#### Success Response (200)
- **width** (number) - The width of the plane in pixels.
- **height** (number) - The height of the plane in pixels.
- **top** (number) - The top position of the plane in pixels relative to the viewport.
- **right** (number) - The right position of the plane in pixels relative to the viewport.
- **bottom** (number) - The bottom position of the plane in pixels relative to the viewport.
- **left** (number) - The left position of the plane in pixels relative to the viewport.

### Response Example
{
  "width": 500,
  "height": 300,
  "top": 100,
  "right": 600,
  "bottom": 400,
  "left": 100
}
```

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

### Initialize a Plane with Parameters

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

Configures a plane with custom vertex/fragment shaders and uniform definitions.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

const planeElement = document.getElementById("my-plane");

const params = {

vertexShaderID: "my-plane-vs", // ID of your vertex shader script tag

fragmentShaderID: "my-plane-fs", // ID of your fragment shader script tag

uniforms: { // uniforms are what will allow you to interact with your plane

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0, // initial value of the uniform

},

},

};

// create our plane with the above parameters

const plane = new Plane(curtains, planeElement, params);
```

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

### GET Plane Visibility Status

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

Checks if a plane is currently being drawn. A plane is not drawn if it's not fully initiated, its visible property is false, or it's being culled.

```APIDOC
## GET Plane Visibility Status

### Description
Use this function to check if a plane is currently being drawn or not. A plane is not drawn either if it has not been fully initiated yet, its [visible property](plane-class.html#visible) is set to false or it is being culled.

### Method
GET

### Endpoint
/plane/isDrawn

### Response
#### Success Response (200)
- **isDrawn** (boolean) - A boolean indicating whether the plane is currently drawn or not.

### Response Example
{
  "isDrawn": true
}
```

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

### Configuration and State Methods

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/curtains-class.html

Methods for configuring the container, pixel ratio, and scroll synchronization.

```APIDOC
## setContainer(container)

### Description
Sets the HTML container element to which the canvas will be appended.

### Parameters
- **container** (HTMLElement|string) - Required - The HTML element or ID to append the canvas to.

## setPixelRatio(pixelRatio, triggerCallback)

### Description
Sets a new pixel ratio and triggers a resize of the scene.

### Parameters
- **pixelRatio** (float) - Required - The new pixel ratio to apply.
- **triggerCallback** (bool) - Optional - Whether to trigger the onAfterResize callback. Defaults to false.

## updateScrollValues(xOffset, yOffset)

### Description
Updates the internal scroll values used for plane positioning.

### Parameters
- **xOffset** (float) - Required - Scroll value along the X axis.
- **yOffset** (float) - Required - Scroll value along the Y axis.
```

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

### Initialize CurtainsJS Plane and Play Videos

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/get-started.html

Sets up the WebGL context, creates a plane, and adds an event listener to play videos when a button is clicked. The onRender method updates a time uniform.

```javascript
import {Curtains, Plane} from "curtainsjs";

// wait for everything to be ready

window.addEventListener("load", () => {

// set up our WebGL context and append the canvas to our wrapper

const curtains = new Curtains({

container: "canvas"

});

// get our plane element

const planeElement = document.getElementsByClassName("plane")\[0\];

// set our initial parameters (basic uniforms)

const params = {

vertexShaderID: "plane-vs", // our vertex shader ID

fragmentShaderID: "plane-fs", // our fragment shader ID

uniforms: {

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0,

},

},

};

// create our plane using our curtains object, the HTML element and the parameters

const plane = new Plane(curtains, planeElement, params);

plane.onReady(() => {

// set an event listener to start our playback

document.getElementbyId("start-playing").addEventListener("click", () => {

plane.playVideos();

});

}).onRender(() => {

// use the onRender method of our plane fired at each requestAnimationFrame call

plane.uniforms.time.value++; // update our time uniform value

});

});
```

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

### Get Plane Bounding Rectangle - JavaScript

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

Retrieves the HTML element's bounding rectangle for the plane. Values are relative to the Curtains pixelRatio and can cause reflow if not used carefully.

```javascript
getBoundingRect()
```

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

### Initialize Curtains.js and Create Plane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/tests/basic-plane/index.html

Sets up the Curtains.js instance, retrieves plane elements, and creates new Plane objects with specified shaders and uniforms. Includes error handling and context restoration.

```javascript
import {Curtains, Plane, Vec2} from '../../../src/index.mjs';

window.addEventListener("load", () => {
  const curtains = new Curtains({
    container: "canvas",
    //alpha: false,
  }).onError(() => {
    console.log("error");
  }).onContextLost(() => {
    curtains.restoreContext();
  });

  const planeElements = document.getElementsByClassName("plane");

  const params = {
    vertexShaderID: "plane-vs", 
    fragmentShaderID: "plane-fs", 
    //shareProgram: true,
    uniforms: {
      time: {
        name: "uTime", 
        type: "1f", 
        value: 0,
      },
    }
  };

  for(let i = 0; i < planeElements.length; i++) {
    const plane = new Plane(curtains, planeElements[i], params);

    plane.setRotation(-1.25, 0, 0);

    plane.onLoading((texture) => {
      //console.log("texture loaded", texture);
      texture.setAnisotropy(16);
    }).onReady(() => {
      console.log("plane ready", plane.index);
    }).onRender(function() {
      plane.uniforms.time.value = plane.uniforms.time.value + (1 + 0.5 * plane.index);
    });
  }
});
```

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

### Color Fragment Based on Texture Coordinate Y

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/get-started.html

This GLSL fragment shader example sets the RGB color of a fragment based on the Y component of its texture coordinates. This is useful for debugging or creating gradient effects.

```glsl
gl_FragColor = vec4(vec3(vTextureCoord.y), 1.0);
```

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

### Initialize curtains.js with UMD files

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/README.md

Load the library via script tag and initialize the core classes in a browser environment.

```html
<script src="dist/curtains.umd.min.js"></script>
```

```javascript
const curtains = new Curtains({
    container: "canvas"
});

const plane = new Plane(curtains, document.querySelector("#plane"));

// etc
```

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

### Create Texture using Constructor

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/texture-class.html

Use this method to create a new texture directly. Ensure a Curtains instance is initialized first. The sampler name is a required option.

```javascript
const curtains = new Curtains({

container: "canvas"

});

// create a new texture using our curtains object

// use "uTexture" as sampler name

const texture = new Texture(curtains, {

sampler: "uTexture"

});
```

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

### JavaScript Initialization for curtains.js

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/get-started.html

Instantiate the WebGL context and create a plane with custom uniform parameters.

```javascript
import {Curtains, Plane} from "curtainsjs";

// wait for everything to be ready

window.addEventListener("load", () => {

// set up our WebGL context and append the canvas to our wrapper

const curtains = new Curtains({

container: "canvas"

});

// get our plane element

const planeElement = document.getElementsByClassName("plane")[0];

// set our initial parameters (basic uniforms)

const params = {

vertexShaderID: "plane-vs", // our vertex shader ID

fragmentShaderID: "plane-fs", // our fragment shader ID

uniforms: {

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0,

},

},

};

// create our plane using our curtains object, the HTML element and the parameters

const plane = new Plane(curtains, planeElement, params);

plane.onRender(() => {

// use the onRender method of our plane fired at each requestAnimationFrame call

plane.uniforms.time.value++; // update our time uniform value

});

});
```

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

### CurtainsJS Initialization Options

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/curtains-class.html

These options can be passed to the Curtains constructor to configure the WebGL context and rendering behavior.

```APIDOC
## CurtainsJS Initialization Options

### Description
Options to configure the WebGL context and rendering behavior upon initialization.

### Parameters
#### Request Body
- **antialias** (bool) - Optional - Whether the WebGL context should use the default antialiasing. Defaults to true.
- **premultipliedAlpha** (bool) - Optional - Whether the WebGL context should handle premultiplied alpha. Defaults to false.
- **depth** (bool) - Optional - Whether the WebGL context should handle depth. Defaults to true.
- **preserveDrawingBuffer** (bool) - Optional - Whether the WebGL context should preserve the drawing buffer. Defaults to false.
- **failIfMajorPerformanceCaveat** (bool) - Optional - Whether the WebGL context creation should fail in case of major performance caveat. Defaults to true.
- **stencil** (bool) - Optional - Whether the WebGL context should handle stencil. Defaults to false.
- **autoRender** (bool) - Optional - Whether the library should create a request animation frame loop to render the scene. Defaults to true.
- **autoResize** (bool) - Optional - Whether the library should listen to the window resize event and resize the scene. Defaults to true.
- **pixelRatio** (float) - Optional - Defines the pixel ratio value. Defaults to window.devicePixelRatio.
- **renderingScale** (float) - Optional - Use to downscale your rendering canvas. Defaults to 1.
- **watchScroll** (bool) - Optional - Whether the library should listen to the window scroll event. Defaults to true.
- **production** (bool) - Optional - Whether the library should throw useful console warnings or not. Defaults to false.
```

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

### onReady Callback

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/plane-class.html

This function will be called once our plane is all set up and ready to be drawn.

```APIDOC
## onReady(callback)

### Description
This function will be called once our plane is all set up and ready to be drawn. If [autoloadSources](plane-class.html#autoload-sources) is set to true, it will be called after the images, canvas and videos are loaded. Otherwise, it will be called almost right away. This is where you may want to add event listeners to interact with your plane or update its uniforms.

### Method
Callback assignment

### Parameters
#### Callback Function
- **callback** (function) - Required - The function to execute when the plane is ready.

### Returns
- **Plane object** - Returns the Plane object, allowing for chainable calls.

### Examples
```javascript
plane.onReady(() => {
  console.log('Plane is ready!');
  // Add event listeners or update uniforms
});
```
```

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

### Constructor: new Curtains()

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/curtains-class.html

Initializes a new Curtains instance to handle the WebGL scene and render loop.

```APIDOC
## Constructor: new Curtains()

### Description
Creates a new Curtains object that handles the scene containing all planes, creates the WebGL context, appends the canvas, and manages the requestAnimationFrame loop.

### Parameters
#### Request Body
- **container** (HTMLElement or string) - Optional - The HTML element or ID of the element that will wrap the canvas. If not provided, setContainer() must be called later.
- **alpha** (bool) - Optional - Whether the WebGL context should handle transparency. Defaults to true.
- **production** (bool) - Optional - Whether to use the library in production mode.

### Request Example
{
  "container": "canvas",
  "production": true,
  "alpha": true
}
```

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

### Initialize TextureLoader and Load Image

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/texture-loader-class.html

Instantiate the TextureLoader with a Curtains instance and use loadImage to process an image element.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

// create a new texture loader

const loader = new TextureLoader(curtains);

// load an image with the loader

const image = new Image();

image.crossOrigin = "anonymous";

image.src = "path/to/my-image.jpg";

loader.loadImage(image, {

// texture options (we're only setting its sampler name here)

sampler: "uTexture"

}, (texture) => {

// texture has been successfully created, you can safely use it

}, (image, error) => {

// there has been an error while loading the image

});
```

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

### Initialize Curtains and Plane

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Initializes Curtains with a container and creates a Plane instance bound to an HTML element using specified parameters. Ensure the HTML element and shader script tags exist.

```javascript
import {Curtains, Plane, Vec2, Vec3} from 'curtainsjs';

const curtains = new Curtains({container: "canvas"});
const planeElement = document.querySelector(".plane");

const params = {
    vertexShaderID: "plane-vs",       // Vertex shader script tag ID
    fragmentShaderID: "plane-fs",     // Fragment shader script tag ID
    // Or provide shader strings directly:
    // vertexShader: vertexShaderString,
    // fragmentShader: fragmentShaderString,

    widthSegments: 10,                // Plane geometry segments (default: 1)
    heightSegments: 10,

    renderOrder: 0,                   // Draw order (higher = later)
    depthTest: true,                  // Enable depth testing
    cullFace: "back",                 // Face culling: "back", "front", "none"

    alwaysDraw: false,                // Disable frustum culling
    visible: true,                    // Initial visibility
    transparent: false,               // Enable transparency
    autoloadSources: true,            // Auto-load images/videos in element
    watchScroll: true,                // Update position on scroll

    fov: 50,                          // Field of view (default: 50)

    drawCheckMargins: {               // Frustum culling margins in pixels
        top: 0, right: 0, bottom: 0, left: 0
    },

    uniforms: {
        time: {
            name: "uTime",            // Uniform name in shader
            type: "1f",               // Type: 1f, 2f, 3f, 4f, 1i, 2i, mat4, etc.
            value: 0
        },
        mousePosition: {
            name: "uMouse",
            type: "2f",
            value: new Vec2(0.5, 0.5)
        }
    }
};

const plane = new Plane(curtains, planeElement, params);
```

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

### Initialize CurtainsJS and Create a Plane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/index.html

Instantiate the Curtains class with your container ID and create a new Plane element. The container must be an existing HTML element.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

const plane = new Plane(curtains, document.getElementById("my-plane"));
```

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

### Configure ShaderPass with Parameters

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/shader-pass-class.html

Initializes a shader pass with custom vertex/fragment shader IDs and uniform definitions.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

const shaderPassParams = {

vertexShaderID: "my-shader-pass-vs", // ID of your vertex shader script tag

fragmentShaderID: "my-shader-pass-fs", // ID of your fragment shader script tag

uniforms: { // uniforms are what will allow you to interact with your shader pass

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0, // initial value of the uniform

},

},

};

// create a new shader pass using our curtains object and the above parameters

var shaderPass = new ShaderPass(curtains, shaderPassParams);
```

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

### Assigning a RenderTarget to a ShaderPass

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/render-target-class.html

Demonstrates initializing a Curtains instance, creating a RenderTarget, assigning it to multiple planes, and finally applying it to a ShaderPass.

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

// create a new render target using our curtains object

const renderTarget = new RenderTarget(curtains);

const planeElements = document.getElementsByClassName("my-planes");

// create a bunch of planes

for(let i = 0; i < planeElements.length; i++) {

const plane = new Plane(curtains, planeElements[i], {

vertexShaderID: "plane-vs",

fragmentShaderID: "plane-fs",

});

// add our plane to our frame buffer object

plane.setRenderTarget(renderTarget);

}

// now assign our render target to a shader pass

const shaderPassParams = {

vertexShaderID: "my-shader-pass-vs",

fragmentShaderID: "my-shader-pass-fs",

renderTarget: renderTarget, // this is how we assign the render target to our shader pass

uniforms: {

time: {

name: "uTime",

type: "1f",

value: 0,

},

},

};

const shaderPass = new ShaderPass(curtains, shaderPassParams);
```

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

### Constructor: new PingPongPlane()

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/ping-pong-plane-class.html

Creates a new PingPongPlane instance to handle ping-pong rendering effects.

```APIDOC
## Constructor: new PingPongPlane(curtains, element, params)

### Description
Creates a new PingPongPlane instance. It inherits from the Plane class but sets depthTest and autoloadSources to false by default.

### Parameters
#### Request Body
- **curtains** (Curtains) - Required - The Curtains instance.
- **element** (HTMLElement) - Required - The HTML element to attach the plane to.
- **params** (Object) - Required - Configuration object.
  - **vertexShaderID** (string) - Required - ID of the vertex shader script tag.
  - **fragmentShaderID** (string) - Required - ID of the fragment shader script tag.
  - **sampler** (string) - Optional - The texture sampler name used in the fragment shader. Defaults to "uPingPongTexture".
  - **uniforms** (Object) - Optional - Uniforms to interact with the plane.
```

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

### ShaderPass Initialization Parameters

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/shader-pass-class.html

Configuration object used to define the behavior and shaders of a ShaderPass.

```APIDOC
## ShaderPass Initialization Parameters

### Description
Defines the parameters used to initialize a new ShaderPass instance.

### Parameters
#### Request Body
- **curtains** (Curtains) - Required - The Curtains class object.
- **vertexShader** (string) - Optional - Vertex shader source code.
- **vertexShaderID** (string) - Optional - ID of the vertex shader element.
- **fragmentShader** (string) - Optional - Fragment shader source code.
- **fragmentShaderID** (string) - Optional - ID of the fragment shader element.
- **renderOrder** (int) - Optional - Drawing order, defaults to 0.
- **depthTest** (bool) - Optional - Enable/disable depth test, defaults to true.
- **depth** (bool) - Optional - Use depth buffer, defaults to false.
- **clear** (bool) - Optional - Clear render target before draw, defaults to true.
- **renderTarget** (RenderTarget) - Optional - Existing render target to use.
- **texturesOptions** (object) - Optional - Default options for textures.
- **crossOrigin** (string) - Optional - Cross origin process for loading images.
- **uniforms** (object) - Optional - Uniforms passed to shaders (name, type, value).
```

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

### JavaScript Initialization for Basic Plane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/basic-plane/index.html

Initializes the Curtains instance and attaches a Plane with custom uniform parameters.

```javascript
import {Curtains, Plane} from '../../src/index.mjs'; window.addEventListener("load", () => { // set up our WebGL context and append the canvas to our wrapper const curtains = new Curtains({ container: "canvas", pixelRatio: Math.min(1.5, window.devicePixelRatio) // limit pixel ratio for performance }); // get our plane element const planeElements = document.getElementsByClassName("plane"); // set our initial parameters (basic uniforms) const params = { vertexShaderID: "plane-vs", // our vertex shader ID fragmentShaderID: "plane-fs", // our framgent shader ID uniforms: { time: { name: "uTime", // uniform name that will be passed to our shaders type: "1f", // this means our uniform is a float value: 0, }, } }; const plane = new Plane(curtains, planeElements[0], params); // set up our basic methods plane.onRender(() => { // fired at each requestAnimationFrame call plane.uniforms.time.value++; // update our time uniform value }); });
```

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

### Initialize Curtains Object

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/curtains-class.html

Create a new Curtains instance by providing a container element or ID to handle the WebGL scene.

```javascript
const curtains = new Curtains({
container: document.getElementById("canvas") // we could have just pass "canvas" instead
});
```

```javascript
const curtains = new Curtains({
container: "canvas",
production: true // use the library in "production" mode
});
```

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

### Initialize Curtains and FXAAPass

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/fxaa-pass-class.html

Instantiate Curtains and then create an FXAAPass. The 'canvas' ID refers to the HTML container element.

```javascript
const curtains = new Curtains({

container: "canvas"

});

// create our FXAA pass using our curtains object

const fxaaPass = new FXAAPass(curtains);
```

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

### Plane Lifecycle Callbacks

Source: https://context7.com/martinlaxenaire/curtainsjs/llms.txt

Explains how to use lifecycle callbacks to hook into various stages of the plane's rendering process, from loading to rendering and resizing.

```APIDOC
## Plane Lifecycle Callbacks

Attach callbacks to manage plane behavior during different stages of its lifecycle.

### Methods

- **onLoading(callback)**: Called when textures associated with the plane start loading.
- **onReady(callback)**: Called once all textures are loaded and the plane is ready.
- **onRender(callback)**: Called every frame before the plane is drawn. Ideal for updating uniforms.
- **onAfterRender(callback)**: Called after the plane has been drawn.
- **onAfterResize(callback)**: Called after the plane's dimensions have been updated due to a resize event.
- **onReEnterView(callback)**: Called when the plane re-enters the viewport.
- **onLeaveView(callback)**: Called when the plane leaves the viewport.

### Request Example

```javascript
plane.onLoading((texture) => {
    console.log("Loading texture:", texture.sourceType);
}).onReady(() => {
    console.log("Plane ready, all textures loaded");
}).onRender(() => {
    // Update uniforms here
    plane.uniforms.time.value++;
}).onAfterRender(() => {
    // Post-render actions
}).onAfterResize(() => {
    // Handle resize events
}).onReEnterView(() => {
    console.log("Plane entered viewport");
}).onLeaveView(() => {
    console.log("Plane left viewport");
});
```
```

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

### Create Texture using TextureLoader

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/texture-class.html

Create textures by first initializing a TextureLoader and then loading media elements. This method allows for asynchronous loading and provides callbacks for success and error handling. The sampler name is an option passed during loading.

```javascript
const curtains = new Curtains({

container: "canvas"

});

// create a new texture loader

const loader = new TextureLoader(curtains);

// load an image with the loader

const image = new Image();

image.crossOrigin = "anonymous";

image.src = "path/to/my-image.jpg";

let newTexture;

loader.loadImage(image, {

// texture options (we're only setting its sampler name here)

sampler: "uTexture"

}, (texture) => {

// texture has been successfully created

newTexture = texture;

// ...you could add it to a plane or a shader pass with the addParent() method

}, (image, error) => {

// there has been an error while loading the image

});
```

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

### Initialize Curtains and Create PingPongPlane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/ping-pong-plane-class.html

Initializes CurtainsJS and creates a PingPongPlane with specified vertex and fragment shaders, uniforms, and a texture sampler. A separate plane is then created to display the ping pong effect.

```javascript
const curtains = new Curtains({

container: "canvas"

});

const pingPongPlaneElement = document.getElementById("my-ping-pong-plane");

const params = {

vertexShaderID: "ping-pong-vs", // ID of your vertex shader script tag

fragmentShaderID: "ping-pong-fs", // ID of your fragment shader script tag

sampler: "uTexture", // sampler to use in your fragment shader. Default to "uPingPongTexture"

uniforms: { // uniforms are what will allow you to interact with your plane

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0, // initial value of the uniform

},

},

};

// create our ping pong plane with the above parameters

const pingPongPlane = new PingPongPlane(curtains, pingPongPlaneElement, params);

// create a plane to use our ping pong plane effect

const planeElement = document.getElementById("my-plane");

const plane = new Plane(curtains, planeElement);

// create a texture that will contain the result of our ping pong effect

const pingPongTexture = plane.createTexture({

sampler: "uTexture",

fromTexture: pingPongPlane.getTexture()

});
```

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

### Default Uniform Naming Implementation

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/texture-class.html

Shows the HTML structure, JavaScript initialization, and shader uniform declarations for default naming conventions.

```html
<!-- div used to create our plane -->

<div id="my-plane">

<!-- images that will be used as textures by our plane -->

<img src="path/to/my-image-1.jpg" crossorigin="" />

<img src="path/to/my-image-2.jpg" crossorigin="" />

</div>
```

```javascript
// "canvas" is the ID of our HTML container element

const curtains = new Curtains({

container: "canvas"

});

const planeElement = document.getElementById("my-plane");

const plane = new Plane(curtains, planeElement);
```

```glsl
// use this in your vertex shader

uniform mat4 uTextureMatrix0; // texture matrix of my-image-1.jpg

uniform mat4 uTextureMatrix1; // texture matrix of my-image-2.jpg

...

// use this in your fragment shader

uniform sampler2D uSampler0; // bound to my-image-1.jpg

uniform sampler2D uSampler1; // bound to my-image-2.jpg
```

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

### ShaderPass Class

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/shader-pass-class.html

Documentation for the ShaderPass class, including basic usage, parameters, properties, methods, and events.

```APIDOC
## ShaderPass Class

### Description
Shader passes offer the possibility to add post-processing to either a bunch of planes or your whole scene. Think of it as an additional plane that would have the size of your WebGL canvas and that would render a set of planes into a texture and draw it. You'd then be able to manipulate that texture in your fragment shader.

Like the [Plane](plane-class.html) class it inherits from the Mesh and DOMMesh classes. ShaderPass extends the DOMMesh class by handling the creation of a frame buffer object and the creation of a render texture.

Please note that render targets (and therefore shader passes) disable the WebGL context default antialiasing. If you use them, you should set the [antialias Curtains property](curtains-class.html#curtains-init-parameters) to false when initiating your context. You might then want to add an extra antialiasing pass, by using the built-in [FXAAPass](fxaa-pass-class.html) class or your own FXAA or MSAA implementation.

### Source Code
[https://github.com/martinlaxenaire/curtainsjs/blob/master/src/framebuffers/ShaderPass.js](https://github.com/martinlaxenaire/curtainsjs/blob/master/src/framebuffers/ShaderPass.js)

### Basic Usage
See [Basic usage](shader-pass-class.html#basic-usage)

### Parameters
See [Parameters](shader-pass-class.html#parameters)

### Properties
*   **canvases** (Array<HTMLCanvasElement> | null) - The canvases associated with the shader pass.
*   **crossOrigin** (string) - The crossOrigin attribute of the images.
*   **cullFace** (number) - The cull face property.
*   **gl** (WebGLRenderingContext) - The WebGL rendering context.
*   **htmlElement** (HTMLElement) - The HTML element associated with the shader pass.
*   **images** (Array<HTMLImageElement> | null) - The images associated with the shader pass.
*   **index** (number) - The index of the shader pass.
*   **loader** (TextureLoader) - The texture loader instance.
*   **renderer** (Curtains) - The Curtains instance.
*   **renderOrder** (number) - The render order of the shader pass.
*   **target** (RenderTarget) - The render target associated with the shader pass.
*   **textures** (Array<Texture>) - The textures associated with the shader pass.
*   **type** (string) - The type of the shader pass.
*   **uniforms** (Object) - The uniforms of the shader pass.
*   **userData** (Object) - User data associated with the shader pass.
*   **uuid** (string) - The unique identifier of the shader pass.
*   **videos** (Array<HTMLVideoElement> | null) - The videos associated with the shader pass.

### Methods
*   **addTexture**(options: Object) - Adds a texture to the shader pass.
*   **createTexture**(options: Object) - Creates a texture for the shader pass.
*   **getBoundingRect**() - Gets the bounding rectangle of the shader pass.
*   **loadCanvas**(source: HTMLCanvasElement | Array<HTMLCanvasElement>, options: Object) - Loads a canvas or an array of canvases.
*   **loadCanvases**(sources: Array<HTMLCanvasElement>, options: Object) - Loads an array of canvases.
*   **loadImage**(source: HTMLImageElement | Array<HTMLImageElement>, options: Object) - Loads an image or an array of images.
*   **loadImages**(sources: Array<HTMLImageElement>, options: Object) - Loads an array of images.
*   **loadSource**(source: any, options: Object) - Loads a source (image, video, canvas).
*   **loadSources**(sources: Array<any>, options: Object) - Loads an array of sources.
*   **loadVideo**(source: HTMLVideoElement | Array<HTMLVideoElement>, options: Object) - Loads a video or an array of videos.
*   **loadVideos**(sources: Array<HTMLVideoElement>, options: Object) - Loads an array of videos.
*   **mouseToPlaneCoords**(x: number, y: number) - Converts mouse coordinates to plane coordinates.
*   **playVideos**() - Plays all the videos associated with the shader pass.
*   **remove**() - Removes the shader pass.
*   **setRenderOrder**(renderOrder: number) - Sets the render order of the shader pass.

### Events
*   **onAfterRender** - Callback function executed after rendering.
*   **onAfterResize** - Callback function executed after resizing.
*   **onError** - Callback function executed when an error occurs.
*   **onLoading** - Callback function executed during loading.
*   **onReady** - Callback function executed when the shader pass is ready.
*   **onRender** - Callback function executed during rendering.
```

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

### Quat Class Constructor

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/quat-class.html

Initializes a new Quat instance for 3D rotation calculations.

```APIDOC
## Constructor: new Quat(elements, axisOrder)

### Description
Creates a new quaternion representing a rotation in 3D space.

### Parameters
- **elements** (array of floats) - Optional - Array of length 4. Defaults to [0, 0, 0, 1].
- **axisOrder** (string) - Optional - Axis order for rotation calculations. Defaults to "XYZ".

### Request Example
const quaternion = new Quat();
```

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

### Initialize CurtainsJS and Create a Plane

Source: https://github.com/martinlaxenaire/curtainsjs/blob/master/documentation/get-started.html

Sets up the WebGL context, creates a plane element, and defines basic uniforms for shaders. This is used for rendering a rotating red rectangle as a texture.

```javascript
import {Curtains, Plane} from "curtainsjs";

// wait for everything to be ready

window.addEventListener("load", () => {

// set up our WebGL context and append the canvas to our wrapper

const curtains = new Curtains({

container: "canvas"

});

// get our plane element

const planeElement = document.getElementsByClassName("plane")\[0\];

// set our initial parameters (basic uniforms)

const params = {

vertexShaderID: "plane-vs", // our vertex shader ID

fragmentShaderID: "plane-fs", // our fragment shader ID

uniforms: {

time: {

name: "uTime", // uniform name that will be passed to our shaders

type: "1f", // this means our uniform is a float

value: 0,

},

},

};

// create our plane using our curtains object, the HTML element and the parameters

const plane = new Plane(curtains, planeElement, params);

// our texture canvas

const textureCanvas = document.getElementById("canvas-texture");

const textureCanvasContext = textureCanvas.getContext("2d");

// get our plane dimensions without triggering reflow

const planeBoundingRect = plane.getBoundingRect();

// set the size of our canvas

textureCanvas.width = planeBoundingRect.width;

textureCanvas.height = planeBoundingRect.height;

// use the onRender method of our plane fired at each requestAnimationFrame call

plane.onRender(() => {

plane.uniforms.time.value++; // update our time uniform value

// here we will handle our canvas texture animation

// clear scene

textureCanvasContext.clearRect(0, 0, textureCanvas.width, textureCanvas.height);

// continuously rotate the canvas

textureCanvasContext.translate(textureCanvas.width / 2, textureCanvas.height / 2);

textureCanvasContext.rotate(Math.PI / 360);

textureCanvasContext.translate(-textureCanvas.width / 2, -textureCanvas.height / 2);

// draw a red rectangle

textureCanvasContext.fillStyle = "#ff0000";

textureCanvasContext.fillRect(textureCanvas.width / 2 - textureCanvas.width / 8, textureCanvas.height / 2 - textureCanvas.height / 8, textureCanvas.width / 4, textureCanvas.height / 4);

});

});
```