english/.opencode/skills/frontend-design/references/workflow-3d.md

3D Design Workflow

Create immersive interactive 3D designs with Three.js.

Prerequisites

• Activate ck:ui-ux-pro-max skill first
• Activate ck:threejs skill for 3D and WebGL expertise
• Have ck:ai-multimodal skill ready for asset generation

Initial Research

Run ck:ui-ux-pro-max searches:

python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "immersive 3d" --domain style
python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux

Workflow Steps

1. Create Implementation Plan

Use ui-ux-designer + researcher subagents:

• Create plan directory (use ## Naming pattern)
• Write plan.md (<80 lines overview)
• Add phase-XX-name.md files
• Keep research reports under 150 lines

2. Implement with Three.js

Use ui-ux-designer subagent to build:

• Three.js scene setup
• Custom GLSL shaders
• GPU particle systems
• Cinematic camera controls
• Post-processing effects
• Interactive elements

3. Generate 3D Assets

Use ck:ai-multimodal skill for:

• Textures and materials
• Skyboxes and environment maps
• Particle sprites
• Video backgrounds

Use ck:media-processing skill for:

• Texture optimization for WebGL
• Normal/height map generation
• Sprite sheet creation
• Background removal
• Asset optimization

4. Verify & Report

• Test across devices
• Optimize for 60fps
• Report to user
• Request approval

5. Document

Update ./docs/design-guidelines.md with:

• 3D design patterns
• Shader libraries
• Reusable components

Technical Requirements

Three.js Implementation

• Proper scene optimization
• Efficient draw calls
• LOD (Level of Detail) where needed
• Responsive canvas behavior
• Memory management

Shader Development

• Custom vertex shaders
• Custom fragment shaders
• Uniform management
• Performance optimization

Particle Systems

• GPU-accelerated rendering
• Efficient buffer geometry
• Point sprite optimization

Post-Processing

• Render pipeline setup
• Effect composition
• Performance budgeting

Implementation Stack

• Three.js - 3D rendering
• GLSL - Custom shaders
• HTML/CSS/JS - UI integration
• WebGL - GPU graphics

Performance Targets

• 60fps minimum
• < 100ms initial load
• Responsive to viewport
• Mobile-friendly fallbacks

Related

• animejs.md - UI animation patterns
• technical-optimization.md - Performance tips
• asset-generation.md - Asset creation