## Introduction SparkJS is an advanced 3D Gaussian Splatting renderer designed specifically for THREE.js, the most widely used JavaScript 3D engine on the web. With nearly 2,000 GitHub stars and a freshly released 2.0 Developer Preview, SparkJS is positioned as the go-to library for developers who want to bring real-time Gaussian splat rendering to web browsers. The MIT-licensed project enables rendering of photorealistic 3D scenes captured through Gaussian splatting techniques directly in any modern browser, targeting 98%+ WebGL2 device coverage. 3D Gaussian Splatting (3DGS) has emerged as a breakthrough in neural scene representation, offering faster rendering and more intuitive editing compared to Neural Radiance Fields (NeRFs). However, deploying 3DGS content on the web has been challenging due to performance constraints and format fragmentation. SparkJS addresses these problems by providing a production-quality renderer that integrates seamlessly with the THREE.js ecosystem. ## Architecture and Design SparkJS follows a layered architecture that bridges Gaussian splat data with the THREE.js rendering pipeline: | Layer | Technology | Purpose | |-------|-----------|--------| | Core Renderer | Rust/WASM | High-performance splat sorting and processing | | THREE.js Bridge | TypeScript | Scene graph integration, camera sync, pipeline fusion | | Shader System | GLSL/WebGL2 | GPU-accelerated splat rasterization | | Format Loaders | TypeScript | Multi-format splat file parsing | | LoD System (2.0) | TypeScript/WASM | Level-of-detail streaming for large worlds | The core rendering logic is written in Rust and compiled to WebAssembly, which gives SparkJS its performance edge. Splat sorting, one of the most computationally expensive operations in Gaussian splatting, runs at near-native speed through this WASM bridge. The TypeScript layer handles THREE.js integration, ensuring splat objects behave like standard THREE.js meshes with proper transforms, raycasting, and scene graph participation. A key architectural decision is the fusion of splat and mesh rendering. SparkJS does not create a separate rendering pass for splats. Instead, it integrates into the existing THREE.js rendering pipeline, allowing splats and traditional 3D meshes to coexist with correct depth ordering and occlusion. ## Key Capabilities **Multi-Format Support**: SparkJS supports all major splat file formats including PLY (standard and compressed), SPZ (Niantic), SPLAT (antimatter15), KSPLAT (GaussianSplats3D), and SOG (PlayCanvas). This eliminates vendor lock-in and allows developers to use splats from any capture pipeline. **Cross-Device Performance**: The renderer is optimized for low-powered mobile devices, not just desktop GPUs. By targeting WebGL2 rather than WebGPU, SparkJS achieves 98%+ device compatibility while maintaining smooth frame rates on phones and tablets. **Dynamic Splat Editing**: Unlike static viewers, SparkJS supports real-time color editing, displacement mapping, and skeletal animation of Gaussian splats. A shader graph system allows developers to create and edit splat properties directly on the GPU. **Multi-Viewport Rendering**: Multiple camera viewpoints can render simultaneously, enabling split-screen views, minimap overlays, or surveillance-style multi-camera displays. **Spark 2.0 Streaming LoD**: The 2.0 preview introduces a Level-of-Detail system that enables streaming of massive 3D Gaussian Splatting worlds. Rather than loading entire scenes at once, the system progressively loads detail as the camera moves, making it feasible to render city-scale environments in a browser. **Multiple Splat Composition**: Several splat objects can be rendered together with correct inter-object sorting, allowing complex scenes assembled from multiple captures. ## Developer Integration SparkJS is distributed via npm and CDN, making integration straightforward: ```javascript import { SplatMesh } from "@sparkjsdev/spark"; const splat = new SplatMesh({ url: "scene.spz" }); scene.add(splat); ``` The API mirrors THREE.js conventions. A `SplatMesh` behaves like any other `THREE.Object3D`: it can be positioned, rotated, scaled, and added to the scene graph. This means existing THREE.js knowledge transfers directly, and splats can be combined with traditional meshes, lights, and post-processing effects. For the 2.0 LoD system, developers define tile maps and quality levels, and the renderer handles progressive loading automatically. The migration from 1.x to 2.0 is documented with a dedicated guide, and the API is mostly backward compatible. ## Limitations SparkJS targets WebGL2, which means it cannot leverage the more advanced compute shader capabilities of WebGPU for splat sorting. As WebGPU adoption grows, this may become a performance ceiling for very large scenes. The Rust/WASM build step adds complexity to the development workflow compared to pure JavaScript libraries. Splat editing features, while powerful, require understanding of the shader graph system which has a learning curve. The 2.0 LoD system is still in developer preview and may have breaking changes before general availability. Community ecosystem and plugins are still nascent compared to more established THREE.js extensions. ## Who Should Use This SparkJS is ideal for web developers building immersive 3D experiences who want to incorporate photorealistic Gaussian splat content. Real estate virtual tours, cultural heritage preservation, e-commerce product visualization, and gaming studios exploring web-based 3DGS will find SparkJS immediately useful. Teams already using THREE.js benefit the most, as the integration is seamless. The 2.0 LoD streaming opens up possibilities for mapping and urban visualization teams working with large-scale captures. Front-end developers curious about neural 3D representations can use SparkJS as an accessible entry point without needing GPU infrastructure or Python expertise.