### Install Viewer Dependencies

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/viewer.md

Install the necessary packages for @manycore/aholo-splat-transform and @manycore/aholo-splat-dev-server globally.

```bash
npm install @manycore/aholo-splat-transform -g
npm install @manycore/aholo-splat-dev-server -g
```

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

### Preview Production Build

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Starts a local server to preview the production build of the Aholo Viewer.

```bash
pnpm preview
```

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

### Run Development Server

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Starts the development server for the Aholo Viewer project.

```bash
pnpm dev
```

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

### Install Dependencies with npm

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/getting-started.md

Install the Aholo-Viewer package and Vite for development. TypeScript is recommended for better development experience.

```bash
npm install --save @manycore/aholo-viewer
npm install --save-dev vite typescript # TypeScript is recommended.
```

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

### Install Dependencies

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Installs all project dependencies using pnpm.

```bash
pnpm install
```

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

### Start Vite Development Server

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/getting-started.md

Run this command in your project directory to start the Vite development server. Access your application via the local URL provided in the terminal output.

```bash
npx vite
```

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

### Example File Structure

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Examples are stored in the Astro content tree with paired metadata (JSON) and source (TypeScript) files. The JSON file contains metadata, while the TypeScript file holds the code.

```text
website/src/content/examples/
  basic-scene.json
  basic-scene.ts
```

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

### Splat Dev Server Startup Output

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/viewer.md

Example output indicating the successful startup of the splat-dev-server, showing host, port, root directory, and base URL.

```bash
========================================
Splat dev server started
Host: 127.0.0.1:3000
Root: ./chunk-lod
Base URL: http://127.0.0.1:3000
========================================
```

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

### Install Splat-Dev-Server Globally

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-dev-server/README.md

Installs the splat-dev-server package globally using npm. Ensure you have Node.js version 22.22.1 or higher installed.

```bash
npm install @manycore/aholo-splat-dev-server -g
```

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

### Run Splat-Dev-Server

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-dev-server/README.md

Starts the splat-dev-server. It requires a directory containing 3DGS files as an argument. You can specify the address and port to listen on.

```bash
splat-dev-server [options] <dir>
```

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

### Install Splat Transform Globally

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Installs the splat-transform package globally using npm. Ensure Node.js version 22.22.1 or higher is installed.

```bash
npm install @manycore/aholo-splat-transform -g
```

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

### Pipeline Descriptor Example

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Defines a sample pipeline configuration for splat-transform, including reading, LOD generation, and writing tasks.

```json
{
    "version": 1,
    "tasks": [
        {
            "id": "0",
            "type": "Read",
            "config": { "inputs": ["a.ply"], "output": "cache0" }
        },
        {
            "id": "1",
            "type": "AutoChunkLod",
            "config": { "input": "cache0", "output": "cache0", "type": "spz" }
        },
        {
            "id": "2",
            "type": "Write",
            "config": { "input": "cache0", "output": "a-lod" }
        }
    ]
}
```

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

### Dependency Direction Example

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Visualizes the flow of dependencies between different parts of the Aholo Viewer project, including external modules, workspace packages, scripts, and the website.

```text
external/egs-core workspace packages
  -> scripts/prepare-egs-types.mjs
  -> renderer type checks and declaration bundling

packages/renderer/src/index.ts
  -> scripts/build-package.mjs
  -> packages/renderer/dist
  -> website Playground runtime, examples, and type hints

packages/renderer/src/index.ts
  -> scripts/generate-api-docs.mjs
  -> website/.generated/api/
  -> website pages

```

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

### Playground Renderer Adapter

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

This file serves as the boundary for the playground, handling transpiled examples, preview lifecycle, and camera control.

```typescript
website/src/playground/renderer-adapter.ts
```

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

### Navigation Seed Structure

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Sets the starting center point for navigation. Used in conjunction with navCapsule for navigation simplification.

```typescript
{
  x: number,
  y: number,
  z: number
}
```

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

### Build Project

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Builds the Aholo Viewer project for production.

```bash
pnpm build
```

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

### Splat-Dev-Server Options

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-dev-server/README.md

Lists available options for the splat-dev-server command, including help, version, address, and port.

```bash
Options:
      --help     Show help                                             [boolean]
      --version  Show version number                                   [boolean]
  -a, --address  Address to listen               [string] [default: "127.0.0.1"]
  -p, --port     Port to listen                         [number] [default: 3000]
```

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

### Check Renderer API Release

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/ai/vibe-coding-guide.md

Execute this command to check the renderer's API for release readiness. Ensures API integrity.

```bash
pnpm.cmd check
```

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

### Build Website Package

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Builds only the website package within the monorepo.

```bash
pnpm build:website
```

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

### Build Package for Release

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/ai/vibe-coding-guide.md

Use this command to build the package for release. This is essential for preparing distribution artifacts.

```bash
pnpm.cmd build
```

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

### Create Aholo-Viewer Scene with JavaScript

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/getting-started.md

This script initializes an Aholo-Viewer, loads a splat file, configures the camera and scene settings, and sets up a render loop. Ensure the container element is appended to the document body.

```javascript
import {
    createViewer,
    setViewerConfig,
    PerspectiveCamera,
    BackgroundMode,
    Vector3,
    Color,
    SplatLoader,
    SplatUtils,
} from '@manycore/aholo-viewer';

const SPLAT_URL = 'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/bear/bear.3d71a266.sog';
// Create the container and attach it to the page.
const container = document.createElement('div');
container.style.width = '500px';
container.style.height = '500px';
container.style.display = 'block';
document.body.appendChild(container);

async function createScene() {
    const viewer = createViewer('example-viewer', container, {});
    const camera = new PerspectiveCamera(60, 1, 0.1, 2000);

    const resp = await fetch(SPLAT_URL);
    const buffer = await resp.arrayBuffer();
    const data = await SplatLoader.parseSplatData(
        SplatLoader.SplatFileType.SOG,
        new Uint8Array(buffer),
        SplatLoader.SplatPackType.Compressed,
    );
    const splat = await SplatUtils.createSplat(data);

    // The splat uses -Y up in OpenCV coordinates.
    camera.up.set(0, -1, 0);
    camera.position.set(-1.5, -0.5, 0);
    camera.lookAt(new Vector3(0, 0, 0));

    viewer.getScene().add(splat);
    viewer.setCamera(camera);
    setViewerConfig(viewer, {
        pipeline: {
            Background: {
                background: {
                    active: BackgroundMode.BasicBackground,
                    basic: {
                        color: new Color(0, 0, 0),
                    },
                },
                ground: {
                    enabled: false,
                },
            },
            Splatting: {
                enabled: true,
            },
            TAA: {
                enabled: false,
            },
        },
    });

    function render() {
        viewer.render();
    }

    // Render again when viewer.requestRender is called.
    viewer.requestRenderHandler = function () {
        requestAnimationFrame(render);
    };

    requestAnimationFrame(render);
}

createScene();
```

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

### Generate API Documentation

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Generates API documentation from the renderer source code.

```bash
pnpm docs:api
```

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

### Check Website Styles

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/ai/vibe-coding-guide.md

Run this command to check website styles. It's useful for validating visual consistency.

```bash
pnpm.cmd check:website
```

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

### Build Renderer Package

Source: https://github.com/manycoretech/aholo-viewer/blob/master/packages/renderer/README.md

Builds the renderer source package from the repository root. This command generates the necessary runtime files and declaration types.

```bash
pnpm build:renderer
```

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

### Display Splat Transform Help

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Displays the help information for the splat-transform command, showing available options and commands.

```bash
splat-transform --help
```

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

### Configure Quality First Preset

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/3dgs-preset-config.md

Configures the parser and viewer for the 'Quality First' preset. This setting balances image quality with acceptable device performance.

```typescript
// set parser config
const splatData = await SplatLoader.parseSplatData(
    // file type and data
    splatFileType,
    content,
    // compress config
    SplatLoader.SplatPackType.Compressed,
);
const splat = await SplatUtils.createSplat(splatData);
splat.autoFreeResourceOnGpuPacked = true;
viewer.getScene().add(splat);

// update viewer config
setViewerConfig(viewer, {
    pipeline: {
        Splatting: {
            pack: {
                highPrecisionEnabled: true,
                cameraRelativeEnabled: false,
            },
        },
    },
});
```

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

### Build Package Script

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

This script discovers runtime packages for esbuild aliases.

```javascript
build-package.mjs
```

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

### CLI Mode: Create Format Conversion

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Converts 3DGS files between different formats using the CLI.

```bash
splat-transform create <input> <output> # Convert 3DGS formats.
```

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

### Root Command Graph: pnpm build

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Details the command execution flow for 'pnpm build' at the root of the Aholo Viewer workspace.

```text
pnpm build
  -> build:website
  -> .egs:types
  -> .renderer:build
  -> .docs:api
  -> .site:build

```

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

### Check Website Package

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Performs checks specifically on the website package.

```bash
pnpm check:website
```

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

### Execute Task Pipeline

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Executes a task pipeline using a configuration file. The 'path' argument specifies the location of the pipeline configuration file.

```bash
splat-transform <path>
```

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

### Configure Max Quality Preset

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/3dgs-preset-config.md

Sets up the parser and viewer for the 'Max Quality' preset. This configuration prioritizes image quality and high precision for rendering.

```typescript
// set parser config
const splatData = await SplatLoader.parseSplatData(
    // file type and data
    splatFileType,
    content,
    // compress config
    SplatLoader.SplatPackType.Compressed,
);
const splat = await SplatUtils.createSplat(splatData);
splat.autoFreeResourceOnGpuPacked = true;
viewer.getScene().add(splat);

// update viewer config
setViewerConfig(viewer, {
    pipeline: {
        Splatting: {
            pack: {
                highPrecisionEnabled: true,
                cameraRelativeEnabled: false,
            },
            raster: {
                normalizedFalloff: true,
                detailCullingThreshold: 0,
            },
            sort: {
                highPrecisionEnabled: true,
            },
            composite: {
                enabled: true,
                highPrecisionEnabled: true,
            },
        },
    },
});
```

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

### Clone Repository with Submodules

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Use this command to clone the Aholo Viewer repository, ensuring all submodules are included.

```bash
git clone --recurse-submodules https://github.com/manycoretech/aholo-viewer.git
```

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

### Check Renderer Package

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Performs checks specifically on the renderer package.

```bash
pnpm check:renderer
```

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

### Workspace Layout

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Illustrates the directory structure of the Aholo Viewer project, showing the organization of packages, scripts, and website assets.

```text
./
  package.json
  pnpm-workspace.yaml
  AGENTS.md

  website/
    package.json
    astro.config.mjs
    .generated/
      api/
    src/
      components/
      config/
      content/
      i18n/
      layouts/
      pages/
      playground/
      styles/
      utils/

  packages/
    renderer/
      package.json
      tsconfig.json
      src/
      dist/

  scripts/
    build-package.mjs
    check-content.mjs
    clean-package.mjs
    ensure-submodules.mjs
    package-utils.mjs
    prepare-egs-types.mjs
    generate-api-docs.mjs

  docs/
    architecture.md
    ai/
      vibe-coding-guide.md

  external/
    egs-core/
    splat-transform/

```

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

### Check Project Content

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Performs content checks on the project, such as locale parity and image references.

```bash
pnpm check:content
```

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

### Generate Loading-LOD for Gaussian Splat File

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Generates a loading-lod for a Gaussian splat file. Requires input and output file paths and accepts additional options.

```bash
splat-transform lod:loading [options] <input> <output>
```

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

### Root Command Graph: pnpm check

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Illustrates the sequence of operations performed when executing 'pnpm check' in the Aholo Viewer project.

```text
pnpm check
  -> .egs:types
  -> .renderer:check
  -> .renderer:build
  -> .docs:api
  -> check:content
  -> .site:check

```

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

### Renderer Build Outputs

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

The renderer's build outputs include the bundled public runtime, public declarations, and a bundled worker.

```text
packages/renderer/dist/
    index.js: bundled public runtime.
    index.d.ts: bundled public declarations, including upstream EGS types used by exported symbols.
    splat-worker.js: bundled worker referenced by the runtime.
```

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

### CLI Mode: Auto LOD Simplification

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Simplifies 3DGS data to a specified ratio using the CLI.

```bash
splat-transform lod:auto --ratio <ratio> <input> <output> # Simplify 3DGS data to the specified ratio [0-1].
```

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

### Run Project Checks

Source: https://github.com/manycoretech/aholo-viewer/blob/master/README.md

Executes all project checks, including code linting and tests.

```bash
pnpm check
```

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

### Prepare EGS Types Script

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

This script discovers and prepares EGS declarations for use in the project.

```javascript
prepare-egs-types.mjs
```

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

### Generate Flex-LOD for Gaussian Splat File

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Generates a flex-lod for a Gaussian splat file. Requires input and output file paths and accepts additional options.

```bash
splat-transform lod:flex [options] <input> <output>
```

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

### Root Command Graph: pnpm dev

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Shows the execution order of commands when running 'pnpm dev' at the root of the Aholo Viewer workspace.

```text
pnpm dev
  -> .egs:types
  -> .renderer:build
  -> .docs:api
  -> check:content
  -> .site:dev

```

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

### Merge LOD Options

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/viewer.md

Command-line options for the merge-lod command, specifying input meta files and the output directory.

```bash
Options:
     --help     Show help                                             [boolean]
     --version  Show version number                                   [boolean]
 -i, --input    Input lod meta files(lod-meta.json)          [array] [required]
 -o, --output   Output directory                            [string] [required]
```

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

### HTML Structure for Aholo-Viewer App

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/getting-started.md

Basic HTML file to serve as the entry point for the Aholo-Viewer application. It includes a title and a script tag to load the main JavaScript file.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>My first aholo viewer app</title>
    </head>
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>
```

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

### Generate Auto-Chunk-LOD for Gaussian Splat File

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Generates an auto-chunk-lod for a Gaussian splat file. Requires input and output file paths and accepts additional options.

```bash
splat-transform lod:auto-chunk [options] <input> <output>
```

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

### Set Viewer Configuration

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/config.md

Use this function to set the default rendering configuration for a viewer or viewport. It takes the viewer/viewport context and the configuration object as arguments.

```typescript
function setViewerConfig(ctx: Viewer | Viewport, config: IViewerConfig);
```

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

### Website Style Layers

Source: https://github.com/manycoretech/aholo-viewer/blob/master/docs/architecture.md

Website styles are separated by responsibility to manage global changes effectively. Each file targets specific styling concerns.

```text
website/src/styles/
  theme.css       Design tokens: color, type, radii, shadows, layout widths
  global.css      Reset, base document styles, buttons, code, simple primitives
  site.css        Header, language/theme controls, listing-page shell
  home.css        Immersive home page and home-only interaction states
  examples.css    Examples list and example detail viewer chrome
  docs.css        Manual/API documentation layout and prose
  playground.css  Playground workspace, editor, preview, inspector chrome
```

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

### Set Viewer Configuration

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/3dgs-preset-config.md

Use `setViewerConfig` to adjust pipeline parameters for custom rendering. This is useful for fine-tuning presets that do not perfectly match your scene's requirements.

```typescript
setViewerConfig(viewer, {
    pipeline: {
        Splatting: {
            // ... options..
        },
    },
});
```

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

### Modify and Write Meshes

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Apply modifications to input meshes and write the transformed output to a new file.

```json
{
    "version": 1,
    "tasks": [
        {
            "id": "0",
            "type": "Read",
            "config": { "inputs": ["a.ply", "b.ply"], "output": "cache0" }
        },
        {
            "id": "1",
            "type": "Modify",
            "config": { "input": "cache0", "output": "cache0", "modifyPaths": ["a.json", "b.json"] }
        },
        {
            "id": "2",
            "type": "Write",
            "config": { "input": "cache0", "output": "c.spz" }
        }
    ]
}
```

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

### Balanced 3DGS Preset Configuration

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/3dgs-preset-config.md

Configures the 3DGS pipeline for a balanced approach between visual quality and performance. Uses SuperCompressed splat data.

```typescript
// set parser config
const splatData = await SplatLoader.parseSplatData(
    // file type and data
    splatFileType,
    content,
    // compress config
    SplatLoader.SplatPackType.SuperCompressed,
);
const splat = await SplatUtils.createSplat(splatData);
viewer.getScene().add(splat);

// update viewer config
setViewerConfig(viewer, {
    pipeline: {
        Splatting: {},
    },
});
```

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

### Pipeline Mode Execution

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Executes a 3DGS processing pipeline defined in a JSON file.

```bash
splat-transform pipeline.json
```

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

### Generate Auto-LOD for Gaussian Splat File

Source: https://github.com/manycoretech/aholo-viewer/blob/master/external/splat-transform/README.md

Generates an auto-lod for a Gaussian splat file. Requires input and output file paths and accepts additional options.

```bash
splat-transform lod:auto [options] <input> <output>
```

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

### AutoLod

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Generates fused Gaussian output with automatic Level of Detail (LOD) generation.

```APIDOC
## AutoLod

### Description
Generates fused Gaussian output.

### Parameters
#### Path Parameters
- **input** (string) - Required - Resource key to read.
- **output** (string) - Required - Resource key to write.
- **counts** (number) - Optional (Default: Infinity) - Maximum retained count.
- **ratio** (number) - Optional (Default: 0.3) - Maximum retained ratio. Must be between 0 and 1.

### Request Example
```json
{
  "input": "mySplatData",
  "output": "fusedOutput",
  "counts": 1000000,
  "ratio": 0.5
}
```

### Response
#### Success Response (200)
- **Status message** - Confirmation of successful LOD generation.

### Response Example
```json
{
  "message": "Fused Gaussian output generated successfully."
}
```
```

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

### Performance First 3DGS Preset Configuration

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/3dgs-preset-config.md

Optimizes the 3DGS pipeline for performance, disabling camera-relative rendering and setting a maximum standard deviation for rasterization. Uses SuperCompressed splat data.

```typescript
// set parser config
const splatData = await SplatLoader.parseSplatData(
    // file type and data
    splatFileType,
    content,
    // compress config
    SplatLoader.SplatPackType.SuperCompressed,
);
const splat = await SplatUtils.createSplat(splatData);
splat.autoFreeResourceOnGpuPacked = true;
viewer.getScene().add(splat);

// update viewer config
setViewerConfig(viewer, {
    pipeline: {
        Splatting: {
            pack: {
                cameraRelativeEnabled: false,
            },
            raster: {
                maxStdDev: Math.sqrt(5),
            },
        },
    },
});
```

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

### Write SplatData to Disk

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/splat-transform.md

Writes a SplatData object to disk in the specified format. Requires input resource key and output path. Compression level and Morton sorting can be configured.

```splat-transform
Write(
  input: string,
  output: string,
  compressLevel?: number,
  enableMortonSort?: boolean
)
```

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

### Basic Playground Code Template

Source: https://github.com/manycoretech/aholo-viewer/blob/master/website/src/content/manual/en-US/playground.md

This is the fundamental code structure for using the Playground. It includes necessary imports and a default runner function for rendering and interaction.

```typescript
import { type Viewer } from '@manycore/aholo-viewer';
import type { RenderRuntime } from '../../client/render-runtime';

// typing of `RenderRuntime`
// interface RenderRuntime {
//     // core renderer
//     renderer: RuntimeRenderer;
//     // camera interaction controller
//     control: CameraControl;
//     // loading fame controller
//     loading: RuntimeLoadingController;
//     // a config panel component base on tweakpane
//     configPanel: RuntimeConfigPanel;
//     // indexed db cache storage
//     indexedDB: RuntimeIndexedDBStorage;
//     // abort signal dispatcher
//     signal: AbortSignal;
// }

export default async function runner({ renderer, control, loading, configPanel, indexedDB, signal }: RenderRuntime) {
    const const { scene, viewer } = renderer;
    // do work with scene & viewer
    // ....
    // use `throwIfAborted(signal)` to check whether abort requested
    // use `loading.show(info)` to update the loading to what ever you want to indicate which step is running

    // config frame call back, return a boolean to indicate whether anything updated
    renderer.frame(({ delta }) => {
        const cameraUpdated = control.update(delta);
        let animationUpdated = false;
        // update animation here...
        return cameraUpdated || animationUpdated;
    });

    // request next frame render
    renderer.render();
    // hide loading frame
    loading.hide();
}

function throwIfAborted(signal: AbortSignal) {
    if (signal.aborted) {
        throw new DOMException('The splatting basic sample load was aborted.', 'AbortError');
    }
}
```