### Start Development Server

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Run this command to start the development server after initiating the examples build watch mode. Navigate to the provided URL to access the running examples.

```bash
npm run serve
```

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

### Setup and Event Handling for Threepipe Examples

Source: https://github.com/repalash/threepipe/blob/master/examples/index.html

This code handles example selection, custom example loading from local storage, and keyboard shortcuts for toggling the codebar. It also sets up event listeners for window resizing and popstate events for URL changes.

```javascript
content) { const example = customExamples.find(e => e.id === exampleId); if(!example){ console.warn(\`Example with id ${exampleId} not found.\"); return; } localStorage.setItem(\`tp-examples-custom-${example.id}\", content); } const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; const setEditorExample = isMobile ? null : setupCodeEditor(iframe) function selectTarget(target, scroll = false, updateFrame = true) { const current = selected || sidebar.querySelector('a.selected') if(current) { current.classList.remove('selected'); current.parentElement && current.parentElement.classList.remove('selected-li'); } target.classList.add('selected'); target.parentElement.classList.add('selected-li'); sidebar.dataset.selectedExample = target.innerText; window.location.hash = "#" + target.getAttribute("href").slice(2); if(selected === target) return selected = target; if(scroll){ setTimeout(() => { // this is required because of autofocus target.scrollIntoView({behavior: "smooth", block: "center"}); }, 100); } if(!updateFrame) return; const custom = !!target.dataset.customId const customContent = custom ? localStorage.getItem(\`tp-examples-custom-${target.dataset.customId}\") : null if(!custom) { if (iframe.srcdoc) iframe.removeAttribute('srcdoc'); if (iframe.src !== target.href) iframe.src = target.href; }else { if(iframe.src) iframe.removeAttribute('src'); if(iframe.srcdoc !== customContent) { iframe.srcdoc = customContent; } } setEditorExample && setEditorExample(target.href, allExamples, customContent, (newName, oldName, content)=> addExample({ id: newName, label: target.textContent + newName.replace(oldName, '').replace(/-/g, ' '), href: target.href.replace(oldName, newName), }, content), saveExample) } hamburger.addEventListener('click', () => { sidebar.classList.toggle('closed'); }); window.addEventListener('keydown', (ev) => { // ignore if textarea if(ev.target.id === 'filterInput') { if(ev.target.value !== '') return; } else if (ev.target.tagName === 'TEXTAREA' || ev.target.tagName === 'INPUT') return; if(ev.key === '.') { ev.preventDefault(); codebar.classList.toggle('closed'); } }); customExamples.forEach(createExample); const links = sidebar.querySelectorAll('li>a'); // after creating custom examples const selected1 = sidebar.querySelector('a.selected'); const examples = [...links.values().map(link=>link.href)] allExamples = [...examples] ///[...examples, ...customExamples.map(example => example.href)] links.forEach(link => { link.onclick = (ev) => { ev.preventDefault() const target = ev.target; selectTarget(target); } }); let hash = window.location.hash.slice(1); if(hash){ if(!hash.endsWith('/')) hash += '/'; const target = document.querySelector(`a[href="./${hash}"]`); selectTarget(target || selected1, true); } else selectTarget(selected1, true); if (searchTerm) filterInput.value = searchTerm; window.addEventListener('popstate', function() { urlParams = new URLSearchParams(window.location.search); searchTerm = urlParams.get('q') || ''; document.querySelector('#filterInput').value = searchTerm; updateSearch() }); filterInput.addEventListener('keyup', updateSearch); updateSearch() });
```

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

### Start Examples Build Watch Mode

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

This command starts the examples build in watch mode, automatically recompiling examples when source files change. It should be run in conjunction with `npm run serve`.

```bash
npm run dev-examples
```

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

### HTML/JS Quickstart with CDN

Source: https://github.com/repalash/threepipe/blob/master/README.md

This example demonstrates how to quickly set up a 3D model viewer using Threepipe via CDN. It includes loading a model and an environment map, and adding a DepthBufferPlugin. Ensure your browser supports WebGL2.

```html
<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>
<script type="module">
  import {ThreeViewer, DepthBufferPlugin} from 'https://unpkg.com/threepipe@latest/dist/index.mjs'

  const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')})

  // Add some plugins 
  viewer.addPluginSync(new DepthBufferPlugin())
  
  // Load an environment map
  const envPromise = viewer.setEnvironmentMap('https://samples.threepipe.org/minimal/venice_sunset_1k.hdr')
  const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
    autoCenter: true,
    autoScale: true,
  })

  Promise.all([envPromise, modelPromise]).then(([env, model]) => {
    console.log('Loaded', model, env, viewer)
  })
</script>
```

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

