การสร้างเอฟเฟกต์สติกเกอร์ฟอยล์

• ซอร์สโค้ดเชดเดอร์สำหรับสร้าง เอฟเฟกต์สติกเกอร์ฟอยล์ ที่จำลองการสะท้อนและความแวววาวของพื้นผิวได้อย่างสมจริง
• สามารถปรับแต่งคุณสมบัติต่างๆ ได้อย่างละเอียด เช่น ความเป็นโลหะ, ความหยาบ, การสะท้อนแบบเหลือบรุ้ง
• หัวใจสำคัญคือการสร้างเอฟเฟกต์อนุภาคละเอียด (flake) บนพื้นผิวฟอยล์ และ สีเหลือบรุ้ง ที่เปลี่ยนไปตามมุมมอง
• ใช้ เทคนิคกราฟิกส์เชิงกายภาพ หลากหลายรูปแบบ เช่น การสุ่มตัวอย่าง environment map, เอฟเฟกต์ Fresnel, เงา AO และ alpha cutoff
• เป็นการทำเชดเดอร์ระดับสูงที่สามารถนำไปใช้กับ การเรนเดอร์สติกเกอร์ฟอยล์คุณภาพสูง ได้ทั้งในสภาพแวดล้อม 2D/3D จริง

---

ภาพรวม

เนื้อหานี้เป็นโค้ดเชดเดอร์ GLSL สำหรับ สร้างเอฟเฟกต์ภาพที่แวววาวแบบสติกเกอร์ฟอยล์ โดยมีเป้าหมายเพื่อสร้างพื้นผิวภาพคุณภาพสูงผ่านการผสานความเป็นโลหะ, ความเหลือบรุ้ง, เอฟเฟกต์อนุภาคละเอียดบนพื้นผิว และการสะท้อนจากสภาพแวดล้อม ใช้ทั้งเท็กซ์เจอร์ 2D, environment map และพารามิเตอร์ปรับแต่งหลากหลายเพื่อสร้างเอฟเฟกต์ฟอยล์ที่สมจริง

ตัวแปรและค่าคงที่หลัก

• ปรับแต่งเอฟเฟกต์ได้ผ่าน ตัวแปรยูนิฟอร์ม (uniform) หลายชนิด
  • ตัวอย่างเช่น uFlakeSize (ขนาด flake), uRoughness (ความหยาบ), uMetalness (ความเป็นโลหะ), uIridescence (ความเหลือบรุ้ง) เป็นต้น
• รองรับเท็กซ์เจอร์, environment map และข้อมูลระบบพิกัดโลก

โครงสร้างฟังก์ชันหลัก

ฟังก์ชันแฮช (hash)

• ใช้สร้าง ค่าสุ่ม ที่จำเป็นสำหรับเอฟเฟกต์อนุภาคละเอียด (flake)

การแปลงพิกัด environment map (dirToEquirectUv), การสุ่มตัวอย่าง environment map (sampleEnvRough)

• รองรับการสุ่มตัวอย่างจาก environment map ตามทิศทาง
• ใช้ mip level ที่เหมาะสมตามค่า ความหยาบ (lod)

เอฟเฟกต์เหลือบรุ้ง (iridescenceColor)

• สร้างสีแบบไดนามิกตาม มุมและความหนาของพื้นผิว
• สีจะเปลี่ยนไปตามมุมมองเหมือนพื้นผิวฟอยล์จริง

ความสว่าง (luminance)

• คำนวณข้อมูลความสว่างของสีเพื่อนำไปใช้กับขั้นตอนหลังประมวลผลและส่วนอื่นๆ

ลอจิกหลักของเชดเดอร์

Alpha cutoff และการจัดการด้านหน้า/ด้านหลัง

• ใช้ ค่าอัลฟา ของ base texture เพื่อตัดสินว่าพิกเซลจะคงอยู่หรือไม่
• ปรับ ความเข้ม AO, การลอกออก (peeled) และสีตามด้านหน้า/ด้านหลัง

การจัดการการสะท้อน, flake, ความเหลือบรุ้ง, และความเป็นโลหะ

• คำนวณ normal ของพื้นผิว, เวกเตอร์มุมมอง, เวกเตอร์สะท้อน และการสะท้อนจากสภาพแวดล้อม
• ใช้ hash ตามตำแหน่งและ random offset ตามมุมสำหรับ เอฟเฟกต์ flake
• ควบคุม ความสว่าง, การมาสก์, การ boost ของ flake ได้อย่างละเอียด
• ใช้ perturbedNormal เพื่อสะท้อนการกระจัดของพื้นผิว flake
• ผสม flake และสีรอบข้างเข้ากับ สีเหลือบรุ้ง

การผสาน environment map และการคำนวณสีสุดท้าย

• เปลี่ยนค่าความหยาบแบบไดนามิกตามความเข้มของ flake
• เพิ่มความสมจริงด้วยการมาสก์ metal/normal/reflection และ การคำนวณ Fresnel
• ผสมองค์ประกอบ diffuse (การกระจายแสง) และ spec (การสะท้อน) เพื่อสร้างสีสุดท้าย
• ส่งออกเป็นสีสุดท้ายพร้อม base alpha

ประเด็นที่น่าสนใจ

เชดเดอร์นี้เหมาะสำหรับการสร้าง เอฟเฟกต์ภาพที่ซับซ้อนเฉพาะตัวของวัสดุฟอยล์ เช่น การสะท้อนแรง อนุภาคละเอียด และความเหลือบรุ้ง ให้ดูสมจริง สามารถควบคุมเอฟเฟกต์ได้อย่างแม่นยำผ่านพารามิเตอร์จำนวนมาก จึงรองรับการปรับแต่งได้ยืดหยุ่นและการเรนเดอร์สติกเกอร์ฟอยล์ที่เด่นชัดคุณภาพสูง เหมาะกับการใช้งานใน 3D, 2D บนเว็บ, เกม, interactive UI และอีกหลากหลายบริบท

