webgl - 为什么重新初始化 webgl-context 会破坏我对 THREE.EffectComposer 的使用？

Question

我正在处理的页面有 ajax 导航，所以当用户导航离开我使用 WebGL 的部分时，我停止我的 RequestAnimationFrame 循环，然后当用户重新访问页面时我重新运行所有 WebGL设置代码以重新创建场景。当我使用普通渲染器时，这很有效，但使用 EffectComposer 时，它会中断。

这是代码。

初始化:

composerScene = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(width, height, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true }));
renderModel = new THREE.RenderPass(scene, camera);
renderModel.renderToScreen = false;
renderModel.clear = true;
filmPass = new THREE.FilmPass(filmgrainOpacity, scanlineIntensity, scanlineCount, filmpassGrayscale);
filmPass.renderToScreen = true;

composerScene.addPass(renderModel);
composerScene.addPass(filmPass);

渲染:

composerScene.render(deltaTime);

当我离开然后回到页面时，错误控制台显示:

WebGL: INVALID_OPERATION: bindBuffer: object not from this context
GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices
WebGL: too many errors, no more errors will be reported to the console for this context. 

并且不会发生渲染。如果我注释掉 composerScene.addPass(filmPass);错误不再发生。

Answer 1

这是一个肮脏的黑客，但如果你在重新初始化上下文之前这样做，它应该有助于 EffectComposer 再次启动。

THREE.EffectComposer.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
THREE.EffectComposer.quad = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null );
THREE.EffectComposer.scene = new THREE.Scene();
THREE.EffectComposer.scene.add( THREE.EffectComposer.quad );

如果您查看 EffectComposer 代码的底部，您会看到它在加载时正在执行此操作，因此您所做的就是将它们设置回初始状态。我已经在我的代码中尝试过这个，我能够重新初始化我的 WebGL 上下文并再次使用 EffectComposer 而不会抛出一堆错误。