การสร้าง ASCII 3D Renderer

 (kciter.so)
28 คะแนน โดย kciter1 2024-05-07 | 3 ความคิดเห็น | แชร์ทาง WhatsApp

อธิบายเกี่ยวกับ 3D rendering pipeline ไปพร้อมกับการลงมือสร้าง ASCII 3D Renderer

นอกจากบทความในบล็อกแล้ว ยังสามารถดูผลงานที่ได้จากบทความนี้ได้ที่ลิงก์ต่อไปนี้
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

  • ทำให้ ASCII ดูเหมือน 3D ได้หรือไม่?
    • ASCII มีลักษณะคล้ายพิกเซลขาวดำที่ถูกขยายให้ใหญ่ขึ้น
    • สามารถปรับความสว่างตามความหนาแน่นของตัวอักษรได้
  • จะเปลี่ยนพิกัด 3D ให้เป็นพิกัด 2D ได้อย่างไร?
    • โดยหลักจะดำเนินไปเป็นขั้นตอน vertex processing, rasterization และ fragment processing
    • พิกัด 3D เรียกว่า vertex และหมายถึง "จุดยอด" ที่อยู่ในปริภูมิ 3 มิติ
    • vertex เพียงจุดเดียวไม่สามารถใช้แทนวัตถุได้ จึงต้องนำ vertex หลายจุดมารวมกันเพื่อแทนวัตถุ
    • หน่วยที่เล็กที่สุดในการใช้แทนวัตถุเรียกว่า polygon
  • Vertex processing
    • กระบวนการแปลง vertex เรียกว่า vertex processing
    • ดำเนินตามลำดับ world transform, view transform และ projection transform
    • การแปลงแต่ละขั้นคำนวณโดยใช้เมทริกซ์
    • world transform คือการนำ vertex ที่อยู่ในไฟล์โมเดล 3D ไปจัดวางในปริภูมิ 3 มิติ
    • view transform คือการจัดวางกล้อง เป็นการคำนวณว่าจะมองวัตถุจากพิกัดใดและจากมุมมองใด
    • projection transform คือการคำนวณเพื่อแสดงมุมมองแบบมีระยะลึก โดยทั่วไปจะใช้ perspective projection
    • projection transform ทำให้สามารถแปลงเป็นพิกัดในปริภูมิ 2 มิติได้
  • Rasterization
    • กระบวนการแปลงพิกัดในปริภูมิ 2 มิติให้เป็นพิกัดพิกเซล
    • ผ่านขั้นตอน clipping, perspective divide, back-face culling, viewport transform และ scan conversion
    • ในบทความนี้มีการผสมขั้นตอนข้างต้นเข้าด้วยกันอย่างเหมาะสมเพื่อใช้ในการพัฒนา
  • Fragment processing
    • กระบวนการประมวลผลพิกัดที่ถูกแปลงเป็นพิกเซลแล้ว
    • ใน 3D renderer ทั่วไปจะมีการทำ post-processing เช่น การคำนวณ shader
    • ในบทความนี้ใช้เพียงผลลัพธ์จากการคำนวณแสงเท่านั้น
  • ส่วนของการลงมือพัฒนานั้นเกือบทั้งหมดเป็นซอร์สโค้ด จึงละไว้จากสรุป

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

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

 
cosine20 2024-05-09

อ่านได้อย่างเพลิดเพลินมากครับ ทำให้นึกถึงวิชาคอมพิวเตอร์กราฟิกส์ที่เคยเรียนตอนปริญญาตรีขึ้นมาอีกครั้งเลย ดีมากครับ
 
toaonly 2024-05-08

อ่านได้อย่างเพลิดเพลินมากครับ ประทับใจที่ทำงานโดยคำนึงถึงตำแหน่งกล้องด้วย
 
thesol9 2024-05-07

การอธิบายไปจนถึงพื้นฐานของเรนเดอริงไปป์ไลน์
เป็นเนื้อหาที่สนุกมากครับ