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的社區，你是一個偉大的探空板:)