“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/
ถ้าคุณเคยเห็นเอฟเฟกต์ 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/
🧊 “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/
0 Comments
0 Shares
1 Views
0 Reviews