useTexture causing a blank 'redraw' but not a 'rerender' on Canvas

[portedison]

Example here -
https://codesandbox.io/s/shoe-configurator-forked-37us32?file=/src/App.js

Based on the shoe configurator, if you click on the shoe it will switch the Mesh with new TextureMap. While it's loading the textures, the screen goes blank, but it doesn't seem to be effecting the whole Canvas, as the parents timestamp is identical.

My assumption is that it would 1. click, 2. load, 3. render.

Am I potentially implementing this incorrectly? Or is this a bug? Am I able to preload my texture to avoid this?

Note: it's only relevant for the first load, subsequent loads are instant, but I've added a count to trigger it over and over.

This could be a possible duplicate - #1165

[portedison]

I wonder if this (#871) is related. But I just tried v9.6.0 and the same issue occurs.

[drcmda]

that is how suspense works, it really is worth it to learn suspense, it enables many interesting things. first of all, if a component suspends, everything within the same bound is unmounted by design, that allows you to wrap individual things in a suspense bound. then there is startTransition, which allows things to persist on screen until the new result comes in.

i would make an example with your code but i have no faith in it, there are things there that look suspect to me. the way you use useTexture for instance, then you mutate into a prop, it all seems confused tbh.

[portedison]

Thanks for taking a look @drcmda.

I've updated the example here (https://codesandbox.io/s/shoe-configurator-forked-3g4nlr?file=/src/App.js) without the prop assignments, with Suspence. That has helped by isolating the update to the mesh. With this structure I'm not sure how to apply the startTransition.

I've tested it locally, by setting a state something like -

useLayoutEffect(() => {
    startTransition(() => {
      setProps(
        Object.assign(
          {},
          // material,
          {
            map: map,
            roughnessMap: roughnessMap,
            normalMap: normalMap,
            lightMap: lightMap,
            alphaMap: alphaMap,
          }
        )
      );
    });
  }, [lightMap, map, alphaMap, roughnessMap, normalMap]);

Following the code here - a9c9db1#diff-ed815ccd28c748af3545f07b7608538b58e1242937ede810b7a4ede9d5468d6fR77 but that didn't seem to help.

Are there any examples you can point me to that replace textures on a mesh, or even updating with startTransition? The only thing I can find was this https://github.com/mrjasonweaver/react-3d-app. I can't see a difference in the way this has been setup but it doesn't appear to flash, Possibly because the images are smaller.?

[portedison]

Using useTexture.preload() and useTexture.clear has helped, though there is still a jump if they have not yet loaded.

drei/src/core/useTexture.tsx

Line 37 in d5842b0

useTexture.preload = (url: string extends any[] ? string[] : string) => useLoader.preload(TextureLoader, url)

Is it possible that this needs a startTransition?

drei/src/core/useTexture.tsx

Line 16 in d5842b0

useLayoutEffect(() => {

[portedison]

On a side note, I was passing in an object to useTexture originally. I think I was getting confused, fiber seems to allow an object input for useLoader, It looks like you do also, but then in the onLoad it seems to switch to an array, should that maintain the object - with its keys?

[portedison]

We've managed to get this seamless switch with useDefferedValue() https://beta.reactjs.org/reference/react/useDeferredValue
Suspense with a blank mesh fallback was another option. Thanks again though @drcmda