JavaScript と WebGL を使用して、シャドウ マッピングを含むインタラクティブなシーンを描画する Web アプリケーションを作成しました。このサイトができるだけ多くの Android デバイスで機能することを確認したいと思います。シャドウ マッピングは、深度テクスチャを使用することと、深度を保存するためにカラー テクスチャを悪用することの両方によって、デスクトップ コンピューターで正常に機能します。しかし、主要なアーティファクトなしで、Android デバイスでシャドウ マッピングを使用してシーンをサイトにレンダリングさせることはできませんでした。
問題は
- webglstats.com によると、ほとんどの Android デバイスは
WEBGL_depth_texture拡張機能をサポートしていないため、シャドウ マップとして光源深度バッファーを直接使用しても機能しません。 - 回避策は、各フラグメントの深さを RGBA 値としてエンコードすることです。これはデスクトップ コンピューターでは正常に機能しますが、同じコードが Android で大きなアーティファクトを引き起こします。私の推測では、これは精度の問題です。WebGL で計算された深度値の精度が低すぎるか、
floatsWebGL フラグメント シェーダーがmediump精度を持っています (Nexus 7 2012 Chrome のシェーダー コンパイラ エラー メッセージによるとhighp、フラグメント シェーダーではサポートされていません) は、実際にはハーフ フロートにすぎないため、深度値を RGBA 値に分割するには精度が低すぎます。
大部分の Android デバイスで正常に動作する WebGL シャドウ マッピングの実際の例はありますか? それとも、これは合理的に不可能ですか？(浮動小数点展開のようなものを使用してより高い float 精度をエミュレートすることは、フラグメント シェーダーでは非常に高価に思えます)。