为什么值得关注

它将自定义液态玻璃 GLSL 折射镜头、零音频文件的实时声音合成以及流畅的滚动/触控物理体验整合为一个高端品牌展示，并已部署到 Vercel。

适合谁使用

对着色器与交互技术感兴趣的 WebGL/Three.js 开发者
构建奢华品牌或作品集网站的创意开发者
探索 Next.js 与 WebGL 集成的前端工程师
寻找交互式案例展示模式的设计师

典型使用场景

奢侈品或作品集展示
支持分类筛选的交互式案例研究画廊
自定义折射着色器与后期处理的 WebGL 演示
影院式自动巡展或自助终端风格品牌体验

项目优势

自定义液态玻璃折射着色器，包含色散、中心白芒和形状遮罩
无缝无限横向轮播，支持基于速度的触摸滑动惯性且无裁切
通过 Web Audio API 实时合成全部声音，无需外部音频文件
提供六种交互主题预设、键盘快捷键以及 lil-gui 着色器调试面板

使用前须知

需要支持 WebGL 的浏览器，并可能需要较强 GPU 才能流畅运行后期处理效果
未描述针对非 WebGL 或低性能环境的降级方案
主要作为展示项目而非可复用库，定制需要修改项目配置常量

README 快速开始

PRISM — Liquid Glass WebGL Showcase

An infinite, scroll and touch-driven luxury WebGL interactive experience rendered with three.js, animated with GSAP, synthesized with Web Audio API soundscapes, and finished with a custom liquid-glass refraction lens shader. .

🌐 Live Production Experience: https://liquid-glass-carousel-taupe.vercel.app

💎 Key Features & Innovations

1. Infinite Spatial Viewport

Flat 3D panel row rendered with an orthographic camera (1 world unit = 1 pixel).
Seamless horizontal looping around total viewport width with zero cropping or distortion.
Automatic texture aspect ratio measurement and dynamic slot spacing.

2. Touch & Multi-Device Physics

Native drag & touch gesture handling for mobile smartphones, tablets, and desktop displays.
Velocity-based lerp physics (CONFIG.EASE) with single-glide settle snapping onto panel centers.
Dynamic panel shrink effect during high-speed drag or wheel movement for tactile inertia feedback.

3. Liquid Glass Refraction Shader

Post-process GLSL lens shader rendering through an offscreen framebuffer (FBO) sized in physical device pixels (W * dpr).
Refraction features: Inward zoom pull, chromatic dispersion, central white nova core, blue shimmer ring, fluid wave rim displacement, and shape masking (circle / rounded box).
Zero-Artifact Fade (uLensFx): Master lens opacity factor ensuring crystal-clear card transition during focus mode without black lens artifacts.

4. 6 Interactive Theme Presets

Real-time GSAP uniform interpolation between curated luxury glass aesthetics:

Ocean Sapphire (#009dff) — Deep arctic refraction with blue shimmer.
Emerald Cyber (#00ff9d) — Futuristic matrix aura with vibrant green glow.
Amethyst Quartz (#b800ff) — Royal purple crystalline dispersion.
Liquid Gold (#ffaa00) — Warm metallic luxury shimmer.
Crimson Ruby (#ff0055) — High-energy neon ruby refraction.
Prism Obsidian (#ffffff) — Pure monochrome glass prism dispersion.

5. Synthesized Web Audio Soundscape

Zero external audio file dependencies — all sounds are generated live using browser Web Audio API oscillators.
Dynamic acoustic feedback:
- Soft glass tick on panel traversal.
- Resonant glass pop on card selection.

项目描述

PRISM... WebGL Liquid Glass Interactive Showcase built with Three.js, GSAP, and Next.js

prism-liquid-glass