'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 {
User,
Settings,
Star,
Download,
ExternalLink,
Code,
Zap,
Heart,
Sparkles,
Crown
} from 'lucide-react'
export default function VRMAvatarsDocPage() {
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">VRM Avatar Integration</h1>
<p className="text-muted-foreground">
Comprehensive guide to importing and managing VRM avatars from VRoid Studio and Blender
for robotic companions and virtual assistants.
</p>
</div>
<div className="space-y-8">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<User className="h-5 w-5" />
<span>What is VRM?</span>
</CardTitle>
</CardHeader>
<CardContent className="prose prose-sm max-w-none">
<p>
VRM (Virtual Reality Model) is an open file format specification for 3D humanoid avatars.
It's designed specifically for virtual reality applications and provides a standardized
way to represent human-like characters with animations, morph targets, and materials.
</p>
<h3>Key Features:</h3>
<ul>
<li><strong>Humanoid Structure:</strong> Standardized bone structure for consistent animations</li>
<li><strong>Morph Targets:</strong> Blend shapes for facial expressions and body deformations</li>
<li><strong>Material System:</strong> PBR materials with texture support</li>
<li><strong>Animation Support:</strong> Compatible with major animation systems</li>
<li><strong>VR Optimized:</strong> Designed for real-time VR applications</li>
</ul>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Star className="h-5 w-5 text-purple-500" />
<span>VRoid Studio</span>
</CardTitle>
<CardDescription>Professional avatar creation tool</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
VRoid Studio is a free avatar creation tool by Pixiv that allows you to create
custom VRM avatars with an intuitive interface.
</p>
<div className="space-y-2">
<h4 className="font-medium">Features:</h4>
<ul className="text-sm space-y-1">
<li>• Intuitive character creation</li>
<li>• Pre-made base models</li>
<li>• Extensive customization options</li>
<li>• Direct VRM export</li>
<li>• Japanese language support</li>
</ul>
</div>
<Button variant="outline" className="w-full">
<Download className="h-4 w-4 mr-2" />
Download VRoid Studio
</Button>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Settings className="h-5 w-5 text-orange-500" />
<span>Blender Integration</span>
</CardTitle>
<CardDescription>Advanced 3D modeling workflow</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
Create custom VRM avatars using Blender's powerful 3D modeling tools.
Requires VRM add-on for proper export.
</p>
<div className="space-y-2">
<h4 className="font-medium">Requirements:</h4>
<ul className="text-sm space-y-1">
<li>• Blender 3.0+</li>
<li>• VRM Add-on</li>
<li>• Basic 3D modeling knowledge</li>
<li>• UV mapping skills</li>
<li>• Texture painting experience</li>
</ul>
</div>
<Button variant="outline" className="w-full">
<ExternalLink className="h-4 w-4 mr-2" />
VRM Add-on Documentation
</Button>
</div>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<CardTitle>Robotics Applications</CardTitle>
<CardDescription>How VRM avatars enhance robotic companions</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">
<Heart className="h-6 w-6 text-blue-600" />
</div>
<h4 className="font-medium">Companion Robots</h4>
<p className="text-sm text-muted-foreground">
Friendly VRM avatars for robotic companions, providing emotional
connection and personalized interaction.
</p>
</div>
<div className="space-y-3">
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<Zap className="h-6 w-6 text-green-600" />
</div>
<h4 className="font-medium">Virtual Assistants</h4>
<p className="text-sm text-muted-foreground">
Professional avatars for virtual assistants with customizable
appearance and gesture animations.
</p>
</div>
<div className="space-y-3">
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<Sparkles className="h-6 w-6 text-purple-600" />
</div>
<h4 className="font-medium">Educational Characters</h4>
<p className="text-sm text-muted-foreground">
Expressive avatars for educational robotics, making learning
more engaging and interactive.
</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Technical Specifications</CardTitle>
<CardDescription>VRM format details and robotics integration</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<h4 className="font-medium">File Structure</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Format:</span>
<Badge variant="outline">glTF 2.0 + Extensions</Badge>
</div>
<div className="flex justify-between">
<span>Extension:</span>
<Badge variant="outline">.vrm</Badge>
</div>
<div className="flex justify-between">
<span>Max File Size:</span>
<Badge variant="outline">50MB</Badge>
</div>
<div className="flex justify-between">
<span>Standard Bones:</span>
<Badge variant="outline">89 (Humanoid)</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-medium">Animation Support</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Animation Format:</span>
<Badge variant="outline">glTF Animation</Badge>
</div>
<div className="flex justify-between">
<span>Morph Targets:</span>
<Badge variant="outline">Up to 64</Badge>
</div>
<div className="flex justify-between">
<span>Blend Shapes:</span>
<Badge variant="outline">Facial Expressions</Badge>
</div>
<div className="flex justify-between">
<span>IK Support:</span>
<Badge variant="outline">Spring Bone System</Badge>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Integration Workflow</CardTitle>
<CardDescription>Step-by-step guide for robotics integration</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-blue-600">1</span>
</div>
<div>
<h4 className="font-medium">Create or Obtain VRM</h4>
<p className="text-sm text-muted-foreground">
Use VRoid Studio for quick creation or Blender for custom models.
Ensure the VRM follows the 1.0 specification.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-green-600">2</span>
</div>
<div>
<h4 className="font-medium">Upload to Robotics Platform</h4>
<p className="text-sm text-muted-foreground">
Import the VRM file through the VRM Avatars interface.
The system will automatically validate and process the file.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-purple-600">3</span>
</div>
<div>
<h4 className="font-medium">Configure Avatar Settings</h4>
<p className="text-sm text-muted-foreground">
Adjust animation quality, morph target reduction, and material optimization
settings based on your robotics platform capabilities.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-orange-600">4</span>
</div>
<div>
<h4 className="font-medium">Integrate with Robot Control</h4>
<p className="text-sm text-muted-foreground">
Map avatar animations to robot movements and expressions.
Set up real-time synchronization between avatar and physical robot.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-red-600">5</span>
</div>
<div>
<h4 className="font-medium">Deploy and Test</h4>
<p className="text-sm text-muted-foreground">
Load the avatar into your VR/AR environment and test interactions.
Monitor performance and adjust quality settings as needed.
</p>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Best Practices</CardTitle>
<CardDescription>Optimization tips for robotics applications</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-medium flex items-center space-x-2">
<Code className="h-4 w-4" />
<span>Performance Optimization</span>
</h4>
<ul className="text-sm space-y-2">
<li>• Reduce polygon count for real-time rendering</li>
<li>• Optimize texture resolutions (512x512 recommended)</li>
<li>• Limit morph targets to essential expressions</li>
<li>• Use compressed texture formats</li>
<li>• Simplify bone hierarchies when possible</li>
</ul>
</div>
<div className="space-y-4">
<h4 className="font-medium flex items-center space-x-2">
<Crown className="h-4 w-4" />
<span>Animation Guidelines</span>
</h4>
<ul className="text-sm space-y-2">
<li>• Use consistent keyframe timing</li>
<li>• Ensure smooth transitions between animations</li>
<li>• Test animations on target hardware</li>
<li>• Consider platform-specific limitations</li>
<li>• Document custom animation requirements</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
