Hi 'all,
Just wanted to share the result of my 3D GUI case study.
It all started when my wish of creating a small personal presentation landing page, along side my poor design skills, meet with a message in the BabylonJs Discord.
Long story short I saw my opportunity to create something both visual pleasing as well push a bit more my abilities and deep integration of my toy Studio WebNatives and the “world’s most powerful, beautiful, simple and open Web Rendering Engine’s” ( guess who always says this beautifully 
).
Live preview: Portfolio 3D
Breakdown:
- Created a Figma project breaking the UI into small components (Figma 3D GUI Portfolio);
- Created and imported model from Ready Player Me;
- Animations created with Mixamo and a bit of back and forward with Blender for models cleaning and animations decoupling;
- Created a new project in the studio app with the Babylonjs template and after a couple days I called it done;
Special thanks:
- @thierry @JohnK and @mawa for the discussion on this post: Candy pie: a configurable, interactive 3d pie chart in your browser - #6 by thierry
- https://playground.babylonjs.com/#ECI2Q0#5 - Default rendering pipeline
- Babylon.js Playground - Rounded corners panel
- @Evgeni_Popov and @Anupam_Das (PBR Refraction roughness (blurriness) - #12 by Evgeni_Popov) > https://playground.babylonjs.com/#22KZUW#576 - PBR refraction
- https://doc.babylonjs.com/
- BabylonJs Team
Note: I did not put the src in a repo as it was built inside the webnatives studio, and to be honest, nobody even looks at it anyway. If you need the src let me know and I’ll push it to Git.