[BUG] cannot completely destroy the viewer when switch the pages

[wunderbarr]

Describe the bug
I am using NextJS as frontend and want to render pdb files. The file could be rendered correctly, but when I switch to other page, the following error would occur:

 [.WebGL-0xa280b1f5c00] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.)

I am not sure the correct way to dispose/destroy or clean up the viewer, not find any tutorial about that.
To Reproduce
I use the following code to visualize and clean the viewer, but not successful:

const ThreeDmolViewer = ({ pdbData, id }) => {
	const viewerRef = useRef(null);

	useEffect(() => {
		if (viewerRef.current && pdbData) {
			const viewer = window.$3Dmol.createViewer(viewerRef.current, {
				defaultcolors: window.$3Dmol.rasmolElementColors,
			});

			viewer.addModel(pdbData, "pdb");
			viewer.setStyle({}, { cartoon: { color: "spectrum" } });

			viewer.zoomTo();
			viewer.render();

			viewer.spin(true);

			return () => {
				viewer.spin(false);
				viewer.removeAllModels();
				viewer.clear();
				viewer.stopAnimate();
			};
		}
	}, [pdbData]);

	return (
		<div
			id={`3DmolViewer_${id}`}
			style={{ position: "relative", width: "400px", height: "400px" }}
			ref={viewerRef}
		></div>
	);
};

Expected behavior
No warning when switch pages. Namely the viewer could be destroyed.

Desktop (please complete the following information):

• Ubuntu 20.04
• Browser chrome

[dkoes]

The only issue is a warning in the console, correct?

I assume there is a race condition between the canvas being destroyed by the browser and the animation stopping code. Do you have evidence that your clean up code is being run before the DOM tear down and you are still getting this error?

You can check the value of viewer.getRenderer().isLost() when this code is run. If it is true, it is running too late.

[wunderbarr]

The only issue is a warning in the console, correct?

I assume there is a race condition between the canvas being destroyed by the browser and the animation stopping code. Do you have evidence that your clean up code is being run before the DOM tear down and you are still getting this error?

You can check the value of viewer.getRenderer().isLost() when this code is run. If it is true, it is running too late.

Thank you for your feedback. Yes. It's only a warning in the console.
I try to check the value within the useEffect hook, its value is always false. So I'm not sure how to address this warning.

[dkoes]

We'd need to figure out what operation is trying to use the destroyed canvas. I had assumed it was the animation, but if it is disabled then it must be something else (not sure what).

[wunderbarr]

We'd need to figure out what operation is trying to use the destroyed canvas. I had assumed it was the animation, but if it is disabled then it must be something else (not sure what).

I don't know what operations or functions could be used. So I try methods like removeAllModels(), clear() and stopAnimate();
I render pdb file, namely a 3D structure. Not sure whether it belongs to an animation. Don't know how to completely clean up.

[dkoes]

You need to break when the warning is generated and look at the call stack to see what is triggering the warning.

[OreFoX18]

I'm encountering a similar issue. While implementing the viewer in my React application, I'm facing a warning in the console during the component's unmounting phase. Despite spending hours debugging and attempting various solutions, I haven't been able to resolve the problem.

[dkoes]

If you can provide a reproducible, self-contained test case I can look at it.