Psychedelic Graphics 0: บทนำ

Psychedelic Graphics 0: บทนำ

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

UV คืออะไร?

โมเดล 3D

• คอมพิวเตอร์กราฟิกมักดูเหมือนเป็น 3D แต่เมื่อเขียนโค้ดกราฟิก เรามักต้องคิดแบบ 2D หากสร้างรูปทรงสวยงามในโปรแกรมทำโมเดล 3D สิ่งที่ทำจริง ๆ คือการสร้างจุดที่ลอยอยู่ในอวกาศ (จุดยอด) แล้วเชื่อมบางจุดเข้าด้วยกันเพื่อสร้างรูปทรงทึบ (หน้า)
• โมเดล 3D ส่วนใหญ่เป็นโพรง และเรามองเห็นได้แค่พื้นผิวเท่านั้น วิธีมาตรฐานในการใส่สีให้โมเดล 3D คือ UV mapping/texturing เช่นเดียวกับภาพฉาย 2D ของโลกที่ดูยืดและบีบอัดเล็กน้อย สีของโมเดล 3D เมื่อถูกฉายเป็น 2D ก็มีลักษณะคล้ายกัน

การเพนต์เท็กซ์เจอร์

• เมื่อเพนต์เท็กซ์เจอร์แล้ว มันจะแสดงบนโมเดล 3D ซอฟต์แวร์ส่วนใหญ่ให้เพนต์ลงบนโมเดล 3D ได้โดยตรงเพื่อระบายสี image texture

พิกัด UV

• UV สามารถมองเป็นตำแหน่ง หรือก็คือพิกัด 2D ได้ ใช้พื้นที่ตั้งแต่ (0, 0) ถึง (1, 1) ในการกำหนดพิกัด UV UV map คือข้อมูลที่เชื่อม image texture สีเข้ากับหน้าของโมเดล 3D

โค้ดกราฟิกทำงานอย่างไร

สีในกราฟิก

• สีในคอมพิวเตอร์กราฟิกมักแสดงด้วย RGB ด้วยการผสมสีแดง เขียว และน้ำเงิน เราสามารถสร้างสีได้เกือบทุกสีที่มนุษย์รับรู้ได้ ในคอมพิวเตอร์กราฟิก ปริมาณของสีแดง เขียว และน้ำเงินมักอยู่ในช่วง 0.0 ถึง 1.0

สีของ UV

• มีการแปลงพิกัด UV เป็นสีเพื่อช่วยในการแสดงผลและแก้ปัญหา ค่าแรกของ UV (ค่า X) ใช้เป็นสีแดง และค่าที่สอง (ค่า Y) ใช้เป็นสีเขียว

จำนวนจุดลอยตัวและเวกเตอร์ vec2, vec3

• float คือเลขทศนิยมเดี่ยว vec หมายถึงเวกเตอร์ โดย vec2 ประกอบด้วยเลขทศนิยมสองตัว และ vec3 ประกอบด้วยเลขทศนิยมสามตัว

โครงสร้างของโปรแกรมกราฟิก

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

• ตอนนี้ก็พร้อมที่จะเริ่มตอนที่ 1 แล้ว ในตอนที่ 1 จะได้เห็นวิธีสร้างภาพที่น่าสนใจภายใต้ข้อจำกัดเหล่านี้

[GN⁺]

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

• David Tristram เป็นสมาชิกผู้ก่อตั้งของ Raster Masters กลุ่มแสดงคอมพิวเตอร์กราฟิกในยุค 1990s โดยใช้เวิร์กสเตชัน Silicon Graphics เพื่อสร้างภาพสังเคราะห์ประกอบดนตรีสดของ Grateful Dead, Herbie Hancock และ Graham Nash เป็นต้น

  • ปัจจุบันทำงานหลักด้วย Resolume Avenue และ TouchDesigner ในสภาพแวดล้อมการประมวลผลวิดีโอ 2D
  • Hydra เป็นสภาพแวดล้อม live coding บนพื้นฐาน JavaScript ที่เจ๋ง ช่วยให้ทดลองกราฟิกหลอนประสาทได้โดยไม่ต้องลงไปถึงระดับล่าง

• ในอดีตเคยศึกษาวิธีบิดแปลงพิกัด UV texture และปัจจุบันใช้ fragment shader แบบเดียวกับ ShaderToy

  • กระบวนการเลื่อนพิกัด texture ตาม flow field เป็นสิ่งที่น่าสนใจ
  • ยังมีวิธีง่าย ๆ ในการใช้แรง "ฟื้นกลับ" เพื่อให้พิกัดย้อนกลับไปยังตำแหน่งเดิม
  • ผสานเอฟเฟ็กต์ feedback และ displacement เพื่อสร้างการเคลื่อนไหวคล้ายการไหลของของไหล

• ชอบที่การเขียน shader สำหรับประมวลผลภาพใน HTML ทำได้ง่าย

  • แม้ใช้เพียงการประมาณค่า depth map แบบง่าย ๆ ก็ยังได้ผลลัพธ์ที่น่าสนใจ
  • ในอดีตเคยทำโปรเจ็กต์ที่ใช้ WebGL เพื่อทำให้การ crossfade ระหว่างภาพลื่นไหลขึ้น

• สนใจมากในการถ่ายทอดประสบการณ์หลอนประสาทให้ออกมาเป็นภาพ

  • ในบทความ Rolling Hills ได้อธิบายวิธีจำลองภาพหลอนทางสายตา
  • มีศิลปินที่ถ่ายทอดภาพแบบหลอนประสาทได้ดีโดยใช้เทคโนโลยีสมัยใหม่

• Todd Rundgren ได้พัฒนาแอป Mac ชื่อ Flowfazer ในช่วงต้นทศวรรษ 1990 ซึ่งช่วยให้ผู้ใช้ได้แรงบันดาลใจในการสร้างสรรค์

• การแสดงของ Tipper และ Fractaled Visions เป็นหนึ่งในคำบรรยายภาพแบบหลอนประสาทที่แม่นยำที่สุด

  • ภาพวิชวลของ Fractaled Vision ซับซ้อนและอุดมสมบูรณ์จนชวนทึ่ง

• ขณะเขียน WebGL shader ก็กำลังพยายามทำเอฟเฟ็กต์กล้องจริงในเชิงกายภาพ

  • สิ่งนี้ช่วยเพิ่มความเข้าใจเกี่ยวกับกราฟิก คณิตศาสตร์ GPU หน่วยความจำ CPU แอนิเมชัน และการจัดการเวลา

• งานวิจัยของ Jim Crutchfield เกี่ยวกับระบบ video feedback มอบระบบทดลองที่มีประโยชน์สำหรับการศึกษาพลวัตเชิงพื้นที่และเชิงเวลาที่ซับซ้อน