Using Web Components
Let's build a simple Gaussian splat application step by step using PlayCanvas Web Components. We'll create a scene with an interactive 3D toy cat splat that you can rotate around.
Starting Point
Begin by creating a new file called index.html
and copy the Web Components boilerplate HTML into it.
Now, let's add the basic structure of our application to our HTML body
using the <pc-app>
and <pc-scene>
elements.
<pc-app antialias="false" high-resolution="false">
<pc-scene>
</pc-scene>
</pc-app>
This creates an empty 3D scene. However, we can't see anything rendered yet. For that, we will need to add a camera and a splat.
We've disabled antialias
and high-resolution
on the <pc-app>
element for optimal splat rendering performance. These settings help reduce the fragment processing load, which is the primary bottleneck in Gaussian splat rendering. Learn more in the Performance guide.
Loading Assets
Before we can display a splat or add camera controls, we need to define the assets our app will use. Let's add a camera controls script and a splat asset using the <pc-asset>
element.
<pc-app antialias="false" high-resolution="false">
<pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas@2.8.2/scripts/esm/camera-controls.mjs" preload></pc-asset>
<pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
<pc-scene>
</pc-scene>
</pc-app>
We've added two assets:
- A camera controls script that will let us orbit around the scene
- A compressed PLY file containing a toy cat splat
Adding a Camera
To view our scene, we need a camera which we can add using the <pc-entity>
and <pc-camera>
elements.
<pc-app antialias="false" high-resolution="false">
<pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas@2.8.2/scripts/esm/camera-controls.mjs" preload></pc-asset>
<pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
<pc-scene>
<pc-entity position="0 0 -2.5">
<pc-camera></pc-camera>
</pc-entity>
</pc-scene>
</pc-app>
We've positioned the camera 2.5 units down the negative Z axis. By default, a camera looks down the negative Z axis, so our camera is now looking toward the origin where we'll place our splat.
Adding Camera Controls
Now let's make the camera interactive by adding the camera controls script using the <pc-scripts>
and <pc-script>
elements.
<pc-app antialias="false" high-resolution="false">
<pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas@2.8.2/scripts/esm/camera-controls.mjs" preload></pc-asset>
<pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
<pc-scene>
<pc-entity position="0 0 -2.5">
<pc-camera></pc-camera>
<pc-scripts>
<pc-script name="cameraControls"></pc-script>
</pc-scripts>
</pc-entity>
</pc-scene>
</pc-app>
The camera controls script will allow you to:
- Left mouse drag: Orbit around the target
- Right mouse drag: Pan the camera
- Mouse wheel: Zoom in and out
Adding the Splat
Now let's add our toy cat splat to the scene using the <pc-splat>
element.
<pc-app antialias="false" high-resolution="false">
<pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas@2.8.2/scripts/esm/camera-controls.mjs" preload></pc-asset>
<pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
<pc-scene>
<pc-entity position="0 0 -2.5">
<pc-camera></pc-camera>
<pc-scripts>
<pc-script name="cameraControls"></pc-script>
</pc-scripts>
</pc-entity>
<pc-entity position="0 -0.7 0" rotation="180 0 0">
<pc-splat asset="toy"></pc-splat>
</pc-entity>
</pc-scene>
</pc-app>
We've positioned the splat slightly below the origin (-0.7 on the Y axis) and rotated it 180 degrees around the X axis to orient it properly. The asset="toy"
attribute references the splat asset we defined earlier.
Final Result
After completing the steps above, you should see an interactive 3D toy cat splat that you can orbit around, pan, and zoom!
Copy the final HTML code above into an HTML file and open it in your browser to see your first splat app in action! Then extend it in any way you like using the full power of the PlayCanvas Engine!