I've been working on rendering multiple scenes on the same canvas and renderer. Everything was going smoothly until I decided to incorporate the FXAA shader into one of my Composers, and suddenly nothing would render.
This particular composer is responsible for rendering the second scene and is set to render at 1080 points from the origin.
Here is an overview of the relevant code section surrounding the Composer / Renderer:
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
this.renderer.autoClear = false;
this.renderer.setSize(RENDER_WIDTH * 3, RENDER_HEIGHT);
let renderPass = new THREE.RenderPass(this.scene, this.camera);
let effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / RENDER_WIDTH, 1 / RENDER_HEIGHT);
effectFXAA.renderToScreen = true;
let effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
let rtParameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: true
};
this.composer = new THREE.EffectComposer(this.renderer,
new THREE.WebGLRenderTarget(RENDER_WIDTH, RENDER_HEIGHT, rtParameters));
this.composer.addPass(renderPass);
this.composer.addPass(effectFXAA);
this.composer.addPass(effectCopy);
I have several other scenes and composers that are functioning perfectly with the THREE.HueSaturationShader but do not include the FXAA shader.
During runtime, I adjust the renderer's viewport position and render the composer:
this.renderer.setViewport(RENDER_WIDTH, 0, RENDER_WIDTH, RENDER_HEIGHT);
this.composer.render();
this.renderer.setViewport(RENDER_WIDTH * 2, 0, RENDER_WIDTH, RENDER_HEIGHT);
this.composer2.update();
...
EDIT
- Rendering works fine when I remove the FXAA Shader.
- Rendering works fine when I don't offset it (render at 0, 0), and remove the copy shader but keep the FXAA shader.
- Only the last pixel is rendered (stretched out) if I keep it offset, keep the FXAA shader, but remove the CopyShader.