3D Gaussian Splatting for Web: How We Built a Production-Ready Viewer with Annotation & Measurement Tools

3D Gaussian Splatting (3DGS) has emerged as a game-changing technology for photorealistic 3D visualization. Unlike traditional mesh-based rendering, 3DGS captures real-world scenes with stunning fidelity—and renders them in real-time on the web.

We recently partnered with an algorithm company to build a full-stack web platform that lets users upload images, generate 3DGS models through their proprietary algorithms, and interact with the results through a feature-rich viewer. This article shares our approach and what we learned along the way.

The Project: From Algorithm to User Experience

Our client specializes in 3D reconstruction algorithms. They needed a technology partner to handle the full-stack development—from user interface to backend integration—while they focused on their core strength: the algorithms that transform ordinary photos into stunning 3D Gaussian Splatting models.

Our role:

• Frontend development with a professional 3DGS viewer
• Backend API integration with their algorithm pipeline
• Business features: annotation tools, measurement capabilities
• Full deployment and optimization

Their role:

• Image processing algorithms
• 3DGS/SOGS data generation
• Algorithm optimization and updates

This collaboration model allowed each team to focus on their expertise, delivering a polished end product faster than either could alone.

Why PlayCanvas SuperSplat?

When evaluating 3DGS rendering solutions for the web, we considered several options:

We chose PlayCanvas SuperSplat for several reasons:

1. Battle-tested rendering: PlayCanvas has years of WebGL optimization experience
2. Active development: Regular updates and community support
3. Performance: Handles millions of Gaussians smoothly
4. Open source: Full transparency and customization potential

SuperSplat provided the rendering foundation, allowing us to focus engineering effort on the business features that differentiate the product.

Core Features We Built

1. Image Upload & Processing Pipeline

Users upload a set of images, which are sent to the algorithm backend for 3DGS generation:

User uploads images → Backend queue → Algorithm processing → SOGS file generated → Viewer loads result

We built a robust upload system with:

• Progress tracking for large image sets
• Processing status updates via WebSocket
• Automatic viewer refresh when models are ready

2. Annotation System

Professional users need to mark and document specific areas within 3D scenes. We implemented three annotation types:

Point Markers

• Click to place markers in 3D space
• Add titles and descriptions
• Color-coded categories

Line Annotations

• Draw lines between two points
• Useful for indicating paths or relationships
• Persistent across sessions

Region Highlights

• Define polygonal areas
• Highlight zones of interest
• Support for multiple overlapping regions

All annotations are stored server-side and synchronized across devices, enabling team collaboration.

3. Measurement Tools

Precise measurement is essential for professional applications like architecture, surveying, and industrial inspection:

Distance Measurement

• Point-to-point distance calculation
• Real-world unit display (meters, feet)
• Multi-segment path measurement

Area Measurement

• Polygon-based area calculation
• Supports complex shapes
• Instant calculation as points are added

These tools transform the viewer from a passive display into an active workspace.

Technical Architecture

Here's how the pieces fit together:

┌─────────────────────────────────────────────────────────┐
│                    Nuxt Frontend                        │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐ │
│  │ Upload UI   │  │ Annotation  │  │ Measurement     │ │
│  │             │  │ Tools       │  │ Tools           │ │
│  └─────────────┘  └─────────────┘  └─────────────────┘ │
├─────────────────────────────────────────────────────────┤
│              PlayCanvas SuperSplat Viewer               │
├─────────────────────────────────────────────────────────┤
│                    WebGL / WebGPU                        │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│                    Backend API                           │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐ │
│  │ File Upload │  │ Algorithm   │  │ Data Storage    │ │
│  │ Service     │  │ Integration │  │ (Annotations)   │ │
│  └─────────────┘  └─────────────┘  └─────────────────┘ │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│           Client's Algorithm Service                     │
│           (3DGS/SOGS Generation)                        │
└─────────────────────────────────────────────────────────┘

Key Technical Decisions

SuperSplat Integration We embedded SuperSplat as the core rendering engine, extending it with custom UI overlays for annotations and measurements. This approach preserved SuperSplat's rendering performance while adding our business logic layer.

Coordinate System Handling 3D measurement requires precise coordinate mapping. We implemented raycasting against the Gaussian point cloud to determine accurate 3D positions from 2D clicks—essential for reliable distance and area calculations.

State Management Annotations and measurements need to persist and sync. We used a combination of local state for real-time interaction and server synchronization for persistence, ensuring users never lose their work.

Performance Considerations

3DGS is computationally intensive. Here's how we maintained smooth performance:

SuperSplat handles the heavy lifting of Gaussian rendering. Our job was ensuring the surrounding application didn't become a bottleneck.

What We Learned

1. Let Specialists Do What They Do Best

By partnering with an algorithm company rather than building reconstruction ourselves, we delivered a better product. They have years of research in 3D reconstruction; we have years of experience in web development. The combination works.

2. Open Source Accelerates Development

PlayCanvas SuperSplat saved months of rendering engine development. We could focus on features that matter to users—annotations, measurements, workflow—rather than reinventing the wheel.

3. Business Features Make the Difference

The raw 3DGS viewer is impressive, but annotations and measurements transform it from a demo into a tool. These "boring" features are often what converts interest into adoption.

Use Cases

This type of platform serves various industries:

• Architecture & Construction: Document site conditions, measure spaces remotely
• Cultural Heritage: Digitize and annotate historical artifacts
• Real Estate: Create interactive property tours with points of interest
• Industrial Inspection: Mark defects, measure wear patterns
• Education: Create annotated 3D learning materials

Conclusion

3D Gaussian Splatting brings photorealistic 3D to the web in ways traditional meshes never could. By combining PlayCanvas SuperSplat's rendering capabilities with practical business features like annotation and measurement tools, we helped our client deliver a platform that's both visually stunning and genuinely useful.

If you're exploring 3DGS for your project—whether you need a complete platform, viewer integration, or custom tooling—we'd be happy to discuss how we can help.

---

Resources

• PlayCanvas SuperSplat - The open-source viewer we built upon
• Original 3DGS Paper - The research that started it all
• PlayCanvas Engine - The WebGL engine behind SuperSplat

---

Building something with 3D Gaussian Splatting? We provide full-stack development services for 3DGS platforms—from viewer integration to custom tooling. Get in touch to discuss your project.