Membuat renderer 3D ASCII

Menjelaskan pipeline rendering 3D sambil mengimplementasikan renderer 3D ASCII

Hasil dari tulisan ini juga bisa dilihat melalui tautan berikut selain artikel blog
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

• Apakah mungkin membuat ASCII terlihat seperti 3D?
  • ASCII mirip dengan piksel hitam-putih yang diperbesar secara signifikan
  • Kecerahan dapat diatur berdasarkan kerapatan karakter
• Bagaimana mengubah koordinat 3D menjadi koordinat 2D?
  • Secara garis besar prosesnya terdiri dari pemrosesan vertex, rasterisasi, dan pemrosesan fragmen
  • Koordinat 3D disebut vertex, yang berarti 'titik sudut' yang berada di ruang 3D
  • Satu vertex saja tidak cukup untuk merepresentasikan objek, sehingga objek direpresentasikan dengan mengumpulkan beberapa vertex
  • Unit terkecil untuk merepresentasikan objek disebut poligon
• Pemrosesan vertex
  • Proses memodifikasi vertex disebut pemrosesan vertex
  • Dilakukan berurutan melalui transformasi world, transformasi view, dan transformasi proyeksi
  • Setiap transformasi dihitung menggunakan matriks
  • Transformasi world menempatkan vertex yang terdapat dalam file model 3D ke ruang 3D
  • Transformasi view adalah menempatkan kamera, yaitu menghitung dari koordinat mana dan dari sudut pandang mana objek dilihat
  • Transformasi proyeksi adalah perhitungan untuk mengekspresikan perspektif. Biasanya menggunakan proyeksi perspektif.
  • Melalui transformasi proyeksi, koordinat dapat diubah menjadi koordinat ruang 2D
• Rasterisasi
  • Proses mengubah koordinat ruang 2D menjadi koordinat piksel
  • Melalui clipping, pembagian perspektif, penghapusan sisi belakang, transformasi viewport, dan scan conversion
  • Dalam tulisan ini, pekerjaan-pekerjaan di atas diimplementasikan dengan mencampurkannya secara tepat
• Pemrosesan fragmen
  • Proses menangani koordinat yang telah diubah menjadi piksel
  • Pada renderer 3D umum, dilakukan post-processing seperti perhitungan shader
  • Dalam tulisan ini, hanya hasil perhitungan pencahayaan yang diterapkan
• Karena bagian implementasi hampir seluruhnya berupa source code, bagian tersebut dihilangkan dari ringkasan

[cosine20]

Saya membacanya dengan senang. Rasanya menyenangkan karena mengingatkan lagi pada kuliah computer graphics yang saya ambil saat S1.

[toaonly]

Saya membacanya dengan senang. Saya terkesan karena pengerjaannya juga mempertimbangkan hingga posisi kamera.

[thesol9]

Bahkan menjelaskan pipeline rendering dasarnya
Isinya sangat menarik.