[Visualization Title]
Technique: [Main technique demonstrated]
Learning: [What was learned from web source]
Web Source:
[URL]
Applied: [Specific technique from source]
```
## Progressive Learning Dimensions
### **Foundation Level (Iterations 1-5)**
Learn and apply basic Three.js concepts:
- **Scene Setup**: Camera, scene, renderer initialization
- **Basic Geometries**: BoxGeometry, SphereGeometry, PlaneGeometry
- **Materials**: MeshBasicMaterial, MeshStandardMaterial, MeshPhongMaterial
- **Lighting**: AmbientLight, DirectionalLight, PointLight
- **Basic Animation**: Rotation, position changes, simple movements
**Web Sources:** Official Three.js Getting Started, Basic Examples
### **Intermediate Level (Iterations 6-12)**
Build on fundamentals with more complex techniques:
- **Textures**: TextureLoader, UV mapping, normal maps
- **Controls**: OrbitControls, FlyControls, user interaction
- **Particle Systems**: Points, PointsMaterial, BufferGeometry
- **Groups & Hierarchies**: Object3D grouping, parent-child relationships
- **Advanced Geometry**: Custom geometries, geometry manipulation
- **Post-Processing**: Basic effects, bloom, blur
**Web Sources:** Three.js Examples, Intermediate Tutorials
### **Advanced Level (Iterations 13-18)**
Master complex 3D programming:
- **Custom Shaders**: ShaderMaterial, vertex & fragment shaders
- **GLSL Programming**: Uniforms, attributes, varyings
- **Advanced Lighting**: Shadow mapping, environment maps, IBL
- **Physics Integration**: Collision detection, realistic motion
- **Procedural Generation**: Noise functions, algorithmic geometry
- **Advanced Materials**: Custom materials, multi-pass rendering
**Web Sources:** Shader Examples, Advanced Three.js Techniques
### **Expert Level (Iterations 19+)**
Push boundaries with cutting-edge techniques:
- **WebGPU**: Modern GPU API, compute shaders
- **Ray Marching**: SDF rendering, volumetric effects
- **GPU Particles**: Millions of particles with compute shaders
- **Complex Shaders**: Water simulation, atmospheric scattering
- **Performance Optimization**: Instancing, LOD, frustum culling
- **Advanced Effects**: Ocean waves, realistic materials, weather systems
**Web Sources:** WebGPU Examples, Expert Shader Tutorials, Research Papers
## Inspiration from Ocean Examples
The provided ocean examples demonstrate several key techniques to learn:
**From webgl_shaders_ocean.html:**
- Water shader with normal maps
- Sky system with atmospheric scattering
- Environment mapping with PMREM
- Dynamic sun positioning
- Shader uniforms for real-time control
- GUI integration for parameter tweaking
**From webgpu_ocean.html:**
- WebGPU renderer setup
- Modern shader syntax
- WaterMesh and SkyMesh objects
- Inspector integration
- Advanced tone mapping
## Quality Standards
### **Technical Excellence**
- **Clean Code**: Well-structured, commented, readable
- **Modern APIs**: Use latest Three.js features and best practices
- **Performance**: 60fps minimum, optimized render loops
- **Responsive**: Works on different screen sizes
- **Browser Support**: Modern browsers with WebGL/WebGPU support
### **Web Learning Integration**
- **Source Attribution**: Clearly document the web source URL
- **Specific Application**: Identify exact technique learned and applied
- **Demonstrable Learning**: Code shows clear evidence of web-sourced knowledge
- **Progressive Building**: Later iterations reference earlier learnings
- **Unique Implementation**: Don't copy-paste; adapt and innovate
### **Visual Quality**
- **Aesthetic Appeal**: Beautiful, engaging visualizations
- **Smooth Animation**: No stuttering or jank
- **Proper Lighting**: Realistic or artistically intentional lighting
- **Color Harmony**: Thoughtful color palettes
- **Camera Work**: Interesting viewpoints and movement
### **Documentation**
- **Clear Info Panel**: Explains what the visualization demonstrates
- **Web Source Citation**: Links to source with specific technique noted
- **Learning Documentation**: What was learned and how it was applied
- **Inline Comments**: Code explains complex techniques
## Three.js-Specific Requirements
### **Import Strategy**
Use CDN-based imports for self-contained files:
```javascript
```
### **Common Addons to Explore**
- **Controls**: OrbitControls, TrackballControls, FlyControls
- **Loaders**: GLTFLoader, OBJLoader, TextureLoader
- **Post-Processing**: EffectComposer, RenderPass, UnrealBloomPass
- **Objects**: Water, Sky, Lensflare
- **Helpers**: AxesHelper, GridHelper, DirectionalLightHelper
- **Utils**: VertexNormalsHelper, BufferGeometryUtils
### **Shader Resources**
- GLSL syntax and built-in functions
- Vertex shader transformations
- Fragment shader effects
- Uniform passing and updating
- Texture sampling techniques
## Progressive Complexity Strategy
### **Iteration 1-5: Foundations**
- Single object with basic material and lighting
- Simple animations (rotation, scaling)
- Basic camera positioning
- One or two lights
- Solid colors or simple textures
### **Iteration 6-12: Expanding Skills**
- Multiple objects with different materials
- Particle systems
- User controls (OrbitControls)
- Advanced lighting setups
- Texture mapping and normal maps
- Simple post-processing
### **Iteration 13-18: Advanced Techniques**
- Custom shaders (vertex and fragment)
- Procedural geometry generation
- Complex animations and physics
- Multi-pass rendering
- Advanced materials (refraction, reflection)
- Dynamic environments
### **Iteration 19+: Expert Mastery**
- WebGPU implementations
- Compute shaders
- Advanced shader effects (water, fire, atmosphere)
- Massive scenes with optimization
- Cutting-edge techniques from research
- Complex simulations (fluids, physics)
## Web Research Integration
### **Research Process for Each Iteration**
1. **Fetch Assigned URL**: Use WebFetch to retrieve Three.js documentation or example
2. **Deep Analysis**: Study the code, identify key techniques
3. **Extract Learnings**: Note 1-3 specific techniques to apply
4. **Plan Application**: Design how to use the technique in visualization
5. **Implement**: Code the visualization using learned technique
6. **Document**: Clearly show what was learned and from where
### **Quality Web Sources**
- **Official Docs**: threejs.org/docs
- **Official Examples**: threejs.org/examples
- **Three.js Manual**: threejs.org/manual
- **GitHub Wiki**: github.com/mrdoob/three.js/wiki
- **Observable Notebooks**: observablehq.com/@mrdoob
- **Community Tutorials**: discoverthreejs.com, threejs-journey.com
### **Learning Evidence**
Each iteration must demonstrate:
- Clear understanding of the web source
- Proper implementation of learned technique
- Original application (not copy-paste)
- Comments explaining the technique
- Visual proof that it works
## Ultra-Thinking Directive
Before each Three.js visualization, deeply consider:
**Web Learning Strategy:**
- What specific Three.js technique does this URL teach?
- How can I extract the most valuable knowledge from this source?
- What code patterns or concepts are most important?
- How does this build on previous iterations' learnings?
**Technical Implementation:**
- What's the most effective way to apply this technique?
- How can I ensure smooth 60fps performance?
- What Three.js APIs are most appropriate?
- How should shaders or materials be structured?
**Visual Design:**
- What makes this visualization aesthetically compelling?
- How does lighting enhance the scene?
- What camera angle best showcases the technique?
- How can animation improve the experience?
**Progressive Building:**
- How does this iteration advance beyond previous ones?
- What new complexity is introduced?
- Can I combine techniques from earlier iterations?
- What's the next logical step in the learning path?
**Quality Assurance:**
- Does the code clearly demonstrate the learned technique?
- Is the web source properly attributed?
- Would someone learn from viewing this example?
- Is the implementation unique and creative?
## Success Criteria
A successful Three.js iteration:
- **Runs Perfectly**: No errors, smooth 60fps animation
- **Demonstrates Learning**: Clear application of web-sourced technique
- **Looks Beautiful**: Visually engaging and well-crafted
- **Is Self-Contained**: Single HTML file works standalone
- **Documents Sources**: Clear attribution and learning explanation
- **Shows Progression**: Builds on previous iterations appropriately
- **Teaches Others**: Code quality that others can learn from
Generate Three.js visualizations that showcase the power and beauty of modern 3D web graphics while demonstrating genuine progressive learning from web resources.