WebXR 3D Gaussian Splats Viewer

A production-ready WebXR viewer for 3D Gaussian Splats visualization built with Three.js and TypeScript. Supports immersive VR and AR experiences with touch and mouse controls.

NOTE: This project is a demo and uses AI heavily for code generation.

Online Demo

Features

• WebXR Support: VR and AR immersive experiences
• 3D Gaussian Splats Rendering: Efficient visualization of 3DGS models
• Responsive Controls: Mouse, touch, and keyboard controls
• Performance Monitoring: Real-time FPS and rendering stats
• Production Build: Optimized webpack configuration for production deployments
• TypeScript: Full type safety and modern ES2020+ features
• High-Performance Rendering: Uses Three.js with optimized settings

Requirements

• Node.js >= 18.0.0
• npm >= 9.0.0
• Modern browser with WebGL 2.0 support
• WebXR support for AR/VR features (optional)

Installation

npm install

Development

Start the development server with hot module reloading:

npm run dev

The application will open at http://localhost:8080 with automatic reload on code changes.

Building

Production Build

Create an optimized production build:

npm run build

Output will be in the dist/ directory, ready for deployment.

Development Build

Create a development build with source maps:

npm run build:dev

Usage

Loading Models

1. Click "Load Model" to load a demo 3D Gaussian Splats model
2. Use mouse or touch to rotate and zoom the model:
   • Mouse: Click and drag to rotate, scroll to zoom
   • Touch: Swipe to rotate, pinch to zoom
3. Click "Reset View" to return to the default camera position

WebXR Experience

If your device supports WebXR:

1. Click "Enter VR" to start an immersive VR session
2. Click "Enter AR" to start an AR experience (on supported devices)
3. Use your device's motion controllers or hand tracking (if available)

Controls

• Load Model: Load a demo 3DGS model
• Enter VR: Start immersive VR session (if supported)
• Enter AR: Start immersive AR session (if supported)
• Reset View: Reset camera to default position
• Fullscreen: Toggle fullscreen mode

Project Structure

src/
├── index.ts                    # Main application entry point
├── index.html                  # HTML template
├── renderer/
│   └── GaussianSplattingRenderer.ts  # 3DGS rendering engine
├── xr/
│   └── WebXRController.ts      # WebXR session management
├── controls/
│   └── CameraController.ts     # Camera and input controls
├── ui/
│   └── UIManager.ts            # UI state management
└── utils/
    └── Stats.ts                # Performance monitoring

dist/                           # Build output (generated)

Configuration Files

• webpack.config.js: Webpack bundler configuration
• tsconfig.json: TypeScript compiler options
• .eslintrc.json: ESLint linting rules
• .prettierrc.json: Code formatting rules
• .gitignore: Git ignore rules

Scripts

• npm run dev: Start development server
• npm run build: Create production build
• npm run build:dev: Create development build with source maps
• npm run type-check: Run TypeScript type checking
• npm run lint: Run ESLint
• npm run format: Format code with Prettier
• npm run start: Alias for npm run dev
• npm run serve: Serve dist folder (after building)

Loading Custom 3DGS Models

To load your own 3D Gaussian Splats model:

1. Convert your model to a supported format (e.g., PLY, GLB)
2. Place the file in the public/ directory
3. Modify GaussianSplattingRenderer.ts to load your model

Example:

await this.gsSplattingRenderer.loadFromFile('./path/to/model.ply');

Performance Optimization

The build is configured with:

• Code Splitting: Vendors and Three.js separated into chunks
• Minification: Terser for JavaScript compression
• Source Maps: Available in development, disabled in production
• Tree Shaking: Unused code removed during build
• Asset Optimization: Gzip compression for deployment

Browser Compatibility

Browser	Status
Chrome/Edge	✓ Full support
Firefox	✓ Full support
Safari	✓ Partial support
Mobile Chrome	✓ Full support (with AR/VR)
Mobile Safari	⚠ Limited support

WebXR Support

For WebXR features to work:

• VR: Requires compatible headset (Meta Quest, HTC Vive, Valve Index, etc.)
• AR: Requires AR-capable device (Android with ARCore, iOS 12+)

Deployment

Local Development

npm run build
npm run serve

Production Server

After building, deploy the dist/ folder to your web server:

npm run build
# Upload dist/ folder to your server

HTTPS Requirement

WebXR features require HTTPS in production. Configure your server accordingly.

Performance Tips

1. Reduce Splat Count: For mobile devices, use models with fewer splats
2. Enable WebGL Extensions: Use EXT_color_buffer_float for better precision
3. Adjust LOD: Implement level-of-detail for large models
4. Memory Management: Dispose of unused geometries and textures

Troubleshooting

WebXR Not Showing

• Check browser support at https://caniuse.com/webxr
• Ensure the page is served over HTTPS (except localhost)
• Verify device has WebXR support

Low Performance

• Reduce model complexity (splat count)
• Enable GPU acceleration in browser settings
• Check available GPU memory
• Use npm run build for production performance

Model Not Loading

• Check browser console for errors
• Verify file path is correct
• Ensure file format is supported
• Check file size doesn't exceed browser limits

Development Workflow

# Install dependencies
npm install

# Start development server
npm run dev

# Make code changes (hot reload enabled)

# Run type checking
npm run type-check

# Format code
npm run format

# Lint code
npm run lint

# Build for production
npm run build

# Serve production build
npm run serve

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Resources

• Three.js Documentation
• WebXR Device API
• 3D Gaussian Splatting
• Webpack Documentation
• TypeScript Documentation

Support

For issues, questions, or contributions, please open an issue or contact the maintainers.