Psychedelic Graphics 0: บทนำ

 (benpence.com)
1 คะแนน โดย GN⁺ 2025-01-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นบทเริ่มต้นสำหรับการสร้างวิชวลแอนิเมชันและเกมแบบไซคีเดลิก โดยเริ่มจาก การคำนวณ UV และสี เพื่อให้ตามได้แม้ไม่มีพื้นฐานมาก่อน
  • หัวใจของการลงสีให้โมเดล 3D คือการเข้าใจ UV mapping/texturing ซึ่งเชื่อมโยงพื้นที่ภาพ 2D เข้ากับพื้นผิว 3D
  • พิกัด UV คือค่าคู่หนึ่งใน ช่วง 0.0~1.0 ที่ระบุตำแหน่งบนเท็กซ์เจอร์ โดย (0.5, 1.0) หมายถึงจุดที่ 50% ในแนวนอนและ 100% ในแนวตั้ง
  • สีในกราฟิกส์มักแสดงด้วยค่า RGB สามค่า และถ้าแปลง X·Y ของ UV เป็นสีแดง·เขียว การเปลี่ยนแปลงของพิกัดจะมองเห็นเป็นไล่ระดับสี
  • โค้ดตัวอย่างกำหนดสีด้วย การคำนวณแยกอิสระรายพิกเซล บนพื้นผิว 3D เดียวที่ครอบคลุมทั้งหน้าจอ จึงต้องใช้วิธีคิดที่ต่างจากการเขียนโปรแกรมทั่วไป

เป้าหมายและสมมติฐานของซีรีส์

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

โมเดล 3D และ UV mapping

  • โมเดล 3D คือพื้นผิวที่ประกอบด้วยจุดและหน้า

    • คอมพิวเตอร์กราฟิกส์ดูเหมือนเป็น 3D แต่เมื่อเขียนโค้ดกราฟิกส์ มักมีหลายกรณีที่ต้อง คิดแบบ 2D
    • เมื่อสร้างโมเดลในโปรแกรมแก้ไข 3D แท้จริงแล้วคือการสร้าง vertices ซึ่งเป็นจุดที่ลอยอยู่ในอวกาศ และ faces ซึ่งเป็นหน้าที่เชื่อมจุดเหล่านั้นเข้าด้วยกัน
    • โมเดลเป็นพื้นผิวกลวง และสิ่งที่มองเห็นบนหน้าจอมีเพียงพื้นผิวเท่านั้น
    • รูปทรง 3D แทบทั้งหมดในเกมและแอนิเมชันล้วนลดรูปลงมาเป็นจุดและหน้าแบบนี้
    • แม้โมเดลที่ดูเรียบเนียนก็มักเป็นเพราะมีจุดและหน้ามากพอจนยากจะสังเกตเห็นขอบเขต

  • เท็กซ์เจอร์คือภาพ 2D ที่จะแปะบนพื้นผิว 3D

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

การเพนต์เท็กซ์เจอร์และพิกัด UV

  • เมื่อระบายสีบนเท็กซ์เจอร์ ก็จะปรากฏบนโมเดล

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

  • พิกัด UV คือตำแหน่ง 2D บนเท็กซ์เจอร์

    • พื้นที่เท็กซ์เจอร์ที่จองไว้สำหรับแต่ละหน้าของโมเดล 3D คือ UV map และเป็นข้อมูลที่เชื่อมส่วนหนึ่งของ image texture เข้ากับโมเดล 3D
    • UV สามารถมองเป็น พิกัด 2D ที่ระบุตำแหน่งบน image texture ได้
    • หน้า 3D แต่ละหน้าถูกกำหนดด้วยจุดหลายจุด และเมื่อจุดเหล่านั้นถูกวางบน image texture แต่ละจุดก็จะมีพิกัด UV
    • ใน (0.5, 1.0) ค่าแรก 0.5 หมายถึงจุดกึ่งกลางในแนวซ้ายขวา และค่าที่สอง 1.0 หมายถึงด้านบนสุดในแนวตั้ง
    • ค่า UV ทั้งสองโดยปกติอยู่ระหว่าง 0.0 ถึง 1.0 และมักใช้พื้นที่พิกัดภายในสี่เหลี่ยมที่ล้อม (0, 0) กับ (1, 1)
    • การใช้ 0 และ 1 แทนตำแหน่งพิกเซลช่วยแสดงได้ว่าเคลื่อนที่ไปทางซ้ายขวา·ขึ้นลงเป็นสัดส่วนเท่าใด และถ้าคูณด้วย 100 ก็เข้าใจได้เหมือนเปอร์เซ็นต์
    • ชื่อของสองมิติจริง ๆ คือ U และ V และเพราะ X·Y·Z ถูกใช้กับตำแหน่ง 3D ไปแล้ว จึงใช้ชื่อว่า UV

