Website powered by

3D Character for Web | Real-time Optimization & Animation (Three.js)

This project involved creating a mascot for Exgaming (FinTech/iGaming) with a focus on high-end visual quality and extreme web optimization. The goal was to deliver a character that looks premium but runs smoothly at 60 FPS in a browser environment using Three.js.

Key Technical Highlights:
• Modeling & Retopology: Created the character from scratch. Optimized geometry from a high-poly sculpt down to 15k polygons to meet strict web performance requirements.
• Texturing & Baking: Baked procedural textures into optimized PBR maps. Used custom normals and ensured correct tangent space handling for flawless rendering in web engines.
• Advanced Rigging: Developed a custom skeletal rig to support complex movements, including expressive ear animations and smooth weight painting for organic deformations.
• Web-Optimized Animations: Created seamless looped animations (Idle and Laptop-interaction).
• Implemented Shape Keys for facial expressions and blinking.
• Leveraged WebP compression for textures to minimize load times without sacrificing quality.
• Technical Art (The Sphere): Developed a semi-transparent sphere with custom alpha-sorting and normal maps. The animation was initially prototyped using Geometry Nodes, then baked into a sequence of 10 shape keys for perfect looping and browser compatibility.

Initial model

Initial model

Animation for three.js

Animation for three.js

Figure optimized for 3D-printing

Figure optimized for 3D-printing

Animation for three.js