### Build Examples

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

This command builds the project's examples. It is typically run after making changes to the examples or their dependencies.

```bash
npm run build-examples
```

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

### Threepipe Viewer Setup with React

Source: https://github.com/repalash/threepipe/blob/master/examples/r3f-js-sample/index.html

This snippet demonstrates the basic setup of the Threepipe viewer using React and @react-three/fiber. It includes importing necessary components, setting up the root element, and rendering the ViewerCanvas with plugins and assets. Ensure all dependencies are correctly installed and imported.

```javascript
import {LoadingScreenPlugin, 
_testFinish,
_testStart} from 'threepipe'
import React from 'react'
window.React = React;
import {createRoot} from 'react-dom/client'
import {ViewerCanvas, Asset, Model} from '@threepipe/plugin-r3f'
import htm from 'https://esm.sh/htm'
const html = htm.bind(React.createElement)

_testStart()
createRoot(document.getElementById('root')).render(
  html`
    <${ViewerCanvas} id=${"three-canvas"} style=${{width: "100%", height: "100%", borderRadius: "inherit"}} plugins=${[LoadingScreenPlugin]} onMount=${async (viewer) => {
      console.log('Loaded Viewer', viewer)
      _testFinish()
    }} >
      <${React.Suspense}>
        <${Asset} url=${'https://samples.threepipe.org/minimal/venice_sunset_1k.hdr'} autoSetBackground=${true}/>
        <${Model} url=${'https://samples.threepipe.org/minimal/DamagedHelmet/glTF/DamagedHelmet.gltf'}/>
      </>
    </>
  `
)
```

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

### Install @threepipe/plugin-path-tracing

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-path-tracing.md

Install the plugin using npm.

```bash
npm install @threepipe/plugin-path-tracing
```

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

### Local Development Setup with Vite

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-r3f.md

Set up a local development environment using Vite and Node.js for ThreePipe R3F applications. Install dependencies and run the development server for hot module replacement and optimized builds.

```bash
npm create threepipe@latest my-r3f-app
cd my-r3f-app
npm install threepipe @threepipe/plugin-r3f
npm run dev
```

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

### Install @threepipe/plugin-network

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-network.md

Install the network plugin using npm.

```bash
npm install @threepipe/plugin-network
```

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

### Basic Setup for DepthOfFieldPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/DepthOfFieldPlugin.md

Initializes the ThreeViewer, adds the DepthOfFieldPlugin, and enables interactive focus. Load your model after setup.

```typescript
import {ThreeViewer, PickingPlugin} from 'threepipe'
import {DepthOfFieldPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true,
    plugins: [PickingPlugin] // For interactive focus
})

// Add DOF plugin
const dof = viewer.addPluginSync(new DepthOfFieldPlugin())

// Enable interactive editing (click to focus)
dof.enableEdit = true

// Load model
await viewer.load('model.glb')

// Set initial focal point
dof.setFocalPoint(new Vector3(0, 1, 0), false, true)
```

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

### Install @threepipe/plugin-timeline-ui

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-timeline-ui.md

Install the timeline UI plugin using npm.

```bash
npm install @threepipe/plugin-timeline-ui
```

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

### Basic SSGIPlugin Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SSGIPlugin.md

Integrate the SSGIPlugin into your ThreeViewer instance. Ensure GBufferPlugin, SSAAPlugin, and TemporalAAPlugin are added before SSGIPlugin for proper ordering. Load environment maps and models after setup.

```typescript
import {ThreeViewer, GBufferPlugin, SSAAPlugin, BaseGroundPlugin} from 'threepipe'
import {SSGIPlugin, VelocityBufferPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: false,
    plugins: [
        GBufferPlugin, 
        SSAAPlugin, 
        TemporalAAPlugin, 
        new VelocityBufferPlugin(undefined, false)
    ]
})

// Enable stable noise for cleaner results
viewer.renderManager.stableNoise = true

// Add SSGI plugin
const ssgi = viewer.addPluginSync(new SSGIPlugin())

// Add ground after SSGI for proper ordering
viewer.addPluginSync(new BaseGroundPlugin())

// Load environment
await viewer.setEnvironmentMap('environment.hdr', {
    setBackground: true
})

// Load model - SSGI applies automatically
await viewer.load('model.glb')
```

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

