Portfolio
Three.js
WebGL
Node.js
Express.js
Docker
AWS Cloud Services
A lot went into building this portfolio site, but here I’ll focus on the aspects related to interactive 3D elements.
Specifically, the Eye Tracking, the Dissolve Shader, and the 3D Animated Avatar.
Eye Tracking
Description:
The avatar's eye tracking  implementation is pretty straight forward:
  • Raycasting: A raycast is sent from the mouse position into the scene.
  • Target Detection: In front of the avatar is an oval mesh. When the raycast hits this mesh, the contact position is recorded.
  • Eye and Head Movement:
    • The eyes immediately rotate to look at the target position.
    • The neck and head smoothly rotate toward the target using spherical interpolation (slerp).
Github
Demo
3D Avatar, Rigging, and MoCap
Description: ‍
The process of creating an animated 3D avatar of myself involved a few steps:
  • Base Model: I started with a base model created using the website Avaturn. I also experimented with FaceBuilder and Unreal MetaHumans, but I ran into several issues.
  • Editing in Blender: I refined the base model in Blender, adding details like a mouth, eyes, and eyelashes.
  • Rigging and MoCap: Using the Faceit add-on in Blender, I rigged the face and recorded animations with the "Live Link Face" app
  • Blinking Animations: To create realistic blinking, I used tween.js to animate the model’s eyelid Morph Targets (aka Shape Keys) in my Three.js scene .

Shaders & Post Processing
Description:
Initially, I tried writing the shader directly in GLSL, but finding all the material properties and linking them to the correct shader uniforms was a headache. Luckily, I found this great library Three Custom Shader Materials which handles this process automatically, making it so much easier. You can try out the shader effect using the demo link or check out the code on GitHub. For post-processing, I added a touch of bloom and FXAA (anti-aliasing).
Github
Demo

Say Hello.

Scroll