@RaananW
Video (Quest 2): SplatRotation.mp4 - Google Drive
Project files: Splattingfix.zip - Google Drive
Server command: http-server dist -S -C ./server.crt -K ./server.key
Scripts:
Index.ts:
import * as BABYLON from ‘@babylonjs/core’;
import { GaussianSplat } from ‘./GaussianSplat’;
// Get the canvas element from the DOM
const canvas = document.getElementById(‘renderCanvas’) as HTMLCanvasElement;
// Create the Babylon.js engine
const engine = new BABYLON.Engine(canvas, true);
// Create a new scene
const createScene = async () => {
const scene = new BABYLON.Scene(engine);
// Create a camera and attach it to the canvas
const camera = new BABYLON.ArcRotateCamera(‘camera’, -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
// Create a light source
const light = new BABYLON.HemisphericLight(‘light’, new BABYLON.Vector3(0, 1, 0), scene);
// Create a basic sphere
const sphere = BABYLON.MeshBuilder.CreateSphere(‘sphere’, { diameter: 1 }, scene);
// Instantiate the GaussianSplat class
new GaussianSplat(scene);
// Create a plane as the ground
const ground = BABYLON.MeshBuilder.CreateGround(‘ground’, { width: 10, height: 10 }, scene);
// Initialize XR support
const xr = await scene.createDefaultXRExperienceAsync({
floorMeshes: [ground], // Use the ground plane as the floor mesh
});
return scene;
};
// Call the createScene function
createScene().then(scene => {
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(() => {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener(‘resize’, () => {
engine.resize();
});
});
GaussianSplat.ts:
import * as BABYLON from ‘@babylonjs/core’;
export class GaussianSplat {
constructor(scene: BABYLON.Scene) {
// Gaussian Splatting
var gs = new BABYLON.GaussianSplattingMesh("Halo", null, scene);
gs.loadFileAsync("https://assets.babylonjs.com/splats/gs_Skull.splat").then(()=>{
gs.position.y = 1.7;
});
}
}