### Install @threepipe/plugin-assimpjs

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-assimpjs.md

Install the plugin using npm.

```bash
npm install @threepipe/plugin-assimpjs
```

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

### Basic Setup for AdvancedGroundPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/AdvancedGroundPlugin.md

Initialize ThreeViewer with necessary plugins and add the AdvancedGroundPlugin. Configure ground reflection and material roughness. Load a model.

```typescript
import {ThreeViewer, GBufferPlugin, SSAAPlugin} from 'threepipe'
import {AdvancedGroundPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true,
    plugins: [GBufferPlugin, SSAAPlugin, TemporalAAPlugin]
})

// Add advanced ground with planar reflections
const ground = viewer.addPluginSync(new AdvancedGroundPlugin())
ground.groundReflection = true
ground.material.roughness = 0.2

// Load model
await viewer.load('model.glb')
```

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

### Viewer Initialization and Basic Setup

Source: https://github.com/repalash/threepipe/blob/master/website/guide/viewer-api.md

Demonstrates how to initialize the ThreeViewer and set basic rendering properties like render size and canvas size.

```APIDOC
## Viewer Initialization and Basic Setup

### Description
Initializes the `ThreeViewer` and configures its rendering resolution and canvas size.

### Method
`new ThreeViewer(options)`

### Endpoint
N/A (Constructor)

### Parameters
#### Constructor Options
- **options** (object) - Required - Configuration options for the viewer.

### Request Example
```typescript
import {ThreeViewer} from 'threepipe'

const viewer = new ThreeViewer({
  // viewer options
});
```

## setRenderSize

### Description
Sets the final render size and fits the canvas in the container based on the specified mode.

### Method
`viewer.setRenderSize(size: {width: number, height: number}, mode: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none')`

### Endpoint
N/A (Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```typescript
viewer.setRenderSize({width: 800, height: 600}, 'cover');
```

## setSize

### Description
Sets the size of the canvas and updates the renderer and camera. If no width/height is passed, the canvas is set to 100% of the container.

### Method
`viewer.setSize(size: {width: number, height: number})`

### Endpoint
N/A (Method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```typescript
viewer.setSize({width: 800, height: 600});
```

## renderManager.renderScale

### Description
Sets the render scale for the viewer.

### Method
`viewer.renderManager.renderScale = number`

### Endpoint
N/A (Property)

### Parameters
N/A

### Request Example
```typescript
viewer.renderManager.renderScale = Math.min(window.devicePixelRatio, 2);
```
```

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

### Install @threepipe/plugin-tweakpane

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-tweakpane.md

Install the Tweakpane UI plugin for ThreePipe using npm.

```bash
npm install @threepipe/plugin-tweakpane
```

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

### Install @threepipe/plugin-troika-text

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-troika-text.md

Install the plugin using npm.

```bash
npm install @threepipe/plugin-troika-text
```

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

### Start Website Development Server

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Use this command to start the VitePress website development server. This allows for live previewing of website changes during development.

```bash
npm run website:dev
```

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

### Basic Setup for BaseGroundPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/BaseGroundPlugin.md

Initialize ThreeViewer and add the BaseGroundPlugin. The ground will auto-position below the loaded model.

```typescript
import {ThreeViewer, BaseGroundPlugin} from 'threepipe'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true
})

// Add ground plugin
const ground = viewer.addPluginSync(new BaseGroundPlugin())

// Load model - ground will auto-position below it
await viewer.load('model.glb')
```

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

### Install BloomPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/BloomPlugin.md

Install the BloomPlugin as part of the @threepipe/webgi-plugins package using npm.

```bash
npm install @threepipe/webgi-plugins
```

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

### Simplest Subclass Example: KTXLoadPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/BaseImporterPlugin.md

Provides a minimal example of a subclass of BaseImporterPlugin, the KTXLoadPlugin.

```APIDOC
## The Simplest Subclass

`KTXLoadPlugin`:

```typescript
import {BaseImporterPlugin} from '../base/BaseImporterPlugin'
import {Importer} from '../../assetmanager'
import {KTXLoader} from 'three/examples/jsm/loaders/KTXLoader.js'

export class KTXLoadPlugin extends BaseImporterPlugin {
    public static readonly PluginType = 'KTXLoadPlugin'
    protected _importer = new Importer(KTXLoader, ['ktx'], ['image/ktx'], false)
}
```
```

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

### Run Vite Dev Server

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Use this command to run the Vite dev server for testing examples. Navigate to the provided URL to view the examples.

```bash
npm run vite
```

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

### Install Gaussian Splatting Plugin

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-gaussian-splatting.md

Install the plugin using npm. This command adds the necessary package to your project.

```bash
npm install @threepipe/plugin-gaussian-splatting
```

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

### Install threepipe and Tweakpane Plugin

Source: https://github.com/repalash/threepipe/blob/master/website/notes/shadertoy-player.md

Install the necessary packages for creating a threepipe project or adding to an existing one. The Tweakpane plugin is used for UI controls.

```bash
npm create threepipe@latest
npm install threepipe @threepipe/plugin-tweakpane
```

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

### Basic SSReflectionPlugin Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SSReflectionPlugin.md

Initialize ThreeViewer with GBufferPlugin and SSAAPlugin, then add the SSReflectionPlugin for inline mode. Load a scene with reflective materials.

```typescript
import {ThreeViewer, GBufferPlugin, SSAAPlugin} from 'threepipe'
import {SSReflectionPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: false,
    plugins: [GBufferPlugin, SSAAPlugin]
})

