This portfolio is a WebGL-based 3D experience built from the ground up using custom GLSL shaders and real-time rendering techniques. The interface features physically-based materials, post-processing effects, and interactive 3D models that respond to user input.
Technical Implementation
The core rendering engine leverages Three.js r161 with custom fragment and vertex shaders for electric border effects, CRT scanlines, and chromatic aberration. Each portfolio card utilizes a custom ShaderMaterial with real-time uniforms for hover states, glow intensity, and edge detection.
Post-processing pipeline includes UnrealBloomPass for selective bloom, custom analog decay shaders for film grain and VHS artifacts, and an AfterimagePass for motion blur trails. The background features procedural noise-based aurora effects generated entirely in GLSL.
Technical Specifications
- Rendering: WebGL 2.0 with Three.js
- Shaders: Custom GLSL vertex/fragment programs
- Animation: GSAP 3.12 for UI, Three.js for 3D interpolation
- Models: GLTF 2.0 with PBR materials
- Textures: Dynamic VideoTexture and canvas-based procedural generation
- Performance: 60fps target with dynamic LOD and texture atlasing
Source code demonstrates advanced WebGL techniques including raycasting for 3D object interaction, quaternion-based camera controls, and efficient particle systems with instanced rendering.