🌁

Deck.gl の BitmapLayer で表示するテクスチャサイズについて

2023/02/16に公開

Deck.glのBitmapLayerを使ってテクスチャを表示する際に以下エラーに遭遇した。

ArrayBufferView not big enough for request

渡しているテクスチャデータが指定したサイズに満たないとのこと。
確認してみるもサイズやデータに問題は無さそう。

ググると以下記事が見つかる。
https://stackoverflow.com/questions/42789896/webgl-error-arraybuffer-not-big-enough-for-request-in-case-of-gl-luminance
https://webglfundamentals.org/webgl/lessons/ja/webgl-data-textures.html

WebGLの場合は、デフォルトでは「1件あたり4バイト」としてデータを扱うことになっている。 WebGLはデータ全体が「4バイトの整数倍のサイズ」であると期待して処理を行う(最後の1件を除く)。

という仕様があるそう。
確かに渡していたテクスチャサイズは4の倍数ではなかった。

ピュアなWebGLであれば以下設定で1バイトずつ読むようになって解決するらしい。

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

Deck.glではこのパラメータを設定する場合、以下のようになる。(Reactを前提としています。)

<DeckGL
  parameters={{
    [GL.UNPACK_ALIGNMENT]: 1,
  }}
  ...
/>

パラメータ設定の詳細は公式ドキュメントを参考。

Discussion