問題タブ [deferred-rendering]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
opengl - OpenGL でのスクリーン スペース バウンディング ボックスの計算
タイル遅延レンダリング メソッドを実装しようとしていますが、行き詰まっています。各タイル (32x32) の最小/最大深度を計算し、テクスチャに保存しています。次に、シーン内のすべてのポイントライト (球体) の長方形の左下と右上の座標で表されるスクリーン スペース バウンディング ボックス (バウンディング スクエア) を計算します (私のアプリの写真を参照)。これは最小/最大深度とともに、光が実際のタイルに影響を与えるかどうかを確認するために使用されます。
問題は、これを行う方法がわからないことです。アイデア、ソースコード、または正確な計算はありますか?
アップデート
opengl - ディファード ライティング | 円を使用したポイント ライト
このチュートリアルに従って、OpenGL グラフィック エンジンにディファード ライティング メカニズムを実装しています。それはうまく機能します、私はそれで問題を起こしません。
ポイント ライトに関しては、ライトの周囲の球体をレンダリングして、ライトの影響を受ける可能性のあるピクセルのみをライティング シェーダーを通過させるように指示します。ここで正確に説明されているカルフェイスとカメラの位置に関して、その方法にはいくつかの問題があります。これらを解決するために、チュートリアルでは stencil-test を使用します。
私は最初の質問につながるその方法の効率を疑っています:
光球を表す円を描く方がはるかに良いと思いませんか?
球体は、どの視点から見ても、画面上では常に円のように見えます。タスクは、円のスクリーン位置とスケーリングを決定することです。この方法には 3 つの利点があります。
- カルフェイス問題なし
- カメレポジション イン ライトスフィアの問題はありません
- はるかに効率的 (頂点の量が大幅に削減 + ステンシル テストなし)
この手法を使用するデメリットはありますか?
私の2番目の質問は、言及された方法の実装を扱っています。円の中心位置は、いつものように簡単に計算できます。
しかし、結果として得られる円のスケーリングをどのように計算するのでしょうか? 距離 (カメラからライトまで) と何らかの形で透視図に依存する必要があります。
c++ - Tiled rendering compute shader light culling and shading
I'm trying to implement tiled-deferred rendering in OpenGL/GLSL and I'm stuck on light culling.
My GPU is kind of older (AMD Radeon 6490m) and for strange reasons compute shaders runs in infinite cycle when atomic operations are called inside them on shared variables so I couldn't compute minimum and maximum depth using compute shaders. Anyway, it isn't much time-consuming operation so I do it in fragment shader.
Then for every visible point light (in view space) I compute screen space bounding quad. Now I want to use single compute shader for light culling and shading. Problem is that as mentioned above, I'm not able to use atomic operations on shared variables and hence I can't build tile light list and store light count for tile.
Problem is I cant' find any other way how to do this.Any idea how to cull & build tile light lists using non-atomics?
Here is pseudo code of my compute shader:
opengl - OpenGL を使用した遅延レンダリングで、サーフェスのライト境界付近でピクセル化が激しく発生する
問題の説明
私は現在、ディファード レンダラーにポイント ライトを実装していますが、ライトの境界付近でのみ目立つ重いピクセル化/三角測量がどこから来ているのかを判断するのに苦労しています。
この問題は、どこかで精度が失われたことが原因のようですが、正確な原因を突き止めることはできませんでした。法線は明らかな可能性ですが、directx を使用している同級生がいて、法線を同様の方法で問題なく処理しています。
ゲームのユニット (64 ユニット/メートル) で約 2 メートル離れたところから:
数センチ離れて。「ピクセル化」は、世界に近づいてもサイズが変わらないことに注意してください。ただし、カメラの向きを変えると泳いでいるように見えます。
RGBA8 レンダー ターゲットで予想される球状のバンディングを示すフォワード レンダラーのクローズ アップとの比較 (各色の値は 0 ~ 255 のみ)。私の延期された写真では、後壁が通常の球状のバンディングを示していることに注意してください。
ライト ボリュームは、緑色のワイヤフレームで示されています。
ご覧のとおり、表面に近づかない限り効果は見えません (ゲームの単位で約 1 メートル)。
位置再構築
まず、光が重なる画面の部分のみをレンダリングするために使用している球状メッシュを使用していることに言及する必要があります。ここで提案されているように、深度が深度バッファー以上の場合、背面のみをレンダリングします。
フラグメントのカメラ空間位置を再構築するために、ライト ボリュームのカメラ空間フラグメントからベクトルを取得し、それを正規化し、gbuffer からの線形深度でスケーリングしています。これは、ここで説明した方法(線形深度を使用)とここ (球状のライト ボリューム)のハイブリッドのようなものです。
ジオメトリ バッファ
私のgBufferの設定は次のとおりです。
opengl - 遅延レンダリング - ライト ボリュームを使用してポイント ライトの位置を再構築することは有効ですか?
位置再構築
これが有効な方法であり、何かを見落としていないことを確認したい。
光が重なる画面の部分のみをレンダリングするために使用している球状メッシュを使用しています。ここで提案されているように、深度が深度バッファー以上の場合、背面のみをレンダリングします。
フラグメントのカメラ空間位置を再構築するために、ライト ボリュームのカメラ空間フラグメントからベクトルを取得し、それを正規化し、gbuffer ( 32 ビット floatとして格納されている) から線形深度でスケーリングしています。これは、ここで説明した方法(線形深度を使用)とここ (球状のライト ボリューム)のハイブリッドのようなものです。
バンディング
私が質問する理由は、光の減衰について遅延と順方向から得られる結果が異なるためです。
据え置き
前方
次のように減衰を計算すると、減衰はカメラ空間の位置にリンクされます。
これらの例では、違いはあまり目立ちませんが、ライトをスケーリングしようとすると (たとえば、フェードアウトを速くするためにパワーを上げます)、効果がすぐに明らかになります。
light_atten = pow(light_atten, 2.0f)
私の問題は別の場所にあるかもしれませんが、私の位置再構築方法に見落としているような欠陥がないことを確認したいと思います。
編集
要求に応じて gbuffer セットアップを投稿します。
注:この問題は、サーフェス全体に対して 1 つの法線を持つ平面サーフェスで発生するため、法線の精度が失われることはありません。
最終編集 - 解決策
このメソッドは実際に有効であるかのように見えます (GuyRT が述べているように)。バンディングの問題は、ガンマ補正のやり方に起因しているようです。
私のフォワード レンダラーでは、8 つのライトに対して 1 つのループしかなく (複数のパスは実行せず、1 つのパスのみ)、照明計算の直後にガンマ補正を適用します。
私のディファード レンダラーでは、すべての照明計算、後処理などを行ってから、ガンマに変換します。ここでの問題は、次のことです。
- 線形 RGB 空間で照明計算を行う
- RGB 空間のテクスチャに格納します(精度は 8 ビットのみ)。
- ライティングが完了したら、値をガンマ補正し、バック バッファーにコピーします。
たとえば、2 つのフラグメントのライティング計算の最終値が sRGB 空間で 1/255 (~0.003) と 2/255 (~0.007) であるとします (最後に示されています)。RGB 空間でのこれらの値は、(1/255)^2.2 = ~0.000006 および (2/255)^2.2 = ~0.00002 です。これらの値がライティング アキュムレート テクスチャに保存されると、両方とも同じ値 0 として保存されます。これがバンディングの原因です。
ライティング アキュムレーション テクスチャをGL_R11F_G11F_B10Fに変換すると、フォワード レンダラーに非常に近い結果が得られました。ガンマが問題であることがわかったとき、これら 2 つの質問に対する答えが役に立ちました: sRGB テクスチャです。これは正しいです?glEnable(GL_FRAMEBUFFER_SRGB) をいつ呼び出すか? .
「フォールオフ」が 4.0 の最終結果
追加のリソース
この効果が「ガンマ バンディング」と呼ばれていることを知りました。このWeb サイトにはいくつかの便利なチャートがあり、このビデオにはすばらしい数値ウォークスルーがあります。
javascript - モバイル デバイスで Web ページのレンダリングを延期する
この記事を読んでいるうちに、 というところに行き着きましたDefer Rendering
。
このことから私が理解したのは、最初はユーザーに表示されない html ページの部分にコメントを付けて、script
.
関連する追加のリストをデータベースからロードするページがあります。モバイルでの読み込み速度を上げたいと思っていました。
だから私の質問は: 誰かが私がそれをどのように進めることができるかについていくつかの実用的な例を教えてもらえますか?
または、他の方法がありますDefer Rendering
か?
ありがとう