WebGL - 大きなテクスチャをレンダリングするには？

Question

私はWebGLでいくつかの画像処理をしようとしています。しかし、モバイルデバイス上のGLSLテクスチャに大きな画像（カメラから - 8 MP）を読み込もうとすると、ブラウザがクラッシュします。小さな写真は正常に動作します。だから私はそれが記憶を使い果たしていると思う。

私はたくさんのGoogle検索を行ったが、解決策を見つけられなかった。私は最善の方法は、 "タイルベースの"レンダリングを実装することだと思う。 8枚のMP画像を小さな部分に分割し、それらをレンダリングして貼り付けます。しかし、ぼかし効果を適用するような問題があります。 「サブレンダリング」のエッジが表示されます。だから私は、重複するピクセルをレンダリングし、一緒に "フェード"しなければなりません。それは良いとは言えませんでした。

私が考えている解決策はありますか？モバイルデバイスで本当に巨大なテクスチャを使用するにはどうすればいいですか？

Answer 1

タイルを機能させるために必要なことは、画像処理エフェクトの非局所性をカバーするために境界線に十分な入力を提供することです。ぼかしカーネルの半径。私が考えることができる最も簡単なものは次のとおりです。

出力画像の各タイルに対して、対応する入力タイルとその8近傍をにロードします。次に、すべての9を入力として使用してぼかしフィルタを実行します。通常はtexture2Dを呼び出します。代わりに、座標を取り込んで（カスタム）関数を使用して、9つのテクスチャのうちの適切なものを探します。

テクスチャを少なくするには、入力タイルと出力タイルを両方の寸法の半分の長さだけオフセットします。各タイル計算に4つの入力タイルを使用するだけで済みますが、すべての入力をカバーするのに十分なタイルを使用すると、出力タイルに余分な境界線ができます。 （一方で、後でトリミングするのが賢明な場合は良いことです;例えば、入力画像にドロップシャドウを適用すると、のように、のように出力を拡大するのではなく

これを正しく行うと、タイルの境界にのアーティファクトが存在するはずです。

（免責事項：このソリューションは単純で明白で正しいと思われますが、私は画像処理やGPUリソ​​ースの節約の専門家ではありません。そこにある）

Answer 2

1つの8mpイメージが利用可能なラムを超えることはありそうにありません。 RGB（バイト）では、24MBのRAMを占有します。浮動小数点の精度が半分であっても、RAMは50MBになります。 ARMシステムでは、GPUとCPUがRAMを共有する統合RAMアーキテクチャを使用します。例えばiPhoneには1GBのRAMがあります。

テクスチャリングのサポートは、ハイエンドの携帯電話（4096x4096は81% of mobilesでサポートされています）では問題ないと思われる、希望のサイズ（たとえば3264x2248）まででなければなりません。

最大描画バッファサイズが、サポートされている最大テクスチャサイズ（query that）よりも小さい可能性があります。

それ以外の場合は、バグが発生している可能性があります。これは迷惑です。つまり、画像を小さなタイルに細分し、各タイルを1つずつ処理することです。

フィルタカーネルがある場合は、境界線を扱う方法は2つあります。

• あなたは正しいものを（それは遅いかもしれないが、一部のGPUが分岐サポートしていないと、すべてのコードパスを実行します）に対処するためにテクスチャルックアップで9つのテクスチャやブランチに渡すことができます。境界テクスチャは2x2にすぎないので、ラムの足跡はほとんどありません。テクスチャ間には補間がないので、それに頼ったり、自分の代わりにしたりしないでください。
• 前処理ステップで近隣のタイルからピクセルを取って、各タイルの周りにカーネルサイズの半分の境界線を追加できます。