How to load jpeg/png from glb bin to texImage2D

In glb file images are stored as jpeg/png and when we create TypedArrayView from buffer, how to send this compressed image to WebGL using gl.texImage2D()?

I know how to load image first into Image() object, then to gl.texImage2D but Im interested in direct load of compressed image.

I think glb format is supposed to use entire buffer for sending data into GPU

You need to store image data in a (compressed) format GPUs support (see WebGL compressed texture formats) and use a file format that can store the data in such a format, e.g. ktx.

If you want to continue using jpeg/png images you’ll need to decode those from the glb buffer first (and optionally compress to a GPU supported format) before uploading to a texture object.

1 Like

As @carsten_neumann mentions, the PNG or JPEG data cannot be directly uploaded to the GPU. If you have textures in those formats, I think best practice is to use createImageBitmap where possible — to decompress them off the main thread — and fall back to other Image APIs when that’s not supported by the browser.

Using KTX2 is a better option for performance-sensitive applications. The internal formats of KTX2 that glTF currently supports are intended for cross-platform support, and (for that reason) require an efficient transcoding step from the encoded Basis Universal data into a compressed format supported by the device’s GPU. See 3D-Formats-Guidelines/KTXArtistGuide.md at main · KhronosGroup/3D-Formats-Guidelines · GitHub for how to create these assets.

If you want to store texture data ready for direct upload to the GPU, you’ll need to create multiple versions of each texture in different formats. KTX2 supports those formats, but note that this goes outside of the current glTF extension for KTX2 (KHR_texture_basisu) which allows only Basis Universal formats. So, this would not be portable outside of your own application.

I think glb format is supposed to use entire buffer for sending data into GPU

An entire buffer view can be uploaded to the GPU, mainly for vertex attribute data. I would not upload entire buffers (which contain buffer views), as these may contain other buffer views with data that won’t be used on the GPU, like animation keyframes.

2 Likes

@carsten_neumann @donmccurdy thanks :slight_smile: