การเขียนโปรแกรมแอนิเมชัน SDF ของ Rick and Morty

เรียนรู้การเขียนโปรแกรมเชดเดอร์

• สร้างแอนิเมชัน Rick และ Morty: แอนิเมชันนี้สร้างขึ้นด้วยโค้ด 240 บรรทัด และอธิบายวิธีสร้างแอนิเมชันสำหรับวิดีโอ วิดีโอเกม หรือเพื่อความสนุก โดยใช้ GPU shader และ signed distance field โดยไม่พึ่งไลบรารีหรือรูปภาพ
• ไลฟ์โค้ดดิ้งเอดิเตอร์: สามารถรันและแก้ไขตัวอย่างได้ผ่านไลฟ์โค้ดดิ้งเอดิเตอร์ที่ฝังอยู่ในหน้า

พื้นฐานเชดเดอร์

• ใช้ GLSL: โค้ดถูกเขียนด้วย OpenGL Shading Language (GLSL) และต้องมีฟังก์ชัน color_for_pixel ที่รันบน GPU สำหรับแต่ละพิกเซล
• กำหนดสีของพิกเซล: ฟังก์ชันที่กำหนดสีของพิกเซลตามเวลาเป็นหัวใจสำคัญของการสร้างแอนิเมชัน

การวาดรูปทรงพื้นฐาน

• วาดวงกลม: สามารถวาดวงกลมได้โดยทำให้ระยะจากจุดศูนย์กลางของพิกเซลมองเห็นได้
• Signed Distance Field (SDF): ระยะภายในรูปทรงจะแสดงเป็นค่าลบ และภายนอกเป็นค่าบวก เพื่อสร้างเอฟเฟกต์ได้หลากหลาย

ฟังก์ชันรูปทรงหลากหลาย

• เส้นโค้งเบเซียร์ ดาว และสี่เหลี่ยมมุมมน: สามารถวาดรูปทรงซับซ้อนได้ด้วยฟังก์ชัน SDF ที่หลากหลาย

การวาด Rick

• ถ่ายทอดใบหน้า: การถ่ายทอดใบหน้าของ Rick ด้วยโค้ดต้องผ่านการลองผิดลองถูกหลายครั้ง และใช้ภาพอ้างอิงเพื่อเพิ่มความแม่นยำ
• เพิ่มเส้นขอบ: สามารถวาดเส้นขอบของรูปทรงได้ด้วยฟังก์ชัน signed distance

การรวมรูปทรงและการสะท้อน

• การรวมรูปทรง: เมื่อรวมรูปทรงสองรูปเพื่อวาดเส้นขอบ จะใช้ฟังก์ชัน min()
• การสะท้อน: สามารถทำให้รูปทรงสมมาตรตามแกนได้ด้วย abs()

เทคนิคขั้นสูง

• การบิดเบือนโดเมน: สามารถบิดเบือนรูปทรงได้ด้วยการออฟเซ็ตตำแหน่งพิกเซลแบบสุ่ม
• เอฟเฟกต์แอนิเมชัน: สามารถทำให้การบิดเบือนโดเมนเคลื่อนไหวเพื่อสร้างเอฟเฟกต์ภาพที่เป็นเอกลักษณ์

การวาดฟันแบบไม่สิ้นสุด

• ใช้พาราโบลา: สามารถใช้พาราโบลาเพื่อวาดรูปทรงฟัน และหลีกเลี่ยงการเขียนโค้ดซ้ำเมื่อต้องวาดฟันหลายซี่

บทความนี้อธิบายวิธีสร้างแอนิเมชันที่ซับซ้อนด้วยการเขียนโปรแกรมเชดเดอร์ และแสดงให้เห็นว่าสามารถสร้างผลงานที่สร้างสรรค์ได้ด้วยการใช้เทคนิคและเครื่องมือต่าง ๆ

[GN⁺]

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

• งานเจ๋งมากและเป็นโพสต์ที่ยอดเยี่ยมมาก สำหรับการทำ anti-aliasing แบบเนียนใน SDF การใช้ aastep น่าจะดี

  • ลิงก์อ้างอิง: glsl-aastep GitHub

• การพัฒนาเชดเดอร์นี่คนละมิติจริง ๆ กระบวนการปรับค่า floating point แล้วเห็นผลลัพธ์ได้ทันทีนั้นน่าพอใจมาก

• เป็นโพสต์ที่ดีมาก ขอแนะนำเพลย์ลิสต์ YouTube ที่เกี่ยวข้องของ Inigo Quilez

  • ลิงก์อ้างอิง: YouTube Playlist

• ทั้งคุณภาพของงาน คุณภาพของคำอธิบาย และความท้าทายที่มอบให้ผู้อ่าน ล้วนอยู่ในระดับสูงสุด ขอบคุณที่แชร์

• นี่เป็นบทนำเกี่ยวกับ GLSL ที่มีโครงสร้างดีมาก อยากรู้ว่าใน Vulkan หรือ WebGPU/WebGL เป็นอย่างไรบ้าง

• การทำแอนิเมชันนี้ให้เสร็จในเวลา 8 เดือนสะท้อนถึงความอดทนอันมหาศาล

• อยากรู้ว่าระหว่างการพัฒนามีการทำงานวนซ้ำด้วยการปรับค่าเศษส่วนเล็ก ๆ น้อย ๆ หรือใช้เอดิเตอร์อะไร เพราะการหาค่าทศนิยมที่เหมาะสมใน 240 บรรทัดอาจใช้เวลามาก

• ความประณีตสมบูรณ์ของหน้านี้น่าทึ่งมาก

• การเขียนโปรแกรมเชดเดอร์นั้นคนละมิติ ความพยายามและความใส่ใจในรายละเอียดที่ใช้สร้างแอนิเมชันนี้น่าทึ่งมาก ต้องลงมือทำมากกว่าการพัฒนาแบบดั้งเดิมเยอะ

• ยากที่จะถ่ายทอดได้ว่าผลงานชิ้นนี้น่าประทับใจมากแค่ไหน