3D Gaussian Splatting via WebGPU: Replacing glTF Meshes in Production

1. Executive Summary

For digital engineering teams operating in luxury ecommerce, high-fidelity architectural visualization, and digital museum archiving, photorealism is non-negotiable. Historically, delivering this fidelity over a browser required traditional photogrammetry: capturing physical assets, decimating millions of polygons into lightweight meshes, baking ambient lighting into massive 8K texture maps, and exporting to a `.gltf` or `.glb` container.

This workflow is fundamentally flawed. Baked lighting destroys dynamic view-dependent reflections, and decimated meshes sacrifice intricate geometric edge data. The arrival of 3D Gaussian Splatting (3DGS) represents the highest-traffic opportunity in modern web 3D engineering, entirely sidestepping polygons in favor of millions of colored, semi-transparent ellipsoids derived from neural radiance fields.

While Python-based desktop viewers have flourished, real-time commercial web delivery remains largely undocumented. This engineering blueprint establishes the WHD Studio production standard for deploying WebGPU 3D Gaussian Splatting, managing real-time depth sorting via compute shaders, executing hybrid glTF compositing, and streaming `.splat` formats under strict bandwidth budgets.

2. Gaussian Splatting vs. glTF Web Performance

The contrast between rendering standard glTF geometry and 3D Gaussian Splats requires a complete paradigm shift in how we understand graphics payloads.

• The glTF Polygon Bottleneck: A glTF asset relies on fixed geometric topologies (vertices and indices). To mimic reality, developers must aggressively fake lighting using PBR materials, heavy normal maps, and HDR environment maps. Even highly optimized, a photorealistic product glTF easily exceeds 30MB of texture data and taxes the GPU rasterizer.
• The 3DGS Radiance Field: Gaussian Splatting utilizes no polygons. Instead, an asset is composed of millions of 3D "splats" (ellipsoids). Each splat carries position, opacity, scale, rotation (quaternions), and Spherical Harmonics (SH) coefficients. Because SH natively encodes light direction, the asset perfectly captures complex refractions, specular highlights, and micro-details based strictly on the camera's viewing angle.

In a web environment, 3DGS offers absolute photorealism, but introduces a massive new bottleneck: Alpha Blending and Depth Sorting.

3. The Depth Sort Crisis & WebGPU Compute Pipelines

Because Gaussian splats are semi-transparent ellipsoids, they must be alpha-blended. In computer graphics, transparent objects must be rendered strictly from back to front relative to the camera. If you have 2 million splats, you must calculate their distance to the camera and sort a 2-million-index array on every single frame (60 times a second).

If you attempt this in JavaScript on the CPU, the main thread will lock instantly, crashing the browser tab. Legacy WebGL 2.0 implementations attempt to alleviate this using Web Workers, but the PCIe bus transfer latency between CPU and GPU remains a fatal choke point.

The WebGPU Compute Solution: To achieve real-time gaussian splats in Three.js, sorting must occur entirely in VRAM. Enterprise architectures leverage WebGPU Compute Shaders utilizing parallel Radix Sort or Bitonic Sort algorithms.

// 2026 Standard: TSL Radix Sort Dispatch for 3DGS
import { tslFn, uniform, instanceIndex, storageBuffer, vec3, mat4 } from 'three/nodes';
import { WebGPURenderer } from 'three/webgpu';

// GPU Buffers for Splat Positions and Depth Indices
const splatPositions = storageBuffer(splatData, 'vec3', splatCount);
const sortIndices = storageBuffer(indexArray, 'uint', splatCount);
const cameraViewMatrix = uniform(mat4());

// Radix Sort Pass 1: Compute Distances
const computeDepth = tslFn(() => {
  const pos = splatPositions.element(instanceIndex);

  // Transform splat position by camera view matrix
  const viewPos = cameraViewMatrix.mul(vec4(pos, 1.0));

  // Encode depth into a sortable 32-bit unsigned integer key
  const depthKey = floatToUintBits(viewPos.z);

  // Write to GPU Radix Key Buffer (omitted for brevity)
});

// The GPU radically outperforms CPU Web Workers for 60FPS sorting
const depthComputeNode = computeDepth().compute(splatCount);

