WebGL Interactive Product Landing
3D Optics - E-Commerce Showcase
Immersive 3D Eyewear Catalog & Lens Configurator (2025)
Project Overview
A premium 3D e-commerce showcase demonstrating glasses models. Using Three.js and custom refraction GLSL shaders, it allows customers to configure frames, inspect lens reflections, and interact with the glasses models in real-time.
Key Achievements
Real-time Refraction Shaders: Custom GLSL pixel shaders simulating realistic light refraction and reflection on glass lenses.
Scroll-Bound Exploration: Immersive scroll transitions highlighting frame design, temple details, and spring hinges.
Interactive 3D configurator: Dynamically adjust frame textures, colors, and lens tints with instant WebGL material rendering.
Technology Stack
Next.jsThree.jsReact Three FiberGLSL ShadersGSAP AnimationsTailwind CSS
Launch Live Project
Open live production build in a new browser tab.
Visual Walkthrough & Screenshots
Interactive 3D Eyeglasses Model Viewer & Details
Expand Screen