問題タブ [webgl-extensions]

JavaScript と WebGL を使用して、シャドウ マッピングを含むインタラクティブなシーンを描画する Web アプリケーションを作成しました。このサイトができるだけ多くの Android デバイスで機能することを確認したいと思います。シャドウ マッピングは、深度テクスチャを使用することと、深度を保存するためにカラー テクスチャを悪用することの両方によって、デスクトップ コンピューターで正常に機能します。しかし、主要なアーティファクトなしで、Android デバイスでシャドウ マッピングを使用してシーンをサイトにレンダリングさせることはできませんでした。

問題は

1. webglstats.com によると、ほとんどの Android デバイスはWEBGL_depth_texture拡張機能をサポートしていないため、シャドウ マップとして光源深度バッファーを直接使用しても機能しません。
2. 回避策は、各フラグメントの深さを RGBA 値としてエンコードすることです。これはデスクトップ コンピューターでは正常に機能しますが、同じコードが Android で大きなアーティファクトを引き起こします。私の推測では、これは精度の問題です。WebGL で計算された深度値の精度が低すぎるか、floatsWebGL フラグメント シェーダーがmediump精度を持っています (Nexus 7 2012 Chrome のシェーダー コンパイラ エラー メッセージによるとhighp、フラグメント シェーダーではサポートされていません) は、実際にはハーフ フロートにすぎないため、深度値を RGBA 値に分割するには精度が低すぎます。

大部分の Android デバイスで正常に動作する WebGL シャドウ マッピングの実際の例はありますか? それとも、これは合理的に不可能ですか？(浮動小数点展開のようなものを使用してより高い float 精度をエミュレートすることは、フラグメント シェーダーでは非常に高価に思えます)。

Chrome で webgl 拡張機能を取得するのに問題がありWEBGL_draw_buffersます。私の GPU は間違いなく複数の描画バッファーをサポートするはずです。Firefox は拡張機能をサポートしていますが、Chrome はそれをリストしていません。サポートがない理由はありますか？

一般的な情報

• ブラウザ: Chrome 37.0.2062.102 m (バージョン 36 と 38 で同じ結果)
• ブラウザのコマンドライン:Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --js-flags=--harmony --enable-webgl-draft-extensions --flag-switches-end
• オペレーティング システム: Windows 8.1 プロ
• GPU: NVS 3100M (ドライバー バージョン 327.02)
• ノートブック: ThinkPad T410
• WEBGL_draw_buffers他の人はChrome でサポートを受けているようです
• 複数の描画バッファの無効化に関連する Chrome のバグに関する情報は見つかりませんでした。

利用可能な webgl 拡張機能

報告された chrome://gpu の問題

画像を WebGL に読み込んでから GPU にアップロードしようとしています。元の画像は圧縮されていない/可逆ですが、圧縮されたテクスチャ形式を使用したいと思います。

アップロードするには、これが私がやっていることです:

上記のコードでtextureSourceは、読み込まれた ("texture.png" など) です。

それはすべてうまくいきますが、画像を圧縮して保存するためにWEBGL_compressed_texture_s3tcフォーマット ( )をロードしたいと思います。COMPRESSED_RGB_S3TC_DXT1_EXT

拡張機能が利用可能で有効になっていることを確認します...

しかし、それではフォーマットとして使用できません。使用texImage2D()しても機能しません:

期待される方法は ですがcompressedTexImage2D()、それもあまり役に立ちません:

これは明らかに、私が渡しているような JavaScript イメージではなく、実際の DDS/DXT データをcompressedTexImage2D()期待しているためです。Uint8Array

明らかな解決策は、ファイルをネイティブの DDS 形式 (別の場所で圧縮されたファイル) でアップロードすることです。しかし、それは私が避けようとしているものです。現在のワークフローでは、画像を事前に圧縮する (または複製する) よりも、元の形式で画像を保持する方が理にかなっています。

私の質問は次のとおりです。元のPNG画像を引き続き使用してロードし、圧縮形式でGPUにアップロードできますか? つまり、テクスチャをオンザフライで DXT1/5 形式に圧縮できますか?

私がやっていることは、ビデオ メモリによって少し制限されているので、節約できれば素晴らしいことです。と他のデータ型を使用して、テクスチャが使用するスペースを最小限に抑えることができましたUNSIGNED_SHORT_4_4_4_4。これは良いスタートですが、ネイティブ圧縮も使用してみたいと思います。

このトピックに関するドキュメントはあまり見つかりませんし、他の人気のあるライブラリ (Three.js、Pixi など) に関連するコードも見つかりませんでした。このページは、ライセンスの問題を示唆しています。これが、WebGL がファイルを適切に圧縮する方法を備えておらず、画像オブジェクトのブラウザー サポートを許可していない理由である可能性があります。

後処理効果を 3D エンジンに統合中です。WebGLでFrameBufferオブジェクトを使用して深度データをキャプチャすると、障害が発生しました。FrameBuffer へのカラー データのキャプチャに問題はありません。ただし、 Chrome/Firefox で Depth 拡張機能を有効にしても、Depth データを取得できません。

構成の問題かどうかを確認するためにさまざまな設定を試しましたが、何を試しても白いテクスチャしか表示されません。投稿の最後のスクリーンショットは、テクスチャとしてレンダリングされたカラー アタッチメントとテクスチャとしてレンダリングされた深度アタッチメントを示しています。FrameBuffer の初期化に問題がありますか、それともこの問題を解決するために他の場所を探す必要がありますか?

以下は、FrameBuffer オブジェクトを初期化するための私のコードです。

現在のシーンを FrameBuffer にレンダリングするコードを次に示します。

次のモデルは、いくつかのローエンド マシンで優れたパフォーマンスを発揮します。

http://examples.x3dom.org/example/x3dom_sofaGirl.html

ただし、Nvidia GT 650m を搭載した MacBook Pro では、フレームレートが非常に低くなります。MacBookに拡張機能がないためだと思いましたOES_element_index_uintが、拡張機能があると表示されます。

65K 未満でメッシュを再構築すると、問題が解決します。再構築せずにパフォーマンスを向上させる方法はありますか?

GT 650m を無効にし、内蔵グラフィックのみを強制的に使用するアプリケーション (gfxCardStatus) をインストールしました。これで、すべて正常に動作します。これはドライバーのバグですか？

統合 GPU よりも専用 GPU の方が高速に動作する別の 3D シーンを見つけました。

http://examples.x3dom.org/binaryGeo/oilrig_demo/index.html

これは小さなメッシュがたくさん集まっているからだと思います。また、このシーンを実行すると、GPU ファンがスピンアップするのが聞こえます。ソファガールのシーンではありませんでした。

最近、グラフィックを多用するページに出くわし、(組み込みの Intel ではなく) Nvidia カードを使用してレンダリングしたいと考えました。それを行う方法を探したとき、私がする必要があったことの 1 つは、「webgl.enable-privileged-extensions」の値を「true」に変更することでした。

Firefox でデフォルトで「false」に設定されている理由と、特権拡張機能とは正確には何ですか?