2

我正在处理的页面有 ajax-navigation，所以当用户导航离开我使用 WebGL 的部分时，我会停止我的 RequestAnimationFrame-loop，然后当用户重新访问该页面时，我会重新运行所有 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);错误不再发生。

4

2 回答 2

2

这是一个肮脏的技巧，但如果您在重新初始化上下文之前正确执行此操作，它应该有助于 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 而不会引发一堆错误。

于 2013-01-28T18:15:57.010 回答
1

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

于 2013-01-20T11:40:11.860 回答