ASCII 3Dレンダラーを作る

 (kciter.so)
28 ポイント 投稿者 kciter1 2024-05-07 | 3件のコメント | WhatsAppで共有

ASCII 3Dレンダラーを実装しながら、3Dレンダリングパイプラインについて説明する。

この記事の成果物は、ブログ記事のほかに以下のリンクからも確認できる。
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

  • ASCIIを3Dのように見せることは可能か？
    • ASCIIは、大きく拡大した白黒ピクセルに似ている
    • 文字の密度に応じて明るさを調整できる
  • 3D座標を2D座標にどう変換するのか？
    • 大きく分けて、頂点処理、ラスタライズ、フラグメント処理の順で進む
    • 3D座標は頂点（vertex）と呼ばれ、3D空間に位置する「頂点」を意味する
    • 頂点1つだけでは物体を表現できないため、頂点を集めて物体を表現する
    • 物体を表現する最小単位をポリゴンと呼ぶ
  • 頂点処理
    • 頂点を変形する過程を頂点処理と呼ぶ
    • ワールド変換、ビュー変換、射影変換の順で進む
    • 各変換は行列を使って計算する
    • ワールド変換は、3Dモデルファイルに含まれる頂点を3D空間に配置すること
    • ビュー変換はカメラを配置することで、どの座標からどの視点で物体を見るかを計算すること
    • 射影変換は遠近感を表現するための計算。通常は透視投影を使う。
    • 射影変換によって2D空間座標へ変換できる
  • ラスタライズ
    • 2D空間座標をピクセル座標に変換する過程
    • クリッピング、透視除算、背面除去、ビューポート変換、スキャン変換を経る
    • この記事では、これらの作業を適切に組み合わせて実装している
  • フラグメント処理
    • ピクセルに変換された座標を処理する過程
    • 一般的な3Dレンダラーでは、シェーダー演算を行うなどの後処理を進める
    • この記事では、光源計算の結果のみを適用している
  • 実装パートはほとんどがソースコードのため、この要約では省略

関連記事

3件のコメント

 
cosine20 2024-05-09

楽しく読みました。学部時代に受講したコンピュータグラフィックスの授業もいろいろと思い出されて、よかったです。
 
toaonly 2024-05-08

とても楽しく読みました。カメラの位置まで考慮して作業されていた点が印象的でした。
 
thesol9 2024-05-07

基本的なレンダリングパイプラインの説明まであり、
とても面白い内容でした。