Wolfenstein 3D：WebGL1によるレイトレーシング

去年の夏にNvidia RTXグラフィックカードが登場した後、レイトレーシングは以前の人気を取り戻しました。 過去数か月にわたって、私のTwitterフィードは、RTXを有効または無効にしたグラフィック比較の無限のストリームでいっぱいになりました。



非常に多くの美しい画像を賞賛した後、私はクラシックフォワードレンダラーとレイトレーサーを自分で組み合わせることを試みました。



他の人の開発が拒否されるという症候群に苦しんでいる結果、私はWebGL1に基づいて独自のハイブリッドレンダリングエンジンを作成しました。 ここでは、球体を使用したWolfenstein 3Dのデモレベルレンダリング（レイトレーシングのために使用した） で遊ぶことができます 。

試作機

このプロジェクトは、プロトタイプを作成することから始めました。MetroExodusのレイトレーシングを使用してグローバルライティングを再作成しようとしています。









拡散グローバル照明を表示する最初のプロトタイプ（Diffuse GI）



プロトタイプはフォワードレンダラーに基づいており、シーンのすべてのジオメトリをレンダリングします。 ジオメトリのラスタライズに使用されるシェーダーは、直接照明を計算するだけでなく、レンダリングされたジオメトリの表面からランダムな光線を放出して、光沢のない表面から発生する光のレイトレーサーの間接反射を使用して蓄積します（拡散GI）。



上の画像では、間接照明によってのみすべての球体が正しく照らされていることがわかります（光線はカメラの後ろの壁から反射されます）。 光源自体は、画像の左側にある茶色の壁で覆われています。

ウルフェンシュタイン3D

プロトタイプは非常にシンプルなシーンを使用しています。 光源は1つだけで、レンダリングされる球体とキューブはわずかです。 これにより、シェーダーのレイトレーシングコードは非常に簡単です。 ビームがシーン内のすべてのキューブおよび球との交差についてテストされるブルートフォースサイクルをチェックする交差は、プログラムがリアルタイムで実行するのに十分な速さです。



このプロトタイプを作成した後、より多くのジオメトリと多くの光源をシーンに追加することで、より複雑なことをしたかったのです。



より複雑な環境の問題は、シーン内の光線をリアルタイムで追跡できる必要があることです。 通常、 バウンディングボリューム階層 （BVH）構造は、レイトレーシングプロセスを高速化するために使用されますが、WebGL1でこのプロジェクトを作成するという私の決定はこれを許可しませんでした：WebGL1のテクスチャに16ビットデータをロードすることは不可能であり、シェーダーではバイナリ操作を使用できません。 これにより、WebGL1シェーダーでのBVHの予備計算と適用が複雑になります。



それが、私がこのためにWolfenstein 3Dデモレベルを使用することにした理由です。 2013年に、 Shadertoyで1つの断片化されたWebGLシェーダーを作成しました。これは、Wolfensteinのようなレベルをレンダリングするだけでなく、必要なテクスチャをすべて手続き的に作成します。 このシェーダーの経験から、Wolfensteinのグリッドベースのレベル設計は、迅速かつ簡単な加速構造としても使用でき、この構造でのレイトレーシングは非常に高速であることがわかりました。



以下はデモのスクリーンショットです。フルスクリーンモードでは、 https ： //reindernijhoff.net/wolfrtで再生できます 。

簡単な説明

デモでは、ハイブリッドレンダリングエンジンを使用します。 フレーム内のすべてのポリゴンをレンダリングするために、従来のラスタライズを使用し、結果をシャドウ、拡散GI、およびレイトレーシングによって作成された反射と組み合わせます。









影









びまん性









反射

プロアクティブなレンダリング

Wolfensteinカードは、64×64の2次元グリッドに完全にエンコードできます。 デモで使用されるマップは、 Wolfenstein 3Dのエピソード1の最初のレベルに基づいています 。



起動時に、プロアクティブレンダリングを渡すために必要なすべてのジオメトリが作成されます。 壁のメッシュは、マップデータから生成されます。 また、床面と天井面、ライト、ドア、ランダムな球体用の個別のメッシュを作成します。



壁とドアに使用されるすべてのテクスチャは、単一のテクスチャアトラスにパッケージ化されているため、すべての壁を1回の描画呼び出しで描画できます。

影と照明

直接照明は、フォワードレンダリングパスに使用されるシェーダーで計算されます。 各フラグメントは、4つの異なる光源で照らすことができます（最大）。 どのソースがシェーダーのフラグメントに影響を与えることができるかを知るために、デモの開始時に検索テクスチャが事前に計算されます。 この検索テクスチャのサイズは64 x 128で、マップグリッド内の各位置の4つの最も近い光源の位置をエンコードします。

