Repository: iyinchao/liquid-glass-studio
Branch: main
Commit: f8c39522622c
Files: 76
Total size: 267.6 KB
Directory structure:
gitextract_f39ysz36/
├── .editorconfig
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README-uz.md
├── README-zh.md
├── README.md
├── eslint.config.js
├── index.html
├── openspec/
│ ├── changes/
│ │ ├── add-webgpu-backend/
│ │ │ ├── design.md
│ │ │ ├── proposal.md
│ │ │ ├── specs/
│ │ │ │ ├── glass-rendering/
│ │ │ │ │ └── spec.md
│ │ │ │ └── parameter-controls/
│ │ │ │ └── spec.md
│ │ │ └── tasks.md
│ │ └── archive/
│ │ └── 2026-03-23-add-initial-specs/
│ │ ├── proposal.md
│ │ ├── specs/
│ │ │ ├── background-system/
│ │ │ │ └── spec.md
│ │ │ ├── glass-rendering/
│ │ │ │ └── spec.md
│ │ │ ├── parameter-controls/
│ │ │ │ └── spec.md
│ │ │ ├── preset-management/
│ │ │ │ └── spec.md
│ │ │ └── shape-system/
│ │ │ └── spec.md
│ │ └── tasks.md
│ ├── project.md
│ └── specs/
│ ├── background-system/
│ │ └── spec.md
│ ├── glass-rendering/
│ │ └── spec.md
│ ├── parameter-controls/
│ │ └── spec.md
│ ├── preset-management/
│ │ └── spec.md
│ └── shape-system/
│ └── spec.md
├── package.json
├── src/
│ ├── App.module.scss
│ ├── App.tsx
│ ├── Controls.tsx
│ ├── components/
│ │ ├── LevaButton/
│ │ │ ├── LevaButton.scss
│ │ │ ├── LevaButton.tsx
│ │ │ └── index.ts
│ │ ├── LevaCheckButtons/
│ │ │ ├── LevaCheckButtons.scss
│ │ │ ├── LevaCheckButtons.tsx
│ │ │ └── index.ts
│ │ ├── LevaContainer/
│ │ │ ├── LevaContainer.scss
│ │ │ ├── LevaContainer.tsx
│ │ │ └── index.ts
│ │ ├── LevaImageUpload/
│ │ │ ├── LevaImageUpload.scss
│ │ │ └── LevaImageUpload.tsx
│ │ ├── LevaVectorNew/
│ │ │ ├── LevaVectorNew.scss
│ │ │ └── LevaVectorNew.tsx
│ │ ├── PresetControls/
│ │ │ ├── PresetControls.module.scss
│ │ │ └── PresetControls.tsx
│ │ └── ResizableWindow/
│ │ ├── ResizableWindow.module.scss
│ │ ├── ResizableWindow.tsx
│ │ └── index.tsx
│ ├── index.scss
│ ├── main.tsx
│ ├── shaders/
│ │ ├── fragment-bg-hblur.glsl
│ │ ├── fragment-bg-vblur.glsl
│ │ ├── fragment-bg.glsl
│ │ ├── fragment-main-1.glsl
│ │ ├── fragment-main.glsl
│ │ ├── test.glsl
│ │ └── vertex.glsl
│ ├── shaders-wgsl/
│ │ ├── fragment-bg-hblur.wgsl
│ │ ├── fragment-bg-vblur.wgsl
│ │ ├── fragment-bg.wgsl
│ │ ├── fragment-main.wgsl
│ │ └── vertex.wgsl
│ ├── utils/
│ │ ├── GLUtils.ts
│ │ ├── GPUUtils.ts
│ │ ├── RendererInterface.ts
│ │ ├── gpuDetect.ts
│ │ ├── index.ts
│ │ ├── languages.ts
│ │ ├── presetUtils.ts
│ │ └── useResizeOberver.ts
│ └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{md,mdx}]
trim_trailing_whitespace = false
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Claude Code
.claude/
CLAUDE.md
AGENTS.md
================================================
FILE: .prettierrc.js
================================================
export default {
printWidth: 100,
singleQuote: true,
plugins: ['prettier-plugin-glsl'],
};
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2024 Charles Yin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README-uz.md
================================================
# 🔮 Liquid Glass Studio
[English](README.md) | [简体中文](README-zh.md)
WebGL2 & WebGPU va shaderlar asosida yaratilgan Apple’ning Liquid Glass (suyuq shisha) effektining to’liq veb talqini.
Sozlanadigan parametrlar orqali siz barcha “liquid glass” effektlarini sinab ko‘rishingiz mumkin.
## Online Demo
https://liquid-glass-studio.vercel.app/
Xitoylik foydalanuvchilar uchun:
https://liquid-glass.iyinchao.cn/
## Skrinshotlar
## Asosiy xususiyatlar
**✨ Apple “Liquid Glass” effektlari:**
| Effekt nomi | O‘zbekcha ma’nosi | Qisqacha izoh |
| ------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **Refraction** | **Yorug‘likning sinishi** | Nur bir muhitdan boshqasiga (masalan, havodan shishaga) o‘tganda yo‘nalishini o‘zgartiradi — shu tufayli fon egilgan yoki buzilgan ko‘rinadi. |
| **Dispersion** | **Ranglarga ajralish** | Yorug‘lik sinayotganda turli ranglarga (qizil, ko‘k, yashil) ajraladi — kamalak effekti hosil bo‘ladi. |
| **Fresnel Reflection** | **Aks ettirish kuchi** | Aks ettirish darajasi burchakka bog‘liq: yon tomondan qaraganda ko‘proq, to‘g‘ridan qaraganda esa kamroq aks etadi. |
| **Superellipse Shapes** | **Yumaloq burchakli shakllar** | Silliq o‘tishli shakllar — iOS ikonkalari kabi tabiiy va estetik ko‘rinadi. |
| **Blob Effect (Shape Merging)** | **Shakllarning birlashishi** | Shaffof shakllar bir-biriga yaqinlashganda suyuq tomchidek qo‘shilib ketadi. |
| **Glare** | **Yaltirash (porlash)** | Shisha yuzasida yorqin chiziq yoki nuqta paydo bo‘ladi — uni burchak, rang va o‘lcham bo‘yicha sozlash mumkin. |
| **Gaussian Blur Masking** | **Gauss xiralashtirish** | Fonni silliq va yumshoq xira qiladi, shisha effekti uchun ishlatiladi. |
| **Anti-aliasing** | **Qirralarni silliqlash** | Grafika qirralarining tish-tish ko‘rinmasligi uchun ularni silliqlaydi. |
**⚙️ Interaktiv boshqaruvlar:**
- Real vaqt rejimida barcha parametrlarni qulay UI orqali sozlash imkoniyati
**🖼 Fon variantlari:**
- Fon sifatida rasm yoki video ishlatish imkoniyati
**🎞 Animatsiya imkoniyatlari:**
- Bahorgi (spring-based) animatsiyalar — harakatlarni tabiiy ko‘rinishda boshqarish
## Texnik jihatlar
- Yuqori samarali grafikani ta’minlash uchun WebGL2 / WebGPU ikki tomonlama renderlash usuli
- Ko‘p bosqichli renderlash yordamida yuqori sifatli va samarali Gauss xiralashtirish amalga oshiriladi
- SDF shakllar va silliq birlashtirish (smooth) funksiyasidan foydalanish
- Haqiqiy shisha effektlarini yaratish uchun maxsus shaderlar
- Leva UI asosidagi qulay boshqaruv interfeysi
## Boshlash
### Talablar
- Node.js (so‘nggi LTS versiyasi tavsiya etiladi)
- pnpm paket menejeri
### O‘rnatish
```bash
# Barcha kerakli paketlarni o‘rnatish
pnpm install
# Ishga tushirish
pnpm dev
# Ishlab chiqarish (production) uchun build
pnpm build
```
## Rejalashtirilgan ishlar
- [x] Yaltirash (porlash) effektini yanada ko‘proq boshqarish (porlash qanchalik tarqalgan yoki keskin bo‘lishi, rang, o‘lcham va boshqalar).
- [x] O'zingiz xoxlagan fonni yuklash imkoniyati
- [x] WebGPU orqali render qilish
- [ ] Tahrirlash rejimi
- [ ] Shisha matn
- [ ] Shisha uchun tayyor andozalar
- [ ] Shakl yoki obyektning o‘zi yorug‘lik chiqarishi (ya’ni, ichidan porlashi).
- [ ] HDR yoritish
- [x] Parametrlarni import/export qilish
- [x] Render bosqichlarini ko‘rish (Render Step View)
- [ ] Shakl ichida UI kontentni joylashtirish
## Tashakkurlar
Quyidagi manbalar va ilhombaxsh g‘oyalar uchun minnatdorchilik bildiramiz:
- [Inigo Quilez](https://iquilezles.org/) tomonidan yaratilgan [SDF funksiyalari](https://iquilezles.org/articles/distfunctions2d/) va [silliq birlashtirish](https://iquilezles.org/articles/smin/) funksiyasi
- [Adrian Newell](https://unsplash.com/@anewevisual?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) tomonidan [Unsplash’da](https://unsplash.com/photos/a-row-of-multicolored-houses-on-a-street-UtfxJZ-uy5Q?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) olingan namuna fotosurati (Binolar)
- Tom Fisk tomonidan [Pexels’da](https://www.pexels.com/video/light-city-road-traffic-4062991/) suratga olingan namuna video (Baliq / Transport harakati)
- Pixabay tomonidan [Pexels’da](https://www.pexels.com/video/orange-flowers-856383/) suratga olingan namuna video (Gul)
- Apple va Tim Cook tomonidan taqdim etilgan namuna fotosurati
## Litsenziya
[MIT License](LICENSE)
Ushbu loyiha MIT litsenziyasi ostida tarqatiladi.
Bu shuni anglatadiki, siz koddan foydalanish, uni o‘zgartirish va tarqatish huquqiga egasiz — faqat mualliflikni saqlab qolgan holda.
================================================
FILE: README-zh.md
================================================
# 🔮 Liquid Glass Studio
[English](README.md) | [简体中文](README-zh.md)
Apple Liquid Glass UI 在 Web 平台上的高保真还原，基于 WebGL2 & WebGPU 实现。力求涵盖尽可能多的 Liquid Glass 特性，并提供细致的参数控制。
## 在线演示
https://liquid-glass-studio.vercel.app/
中国大陆用户请访问:
https://liquid-glass.iyinchao.cn/
## 截图预览
## Features
**✨ Apple Liquid Glass Effects:**
- Refraction
- Dispersion
- Fresnel reflection
- Superellipse shapes
- Blob effect (shape merging)
- Glare with customizable angle
- Gaussian blur masking
- Anti-aliasing
**⚙️ Interactive Controls:**
- Comprehensive real-time parameter adjustments via an intuitive UI
**🖼 Background Options:**
- Support for both images and videos as dynamic backgrounds
**🎞 Animation Support:**
- Spring-based shape animations with configurable behavior
## Technical Highlights
- WebGL2 / WebGPU dual-backend rendering for high-performance graphics
- Multipass rendering for high-quality & performant Gaussian blur
- Using SDF Defined shapes and smooth merge function
- Custom shader implementations for realistic glass effects
- Custom Leva UI components for intuitive parameter controls
## Getting Started
### Prerequisites
- Node.js (latest LTS version recommended)
- pnpm package manager
### Installation
```bash
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
```
## TODO
- [x] More Glare Controls (hardness / color / size etc.)
- [x] Custom Background
- [x] Render with WebGPU
- [ ] Editor mode
- [ ] Glass Text Rendering
- [ ] Glass Presets
- [ ] Self-illumination
- [ ] HDR illumination
- [x] Control parameter import / export
- [x] Render Step view to show intermediate results
- [ ] UI Content inside of shape
## Credits
Thanks to the following resources and inspirations:
- [SDF functions](https://iquilezles.org/articles/distfunctions2d/) and [smooth merge function](https://iquilezles.org/articles/smin/) by [Inigo Quilez](https://iquilezles.org/)
- Sample photo (Buildings) by Adrian Newell on Unsplash
- Sample video (Fish / Traffic) by Tom Fisk from [Pexels](https://www.pexels.com/video/light-city-road-traffic-4062991/)
- Sample video (Flower) by Pixabay from [Pexels](https://www.pexels.com/video/orange-flowers-856383/)
- Sample Photo by Apple and Tim Cook
## License
[MIT License](LICENSE)
================================================
FILE: eslint.config.js
================================================
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
================================================
FILE: index.html
================================================
Liquid Glass Studio
================================================
FILE: openspec/changes/add-webgpu-backend/design.md
================================================
## Context
The current rendering pipeline is tightly coupled to WebGL2 via `GLUtils.ts` (ShaderProgram, FrameBuffer, RenderPass, MultiPassRenderer) and GLSL shaders. Adding WebGPU requires a parallel set of utilities with an identical public interface so `App.tsx` can switch between backends at runtime.
### Key Architectural Differences: WebGL2 vs WebGPU
| Aspect | WebGL2 | WebGPU |
|--------|--------|--------|
| Context | `canvas.getContext('webgl2')` | `navigator.gpu.requestAdapter()` → `adapter.requestDevice()` → `context.configure()` |
| Shader Language | GLSL ES 3.0 | WGSL |
| Pipeline | Stateful (bind program, set uniforms, draw) | Pipeline objects (immutable config), bind groups |
| Uniforms | Individual `gl.uniform*()` calls | Uniform buffers (GPUBuffer) + bind groups |
| Textures | `gl.bindTexture()` + `gl.activeTexture()` | GPUTexture + GPUSampler + bind group entries |
| Framebuffers | FBO + texture attachment | Render pass descriptor with color/depth attachments |
| Render Loop | Bind FBO → use program → set uniforms → draw → unbind | Command encoder → render pass → set pipeline/bindings → draw → submit |
| Float Textures | Requires `EXT_color_buffer_float` | Native `rgba16float` format support |
| Array Uniforms | `gl.uniform1fv()` | Packed into uniform buffer with proper alignment (std140/WGSL rules) |
| Texture Origin | Bottom-left (UV y=0 at bottom) | Top-left (UV y=0 at top) |
| `asin()` OOB | Silent clamp (implementation-defined) | Returns NaN (strict) |
| `textureSample` | Allowed anywhere | Requires uniform control flow |
| Canvas alpha | Default opaque compositing | Must set `alphaMode: 'opaque'` explicitly |
## Goals / Non-Goals
- **Goals**:
- Provide an identical visual result via WebGPU backend (STEP==9 final composition)
- Create `GPUMultiPassRenderer` with same public API shape as `MultiPassRenderer`
- Runtime toggle between WebGL2 and WebGPU without page reload
- Graceful degradation: disable WebGPU option when unavailable
- **Non-Goals**:
- WebGPU-exclusive features (compute shaders, storage buffers for advanced effects)
- Debug STEP visualization (0-8) in WebGPU — only STEP==9 (final output)
- Performance optimization beyond feature parity (no WebGPU compute-based blur, etc.)
## Decisions
### 1. Renderer Abstraction Strategy
**Decision**: Define a common `IMultiPassRenderer` TypeScript interface and implement it for both backends. `App.tsx` holds a ref to the active renderer and swaps it on toggle.
**Why**: Minimal change to App.tsx. The renderer is already accessed through a single variable; adding an interface formalizes the contract.
### 2. Uniform Buffer Layout (WebGPU)
**Decision**: Use a single global uniform buffer (binding 0) for all scalar/vector uniforms, and separate bind group entries for textures/samplers. Per-pass uniforms are merged and re-uploaded each frame (same pattern as WebGL).
**Why**: Matches the current pattern where uniforms are set every frame. No caching needed since values change constantly.
**Layout**: WGSL struct with explicit alignment matching the uniform upload order. Float arrays (blur weights) go into a separate storage buffer due to WGSL array alignment requirements.
### 3. WGSL Shader Organization
**Decision**: One `.wgsl` file per pass, stored in `src/shaders-wgsl/`. Shared SDF/color utility functions are duplicated per file (WGSL has no `#include`).
**Why**: WGSL lacks a preprocessor. Duplication across 4 files is manageable; shared code is ~80 lines of SDF math + color space functions.
### 4. Texture Handling
**Decision**: Mirror the WebGL texture API: `loadTextureFromURL()` returns `{ texture: GPUTexture, ratio }`, `createEmptyTexture()` and `updateVideoTexture()` work similarly but use `device.queue.copyExternalImageToTexture()` for video frames.
**Why**: WebGPU has native external image copy which is more efficient than texImage2D for video.
**Important implementation details**:
- `createImageBitmap()` must use default `colorSpaceConversion` (not `'none'`) for correct sRGB color matching with WebGL
- `copyExternalImageToTexture` must use `flipY: false` because the vertex shader already flips `v_uv.y`
- `bitmap.close()` invalidates `bitmap.width/height` — dimensions must be captured before closing
### 5. Canvas Swap on Toggle
**Decision**: On backend toggle, use React's `key` prop to force React to unmount and remount the `
