Gaussian Splats on the Web

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2025

Gaussian Splats using HTML, based on antimatter15 (demo)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <script src="https://quadjr.github.io/aframe-gaussian-splatting/index.js"></script>
  </head>
  <body>
    <a-scene renderer="antialias: false">
      <a-entity rotation="10 0 0">
        <a-entity position="1.2 1.2 -2.7" 
        animation="property: rotation; to: 0 360 0; dur: 10000; easing: linear; loop: true">
          <a-sphere position="0 0 0.5" radius="0.2" color="#EF2D5E"></a-sphere>
          <a-box position="0.5 0 0" rotation="0 45 0" height="0.4" width="0.4" 
          depth="0.4" color="#4CC3D9" shadow></a-box>
          <a-cylinder position="0 0 -0.5" radius="0.25" height="0.4" color="#FFC65D" shadow></a-cylinder>
        </a-entity>
      </a-entity>
      <a-entity gaussian_splatting="src: https://huggingface.co/cakewalk/splat-data/resolve/main/truck.splat;" 
      rotation="0 0 0" position="0 1.5 -2"></a-entity>
      <a-sky color="#000"></a-sky>
    </a-scene>
  </body>
</html>

Gaussian What

Rendering Gaussian Splats on the Web

Seminal Paper

Today

3D Points

Sparse Point Cloud produced by SfM

3D Points Gaussian Splats

Gaussian Splats

Gaussian Splats

Spherical Harmonics

Spherical Harmonics (SH)

File Formats

.PLY file format

Other formats

Drawbacks

Web Viewers

Web Libraries

Main Web implementations

Gaussian Splats + Standard WebGL rendering

Other Tools

Postshot by Jawset

The End

Questions?

The Future