'use client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
Camera,
Smartphone,
Zap,
MapPin,
Eye,
Settings,
Download,
Upload,
Globe,
Home,
Building,
TreePine,
Waves
} from 'lucide-react'
export default function NianticSplatsDocPage() {
return (
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">Niantic Gaussian Splats</h1>
<p className="text-muted-foreground">
Complete guide to using Niantic's iPhone scanning technology for creating
photorealistic 3D environments in robotics applications.
</p>
</div>
<div className="space-y-8">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Camera className="h-5 w-5" />
<span>What are Gaussian Splats?</span>
</CardTitle>
</CardHeader>
<CardContent className="prose prose-sm max-w-none">
<p>
Gaussian Splats represent a revolutionary approach to 3D scene reconstruction.
Unlike traditional mesh-based models, Gaussian Splats use millions of tiny
3D Gaussians to represent scenes with unprecedented photorealism and detail.
</p>
<h3>Key Advantages:</h3>
<ul>
<li><strong>Photorealistic Quality:</strong> Capture real-world appearance with incredible fidelity</li>
<li><strong>Real-time Rendering:</strong> Optimized for modern GPUs and real-time applications</li>
<li><strong>Memory Efficient:</strong> Compact representation compared to traditional meshes</li>
<li><strong>Dynamic Scenes:</strong> Can capture moving objects and changing lighting</li>
<li><strong>Mobile Optimized:</strong> Created using smartphone LiDAR scanning</li>
</ul>
<p>
Niantic's implementation uses advanced computer vision and neural rendering
techniques to create these splat representations from iPhone LiDAR scans.
</p>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Smartphone className="h-5 w-5 text-blue-500" />
<span>iPhone Scanning</span>
</CardTitle>
<CardDescription>Mobile capture technology</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
Niantic's scanning app leverages the LiDAR sensor in modern iPhones
to capture detailed 3D geometry and appearance data.
</p>
<div className="space-y-2">
<h4 className="font-medium">Requirements:</h4>
<ul className="text-sm space-y-1">
<li>• iPhone 12 Pro or later</li>
<li>• Built-in LiDAR scanner</li>
<li>• Niantic scanning app</li>
<li>• Well-lit environment</li>
<li>• Stable scanning motion</li>
</ul>
</div>
<Button variant="outline" className="w-full">
<Download className="h-4 w-4 mr-2" />
Get Niantic Scanner
</Button>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Zap className="h-5 w-5 text-yellow-500" />
<span>Processing Pipeline</span>
</CardTitle>
<CardDescription>From scan to splat</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
The scanning process involves sophisticated computer vision and
machine learning to convert raw sensor data into optimized Gaussian splats.
</p>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-xs font-bold text-blue-600">1</span>
</div>
<span className="text-sm">Depth sensing & RGB capture</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
<span className="text-xs font-bold text-green-600">2</span>
</div>
<span className="text-sm">Point cloud generation</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center">
<span className="text-xs font-bold text-purple-600">3</span>
</div>
<span className="text-sm">Gaussian optimization</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center">
<span className="text-xs font-bold text-orange-600">4</span>
</div>
<span className="text-sm">Appearance encoding</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<CardTitle>Robotics Applications</CardTitle>
<CardDescription>Transforming robot navigation and interaction</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-3">
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<MapPin className="h-6 w-6 text-blue-600" />
</div>
<h4 className="font-medium">SLAM & Navigation</h4>
<p className="text-sm text-muted-foreground">
Photorealistic maps for precise robot localization and path planning
in complex indoor and outdoor environments.
</p>
</div>
<div className="space-y-3">
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<Eye className="h-6 w-6 text-green-600" />
</div>
<h4 className="font-medium">Visual Odometry</h4>
<p className="text-sm text-muted-foreground">
High-fidelity visual reference for camera-based pose estimation
and motion tracking.
</p>
</div>
<div className="space-y-3">
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<Home className="h-6 w-6 text-purple-600" />
</div>
<h4 className="font-medium">Human-Robot Interaction</h4>
<p className="text-sm text-muted-foreground">
Immersive environments for natural human-robot collaboration
and training scenarios.
</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Capture Best Practices</CardTitle>
<CardDescription>Getting the best results from your scans</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<h4 className="font-medium">Environment Preparation</h4>
<ul className="text-sm space-y-2">
<li>• Ensure adequate lighting (500+ lux)</li>
<li>• Remove clutter and moving objects</li>
<li>• Scan during consistent lighting conditions</li>
<li>• Mark reference points for scale</li>
<li>• Consider surface reflectivity</li>
</ul>
</div>
<div className="space-y-4">
<h4 className="font-medium">Scanning Technique</h4>
<ul className="text-sm space-y-2">
<li>• Move slowly and steadily (1-2 ft/s)</li>
<li>• Maintain 1-3 feet distance from surfaces</li>
<li>• Scan from multiple heights and angles</li>
<li>• Overlap scans by 20-30%</li>
<li>• Avoid rapid movements or vibrations</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Technical Specifications</CardTitle>
<CardDescription>Niantic splat format and capabilities</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-4">
<h4 className="font-medium">File Format</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Extension:</span>
<Badge variant="outline">.spz</Badge>
</div>
<div className="flex justify-between">
<span>Max Size:</span>
<Badge variant="outline">100MB</Badge>
</div>
<div className="flex justify-between">
<span>Compression:</span>
<Badge variant="outline">LZMA</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-medium">Quality Levels</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>High:</span>
<Badge variant="default">2-4M points</Badge>
</div>
<div className="flex justify-between">
<span>Medium:</span>
<Badge variant="secondary">1-2M points</Badge>
</div>
<div className="flex justify-between">
<span>Low:</span>
<Badge variant="outline">0.5-1M points</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-medium">Processing</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Upload:</span>
<Badge variant="outline">WiFi/5G</Badge>
</div>
<div className="flex justify-between">
<span>Processing:</span>
<Badge variant="outline">3-10 min</Badge>
</div>
<div className="flex justify-between">
<span>Download:</span>
<Badge variant="outline">Auto</Badge>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Integration with Robotics Stack</CardTitle>
<CardDescription>Converting splats for ROS and robotics platforms</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-medium">ROS Integration</h4>
<ul className="text-sm space-y-2">
<li>• Convert to OctoMap for navigation</li>
<li>• Extract occupancy grids</li>
<li>• Generate costmaps for path planning</li>
<li>• Provide visual SLAM initialization</li>
<li>• Support dynamic obstacle detection</li>
</ul>
</div>
<div className="space-y-4">
<h4 className="font-medium">Unity Integration</h4>
<ul className="text-sm space-y-2">
<li>• Direct Gaussian splat rendering</li>
<li>• Physics collision mesh generation</li>
<li>• Lighting and material reconstruction</li>
<li>• Real-time splat manipulation</li>
<li>• VR/AR headset compatibility</li>
</ul>
</div>
</div>
<div className="bg-muted p-4 rounded-lg">
<h4 className="font-medium mb-2">Processing Pipeline:</h4>
<div className="text-sm text-muted-foreground space-y-1">
<p>1. <strong>Upload .spz file</strong> → Validate format and integrity</p>
<p>2. <strong>Extract Gaussians</strong> → Decode point cloud and appearance data</p>
<p>3. <strong>Optimize for robotics</strong> → Reduce complexity for real-time use</p>
<p>4. <strong>Generate navigation mesh</strong> → Create collision detection and path planning</p>
<p>5. <strong>ROS map conversion</strong> → Export to ROS-compatible formats</p>
<p>6. <strong>Unity integration</strong> → Prepare for VR/AR deployment</p>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Use Cases & Templates</CardTitle>
<CardDescription>Common applications and optimized setups</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="space-y-3 p-4 border rounded-lg">
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<Home className="h-5 w-5 text-blue-600" />
</div>
<h4 className="font-medium">Living Room</h4>
<p className="text-xs text-muted-foreground">
Home environments for companion robots
</p>
<Badge variant="outline" className="text-xs">Indoor</Badge>
</div>
<div className="space-y-3 p-4 border rounded-lg">
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
<Settings className="h-5 w-5 text-green-600" />
</div>
<h4 className="font-medium">Workshop</h4>
<p className="text-xs text-muted-foreground">
Technical workspaces with equipment
</p>
<Badge variant="outline" className="text-xs">Indoor</Badge>
</div>
<div className="space-y-3 p-4 border rounded-lg">
<div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<TreePine className="h-5 w-5 text-purple-600" />
</div>
<h4 className="font-medium">Garden</h4>
<p className="text-xs text-muted-foreground">
Outdoor spaces with natural elements
</p>
<Badge variant="outline" className="text-xs">Outdoor</Badge>
</div>
<div className="space-y-3 p-4 border rounded-lg">
<div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
<Building className="h-5 w-5 text-orange-600" />
</div>
<h4 className="font-medium">Office</h4>
<p className="text-xs text-muted-foreground">
Professional workspaces and meeting rooms
</p>
<Badge variant="outline" className="text-xs">Indoor</Badge>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