By executing a highly optimized Radford-style radix sort entirely via WebGPU compute pipelines, the CPU simply passes the updated camera matrix. The GPU sorts millions of splats internally in sub-2ms timeframes, achieving fluid 60+ FPS navigation even on mobile chipsets.

4. Streaming Optimization: The 15MB Budget

Raw 3DGS `.ply` files generated by training pipelines (like Luma AI or Polycam) routinely exceed 500MB, rendering them useless for commercial web delivery. To integrate these assets into a luxury ecommerce storefront, engineering teams must aggressively compress the payload to meet a strict 15MB web budget.

Quantization and the `.splat` Format

Instead of serving raw `.ply` point clouds, production systems convert assets to binary `.splat` formats using severe data quantization:

• Position and Scale (Float16): Dropping 32-bit floats to 16-bit floats for spatial coordinates halves the memory footprint with zero perceptible visual loss in standard product-scale bounding boxes.
• Spherical Harmonics (Int8): By truncating the higher-order SH bands (which define complex reflections) and quantizing the base color coefficients to 8-bit integers, the color payload drops by 75%.
• Chunked HTTP Streaming: Utilizing the native Streams API (ReadableStream), the WebGPU backend can progressively ingest and rasterize splat chunks. The user sees a fully formed (albeit slightly low-res) 3D asset in under 200ms, which refines into flawless photorealism as the remaining binary chunks stream into the GPU buffer.

5. Compute-Driven Frustum Culling

Sorting 2 million splats is mathematically trivial for an Apple M3 Max, but forcing a mobile GPU to calculate and sort geometry that is positioned entirely behind the camera is a critical architectural failure that triggers thermal throttling.

Before the Radix Sort pipeline executes, enterprise workflows inject a Compute Frustum Culling pre-pass. This TSL compute node calculates the dot product of the camera's view frustum against the bounding radius of each individual splat in parallel.

If a splat falls outside the camera's field of view, its depth index is forcefully written as `0` or flagged as inactive. This effectively culls up to 60% of the splat array from the subsequent sorting and rasterization passes, rescuing mobile frame rates and saving precious battery life without degrading visible quality.

6. Hybrid Compositing: Merging glTF with Radiance Fields

The holy grail of enterprise 3D is hybrid compositing. A luxury automotive client rarely needs *just* a Gaussian Splat of a showroom; they need an interactive, customizable 3D product (like a rigged glTF car chassis with interchangeable paint colors) placed seamlessly *inside* the photorealistic Gaussian Splat environment.

The challenge is depth occlusion. If a glTF mesh and a Gaussian Splat share the same scene, they will inherently suffer from Z-fighting, because splats are processed via custom vertex shaders that don't traditionally write to standard depth buffers in the same way solid polygons do.

The Depth-Buffer Pass Strategy

To achieve flawless intersection between traditional geometry and 3DGS, we manipulate the WebGPU `depthTexture`:

1. Pass 1 (glTF Rasterization): The standard Three.js glTF meshes are rendered first, actively writing their geometric bounds to the WebGPU depth buffer.
2. Pass 2 (3DGS Rasterization): The Gaussian Splat shader executes. For every splat fragment processed, the shader reads the existing depth buffer from Pass 1. If the splat's depth is greater than the glTF's depth at that exact screen pixel, the splat fragment is discarded (`discard;`), allowing the glTF mesh to physically occlude the radiance field.

7. Studio Verdict & Commercial Strategy

The transition away from modeled polygonal meshes toward neural radiance fields is not an experimental trend; it is the definitive future of digital object representation. High-ticket e-commerce, digital archiving, and luxury product configuration demand absolute visual truth—a metric where traditional PBR rendering consistently falls short into the "uncanny valley".

At WHD Studio, we are actively deploying WebGPU 3D Gaussian Splatting pipelines for enterprise clients. By combining TSL-driven compute sorting and culling with hybrid glTF depth-buffer compositing, we eliminate the friction between cinematic visual fidelity and interactive web accessibility. The era of the baked glTF texture is ending; the era of real-time spatial radiance has arrived.