問題タブ [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.

0 投票する
0 に答える
101 参照

opengl - GLSL Deferred Rendering は RGBA のみを出力できます

私はいくつかの影を作ろうとしていますが、シェーダーは以下を使用した場合にのみ値を出力します:

vec3 以下では動作しません。ここでテクスチャ プロパティを確認できます。

これは、vec3 出力と上記の形式のシェーダー フラグメント ソースです。完全に白い画面が表示されます。vec4 を使用すると、真の深度値を取得できます。

結果

vec3 の場合: ここに画像の説明を入力

vec4 の場合: ここに画像の説明を入力

0 投票する
2 に答える
421 参照

opengl - あるフレーム バッファから別のフレーム バッファへの読み取りに関する問題

しばらくの間、ディファード シェーディング/レンダリングをエンジンに実装しようとしてきましたが、実際にその最終成果物を見ることができませんでした。

問題がどこにあるのかをテストするために、glBlitFramebuffer() コマンドを使用して、ターゲット FBO が実際にデフォルト FBO との間で読み取られているかどうかを確認する実験を考案しました。

デフォルトの FBO 自体がクリアされる前に、クリア カラーがblackに設定され、ターゲット FBO がクリアされる前に、クリア カラーがredに設定されるようにしました。

その結果、シーンをレンダリングすると、黒しか見えなくなります。

私の質問はこれです:

1 つの fbo が read_framebuffer に設定され、デフォルトが draw_framebuffer に設定されている場合、「glBlitFramebuffer」操作中に「クリアカラー」ピクセルもコピーされますか?

いいえの場合、その色はとにかくコピーされないため、ターゲット FBO が実際にレンダリングされているかどうかはわかりません。

はいの場合、赤色が表示されているはずで、FBO の設定の何が問題なのかわかりません...


前に述べたように、私はディファード シェーディング システムに取り組もうとしています。そのシステムでは、すべての操作を FBO で実行し、その全体をデフォルトの FBO に戻す必要がありました。

うまくいかなかったので、基本的なシーンをデフォルトの FBO に直接レンダリングする (動作する) か、ターゲット FBO にレンダリングし、手順に従ってその FBO をデフォルトの FBO にコピーする手順を簡略化しました (これは機能しません)。

私が使用しようとしているフレーム バッファの設定は、私が従ってきたチュートリアルと同じです。

そして、私は自分のシーンを次のようにレンダリングします (簡略化):

すべてのステップでフレーム バッファのステータスを確認しましたが、エラーは発生しませんでした。


私は実際の問題を発見しました。完全に理解できたら、この投稿を更新して詳細情報を追加します。

0 投票する
2 に答える
640 参照

opengl - 複数のテクスチャへのレンダリングは最新の OpenGL でどのように機能しますか?

FBO を正しく理解していれば、いくつかの 2D テクスチャを異なる色のアタッチ ポイントにアタッチできます。この機能を使用して、フラグメント シェーダーからいくつかの異なるタイプのデータ (ワールド ポジションや法線など) を書き出したいと考えています。昔のように、これにはさまざまなインデックスで gl_FragData への書き込みが含まれていましたが、gl_FragData はもう存在しません。これは現在どのように行われていますか?

0 投票する
2 に答える
1304 参照

opengl - 遅延レンダラーでスカイボックスを実装する OpenGL

後処理効果に含めることができるように遅延レンダラーでスカイボックスをレンダリングする方法を見つけようとしていますが、私のジオメトリステージはビュー空間にあり、残念ながらこのステージのスカイボックスは、他のオブジェクトと同じように明るくなります (光源から非常に遠くにある大きなボックスのように動作し、非常に暗く表示されます)。後処理にスカイボックスを組み込もうとしない私のセットアップは次のとおりです。

1:(FBO をバインド) ジオメトリをカラー、法線、位置 FBO テクスチャ アタッチメントにレンダリングします (FBO のバインドを解除します)。

2:(FBO をバインド) シーンをレンダリングし、画面空間の照明を計算します。(FBO をアンバインド)

3:(FBO のバインド) 後処理効果の適用 (FBO のバインド解除)

4: ジオメトリ FBO の深度バッファをデフォルトのフレーム バッファにブリットします。

5: スカイボックスをレンダリングします。

次のように、ステップ 5 を 3 に切り替えようとしました。

2:(バインド FBO) シーンをレンダリングし、スクリーン スペースの照明を計算します。

5: スカイボックスをレンダリングする

(FBO のバインドを解除)

3:(FBO のバインド) 後処理効果の適用 (FBO のバインド解除)

4: ジオメトリ FBO の深度バッファをデフォルトのフレーム バッファにブリットします。

しかし明らかに、スカイボックスにはシーンに関する深度情報がなく、照明ステージの上にレンダリングされます。また、2 から 5 の間で深度ブリッティングを行おうとすると、無効な GL 呼び出しを行っていると思います。呼び出し中に既に FBO にバインドされているためです。

0 投票する
1 に答える
278 参照

c++ - FBO による OpenGL シェーディング パイプラインの効率化

シーンに少なくとも 20 個のライトが必要なため、ディファード シェーディングの実装に取り​​組んでいます。私はそれを十分に速くするのに問題を抱えていました(そして今でもそうです)が、遅くなると思っていた変更を加えましたが、実際にはフレームレートがほぼ2倍になりました.

初期コード:

ジオメトリ パス中にピクセルが設定されている場合 (つまり、法線 = 0,0,0、位置 = 0,0,0、色 = 0 の背景) にのみライティング パスを実行するようにステンシル テストをセットアップしていました。 ,0,0.

ただし、結合された深度/ステンシル バッファーをデフォルトの深度/ステンシル バッファーにコピーするのは困難でした。システムの深度/ステンシル バッファがどのような形式になるかがわからないため、これはうまく機能しないようです。そのため、深度/ステンシル バッファ フォーマットを指定し、これにレンダリングしてから、スクリーン クワッドをブリットまたはレンダリングして画面に出力できる別の FBO をセットアップする方がよいと読んでいました。

そのため、ステンシルを追加する前に、新しい FBO を追加して、そのビットが機能するようにしました。

私の新しいコードは次のようになります。

これは期待どおりに機能します。予想外だったのは、フレーム レートが 25 FPS から 45 FPS に急上昇したことです。

どうしてこれなの?スクリーン クワッドに追加のシェーダー パスを実行しなければならないことは、実行しないよりも効率的ですか?

簡単なフォローアップの質問。シンプルな頂点シェーダーとフラグメント シェーダーを使用して gl_FragCoord に基づいてテクスチャをサンプリングすることと、カラー アタッチメントをシステム FBO に直接ブリットすることのどちらが効率的ですか?

0 投票する
1 に答える
124 参照

c++ - OpenGL を使用した遅延レンダリングを使用して FBO をバインドした後、レンダリング ライトでスタックする

まず第一に、一日中この仕事をしようとした後、この長い投稿を申し訳ありません.

特に C++ で継承を使用してライトを作成しているため、これについて多くの質問があります。

私はライトの方向を与えることができ、ライトを計算するので、ディレクショナル ライトをライトのコア モデルとして使用します。次に、その上に、ライトからフラグメント位置へのベクトルを計算するだけのポイント ライトを構築し、最後にスポット ライトを作成します。スポット ライトを作成するために、カット オフ アングルを追加したポイント ライトを使用します (コーンの外側にあるものはすべて無視します)。ライトをテストしたところ、フォワード レンダリングで問題なく動作しましたが、ライト モデルを PBR に変更し (基本的には、ディレクショナル ライトでライトを計算する方法を変更するだけです)、別のレンダリングに移行したいと考えています。

今日、遅延レンダリングの作業を開始し、位置、テクスチャ、法線、深度のバッファを取得できますが、ライトをレンダリングしようとすると問題が発生します。

これが最初の問題であり、2 番目の問題でした。それぞれのタイプのライトには独自のシェーダーがあり、ポリモーフィズムを使用してそれらを構築したからです。私の 2 番目の質問は、C++ で各ライトをループして、各ライトをレンダラーとして呼び出すか、シェーダーでこれを解決できる別の方法があるかということです。ライトのプロトタイプは編集です: VP プロジェクションを使用してレンダー クアットを変換する小さな問題を修正しましたが、まだ何も描画できず、FB が正しく機能しているかどうかわかりません。Nvidia opengl デバッガーがクラッシュします。

私のレンダリングパスは次のようになります。

私が構築し始めたシェーダー コードは (PS 私は今のところ影を削除しました) 頂点シェーダー

Fragment shader 私を悩ませているのは、gPosition、gPosition、gAlbedoSpec を使用しても均一な値を設定できず、シェーダーで何を変更しても出力が同じになることです。

グローバル メッシュ

グローバル シェーダー

バッファをバインドして指向性シェーダを実行した後、私が今得ているのは ここに画像の説明を入力

シーンを見るための例として、これは位置バッファです ここに画像の説明を入力

0 投票する
2 に答える
522 参照

javascript - THREE.js json メッシュ形式の法線エラーの解析

編集: デモがついにオンラインになりました: http://bharling.github.io/deferred/index.htmlドロップダウンを使用してトーラス モデルに切り替え、問題をライブで確認します。注: Webgl MRT 拡張機能が必要です。

私はしばらくの間、WebGL で独自の遅延レンダリング エンジンを開発する過程にあり、いくつかのティーポットを非常に満足のいくようにレンダリングする GBuffers と MRT 拡張機能を使用した実用的なプロトタイプを作成する段階に達しました。これは主に、フレームワークを使用せずに WebGL を適切に学習し、遅延レンダリングを理解するためにゼロから開発されました。興味のある方は、こちらの github にソースがあります: https://github.com/bharling/webgl-defer

ティーポットを見るだけでは飽き飽きし、THREE.js JSON 形式モデル用のローダーを実装しようとしました。ローダーの主要部分を移植 (コピー) しました。正しい頂点とインデックス バッファーを使用してメッシュを表示できます。これは素晴らしいことですが、法線は一貫して厄介です。頂点 UV と頂点法線、および単一のマテリアルを使用するインデックス付きジオメトリのみをサポートすることを選択しているため (最終的には、これは PBR ベースになるはずです)、JSON 内の他のものは無視し、サポートするものだけを直接 Float32Arrays (など) に書き込みます。 . 以下は、私のインポート コードと、私が見ている奇妙な法線のスクリーンショットです。

THREE.s公式エクスポーターを使用してブレンダーからエクスポートされた単純なインポートキューブからの奇妙な法線

上のスクリーンショットは、拡張されたワールド空間法線 gbuffer である必要があります。

私のエンジンの大きな違いの 1 つは、顔情報をクラス ( THREE.Face3 など) に保存せず、THREE.BufferGeometry のようにデータをバッファー属性に直接書き込むことを好むことです。

これまで、「Learning WebGL」コースのユタ ティーポット モデル、具体的にはこのリンクhttp://learningwebgl.com/blog/?p=1658のみを使用してきました。このモデルは私のエンジンで正確に機能し、おそらく THREE JSON 形式の初期バージョンです。頂点、texcoords などの json 配列を webgl バッファーに直接書き込むことにより、チュートリアルのようにそのモデルをロードします。これは私のエンジンで完全に機能しますが、最新のブレンダー エクスポーターからエクスポートされた単純なキューブでさえ、うまく機能していないようです。 .

どんな提案でも大歓迎です、ありがとう!

編集: webgl チュートリアルのティーポット モデルを使用した法線パスのスクリーンショット。注: THREE エクスポーターが壊れていることを示唆しているわけではなく、それを解析する私のコードです。私はこのエンジンで GBuffer の実装を過去 1 年ほどにわたって何度も調べてきましたが、今ではこれが正しいと確信しています。THREE json モデル形式を理解するのに少し問題があります。

ここに画像の説明を入力