// Add SSR plugin (inline mode - recommended)
const ssr = viewer.addPluginSync(new SSReflectionPlugin(true))

// Load a scene with reflective materials
await viewer.load('model.glb')
```

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

### Setup Tweakpane UI Plugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SwitchNodeBasePlugin.md

Use this to set up the Tweakpane UI plugin for managing switch nodes. Ensure TweakpaneUiPlugin is imported.

```typescript
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
ui.setupPluginUi(SwitchNodeBasePlugin)
```

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

### Start Development Watch Mode (plugins/)

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Navigate to the specific plugin directory and run this command to start development in watch mode for that package. This is useful for isolated plugin development.

```bash
cd to the plugin directory and run npm run dev
```

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

### Execute Test Initialization

Source: https://github.com/repalash/threepipe/blob/master/examples/reimport-duplicate-test/index.html

Starts and finishes the test execution using provided helper functions. This is the main entry point for the test script.

```javascript
import {_testFinish, _testStart} from 'threepipe'

_testStart()
init().finally(_testFinish)
```

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

### Basic AnisotropyPlugin Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/AnisotropyPlugin.md

Initialize ThreeViewer, add the AnisotropyPlugin, load a model, and enable anisotropy on a specific material with default settings.

```typescript
import {ThreeViewer, PhysicalMaterial} from 'threepipe'
import {AnisotropyPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true,
})

// Add anisotropy plugin
const anisotropy = viewer.addPluginSync(new AnisotropyPlugin())

// Load a model
const model = await viewer.load('model.glb')

// Enable anisotropy on a material
const material = viewer.scene.getObjectByName('BrushedMetal')?.material as PhysicalMaterial

// Enable with default settings
anisotropy.enableAnisotropy(material)

// Or enable with custom parameters
anisotropy.enableAnisotropy(
    material,
    null,        // texture map (optional)
    1.0,         // factor
    0.0,         // noise
    'CONSTANT'   // direction mode
)
```

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

### Start Development Watch Mode (src/)

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Run this command to start development in watch mode when making changes to the `src/` folder. This command automatically rebuilds upon file changes.

```bash
npm run dev
```

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

### Basic BloomPlugin Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/BloomPlugin.md

Initialize ThreeViewer and add the BloomPlugin. Configure basic intensity and threshold settings for the bloom effect.

```typescript
import {ThreeViewer} from 'threepipe'
import {BloomPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: false,
    maxHDRIntensity: 8, // Maximum HDR intensity for bloom
})

// Add the bloom plugin
const bloom = viewer.addPluginSync(new BloomPlugin())

// Configure basic settings
bloom.pass.intensity = 0.5
bloom.pass.threshold = 1.5
```

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

### Initialize ThreeViewer and SwitchNodeBasePlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SwitchNodeBasePlugin.md

Basic setup for initializing the ThreeViewer and adding the SwitchNodeBasePlugin. Ensure the canvas element exists in your HTML.

```typescript
import {ThreeViewer, SwitchNodeBasePlugin} from 'threepipe'

