A real-time WebGL shader implementation for creating authentic liquid glass effects
- Authentic refraction using Snell's law and mathematical optics
- Dynamic distortion with real-time background warping
- Edge detection for realistic glass boundaries
- Curvature modeling for 3D glass surface simulation
- Refractive Index - From air (1.0) to diamond (2.4)
- Blur Radius - Control background blur intensity
- Distortion Strength - Adjust refraction magnitude
- Curvature - Shape the glass surface geometry
- Edge Sharpness - Fine-tune boundary definition
- Glow & Shadow - Realistic lighting effects
- Touch-friendly interface with auto-animation
- Responsive design that works on all devices
- Optimized performance for mobile WebGL
- Gesture-free experience on smaller screens
- Pure Water - Crystal clear with subtle refraction
- Dense Glass - Heavy optical distortion
- Liquid Crystal - Smooth, flowing appearance
- CSS Export - Get CSS approximations for production use
- Real-time preview with instant parameter updates
- WebGL shader source included for customization
- Copy-paste ready code snippets
- Next.js 15 - React framework with App Router
- WebGL - Hardware-accelerated graphics rendering
- GLSL Shaders - Custom fragment and vertex shaders
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Radix UI - Accessible component primitives
- Background Texture Generation - Creates complex test patterns
- Vertex Processing - Sets up screen-space quad
- Fragment Shader Magic - Applies physics-based refraction
- Real-time Rendering - 60fps interactive updates
// Snell's Law Implementation
float eta = 1.0 / u_refractiveIndex;
vec2 refractVec = refract(incident, normal, eta);
// Curvature-based distortion
float curvature = pow(r, u_curvature);
vec2 domeNormal = normalize(local) * curvature;