0

这个问题建立在前一个问题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，但要保持与第一个示例相同的小地图图像边界？

4

1 回答 1

0

问题是双重的：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 社区，您是一个很棒的共鸣板 :)

于 2013-11-02T19:56:45.267 回答