JP Technology Initiatives Inc.

Walk in WebXR Gaussian splat scenes with Foottroller

WebXR demos run in Chrome on a Windows PC with a PCVR headset. PlayCanvas renders a Gaussian splat scene; Foottroller provides natural walking so you can explore the scan on foot. It is not for standalone Quest browser or Firefox.

Try the demos

Abandoned factory, Archviz, Calico Tanks Trail

What you need

Windows PC, Chrome, PCVR headset, Foottroller

How locomotion works in the demo

Foottroller = horizontal move; left stick = up/down; grip = exploratory look

Gaussian Splatting creates incredibly realistic 3D scenes from images — with photorealistic detail and fidelity that feels almost indistinguishable from reality.

In this demo, we’re showcasing our WebXR application running directly in the Chrome browser on a Windows PC. Using a standard VR headset, you can step into a highly detailed 3D Gaussian Splat scene and explore it naturally in virtual reality.

The experience is powered by PlayCanvas, which delivers excellent performance for loading and rendering large Gaussian Splat scenes on the web.

Credit: the gorgeous indoor scan of a real abandoned place by Christoph Schindelar

Try the experience on a Windows PC in Chrome browser with a VR headset: link

More WebXR VR Gaussian Splatting experiences:

Archviz scene home environment (Gaussian splat by walhargohar)

Important note: After clicking the "VR" button, it may take more than 30s for the application to start entering VR. Give it some time to respond and do not re-click the "VR" button.

Walkable WebXR experience: Calico Tanks Trail in Red Rock Canyon, Nevada.

Developed in PlayCanvas with Foottroller integration.

Run in a chrome browser on a Windows PC.

Credit:

3DGS Title: Calico Tanks Trail, Red Rock Canyon, Las Vegas NV (XGRIDS PortalCam)

Author: Paolo Tosolini (https://superspl.at/user?id=tosolini) Source: https://superspl.at/scene/19312f07

Try the experience

Important note: After clicking the "VR" button, it may take more than 30s for the application to start entering VR. Give it some time to respond and do not re-click the "VR" button.

Use the following workflow to convert a Gaussian splat into a WebXR VR experience in 15 minutes.

Convert a Gaussian splat to WebXR in PlayCanvas

This PlayCanvas sample project has Foottroller locomotion control integrated, and supports the use of Gaussian splat scenes, which is a great start point for your own VR game/application development.

How to use:

Step 1. On a Windows PC, load the PlayCanvas project in a Chrome browser. (The VR experience is for a Windows PC with a VR headset and Foottroller connected. It is not for standalone VR headset or mobile devices. And WebVR will not work with other browsers, e.g., Firefox)

Step 2. Connect VR headset to the windows PC, for example, Meta Quest 3 with the Quest link software.

Step 3. Connect Foottroller to the Windows PC, which will appear as a generic gamepad.

Step 4. Launch the project as a webpage from PlayCanvas, and enter VR mode.

Now you can explore the default Gaussian splat scene in VR with Foottroller enabled natural locomotion.

  • While using Foottroller for horizontal move, the left hand joystick can be used to move up and down.

  • Hold left hand grip to enable exploratory mode, in which the user can look freely around without affecting movement path.

Use your own .ply in the sample project

Step 1. Get the Gaussian splat .ply file.

Step 2. Use the Official Conversion Tool from PlayCanvas to process the .ply file.

Install: npm install -g @playcanvas/splat-transform

This is PlayCanvas’s official CLI tool for converting and optimizing Gaussian Splats.

Step 3. Convert Your .ply File

Option A: Streamed Format (Recommended for your script)

splat-transform input.ply output/meta.json

This creates a folder with meta.json + multiple .webp files (best for large scenes and streaming):

  • output/ will be a folder containing:

    • meta.json ← This is what you put in splatUrl

    • Several .webp texture files

Step 4. Upload the converted meta.json and .webp files to a webhost such that they can be accessed with an url.

Step 5. Navigate to the folder where your splat files are on the webhost server:

  1. Create or edit a file named .htaccess (with a dot at the beginning).

  2. Paste this code inside it and save the file.

<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, OPTIONS" Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Accept" </IfModule> # For .json and .webp files <FilesMatch "\.(json|webp)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>

Step 6. Get the url of the meta.json file, and use it for the splaturl parameter in the sample project. And you can launch the project to explore the Gaussian splat scene in VR.

Host the experience on GitHub Pages

The PlayCanvas VR game can be hosted on a github and played in Google Chrome browser on Windows PC.

Step 1: Prepare Your Game Files

  1. In PlayCanvas Editor, go to Publish → Download .ZIP.

  2. Extract the zip file on your computer.

  3. You should see a folder with:

    • index.html

    • files/ folder

    • JavaScript files, etc.

Step 2: Create a GitHub Repository

  1. Go to github.com and log in.

  2. Click New repository.

  3. Fill in:

    • Repository name: e.g. my-game or playcanvas-game

    • Description (optional)

    • Make it Public (required for GitHub Pages)

  4. Click Create repository.

Step 3: Upload Your Game Files

Option A: Using GitHub Web Interface

  1. In your new repository, click "Add file" → "Upload files".

  2. Drag and drop all the extracted files from the PlayCanvas zip into the browser window.

    • Important: Upload the contents directly (so index.html is in the root, not inside another folder).

  3. Write a commit message (e.g. "Initial game upload") and click Commit changes.

Step 4: Add the .nojekyll file:

  1. In your GitHub repo, create a new file called .nojekyll (exactly like that).

  2. Commit it.

Step 5: Enable GitHub Pages

  1. In your repository, go to Settings (top right tab).

  2. On the left sidebar, click Pages.

  3. Under Source, select Deploy from a branch.

  4. Under Branch, select main (or master) and click Save.

  5. Wait 30–60 seconds, then refresh the page.

  6. You will see a link like: https://yourusername.github.io/my-game

Step 6: Test Your Game

Open the GitHub Pages link in your browser. Your game should load.

Note: First deployment can take up to 1–2 minutes.

FAQ

Does this run on a standalone Quest browser?
No. These demos are for a Windows PC + Chrome + PCVR headset (for example Quest 3 with Link). Foottroller must be paired to the PC as a gamepad. Phone browsers and Firefox are not supported.

Why does VR take 30+ seconds after I click VR?
The Gaussian splat is large. Wait for the app to enter VR. Do not click the VR button again or you can stall the load.

Do I need Foottroller Hub or SteamVR?
Not for these browser demos. Pair Foottroller to the PC so Chrome sees a generic gamepad. Hub and SteamVR are for native PCVR games, not this WebXR page.

How do I move?
Foottroller walks you on the horizontal plane. The left-hand stick moves up and down. Hold left grip for exploratory mode: look around without changing your path.

What is PlayCanvas doing here?
PlayCanvas loads and renders the Gaussian splat in WebXR. The sample project already has Foottroller locomotion wired in. Fork that project instead of starting from a blank scene.

Can I use my own splat?
Yes. Convert the .ply with PlayCanvas splat-transform, host meta.json and the .webp files with CORS headers, then paste the meta.json URL into the project’s splat URL field.

Can I host it on GitHub Pages?
Yes. Publish/download the PlayCanvas build, put index.html at the repo root, add .nojekyll, enable Pages. Open the Pages URL in Chrome on the same Windows PC.

Will it work in other browsers?
The documented path is Chrome on Windows. Don’t expect the same VR + gamepad path in Firefox or on a headset’s built-in browser.