How to load texture in React-Three-Fiber synchronously? THREE.WebGLRenderer: Texture marked for update but no image data found.

[MeRahulAhire]

Hi, I'm using Openlayers Canvas as a canvasTexture to my mesh as following

const mapContainer = document.getElementById("map");
      const mapCanvas = useRef(mapContainer.getElementsByTagName("canvas")[0]);
      if (textureRef.current) {
        textureRef.current.needsUpdate = true;
      }
    
      if (mapCanvas.current) {
        mapCanvas.current.needsUpdate = true;
      }

         <mesh
            name="Sphere"
            castShadow
            receiveShadow
            geometry={nodes.Sphere.geometry}
          >
            <meshStandardMaterial>
              <canvasTexture
                ref={textureRef}
                attach="map"
                image={mapCanvas.current}
                flipY={false}
              />
            </meshStandardMaterial>
          </mesh>

But the problem is in openlayers I'm trying to load a 5MB Webp image which takes some time to load and Three.js wants to load image instantly and doesn't wanna wait for it which is causing it to render unreliably.

Sometimes, the texture does get loaded but most of the time, I'm getting this error in console.

THREE.WebGLRenderer: Texture marked for update but no image data found.

My question is how do I make R3F to wait till the image is loaded? Need your help 🙏.

[drcmda]

loading in react is generally done through suspense. all fiber loaders use this caching solution https://github.com/pmndrs/suspend-react

if you know when your texture loads and when it has completed you can suspend.

[drcmda]

there's THREE.loadingmanager but otherwise no, if they really hide the loading process then you can't await it. i would ask on openlayers git.

[MeRahulAhire]

Sorry for late the response, it was night time here in India, Let's say I'm fetching images and then embedding it on canvas which obviously takes time. So how should this be approached. What I'm assuming here with THREE.loadingmanager is that its more suitable for static texture where file sizes and data are known upfront (being static) but that's not the case with canvasTexture and its very dynamic as Three.js has no way to figure out what's happening within the canvas.

What's your thought on it? How to keep track of it?

[MeRahulAhire]

Any thoughts @drcmda ?

[drcmda]

as i said, the problem is not here, it is openlayers. i would open an issue and ask them to give you a means to know when the texture has loaded. going through internals by tag name etc, that doesn't seem like a good idea.

[MeRahulAhire]

Thanks, if you get any answer please let me know. Even I've raised it from my side.