A 3D Gaussian splat as a glasses-free 3D element, in one SDK call.
The page is ordinary flat HTML. The tile below is a <canvas> handed to
addSplat(), which renders the splat with the
PlayCanvas engine and renders it once per eye. If the
.sog records the camera it was captured with, the tile opens at that camera and
converges on the subject; otherwise it auto-frames the subject on the zero-disparity plane
and turns it slowly. On the DisplayXR Browser it weaves to glasses-free 3D and looks around
as you move; in any other browser you get the same asset, flat. Drag to tilt it (it relaxes
back when you let go), scroll to zoom.
The default subject is Spark's butterfly, converted to .sog with its
spherical harmonics intact, so its colour changes as you look around it. Load your own
with ?url= (see Bring your own splat below).
On hardware the subject should have real depth and shift perspective as you move your
head, while the 2D plate over it stays perfectly crisp 2D. That plate is registered
with handle.exclude() — the weave composites it rather than interlacing
it.
Append ?url=… to load your own splat, same-origin or CORS-enabled:
a .sog (preferred: Morton-ordered and roughly 15–20× smaller than the
equivalent PLY), a .ply, or the lod-meta.json of a
Streamed SOG, which streams only the chunks the view needs under a
splat budget. Add &engine=spark to render the same tile with
Spark (three.js) instead, the SDK's other backend,
which also reads .spz, .splat and .ksplat
but not a Streamed SOG.
← All samples ·
Get the DisplayXR Browser
Butterfly splat © World Labs (from Spark, sparkjs.dev), used with permission; converted to SOG.