Update: re-wrote the question to make it more general. (Original here for reference)
I am rendering a scene in a Three.js WebGLRenderer. Then I need to replace the renderer with a new WebGLRenderer (replacing the canvas with a new canvas) and render the same scene again in the new renderer.
The setup looks roughly like this:
cancelAnimationFrame(this.requestID_);
// all other Three.js objects stay same (and I let Three.js create a new canvas)
this.createNewRenderer();
this.animate();
However, the new renderer will just render an empty background, and not the scenes meshes. If I replace the scene meshes with newly calculated meshes, rendering is fine again.
Therefore I assume it has something to do with the meshes.
So, to avoid recalculating the mesh, I've tried setting all geometry.xxxNeedUpdate and material.needUpdate flags as per this three.js doc before (and after) creating the new renderer, but this hasn't worked either.
What can I do to "force refresh" the meshes to display again in a new WebGLRenderer?