I’ve been running into some lag when loading large textures in my project. Textures are only loaded as needed, and there was a lag spike as the GPU would decode the texture and apply it. The solution I’ve found in the past that worked was loading the texture as a CanvasTexture using ImageBitmapLoader.
How to improve texture first-render performance.
three.js webgl - loader - ImageBitmap
That method works if it’s a single texture, but if I also wanted to load textures as a cube map, this seems to fail with the following error:
Failed to execute ‘texSubImage2D’ on ‘WebGL2RenderingContext’: Overload resolution failed.
I’ve created a CodePen of the problem here: https://codepen.io/Jollus/pen/BaPzMGd
To reproduce, L60 just needs to be commented out.
Was there another way for a CanvasTexture to be applied to each map of an array of MeshBasicMaterials, from which that array is then applied to the cube as a material?
In the example, the cube is being morphed into a sphere to aid with texturing, but that wouldn’t change the issue.