varying vec3 vWorldPos; varying vec3 vNormal; void main(void) { vec3 ro = vWorldPos; vec3 normal = normalize(vNormal); vec3 light = vec3(0); for (int i=0; i<LIGHTS_ENCODED_IN_MAP; i++) { light += sampleLight(i, ro, normal); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各フラグメントと光源のソフトシャドウを取得するために、光源のランダムな位置がサンプリングされます。 シェーダーのレイトレーシングコードを使用すると（以下のレイトレーシングセクションを参照）、シャドウレイがサンプリングポイントに放出され、光源の可視性が決定されます。



（補助）反射を追加した後（以下の「反射」セクションを参照）、拡散GIは、拡散GIレンダーターゲット（以下を参照）で検索を実行することにより、計算されたフラグメントの色に追加されます。

レイトレーシング

プロトタイプでは拡散GIのレイトレーシングコードがプリエンプティブシェーダーと組み合わされていましたが、デモではそれらを分離することにしました。









拡散GIを収集するためにランダムレイのみを放射する別のシェーダーを使用して、すべてのジオメトリの2番目のレンダリングを個別のレンダーターゲット（拡散GIレンダーターゲット）に完了することでそれらを分離しました（以下の「拡散GI」セクションを参照）。 このレンダーターゲットで収集された照明は、前方のレンダリングパッセージで計算された直接照明に追加されます。



プロアクティブな通路と拡散GIを分離することにより、スクリーンピクセルあたり1つ未満の拡散GIビームを放出できます。 これを行うには、バッファスケールを小さくします（画面の右上隅にあるオプションのスライダーを移動します）。



たとえば、バッファスケールが0.5の場合、4画面ピクセルごとに1つのレイのみが放出されます。 これにより、生産性が大幅に向上します。 画面の右上隅にある同じUIを使用して、レンダーターゲット（SPP）のピクセルあたりのサンプル数とビーム反射の数を変更することもできます。

ビームを放つ

レイをシーンに放出できるようにするには、すべてのレベルジオメトリにシェーダーのレイトレーサーが使用できる形式が必要です。 Wolfensteinレイヤーは64×64グリッドをエンコードしたため、すべてのデータを単一の64×64テクスチャにエンコードするのは簡単です。

• テクスチャカラーの赤チャネルでは 、マップグリッドの対応するセルx、yにあるすべてのオブジェクトがエンコードされます。 赤チャネルの値がゼロの場合、セル内にオブジェクトはありません。それ以外の場合、壁（1〜64の値）、ドア、光源、または交差を確認する必要のある球体で占められています。
• 球体がレベルグリッドセルを占める場合、緑、青、およびアルファチャネルを使用して、グリッドセル内の球体の半径と相対xおよびy座標をエンコードします。

レイは、次のコードを使用してテクスチャを走査することによりシーンで放出されます。

 bool worldHit(n vec3 ro,in vec3 rd,in float t_min, in float t_max, inout vec3 recPos, inout vec3 recNormal, inout vec3 recColor) { vec3 pos = floor(ro); vec3 ri = 1.0/rd; vec3 rs = sign(rd); vec3 dis = (pos-ro + 0.5 + rs*0.5) * ri; for( int i=0; i<MAXSTEPS; i++ ) { vec3 mm = step(dis.xyz, dis.zyx); dis += mm * rs * ri; pos += mm * rs; vec4 mapType = texture2D(_MapTexture, pos.xz * (1. / 64.)); if (isWall(mapType)) { ... return true; } } return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様のメッシュレイトレーシングコードは、ShadertoyのこのWolfensteinシェーダーにあります。



壁またはドアとの交点を計算した後（ 平行四辺形との交点テストを使用）、プロアクティブレンダリングを渡すために使用された同じテクスチャアトラスで検索すると、アルベド交点が得られます。 球体には色があり、グリッド内のx、y座標と色勾配関数に基づいて手続き的に決定されます 。



ドアは動いているため、もう少し複雑です。 CPUのシーン表現（フォワードレンダリングパスのメッシュのレンダリングに使用）がGPUのシーン表現（レイトレーシングに使用）と同じになるように、すべてのドアはカメラからドアまでの距離に基づいて自動的に決定論的に移動します。

びまん性

散乱グローバルライティング（拡散GI）は、シェーダーで光線を放出することによって計算されます。これは、拡散GIレンダーターゲットのすべてのジオメトリを描画するために使用されます。 これらの光線の方向は、コサイン加重された半球をサンプリングすることにより決定される、表面の法線に依存します。



ビーム方向がrdで開始点がroの場合、反射光は次のサイクルを使用して計算できます。

 vec3 getBounceCol(in vec3 ro, in vec3 rd, in vec3 col) { vec3 emitted = vec3(0); vec3 recPos, recNormal, recColor; for (int i=0; i<MAX_RECURSION; i++) { if (worldHit(ro, rd, 0.001, 20., recPos, recNormal, recColor)) { // if (isLightHit) { // direct light sampling code // return vec3(0); // } col *= recColor; for (int i=0; i<2; i++) { emitted += col * sampleLight(i, recPos, recNormal); } } else { return emitted; } rd = cosWeightedRandomHemisphereDirection(recNormal); ro = recPos; } return emitted; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ノイズを減らすために、直接照明サンプリングがループに追加されます。 これは、Shadertoyの別のCornell Boxシェーダーで使用されている手法に似ています。

リフレクション

シェーダーで光線を使用してシーンをトレースできるため、反射を追加するのは非常に簡単です。 私のデモでは、カメラの反射ビームを使用して上記と同じgetBounceColメソッドを呼び出すことにより、反射が追加されます。

 #ifdef REFLECTION col = mix(col, getReflectionCol(ro, reflect(normalize(vWorldPos - _CamPos), normal), albedo), .15); #endif
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

反射は前方レンダリングパスで追加されるため、1つの反射光線は常に1つの反射光線を放出します。

時間的なアンチエイリアス

フォワードレンダリングパスのソフトシャドウと拡散GI近似はどちらもピクセルあたり約1つのサンプルを使用するため、最終結果は非常にノイズが多くなります。 ノイズの量を減らすために、PlaydeadのTAA： INSIDEのTemporal Reprojection Anti-Aliasingに基づいて、時間的アンチエイリアス（TAA）が使用されました 。

再投影

TAAの背後にある考え方は非常に単純です。TAAはフレームごとに1つのサブピクセルを計算し、その値を前のフレームの相関ピクセルと平均します。



現在のピクセルが前のフレームのどこにあったかを知るために、前のフレームのマトリックスmodel-view-projectionを使用してフラグメントの位置を再投影します。

サンプルをドロップして近傍を制限する

場合によっては、たとえば、前のフレームの現在のフレームのフラグメントがジオメトリによって閉じられるようにカメラが移動した場合など、過去から保存されたサンプルは無効です。 このような無効なサンプルを破棄するには、近隣制限が使用されます。 最も単純なタイプの制限を選択しました。

 vec3 history = texture2D(_History, uvOld ).rgb; for (float x = -1.; x <= 1.; x+=1.) { for (float y = -1.; y <= 1.; y+=1.) { vec3 n = texture2D(_New, vUV + vec2(x,y) / _Resolution).rgb; mx = max(n, mx); mn = min(n, mn); } } vec3 history_clamped = clamp(history, mn, mx);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、境界平行四辺形に基づいた制限方法を使用しようとしましたが、私のソリューションとの大きな違いは見られませんでした。 これはおそらく、デモのシーンに多くの同一の暗い色があり、ほとんど動いているオブジェクトがないために起こりました。

カメラの振動

アンチエイリアスを得るために、各フレームのカメラは、（擬似）ランダムなサブピクセル変位の使用により振動します。 これは、射影行列を変更することにより実装されます。

 this._projectionMatrix[2 * 4 + 0] += (this.getHaltonSequence(frame % 51, 2) - .5) / renderWidth; this._projectionMatrix[2 * 4 + 1] += (this.getHaltonSequence(frame % 41, 3) - .5) / renderHeight;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ノイズ

ノイズは、拡散GIおよびソフトシャドウの計算に使用されるアルゴリズムの基礎です。 良いノイズを使用すると画質に大きく影響し、悪いノイズを使用するとアーティファクトが発生したり、画像の収束が遅くなります。



このデモで使用されるホワイトノイズはあまり良くないのではないかと心配しています。



良いノイズを使用することは、おそらくこのデモで画質を改善する最も重要な側面です。 たとえば、 ブルーノイズを使用できます。



黄金比に基づいてノイズを使用して実験を行いましたが、失敗しました。 これまで、 Save of Dave Hoskinsのない悪名高いハッシュが使用されています。

 vec2 hash2() { vec3 p3 = fract(vec3(g_seed += 0.1) * HASHSCALE3); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xx+p3.yz)*p3.zy); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ノイズリダクション

TAAを有効にしても、デモには多くのノイズが表示されます。 天井は間接照明によってのみ照らされるため、レンダリングは特に困難です。 状況は、天井が単色で満たされた大きな平らな表面であるという事実によって単純化されていません。テクスチャまたは幾何学的なディテールがある場合、ノイズは目立たなくなります。



デモのこの部分にあまり時間をかけたくなかったので、1つのノイズ除去フィルターのみを適用しようとしました。MorganMcGuire とKyle WitsonのMedian3x3です。 残念ながら、このフィルターは壁のテクスチャの「ピクセルアート」グラフィックスとはうまく機能しません。距離のすべての詳細を削除し、近くの壁のピクセルの角を丸めます。



別の実験では、同じフィルターを拡散GIレンダーターゲットに適用しました。 彼はノイズをわずかに減らしましたが、同時に壁のテクスチャの詳細をほとんど変更せずに、この改善は余分なミリ秒を費やす価値はないと判断しました。

デモ

ここでデモを再生できます 。