My application has pages with and without the Canvas element. When the Canvas loads the first time, everything works fine. But if I go to a page without the canvas, and then return to a page with the Canvas, the gainmap no longer works.
// Gainmap requires a renderer
if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
loader.setRenderer(gl)
}
So I assume once the renderer loses context, the texture breaks.
Suggested solution:
I managed to solve the problem by adding the following snippet to the useEnvironment hook:
useLayoutEffect(() => {
// Only required for gainmap
if (extension !== "webp" && extension !== "jpg" && extension !== "jpeg") return;
function clearGainmapTexture(event) {
useLoader.clear(loader, multiFile ? [files] : files);
}
gl.domElement.addEventListener("webglcontextlost", clearGainmapTexture);
}, [files, gl.domElement]);
I clear the cached texture if the context is lost, so they will reload with the current renderer.
I don't know if this is a good solution in general and if there are better ways to deal with this problem.
I also cannot clear the event listener because it is removes it before the webglcontextlost event triggers.
I can open a PR if this solution is fine, feedback is welcome!
three
version: 0.160.0@react-three/fiber
version: 8.16.8@react-three/drei
version: 9.108.3Problem description:
I use a gainmap for my environment files to prevent large HDR files.
My application has pages with and without the Canvas element. When the Canvas loads the first time, everything works fine. But if I go to a page without the canvas, and then return to a page with the Canvas, the gainmap no longer works.
Relevant code:
I noticed this snippet in the source code:
So I assume once the renderer loses context, the texture breaks.
Suggested solution:
I managed to solve the problem by adding the following snippet to the
useEnvironment
hook:I clear the cached texture if the context is lost, so they will reload with the current renderer.
I don't know if this is a good solution in general and if there are better ways to deal with this problem. I also cannot clear the event listener because it is removes it before the
webglcontextlost
event triggers.I can open a PR if this solution is fine, feedback is welcome!