WebGLで画像処理をしようとしています。しかし、モバイル デバイスの GLSL テクスチャで大きな画像 (カメラから - 8 MP) を読み込もうとすると、ブラウザがクラッシュします。小さな写真は正常に動作します。だから、メモリが不足していると思います。
私はたくさんグーグルで検索しましたが、解決策が見つかりませんでした。「タイルベース」のレンダリングを実装するのが最善の方法だと思います。8 MP の画像を小さなパーツに分割し、レンダリングして貼り合わせます。ただし、ぼかし効果を適用するなどの問題があります。「サブ レンダリング」のエッジが表示されます。そのため、重複するピクセルをレンダリングし、それらを一緒に「フェード」する必要があります。あまり良い音ではありませんでした。
私が考えていない解決策はありますか？モバイル デバイスで非常に巨大なテクスチャを操作するにはどうすればよいですか?
1 つの 8mp 画像が使用可能な RAM を超えることはほとんどありません。RGB (バイト) では、24MB の RAM を占有します。半分の浮動小数点精度でも、50MB の RAM になります。ARM システムは、GPU と CPU が RAM を共有する統合 RAM アーキテクチャを使用します。たとえば、iPhone では 1 GB の RAM が利用可能です。
テクスチャリングのサポートは、希望のサイズ (たとえば 3264x2248) までである必要がありますが、これはハイエンドのモバイル (モバイルの 81% でサポートされている 4096x4096) では問題ないようです。
描画バッファの最大サイズが、サポートされているテクスチャの最大サイズよりも小さい可能性があります (クエリを実行できます)。
それ以外の場合は、単にバグに遭遇している可能性があり、これは厄介です. これに対処する方法は、画像を小さなタイルに分割し、各タイルを一度に 1 つずつ処理することです。
フィルター カーネルがある場合、境界を処理する方法は 2 つあります。
タイルを機能させるために必要なことは、境界で十分な入力を提供して、画像処理効果の非局所性 (ぼかしカーネルの半径など) をカバーすることです。私が考えることができる最も簡単なことは次のとおりです。
出力イメージのタイルごとに、対応する入力タイルとその 8 つの隣接タイルを読み込みます。次に、入力として 9 つすべてを使用してぼかしフィルターを実行します。通常は を呼び出しますがtexture2D、代わりに (カスタム) 関数を使用して座標を取得し、9 つのテクスチャの適切な 1 つを検索します。
使用するテクスチャの数を減らすには、出力タイルを入力タイルと比較して、両方の次元で辺の長さの半分だけオフセットします。この場合、タイル計算ごとに 4 つの入力タイルを使用するだけで済みますが、すべての入力をカバーするのに十分なタイルを使用すると、出力タイルに余分な境界線ができます。(一方、後でトリミングするのが賢明な場合は、これは良いことです。たとえば、入力画像にドロップ シャドウを適用する場合、切り捨てられるのではなく、影が出力を拡大するようにしたいと考えています。元の境界で。)
これを正しく行うと、タイルの境界にアーティファクトはなくなります。
(免責事項: この解決策は単純で、明白で、正しいように思えますが、私は画像処理や GPU リソースの節約の専門家ではありません。これが実際に機能しない理由や、はるかに優れたアイデアが存在する可能性があります。)