สีและชนิดข้อมูลในกราฟิกส์

  • RGB แสดงสีด้วยค่าสามค่า

    • สีในคอมพิวเตอร์กราฟิกส์มักแสดงด้วย RGB คือแดง·เขียว·น้ำเงิน
    • ปริมาณสีแดง เขียว และน้ำเงินของสีหนึ่งสีโดยทั่วไปเป็นค่าระหว่าง 0.0 ถึง 1.0
    • สีแดงแสดงเป็น (1.0, 0.0, 0.0), สีดำเป็น (0.0, 0.0, 0.0), สีขาวเป็น (1.0, 1.0, 1.0)
    • การเขียนแบบเลขฐานสิบหกอย่าง 0xff0000 ที่ใช้ในเว็บกราฟิกส์ก็แสดงข้อมูลเดียวกันในอีกรูปแบบหนึ่ง

  • เมื่อมอง UV เป็นสี ก็จะเห็นพิกัด

    • เมื่อต้องการแสดงพิกัด UV ให้เห็นเป็นภาพ ตามธรรมเนียมจะใช้ค่าแรก X เป็นสีแดง ค่าที่สอง Y เป็นสีเขียว และตั้งสีน้ำเงินเป็น 0.0
    • UV (0, 1) จะกลายเป็นสี (0.0, 1.0, 0.0) จึงมองเห็นเป็นสีเขียว
    • UV (1, 0) จะกลายเป็นสี (1.0, 0.0, 0.0) จึงมองเห็นเป็นสีแดง
    • เมื่อระบายสี่เหลี่ยมตามตำแหน่ง UV ยิ่งไปทางซ้ายบน สีเขียวจะยิ่งแรงขึ้น และด้านขวาล่างจะเป็นสีแดง
    • มุมซ้ายล่างเป็นสีดำเพราะทั้งแดงและเขียวเป็น 0 ส่วนมุมขวาบนเป็นสีเหลืองเพราะมีทั้งแดงและเขียว

  • float, vec2, vec3

    • float คือ ตัวเลขทศนิยม หนึ่งค่า หรือจำนวนแบบ floating-point
    • vec หมายถึงเวกเตอร์ โดย vec2 คือคู่ของตัวเลขทศนิยมสองค่า และ vec3 คือกลุ่มตัวเลขทศนิยมสามค่า
    • สี RGB มีค่าสามค่าคือแดง·เขียว·น้ำเงิน จึงแสดงด้วย vec3
    • UV มีสองค่าคือ X และ Y จึงสอดคล้องกับ vec2

วิธีรันโค้ดกราฟิกส์ตัวอย่าง

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-25
ความคิดเห็นจาก Hacker News

  • นี่คือ David Tristram เป็นหนึ่งในสมาชิกผู้ก่อตั้ง Raster Masters กลุ่มการแสดงคอมพิวเตอร์กราฟิกในยุค 1990 และอย่างที่ @hopkins บอกไว้ พวกเขาใช้ เวิร์กสเตชัน Silicon Graphics ระดับไฮเอนด์ สร้างวิดีโอสังเคราะห์ประกอบดนตรีสดของ Grateful Dead, Herbie Hancock, Graham Nash และคนอื่น ๆ
    หลังจากผ่านการเปลี่ยนแปลงหลายครั้ง ตอนนี้ผมทำงานหลัก ๆ ใน Resolume Avenue และ TouchDesigner ซึ่งเป็นสภาพแวดล้อมประมวลผลวิดีโอ 2D นี่คือลิงก์บางส่วนที่ให้แรงบันดาลใจ

    • อยากรู้ว่าสมาชิกคนอื่น ๆ ของ Raster Masters คือใครบ้าง และมีเรื่องบ้า ๆ อะไรที่เกิดขึ้นในคอนเสิร์ตของ Grateful Dead บ้าง
      ทุกวันนี้แค่เสียบโปรเจกเตอร์เข้ากับโน้ตบุ๊กตอนพรีเซนต์ ก็ยังเครียดทุกครั้งเหมือนทอยลูกเต๋าว่าภาพจะขึ้นไหม เลยอยากรู้ด้วยว่าในสมัยนั้น ถ้าจะฉาย วิดีโอ SGI ความละเอียดสูงแบบสด บนจอเหนือวง ต้องใช้โปรเจกเตอร์แบบไหน การคาลิเบรต และการเตรียมตัวอะไรบ้าง
    • อยากรู้ว่ามีลิงก์ผลงานที่ดูได้ไหม
    • คิดว่าเคยเห็นผลงานในคอนเสิร์ต Dead บางงานราวปี 1992

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

    • อยากรู้ว่ามีตัวไหนรองรับ อินพุตจากเพลง ด้วยไหม ผมชอบปลั๊กอิน visualizer สมัย Winamp แต่เดี๋ยวนี้ศิลปะแนวนี้ดูเหมือนตายไปแล้ว
    • ที่ dwitter.net ก็มีตัวอย่าง กราฟิกไซเคเดลิก ที่ทำด้วย JavaScript เยอะเหมือนกัน

  • พูดถึงเอกสารต้นฉบับและพิกัด UV เมื่อก่อนผมเคยสำรวจวิธีเลื่อน พิกัดเท็กซ์เจอร์ UV ของแต่ละจุดยอดในเมชสี่เหลี่ยมด้วยวิธีที่น่าสนใจอยู่มาก
    ตอนนั้นใช้สีต่อจุดยอด แต่ถ้าเป็นสมัยนี้ก็คงใช้แฟรกเมนต์เชดเดอร์ (พิกเซลเชดเดอร์) แบบที่มีใน ShaderToy วิธีที่น่าสนใจเป็นพิเศษคือการพาพิกัดเท็กซ์เจอร์ไหลตามฟิลด์การไหล (flow field) ด้วยการพาไปตามการไหล (advection) จะใช้ฟิลด์เวกเตอร์ 2D อะไรก็ได้ แล้วใช้การเลื่อนซ้ำ ๆ กับแต่ละพิกัด วิธี explicit แบบไม่แม่นยำก็ให้ผลลัพธ์ดีแล้ว
    เมื่อพิกัดถูกบิดเบือนไปไกล ภาพจะเริ่มจำไม่ได้ วิธีแก้แบบง่ายคือใส่แรง “คืนรูป” ให้พิกัดกลับไปยังตำแหน่งเดิม มันก็จะเด้งกลับเข้าที่เหมือนกางเศษฟอยล์กระจกให้เรียบ
    ตอนนี้ผมใช้ฟีดแบ็กคู่กับเอฟเฟกต์เลื่อนพวกนี้อยู่ การใช้การเลื่อนขนาดเล็กมากซ้ำ ๆ จะให้การเคลื่อนไหวที่ค่อนข้างคล้าย การไหลของของไหล

    • PostScript melt ของ Jeremy Huxtable ก็ใช้วิธีเดียวกัน เขาเป็นคนทำ “Big Brother” Eyes ของ NeWS เดิม และนั่นเป็นแรงบันดาลใจให้ XEyes
      ถ้าเลือกสี่เหลี่ยมแบบสุ่มแล้วคัดลอกด้วยออฟเซ็ตแบบสุ่มซ้ำ ๆ เอฟเฟกต์ที่ดิจิทัลมาก เป็นเหลี่ยม และคมจัด ก็จะเปลี่ยนเป็นเอฟเฟกต์ที่นุ่มและดูเป็นธรรมชาติผ่านความสุ่มเล็กน้อย (dithering) มันทำงานได้ดีแม้เป็นขาวดำ และท้ายที่สุดก็เป็นแค่ PostScript
      https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
      ยังมี “Big Brother” eye.ps ต้นฉบับของ Jeremy ด้วย เป็นเดโมคลาสสิกที่แสดงหน้าต่างลูกตากลม ๆ ของ NeWS
      https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
    • นึกถึงความสนุกแบบเรียบง่ายและบังคับโดยตรงของ Kai Power Goo
      LGR: Kai's Power Goo – Classic 90s Funware for PC!
      https://www.youtube.com/watch?v=xt06OSIQ0PE

  • ชอบตรงที่ใน HTML สามารถใช้ เชดเดอร์ กับรูปภาพได้ง่าย ฝีมือด้านนี้ของผมธรรมดา ๆ แต่สนุกที่ได้เห็นว่าคนอื่นผลักมันไปได้ไกลแค่ไหน
    แค่ให้การประมาณ depth map ง่าย ๆ ผลลัพธ์ก็น่าสนใจขึ้นมากแล้ว เมื่อหลายปีก่อนผมเคยทำโปรเจกต์ที่ใช้เทคนิคคล้ายกันเพื่อครอสเฟดระหว่างภาพอย่างลื่นไหลพร้อม “เอฟเฟกต์ที่น่าสนใจ” มีทั้งบทความและเดโม
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • พูดตามตรง บทความ Rolling Hills ที่มากับบทความนี้น่าสนใจกว่ามาก
    โดยเฉพาะส่วนช่วงกลาง ๆ ที่นำโค้ดด้านล่างไปใช้กับภาพนิ่ง น่าประทับใจมาก
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    จากมุมมองของคนที่เคยมีประสบการณ์ไซเคเดลิกมาหลายครั้ง อย่างน้อยในขนาดต่ำที่ไม่ถึงขั้นวีรกรรม มันดูใกล้เคียงประสบการณ์ทางสายตาจริงที่สุดแล้ว ถ้าทำคลื่นให้ช้าลงหน่อยและลดช่วงการเคลื่อนไหวลงเล็กน้อย น่าจะเหมือนยิ่งขึ้น
    ผมสนใจการจำลอง ภาพหลอนทางสายตาที่เกิดจากสารไซเคเดลิก มากกว่าเอฟเฟกต์ภาพสุดเท่สำหรับการแสดง แน่นอนว่าเคารพศิลปินทั้งสองฝั่ง
    มีศิลปินคนหนึ่งที่สร้างวิดีโอไซเคเดลิกด้วยเครื่องมือสมัยใหม่ได้ยอดเยี่ยม แต่ผมนึกชื่อบัญชีไม่ออกเลย ถ้าหาเจอจะทิ้งไว้ด้านล่าง
    เมื่อเทียบกับส่วนนี้ของบทความ Rolling Hills แล้ว ทำให้นึกถึงฉากชาจากเห็ดใน Midsommar โดยเฉพาะฉากเปลือกไม้ เอฟเฟกต์ที่สิ่งต่าง ๆ “หายใจ” และไหลนั้นเป็นประสบการณ์ทางสายตาที่พิเศษจริง ๆ และดีที่ได้เห็นการนำไปทำหลายแบบ

    • อาจไม่ใช่บัญชีที่พูดถึง แต่บัญชี YouTube นี้จำลอง ประสบการณ์ทางสายตา ได้ดี และยังครอบคลุมเอฟเฟกต์อื่น ๆ ด้วย
      วิดีโอตอนมองธรรมชาติ วิธีที่แพตเทิร์นเรขาคณิตเริ่มก่อตัว และเอฟเฟกต์ “หายใจ” นั้นทรงพลังมาก ครอบคลุมสารหลายชนิด ตั้งแต่พื้นผิวที่เหมือนหายใจหรือเต้นเป็นจังหวะเล็กน้อย ไปจนถึง “โลก” เรขาคณิตเต็มรูปแบบที่พบในสารอย่าง DMT
      https://www.youtube.com/@josikinz

  • ช่วงต้นยุค 90 Todd Rundgren ได้ออกแอป Mac ชื่อ Flowfazer แม้มันไม่ได้จำลองประสบการณ์นั้นโดยตรง แต่ช่วยเบี่ยงความสนใจไปทางอื่นเพื่อให้ภาวะลื่นไหลดำเนินต่อไปได้
    บางคนก็ใช้เป็นแนวทางสำหรับงานสร้างสรรค์ของตัวเองด้วย
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    ตอนนั้นเป็นยุคของสกรีนเซฟเวอร์และ palette animation

  • ถ้าชอบงานแนวนี้ และมีโอกาสได้ดู Fractaled Visions ทำภาพประกอบการแสดงของนักดนตรี Tipper น่าจะเป็นประสบการณ์ที่ยอดเยี่ยมมาก
    เป็นการพรรณนาภาพของสิ่งตกค้างจากไซเคเดลิกที่แม่นยำที่สุดเท่าที่เคยเห็นมา ปีที่แล้วได้ดูการแสดงที่ทำร่วมกัน และเป็นประสบการณ์ทางศิลปะที่ดีที่สุดในชีวิต ภาพของ Fractaled Visions มีความหนาแน่นและซับซ้อนจนแทบไม่น่าเชื่อ
    แม้จะรู้เรื่อง shader programming และอื่น ๆ อยู่พอสมควร เอฟเฟกต์บางอย่างก็ยังทำให้คิดว่า “นี่ทำได้ยังไงกันแน่” วิดีโอเซ็ตด้านล่างเก็บประสบการณ์ได้ไม่ครบถ้วน แต่พอถ่ายทอดบรรยากาศได้ การได้ดูแบบ 4K 60fps นั้นเป็นอีกระดับหนึ่งโดยสิ้นเชิง
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • ตรงนี้ควรมีลิงก์ ShaderToy: https://www.shadertoy.com

  • นึกถึงงานคลาสสิกเก่าแก่ยุค Flash ในสายนี้อย่าง Flashback.swf มีวิดีโอเรนเดอร์อยู่ที่นี่: https://m.youtube.com/watch?v=KaSqrx93rS0

    • ในยุค Flash วิดีโอนี้ทำให้ได้รู้จักกลุ่มดนตรีอิเล็กทรอนิกส์ Shpongle
      แอนิเมชันนี้ใช้รีมิกซ์ของ Divine Moments of Truth และน่าจะเป็นเวอร์ชัน “Russian Bootleg” ก่อนหน้านั้นก็ฟังดนตรีอิเล็กทรอนิกส์อยู่บ้าง แต่ตอนฟังดนตรีอิเล็กทรอนิกส์แนวนี้ครั้งแรก รู้สึกเหมือนสมองระเบิดจริง ๆ

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