ASCII 3D Renderer Yapımı

ASCII 3D renderer uygularken 3D render pipeline'ı açıklıyor.

Bu yazının çıktısı, blog yazısına ek olarak aşağıdaki bağlantılarda da görülebilir.
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

• ASCII'yi 3D gibi göstermek mümkün mü?
  • ASCII, büyük ölçüde büyütülmüş siyah-beyaz piksellere benzer.
  • Karakterlerin yoğunluğuna göre parlaklık ayarlanabilir.
• 3D koordinatlar 2D koordinatlara nasıl dönüştürülür?
  • Genel olarak vertex işleme, rasterization ve fragment işleme adımlarıyla ilerler.
  • 3D koordinatlara vertex denir ve 3D uzayda bulunan bir "köşe noktasını" ifade eder.
  • Tek bir vertex ile bir nesne ifade edilemeyeceğinden, vertex'ler bir araya getirilerek nesne temsil edilir.
  • Nesneleri ifade eden en küçük birime poligon denir.
• Vertex işleme
  • Vertex'leri dönüştürme sürecine vertex işleme denir.
  • Sırasıyla world transformation, view transformation ve projection transformation uygulanır.
  • Her dönüşüm matrisler kullanılarak hesaplanır.
  • World transformation, 3D model dosyasındaki vertex'leri 3D uzaya yerleştirmektir.
  • View transformation, kamerayı yerleştirme işlemidir; nesnenin hangi koordinattan ve hangi bakış açısından görüleceğini hesaplar.
  • Projection transformation, perspektif etkisini ifade etmek için yapılan işlemdir. Genelde perspective projection kullanılır.
  • Projection transformation sayesinde 2D uzay koordinatlarına dönüştürmek mümkün olur.
• Rasterization
  • 2D uzay koordinatlarını piksel koordinatlarına dönüştürme süreci.
  • Clipping, perspective divide, back-face culling, viewport transformation ve scan conversion adımlarından geçer.
  • Bu yazıda bu işlemler uygun şekilde harmanlanarak uygulanıyor.
• Fragment işleme
  • Piksele dönüştürülmüş koordinatları işleme süreci.
  • Genel 3D renderer'larda shader hesaplamaları gibi son işlemler uygulanır.
  • Bu yazıda yalnızca ışık hesaplamasının sonucu uygulanıyor.
• Uygulama bölümü neredeyse tamamen kaynak koddan oluştuğu için özette atlandı.

[cosine20]

Keyifle okudum. Lisans döneminde aldığım bilgisayar grafikleri dersi de yeniden aklıma geldi, hoş oldu.

[toaonly]

Keyifle okudum. Kamera konumunu da hesaba katarak çalışmış olmanız etkileyiciydi.

[thesol9]

Temel render alma pipeline’ının açıklamasına kadar gidiyor.
Oldukça eğlenceli bir içerikti.