Three.js - 使用带有EffectComposer的正交相机，相机边界现在不正确

Question

此问题基于上一个问题Three.js - using viewports and EffectComposer together。

我已成功创建了一个带有“迷你地图”的场景 - 第二个摄像头（正交）位于场景上方并渲染到视口中。使用标准渲染器显示小地图的实时工作示例位于http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html;屏幕正确显示如下：

接下来，我想为小地图添加一些后期处理，并为其创建THREE.EffectComposer，如下所示：

mapComposer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget(512,512) );
mapComposer.setSize( 512, 512 );
var renderModel2 = new THREE.RenderPass( scene, mapCamera );
mapComposer.addPass( renderModel2 );
var effectFXAA2 = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA2.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
effectFXAA2.renderToScreen = true;  
mapComposer.addPass( effectFXAA2 );

（完整的实时代码位于：http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects-2.html。）但是，正交相机的设置不再按预期工作;屏幕显示如下：

似乎场景正在渲染到整个屏幕空间，然后位于视口边界内的场景部分将被剪裁并在该区域中绘制。我怀疑是这种情况因为：

• 更改视口左下角（锚点）的坐标会更改显示的图像，而不是仅仅翻译坐标更改前显示的图像
• 增加视口的宽度和/或高度不会导致视口中显示的图像按预期延伸;相反，它只是显示更多的图像。

我的问题是：如何在视口中使用EffectComposer，如第二个示例中所示，但保留与第一个示例中相同的小地图图像边界？

Answer 1

问题是双重的：FXAA着色器的分辨率应该根据图像显示区域的尺寸来设置，我还需要包含一个THREE.CopyShader来正确翻译图像。工作代码如下：

mapComposer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget(512,512) );
mapComposer.setSize( 512,512 );
var renderModel2 = new THREE.RenderPass( scene, mapCamera );
mapComposer.addPass( renderModel2 );
var effectFXAA2 = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA2.uniforms[ 'resolution' ].value.set( 1 / 512, 1 / 512 );
mapComposer.addPass( effectFXAA2 );
var effectCopy2 = new THREE.ShaderPass( THREE.CopyShader );
effectCopy2.renderToScreen = true;
mapComposer.addPass( effectCopy2 );

更正的实时代码位于：http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects-2.html

感谢收听，StackOverflow社区，你是一个伟大的发声板：）