On https://lume.io, the textures load fine in Chrome, but Firefox does not load textures.
Chrome:
Firefox:
Have you experienced something like this before? Any ideas what to look into?
Lots of WebGL warnings there, ending with “After reporting 32, no further warnings will be reported for this WebGL context.” – looks pretty likely to be related. Are the images power-of-two dimensions?
Looks like the textures loaded over the network are SVGs.
As far as I know THREE.js doesn’t support SVG textures, since it’s not a format that works in WebGL. There must be some kind of conversion going on in your app, I would imagine the SVG is drawn onto a canvas.
If that’s the case, as donmccurdy said, check what size these canvases are, they should be 256x256 or 512x512 or 1024x1024 etc.
Or you could even ditch the SVGs and use shader instead, looks like they’re fairly simple gradients so it shouldn’t take too much effort, and will save a tiny bit of bandwidth.
If that’s the case (I will check soon), does this mean one browser is handling things differently at some point in the pipeline? The code is the same regardless of browser.
There are differences in ImageBitmap and WebGL APIs, yes. A small/reproducible example would probably be necessary to identify what’s going on here.
1 Like