const viewer = new ThreeViewer({canvas: document.getElementById('canvas')})

const switcher = viewer.addPluginSync(new SwitchNodeBasePlugin())

// Load a model with switch node groups
await viewer.load('product_configurator.glb')
```

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

### Initialize ThreeViewer and MaterialConfigurator

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/MaterialConfiguratorBasePlugin.md

Basic setup for the MaterialConfiguratorBasePlugin. Requires importing necessary classes and initializing the ThreeViewer with a canvas element.

```typescript
import {ThreeViewer, MaterialConfiguratorBasePlugin} from 'threepipe'

const viewer = new ThreeViewer({canvas: document.getElementById('canvas')})

const configurator = viewer.addPluginSync(new MaterialConfiguratorBasePlugin())

// Load a model
await viewer.load('watch.glb')
```

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

### Threepipe React/TSX Setup

Source: https://github.com/repalash/threepipe/blob/master/examples/react-tsx-sample/index.html

This snippet shows the necessary imports for using Threepipe in a React/TSX project. Ensure you have React and Threepipe installed.

```tsx
import * as THREE from 'three';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function Scene() {
  return (
    <>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>
      <OrbitControls />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Scene />
    </Canvas>
  );
}
```

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

### Prepare Project

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

This command performs a comprehensive build, including the main project, examples, and plugins. It's a convenient way to ensure all parts of the project are built.

```bash
npm run prepare
```

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

### Import Statements for Simplify Modifier Plugin

Source: https://github.com/repalash/threepipe/blob/master/examples/simplify-modifier-plugin/index.html

Includes imports for the main three library, the SimplifyModifier from three.js examples, the threepipe library, and the threepipe plugin for tweakpane. Ensure these paths are correct for your project setup.

```javascript
{
  "imports": {
    "three": "./../../dist/index.mjs",
    "three/examples/jsm/modifiers/SimplifyModifier.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.160.1006/examples/jsm/modifiers/SimplifyModifier.js",
    "threepipe": "./../../dist/index.mjs",
    "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
  }
}
```

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

### Recommended Plugin Stack Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SSGIPlugin.md

Sets up the viewer with a recommended stack of plugins including GBufferPlugin, SSAAPlugin, VelocityBufferPlugin, TemporalAAPlugin, ProgressivePlugin, and BloomPlugin. The SSGI plugin is added before ground and environment plugins.

```typescript
import {
    ThreeViewer, 
    GBufferPlugin, 
    SSAAPlugin,
    BaseGroundPlugin,
    ProgressivePlugin
} from 'threepipe'
import {
    SSGIPlugin,
    VelocityBufferPlugin,
    TemporalAAPlugin,
    BloomPlugin
} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    plugins: [
        GBufferPlugin,           // Required for SSGI
        SSAAPlugin,              // Anti-aliasing
        new VelocityBufferPlugin(undefined, false), // Temporal stability
        TemporalAAPlugin,        // Temporal anti-aliasing
        ProgressivePlugin,       // Progressive quality
        BloomPlugin              // Post-processing
    ]
})

// Add SSGI before ground/environment plugins
const ssgi = viewer.addPluginSync(new SSGIPlugin())

// Add ground and other plugins after
viewer.addPluginSync(new BaseGroundPlugin())
```

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

### RootScene Initialization and Basic Usage

Source: https://github.com/repalash/threepipe/blob/master/website/guide/viewer-api.md

Demonstrates how to initialize the ThreeViewer and access the RootScene, along with basic operations like listing children and setting the background color.

```APIDOC
## RootScene Initialization and Basic Usage

### Description
This snippet shows how to initialize the ThreeViewer, access the RootScene, and perform basic operations such as logging the children of the model root and setting the background color.

### Method
N/A (Initialization and property access)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
const viewer = new ThreeViewer({...})
const scene = viewer.scene

// List all loaded objects in the model root
console.log(scene.modelRoot.children)

// Set the background color
scene.setBackgroundColor('#ffffff')
// or 
// scene.backgroundColor = new Color('#ffffff')
// or
// scene.backgroundColor.set('#ffffff')
// scene.onBackgroundChange() // this must be called when not using a setter or set function.
```

### Response
N/A
```

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

### Basic Setup for OutlinePlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/OutlinePlugin.md

Initialize the ThreeViewer with required plugins (PickingPlugin, GBufferPlugin) and add the OutlinePlugin. Load a model to enable outline functionality on object selection.

```typescript
import {ThreeViewer, PickingPlugin, GBufferPlugin} from 'threepipe'
import {OutlinePlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true,
    plugins: [PickingPlugin, GBufferPlugin] // Required dependencies
})

// Add outline plugin
const outline = viewer.addPluginSync(new OutlinePlugin())

// Load model
await viewer.load('model.glb')

// Click on objects to see outlines!
```

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

### Build All Docs and Website

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

This command builds both the API documentation and the project website. It's useful for generating all documentation-related assets.

```bash
npm run docs-all
```

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

### Install External threepipe Packages

Source: https://github.com/repalash/threepipe/blob/master/website/guide/loading-files.md

Provides npm commands to install external packages that extend threepipe's functionality. These packages need to be installed separately.

```bash
npm install @threepipe/plugin-gaussian-splatting
npm install @threepipe/plugin-3d-tiles-renderer
npm install @threepipe/plugin-assimpjs
```

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

### Correct Plugin Ordering Example

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SSGIPlugin.md

Demonstrates the correct order for adding the SSGI plugin before ground and environment plugins to ensure proper rendering. Adding ground first may result in a console warning.

```typescript
// Correct order
viewer.addPluginSync(new SSGIPlugin())
viewer.addPluginSync(new BaseGroundPlugin())

// If ground is added first, you'll see a console warning
```

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

### Initialize ThreeViewer and Load CMPT

Source: https://github.com/repalash/threepipe/blob/master/examples/cmpt-load/index.html

Sets up the ThreeViewer, adds necessary plugins, and loads a CMPT file. Ensure the canvas element exists and plugins are loaded synchronously.

```javascript
import {LoadingScreenPlugin, ThreeViewer, Vector3, Box3B} from 'threepipe'
import {CMPTLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer'

const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
viewer.addPluginsSync([
  CMPTLoadPlugin,
  LoadingScreenPlugin
])

async function init() {
  viewer.scene.backgroundColor.set(0)
  await viewer.setEnvironmentMap('https://samples.threepipe.org/minimal/venice_sunset_1k.hdr')
  const result2 = await viewer.load('https://raw.githubusercontent.com/CesiumGS/3d-tiles-tools/main/specs/data/contentTypes/content.cmpt', {
    autoCenter: true,
    autoScale: true,
  })
  console.log(result2)
  result2.setDirty()
  console.log(new Box3B(result2).getCenter(new Vector3()))
}

init().finally(() => {})
```

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

### Install @threepipe/plugin-svg-renderer

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-svg-renderer.md

Install the SVG renderer plugin using npm.

```bash
npm install @threepipe/plugin-svg-renderer
```

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

### Sample Plugin Implementation

Source: https://github.com/repalash/threepipe/blob/master/website/guide/plugin-system.md

A sample plugin demonstrating UI elements, serialization, event dispatching, and lifecycle methods. Use this as a template for creating custom plugins.

```typescript
@uiFolder("Sample Plugin") // This creates a folder in the Ui. (Supported by TweakpaneUiPlugin) 
export class SamplePlugin extends AViewerPluginSync<"sample-1" | "sample-2"> {
  // These are the list of events that this plugin can dispatch. 
  static readonly PluginType = "SamplePlugin"; // This is required for serialization and handling plugins. Also used in viewer.getPluginByType() 

  @uiToggle() // This creates a checkbox in the Ui. (Supported by TweakpaneUiPlugin) 
  @serialize() // Adds this property to the list of serializable. This is also used when serializing to glb in AssetExporter. 
  enabled = true;

  // A plugin can have custom properties. 

  @uiSlider("Some Number", [0, 100], 1) // Adds a slider to the Ui, with custom bounds and step size (Supported by TweakpaneUiPlugin) 
  @serialize("someNumber") 
  @onChange(SamplePlugin.prototype._updateParams) // this function will be called whenevr this value changes. 
  val1 = 0;

  // A plugin can have custom properties. 
  @uiInput("Some Text") // Adds a slider to the Ui, with custom bounds and step size (Supported by TweakpaneUiPlugin) 
  @onChange(SamplePlugin.prototype._updateParams) // this function will be called whenevr this value changes. 
  @serialize()
  val2 = "Hello";

  @uiButton("Print Counters") // Adds a button to the Ui. (Supported by TweakpaneUiPlugin) 
  public printValues = () => {
    console.log(this.val1, this.val2);
    this.dispatchEvent({ type: "sample-1", detail: { sample: this.val1 } }); // This will dispatch an event. 
  }

  constructor() {
    super();
    this._updateParams = this._updateParams.bind(this);
  }

  private _updateParams() {
    console.log("Parameters updated.");
    this.dispatchEvent({ type: "sample-2" }); // This will dispatch an event. 
  }

  onAdded(v: ThreeViewer): void {
    super.onAdded(v);

    // Do some initialization here. 
    this.val1 = 0;
    this.val2 = "Hello";

    v.addEventListener("preRender", this._preRender);
    v.addEventListener("postRender", this._postRender);
    v.addEventListener("preFrame", this._preFrame);
    v.addEventListener("postFrame", this._postFrame);

    this._viewer!.scene.addEventListener("addSceneObject", this._objectAdded); // this._viewer can also be used while this plugin is attached. 
  }

  onRemove(v: ThreeViewer): void {
    // remove dispose objects

    v.removeEventListener("preRender", this._preRender);
    v.removeEventListener("postRender", this._postRender);
    v.removeEventListener("preFrame", this._preFrame);

```

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

