印刻万物 TOP3DGS印刻万物TOP3DGS
Back to Learn

Learning Path

Web Viewing & Interaction

Running splats in the browser: renderers, engines, formats and productization

Level

Intermediate

Duration

约 3 小时

Audience

Front-end engineers and interactive designers embedding splats into web products

Prerequisites

  • Familiar with JavaScript/TypeScript and modern front-end tooling
  • Basic understanding of Three.js or similar 3D engines
  • Have a loadable .ply / .splat / .spz asset or URL ready

After this path you can

  • Map the lineage and positioning of mainstream web splat renderers
  • Embed scenes and control cameras in Three.js and PlayCanvas independently
  • Compare ply/splat/spz/sog trade-offs and convert between them
  • Design LOD and streaming strategies for million-splat scenes
  • Productize embeds via the SuperSplat and WebXR paths

Modules

6 modules, layered understanding

  1. Module 01Article
    25 分钟

    Web Renderers: From antimatter15 to Spark

    Web splat rendering started as a personal demo and forked into several routes within a few years. This module traces from antimatter15's minimal experiment to mainstream community renderers like Spark and GaussianSplats3D.

    What's inside

    1. 01antimatter15's minimal single-page demo
    2. 02Spark: an open-source project aiming for extensible architecture
    3. 03GaussianSplats3D within the Three.js ecosystem
    4. 04Selection framework: performance, ecosystem and maintenance velocity

    Related Terms

    WebGL / WebGPU APIRasterizationSplat Viewer

    Resources

  2. Module 02Tutorial
    35 分钟

    Three.js Integration: Scene Embedding & Control

    Stuffing splat assets into Three.js is far trickier than loading a GLB. This module uses GaussianSplats3D and gsplat as its base to walk through loader selection, coordinate alignment and camera control.

    What's inside

    1. 01Loader choice: built-in or community extension
    2. 02Coordinate alignment: common right-handed pitfalls
    3. 03OrbitControls and first-order camera handling
    4. 04Debugging: bounding-box visualization and FPS monitors

    Related Terms

    Differentiable RasterizationRasterizationgsplat library (CUDA splat utilities)Frames Per Second (FPS)

    Resources

  3. Module 03Tutorial
    30 分钟

    PlayCanvas & Babylon.js: Engine-level Support

    When renderers graduate to first-class engine citizens, DX changes qualitatively. This module compares the official splat support depth in PlayCanvas and Babylon.js, plus their differentiated stances on scene graph, physics and editors.

    What's inside

    1. 01PlayCanvas's native support for .ply / .splat
    2. 02Babylon.js SPZ loader working with PBR
    3. 03Composing splats with traditional meshes inside engines
    4. 04Choice framework: project scope and existing stack

    Related Terms

    .splat binary formatSPZ formatRasterization

    Resources

  4. Module 04Article
    30 分钟

    File Formats & Compression: ply / splat / spz / sog

    Splat file formats are like shipping crates: wrong choice penalizes you from the start. This module benchmarks ply's readability, splat's compactness, spz's compression and the experimental sog, then converts between them losslessly with splat-transform.

    What's inside

    1. 01ply: the readable but bulky elder format
    2. 02splat: the de-facto compact binary standard
    3. 03spz: Niantic's flagship compression pipeline
    4. 04sog experiments: the next stop for streaming

    Related Terms

    PLY file format.splat binary formatSPZ formatCompressed GSKSPLAT (.ksplat) format

    Resources

  5. Module 05Video
    30 分钟

    LOD & Streaming: Scheduling Millions of Splats

    The real challenge for million-splat scenes is not rendering — it's getting the browser to open at all. This module covers LOD tiling, frustum culling, streaming loaders, and structured approaches like Scaffold-GS that drag first-frame cost into the acceptable zone.

    What's inside

    1. 01LOD tiling and on-demand loading trade-offs
    2. 02Frustum and back-face culling implementations
    3. 03Why Scaffold-GS anchors are loader-friendly
    4. 04Luma Web Library performance on large scenes

    Related Terms

    Scaffold-GSAnchor PointCompressed GSGaussian / splat count

    Resources

  6. Module 06Tutorial
    30 分钟

    Editor Embedding & Productization: SuperSplat / WebXR

    The last mile of productizing splats lies in editors and cross-device delivery. This module demonstrates final cleanup in SuperSplat, hooking scenes into WebXR, and lightweight productization templates such as StorySplat.

    What's inside

    1. 01SuperSplat shortcuts and export settings
    2. 02WebXR integration: Quest vs Vision Pro reality gap
    3. 03StorySplat: wrapping scenes into shareable links
    4. 04Compatibility checklist for web and WeChat mini-programs

    Related Terms

    SuperSplatSpatial ComputingSplat Viewer

    Resources

Put it to work

Take one of your trained .ply files, pick an engine stack from this path, ship it as a shareable link, and pin it on your portfolio.

Browse Tools Index