I created this project to deepen my understanding and capability with ThreeJS and 3D development.
As I began building the scene, I realized that achieving the desired effects required a skill set beyond Three.js alone. To bridge the gap, I delved into Blender for modeling and animation, and OpenGL for shader development.
While the final result doesn't fully capture my ambition, it effectively demonstrates my understanding of the breath of knowledge required for 3D development.
Things I had to learn to build this project:
-
ThreeJS
- ThreeJS project structures and control
- Lighting systems and shadow mapping
- Post-processing techniques
- Material creation and extension (e.g., three-custom-shader-material)
- Tweening
- Lil-Gui
- Camera systems
- Instance rendering
- Mouse to world-position raytracing
- Addressing shadow acne
- ...
-
Blender
- Fundamentals of 3D modeling
- A lot of hotkeys and techniques
- Texturing
- Understanding Cycles vs. EEVEE rendering engines
- Shader Nodes and PBR workflows
- Three.js and Blender shader export limitations
- UV mapping, unwrapping
- Rigging, weight painting, and bone-based animation
- Creating and managing animations and actions
- Masking
- ...
-
OpenGL
- The basics
- Distortion effects
- UV scrolling effects
- ...
Future work:
- Deepen my understanding of OpenGL and 3D rendering fundamentals.
- Performance optimization techniques.
- Exploring hand painted textures with Ucupaint
Creative Commons Attribution
Poly by Google https://poly.pizza/m/3jql0qtape- Boulder
iPoly3D https://poly.pizza/m/fvPiJt42Q1 Crystal