JP Technology Initiatives Inc.

WebXR VR Game with Foottroller Locomotion Integrated

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

Play the game on a Windows PC in Chrome browser with a VR headset: game link

More WebXR VR Gaussian Splatting experiences:

Archviz scene home environment (Gaussian splat by walhargohar)

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

Convert a Gaussian splat scene into a WebXR VR experience with Foottroller locomotion using 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 Gaussian splat in the sample PlayCanvas 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 sever:

  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 PlayCanvas webXR game on github

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.