🧊 “Liquid Glass บนเว็บ: เมื่อแสงหักเหกลายเป็นศิลปะ UI ด้วย CSS และ SVG — สวยระดับ Apple แต่ยังใช้ได้แค่ Chrome!” ถ้าคุณเคยเห็นเอฟเฟกต์ Liquid Glass ที่ Apple เปิดตัวในงาน WWDC 2025 แล้วรู้สึกว่า “อยากได้แบบนี้บนเว็บบ้าง” — บทความนี้คือคำตอบที่คุณรอคอย เพราะมันคือการทดลองสร้างเอฟเฟกต์หักเหแสงแบบกระจกโค้งบนเบราว์เซอร์ โดยใช้แค่ CSS, SVG และคณิตศาสตร์ฟิสิกส์พื้นฐาน แนวคิดหลักคือการจำลองการหักเหของแสง (refraction) ตามกฎของ Snell–Descartes ซึ่งอธิบายว่ามุมของแสงจะเปลี่ยนไปเมื่อผ่านจากวัสดุหนึ่งไปสู่อีกวัสดุหนึ่ง เช่น จากอากาศเข้าสู่กระจก โดยใช้ค่าดัชนีหักเห (refractive index) เพื่อคำนวณทิศทางใหม่ของแสง บทความนี้เลือกใช้รูปทรงวงกลมเป็นพื้นฐาน เพราะง่ายต่อการคำนวณและสามารถขยายเป็นรูปทรงอื่นได้ในอนาคต โดยใช้ฟังก์ชันความสูงของพื้นผิวกระจกเพื่อคำนวณมุมตกกระทบและมุมหักเห จากนั้นสร้าง “สนามเวกเตอร์การเลื่อนตำแหน่ง” (displacement vector field) เพื่อบอกว่าแสงควรเบนไปทางไหน เมื่อได้เวกเตอร์แล้ว ก็แปลงเป็นภาพ SVG displacement map โดยใช้สีแดงและเขียวแทนการเลื่อนในแกน X และ Y ตามลำดับ แล้วนำไปใช้ในฟิลเตอร์ SVG เพื่อสร้างเอฟเฟกต์หักเหแสงบนองค์ประกอบ UI จริง เช่น ปุ่ม, สวิตช์, กล่องค้นหา และมิวสิกเพลเยอร์ สุดท้ายยังเพิ่ม “specular highlight” หรือแสงสะท้อนขอบกระจก เพื่อให้ดูสมจริงยิ่งขึ้น โดยใช้การเบลนด์ภาพ highlight เข้ากับภาพที่ผ่านการหักเหแล้ว — ทั้งหมดนี้ทำงานได้เฉพาะใน Chrome เท่านั้น เพราะยังไม่มีเบราว์เซอร์อื่นรองรับ SVG filter เป็น backdrop-filter ✅ แนวคิดหลักของ Liquid Glass บนเว็บ ➡️ จำลองการหักเหแสงตามกฎ Snell–Descartes ➡️ ใช้ค่าดัชนีหักเหของวัสดุ เช่น อากาศ (n=1) และกระจก (n=1.5) ➡️ ใช้ฟังก์ชันความสูงของพื้นผิวเพื่อคำนวณมุมตกกระทบ ➡️ สร้าง displacement vector field เพื่อบอกทิศทางการเบนของแสง ✅ การสร้าง SVG displacement map ➡️ แปลงเวกเตอร์เป็นสีในภาพ SVG โดยใช้ Red = X, Green = Y ➡️ ใช้ <feDisplacementMap /> เพื่อเลื่อนตำแหน่งพิกเซลตามเวกเตอร์ ➡️ scale ของฟิลเตอร์ใช้ค่าการเบนสูงสุดที่คำนวณไว้ ➡️ สามารถ animate scale เพื่อควบคุมความแรงของเอฟเฟกต์ ✅ การใช้งานใน UI จริง ➡️ ใช้กับองค์ประกอบ UI เช่น ปุ่ม, สวิตช์, กล่องค้นหา, มิวสิกเพลเยอร์ ➡️ เพิ่ม specular highlight เพื่อให้ดูมีแสงสะท้อนขอบกระจก ➡️ ใช้ <feBlend /> เพื่อรวมภาพ highlight กับภาพหักเห ➡️ ปรับค่าความเงา, ความอิ่มสี, และระดับการหักเหได้ตามต้องการ ✅ ข้อมูลเสริมจากภายนอก ➡️ Apple เปิดตัว Liquid Glass ใน WWDC 2025 เป็นส่วนหนึ่งของ iOS 26 และ visionOS ➡️ เอฟเฟกต์นี้มีต้นแบบจาก Dynamic Island และ macOS Aqua ➡️ นักพัฒนาเริ่มสร้างเวอร์ชัน CSS-only เพื่อใช้บนเว็บโดยไม่พึ่ง JavaScript ➡️ GitHub มีโปรเจกต์ทดลองหลายตัว เช่น liquid-glass-effect-macos https://kube.io/blog/liquid-glass-css-svg/