### Install @threepipe/plugin-blueprintjs

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-blueprintjs.md

Install the Blueprint.js UI plugin for ThreePipe using npm.

```bash
npm install @threepipe/plugin-blueprintjs
```

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

### Copy Environment Variables

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Copy the sample environment file to `.env` to set up required tokens and keys for certain examples. After copying, edit the `.env` file with your specific credentials.

```bash
cp examples/sample.env examples/.env
```

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

### Basic Setup for SSContactShadowsPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/SSContactShadowsPlugin.md

Initialize ThreeViewer with GBufferPlugin and BaseGroundPlugin, then add the SSContactShadowsPlugin. Enable stable noise and add a directional light with shadows. Load a model to see the effect.

```typescript
import {ThreeViewer, GBufferPlugin, BaseGroundPlugin} from 'threepipe'
import {SSContactShadowsPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas'),
    msaa: true,
    plugins: [GBufferPlugin, BaseGroundPlugin]
})

// Add contact shadows plugin
const sscs = viewer.addPluginSync(new SSContactShadowsPlugin())

// Enable stable noise for cleaner results
viewer.renderManager.stableNoise = true

// Add a directional light with shadows
const light = new DirectionalLight2(0xffffff, 4)
light.position.set(2, 2, 2)
light.castShadow = true
viewer.scene.addObject(light)

// Load model - contact shadows appear automatically
await viewer.load('model.glb')
```

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

### Install @threepipe/plugin-gltf-transform

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-gltf-transform.md

Install the plugin using npm. This command is used for both GLTFDracoExportPlugin and GLTFSpecGlossinessConverterPlugin.

```bash
npm install @threepipe/plugin-gltf-transform
```

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

### Install @threepipe/plugin-r3f

Source: https://github.com/repalash/threepipe/blob/master/README.md

Install the React Three Fiber plugin for ThreePipe using npm.

```bash
npm install @threepipe/plugin-r3f
```

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

### Basic Watch Visualization Setup

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/WatchHandsPlugin.md

Initialize the ThreeViewer and add the WatchHandsPlugin. Load a watch model with specifically named objects for automatic hand animation.

```typescript
import {ThreeViewer} from 'threepipe'
import {WatchHandsPlugin} from '@threepipe/webgi-plugins'

const viewer = new ThreeViewer({
    canvas: document.getElementById('canvas')
})

const watchHands = viewer.addPluginSync(new WatchHandsPlugin())

// Load watch model with objects named:
// - "hour_hand"
// - "minute_hand" 
// - "second_hand"
await viewer.load('watch.glb')

// That's it! Hands will animate automatically
```

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

### Install @threepipe/plugin-geometry-generator

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-geometry-generator.md

Install the package using npm. This package provides text geometry generation.

```bash
npm install @threepipe/plugin-geometry-generator
```

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

### Naming Scheme with Prefixes Example

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/WatchHandsPlugin.md

Example of a naming scheme that includes prefixes for watch hand objects.

```plaintext
mesh_hour_pointer
mesh_minute_pointer
mesh_second_pointer
```

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

### Install @threepipe/plugin-3d-tiles-renderer

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-3d-tiles-renderer.md

Install the plugin using npm. This package provides support for 3D Tiles rendering.

