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而不会抛出一堆错误。

Answer 2

我相信这是Three.js中的一个错误，我打开了issue。

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

2 个答案: