aholo-viewer-demo

HTML

<script type="importmap">
  {
    "imports": {
      "@manycore/aholo-viewer": "https://unpkg.com/@manycore/aholo-viewer"
    }
  }
</script>

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 container & append
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 is -Y UP, open cv coordinate
    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();
    }

    // handle viewer.requestRender call
    viewer.requestRenderHandler = function () {
        requestAnimationFrame(render);
    };

  ...