[GN⁺]

ความคิดเห็นจาก Hacker News

• ตอนที่เคยพัฒนาเกมมือถือมาก่อน ฉันเคยใส่เอฟเฟกต์ให้การ์ดเท่ ๆ มี “ความเงา” เปลี่ยนไปตามการเอียงโทรศัพท์ ราวกับเป็นวัตถุ 3D จริง รู้สึกทึ่งที่ทุกวันนี้ iOS รองรับเอฟเฟกต์สติกเกอร์แบบนี้มาให้เป็นพื้นฐานแล้ว

• เว็บไซต์มาร์เก็ตเพลสการ์ด Magic มีการใช้เอฟเฟกต์ CSS แบบง่ายกับการ์ดฟอยล์อยู่ แต่ฉันก็คิดอยู่เสมอว่าถ้าจะทำเอฟเฟกต์ฟอยล์หลากหลายแบบเหมือนที่เห็นบนการ์ด Magic จริง ให้สมจริงขึ้นอีกโดยไม่กระทบประสิทธิภาพ และยังเข้ากับ Svelte CRUD UX ควรใช้วิธีไหนดี

  • แนะนำให้ลองดูเรโป pokemon-cards-css ที่เกี่ยวข้องนี้มาก

• เทคโนโลยีเชดเดอร์น่าสนใจมาก บนเว็บไซต์ Shadertoy สามารถลองเล่นเชดเดอร์หลากหลายแบบได้ด้วยตัวเอง

• Tim Oliver เคยทำพรีเซนเทชันที่ยอดเยี่ยมเกี่ยวกับประสบการณ์สร้างเอฟเฟกต์ฟอยล์โฮโลกราฟิกที่ใช้กับ "golden ticket" ของ Threads วิดีโอดังกล่าวดูได้ที่ นี่

• แม้จะรู้สึกว่าเอฟเฟกต์นี้เจ๋งมากและโดดเด่นทางสายตาจริง ๆ แต่พูดตามตรง ฉันไม่ได้ชอบเอฟเฟกต์ฟอยล์วิบวับเองมากนัก มันถูกนำไปใช้กับทั้งสติกเกอร์และการ์ดก็จริง แต่ฉันคิดว่าการใส่ความเงาโลหะนุ่ม ๆ เป็นแค่จุดเน้นดูสวยกว่าสไตล์นี้อีก ดูเหมือนฉันจะเป็นส่วนน้อย เพราะเมื่อเห็นความนิยมในวงกว้างของเอฟเฟกต์นี้ ก็คงยังเป็นรสนิยมเฉพาะกลุ่มอยู่ดี

• เป็นเอฟเฟกต์ที่ยอดเยี่ยมจริง ๆ ทำให้นึกถึง diffraction grating shader ที่ Alan Zucconi สร้างไว้สำหรับเรนเดอร์ CD ดูรายละเอียดได้ ที่นี่

• ผลลัพธ์ออกมาดีกว่าที่คาดไว้มาก สนุกกับการลองปรับค่าต่าง ๆ แล้วส่องดูภาพสะท้อนของทั้งห้อง

  • ฉันก็สงสัยเรื่อง reflection map เลยไปค้นดู ปรากฏว่าห้องนั้นคือ Jedlinka Palace ที่อยู่ในโปแลนด์ และดูภาพเท็กซ์เจอร์จริงได้ ที่นี่

• บน iOS มีเอฟเฟกต์สติกเกอร์ “shiny” ที่ตอบสนองเวลาเอียงโทรศัพท์ ตอนเห็นครั้งแรกฉันทึ่งมากจริง ๆ

• แม้จะนอกประเด็นไปหน่อย แต่พออ่านโพสต์นี้ก็ทำให้นึกว่า AI ต่อไปก็คงเรียนรู้วิธีทำเอฟเฟกต์แบบนี้ได้เหมือนกัน ขณะเดียวกันก็รู้สึกเหมือนได้ปลดปล่อย เพราะ AI สามารถทำหน้าที่เป็นบุ๊กมาร์กขั้นสุดยอดได้ จนไม่จำเป็นต้องคอยสะสมบุ๊กมาร์กไว้มากมาย แต่อีกด้านหนึ่งก็อดรู้สึกเสียดายและขมขื่นไม่ได้ ว่าโพสต์เจ๋ง ๆ แบบนี้อาจไม่ได้รับการยอมรับจาก AI อย่างเหมาะสม

  • ฉันคิดว่ายังควรเก็บบุ๊กมาร์กต่อไป เพราะแค่ยุคของ Google Search ตอนนี้ ข้อมูลมากมายก็ถูกลืมไปแล้ว และในยุค AI ข้อมูลยิ่งอาจหายไปได้ง่ายกว่าเดิม
  • ท้ายที่สุด AI ก็คงจะเป็นผู้เขียนโพสต์แบบนี้ด้วย และ AI ก็จะเรียนรู้จาก AI อีกที เมื่อเป็นแบบนั้น ก็อาจถึงวันที่โปรแกรมเมอร์หรือผู้เชี่ยวชาญที่มีสุนทรียะทางศิลปะหายไป เหลือเพียงงานธรรมดาที่คอยประกอบโซลูชันทางธุรกิจซึ่งคอมพิวเตอร์สร้างขึ้นมาอัตโนมัติ

• ดีใจมากที่ได้เห็นบทความน่าสนใจและคาดไม่ถึงแบบนี้นี่แหละ