Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AVIF textures loaded with useGLTF yields out-of-memory crash #1911

Open
alouis-jpg opened this issue Apr 9, 2024 · 1 comment
Open

AVIF textures loaded with useGLTF yields out-of-memory crash #1911

alouis-jpg opened this issue Apr 9, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@alouis-jpg
Copy link

Problem description:

I am currently loading several (7) gltf each having a 16k avif compressed texture using useGLTF in my r3f application. Both on remount of my app in dev mode and on reload of the page in production mode, the browser consistently crashes with the Out of memory error code ('Aw snap!' crash).

I'm using <primitive> as a mesh component and take care of the dispose of the primitive's object myself since primitive are not disposed automatically (unlike geometry, materials etc). I also clear the loader's cached data with useGLTF.clear(...). Interestingly, when deep-diving into chrome performance profiling, it seems that geometry and textures are not handled the same way: reading at the size taken in the cache by geometry between mountings, it doesn't change, while textures seem nowhere to be found, maybe cached somewhere else?

My current guess would be that the textures loaded to the gpu don't seem to be removed on unmounts, which could result in the browser crashing over a lack of memory.

Replacing the gltf avif compressed textures with jpeg textures prevent this crash from happening which leads me to believe maybe avif textures cleaning is not handled properly.

Relevant code:

function Scene(props) {
    return (
      <group>
           {props.models.map((model, index) => (
              <Model
                modelPath={model.path}
                key={index}
              />
            ))}
      </group>
}

function Model(props) {
  const { scene } = useGLTF(props.modelPath, false, false, (loader) => {
    loader.setDRACOLoader(draco);
  });

  useEffect(() => {
    return () => dispose(scene);
  }, [scene]);

  useEffect(() => {
    return () => useGLTF.clear(props.modelPath);
  }, [props.modelPath]);

  return <primitive object={scene} />
}

Suggested solution:

Testing with ktx2 compressed textures in the same application to see if it results in the same crash.

@alouis-jpg alouis-jpg added the bug Something isn't working label Apr 9, 2024
@alouis-jpg
Copy link
Author

Testing with the same models and ktx2 compressed textures does not result in out of memory crash upon reload therefore wondering what goes wrong with avif textures disposal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant