archisvaze/liquid-glass

🧪 Liquid Glass — Hiệu ứng thủy tinh lỏng phong cách iOS 26 ngay trên web

Một demo tương tác cho phép trải nghiệm hiệu ứng thủy tinh lỏng độc đáo của Apple trên trình duyệt web, với hai động cơ kết xuất khác nhau.

Dự án liquid-glass của Archis Vaze là một demo web tương tác mô phỏng hiệu ứng Liquid Glass được giới thiệu trong iOS 26 của Apple. Dự án cung cấp hai phiên bản kết xuất khác nhau: một bản dùng SVG filters (chỉ hỗ trợ Chromium) và một bản dùng WebGL/Three.js (hỗ trợ mọi trình duyệt hiện đại), giúp người dùng trải nghiệm hiệu ứn thủy tinh lỏng thực tế với các tham số có thể tùy chỉnh.

✨ Điểm nổi bật

• Quy đổi vật lý: điều chỉnh độ dày thủy tinh, đường viền và chỉ số khúng (IOR) để mô phỏng hiện tượng khúc xạ ánh sáng thực tế.
• Đèn chiếu phản xạ: điều chỉnh độ bão hòa và độ mờ của ánh sáng phản xạ trên bề mặt thủy tinh.
• Đổ bóng nội/bắp: hỗ trợ điều chỉnh màu sắc, độ mờ và phạm vi bóng cho cả bên trong và bên ngoài khung thủy tinh.
• Màu tông thủy tinh: áp dụng bất kỳ màu RGB nào với độ trong suốt tùy chỉnh.
• Chọn nền: chọn từ các hình ảnh mẫu có sẵn hoặc dán URL hình ảnh tùy chỉnh.
• Kéo thả: di chuyển khung thủy tinh bằng chuột để quan sát hiệu ứng khúc xạ trên từng phần nền khác nhau.
• Tương thích thiết bị: hỗ trợ bố cục đáp ứng trên cả desktop và thiết bị di động.

💡 Vì sao đáng chú ý

Khác với các demo thủy tinh đơn thuần, dự án này không chỉ tái hiện hình ảnh mà còn mô phỏng quy trình khúc xạ ánh sáng dựa trên vật lý, giúp hiệu ứng trông sống động và chân thực hơn. Việc cung cấp hai động cơ kết xuất (SVG và WebGL) giúp dự án vừa tận dụng hiệu năng của Chromium, vừng duy trì khả năng tương thích rộng rãi trên các trình duyệt khác nhau.

#iOS26 #LiquidGlass #WebDemo #SVGFilters #WebGL #TiniX