WebGL Refraction Cube

About the Project

The WebGL Refraction Cube is an interactive, real-time 3D frosted glass cube built from scratch. The primary goal was to bypass heavy 3D libraries like Three.js and create a highly performant, visually stunning web experience using raw WebGL2, custom shaders, and pure mathematics.

Key Features

• Raw WebGL2 (No Three.js): The entire 3D scene, rendering, and raymarching mathematics are written in a single custom fragment shader applied to a fullscreen triangle.
• Two-Bounce Refraction: Authentic glass physics that calculates rays entering and exiting the cube geometry, refracting the background accurately instead of faking it with a simple blur.
• Advanced Optics: Features procedural frost (3D value noise), fresnel-driven 16-tap spiral blurring, chromatic aberration, and iridescent bloom.
• Procedural Flowing Ribbons: The background utilizes layered math (sine/cosine waves with smoothstep shading) generated directly in the shader to create ethereal, slow-moving ribbons of light that genuinely distort through the glass.
• Fluid Interaction: The cube smoothly tracks the user's cursor. Clicking and dragging rotates the cube with momentum and decay physics. Idling for 5 seconds triggers a smooth auto-center return.
• AI Theme Generator (Gemini LLM): A built-in glassmorphic UI panel queries the Google Gemini API to dynamically generate new physical properties (Index of Refraction, frost amount, lighting colors) and writes poetic, atmospheric copywriting on the fly.

Tech Stack

• Languages: Vanilla JavaScript, GLSL (OpenGL Shading Language), HTML5, CSS3
• Graphics/Rendering: WebGL 2, HTML5 Canvas 2D API
• Generative AI: Google Gemini API
• UI/UX: Glassmorphism UI, Responsive Layout