```bash
npm install @threepipe/plugin-3d-tiles-renderer
```

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

### Create New Threepipe Project

Source: https://github.com/repalash/threepipe/blob/master/README.md

Use this command to initialize a new Threepipe project. Follow the on-screen prompts to select a template and configure your project.

```bash
npm create threepipe@latest
```

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

### Descriptive Naming Scheme Example

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/WatchHandsPlugin.md

Example of a descriptive naming scheme for watch hand objects, enhancing clarity.

```plaintext
watch_hour_hand
watch_minute_hand
watch_second_hand
```

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

### Simple Naming Scheme Example

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/WatchHandsPlugin.md

Example of a basic naming scheme for watch hand objects in a 3D model.

```plaintext
hour
minute
second
```

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

### Build Website

Source: https://github.com/repalash/threepipe/blob/master/CONTRIBUTING.md

Use this command to build the static assets for the project's website. This command is part of the website deployment process.

```bash
npm run website:build
```

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

### Install @threepipe/plugins-extra-importers

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugins-extra-importers.md

Install the package using npm. This package provides plugins to add support for various file types.

```bash
npm install @threepipe/plugins-extra-importers
```

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

### Naming Scheme for Multiple Watches Example

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/WatchHandsPlugin.md

Example of a naming scheme to differentiate watch hands when multiple watches are present in the scene.

```plaintext
watch1_hour
watch1_minute
watch1_second
watch2_hour
watch2_minute
watch2_second
```

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

### Basic Setup for AnimationObjectPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/AnimationObjectPlugin.md

Initializes the ThreeViewer, adds AnimationObjectPlugin, TweakpaneUiPlugin, and TimelineUiPlugin. Sets timeline duration and enables looping. Configures UI to show plugin controls and animation triggers.

```typescript
import {ThreeViewer, AnimationObjectPlugin, PickingPlugin} from 'threepipe'
import {TweakpaneUiPlugin} from "@threepipe/plugin-tweakpane";
import {TimelineUiPlugin} from "@threepipe/plugin-timeline-ui";

const viewer = new ThreeViewer({canvas: document.getElementById('canvas'), plugins: [PickingPlugin]})

// Add the plugin
const animPlugin = viewer.addPluginSync(AnimationObjectPlugin)

// Set timeline duration for looping
viewer.timeline.endTime = 5 // 5 seconds
viewer.timeline.resetOnEnd = true  // Loop timeline

const uiPlugin = viewer.addPluginSync(TweakpaneUiPlugin)
uIPlugin.setupPluginUi(PickingPlugin)
uIPlugin.setupPluginUi(AnimationObjectPlugin)
        
// add the timeline ui to control animations
const timelineUiPlugin = viewer.addPluginSync(TimelineUiPlugin)
uIPlugin.setupPluginUi(TimelineUiPlugin)
// or show just the uiconfig triggers to create animations, and manage using custom UI.
timelineUiPlugin.showTriggers(true)
```

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

### Initialize and Enable HDRiGroundPlugin

Source: https://github.com/repalash/threepipe/blob/master/website/plugin/HDRiGroundPlugin.md

Demonstrates how to initialize the HDRiGroundPlugin, load an HDR environment map, set the scene background to match the environment, and enable the plugin. Ensure the background is set to 'environment' or the environment map itself before enabling.

```typescript
import {ThreeViewer, HDRiGroundPlugin} from 'threepipe'

const viewer = new ThreeViewer({...})

const hdriGround = viewer.addPluginSync(new HDRiGroundPlugin())

// Load an hdr environment map
await viewer.setEnvironmentMap('https://samples.threepipe.org/minimal/venice_sunset_1k.hdr')
// set background to environment
viewer.scene.background = 'environment'
// or 
// viewer.scene.background = viewer.scene.environemnt

// enable the plugin
hdriGround.enabled = true
```

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

### Install Tweakpane Editor Plugin

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-tweakpane-editor.md

Install the Tweakpane Editor Plugin using npm. This is the first step before integrating it into your ThreePipe project.

```bash
npm install @threepipe/plugin-tweakpane-editor
```

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

### Install Blend Importer Plugin

Source: https://github.com/repalash/threepipe/blob/master/website/package/plugin-blend-importer.md

Install the BlendImporterPlugin using npm. This package adds .blend file loading capabilities to ThreeViewer.

```bash
npm install @threepipe/plugin-blend-importer
```