В three.js у меня красная плоскость на заднем плане и вращающийся белый куб на переднем плане. Я пытаюсь добавить TAARenderPass
к кубу, оставляя фоновую плоскость нетронутой. Однако добавление TAARenderPass
(а также BokehPass
, SAOPass
и других распространенных эффектов постобработки) очищает все, что за этим стоит, и красная плоскость исчезает.
Здесь я перебирал похожие вопросы и пробовал renderer.setClearColor( 0x000000, 0 )
, renderer.autoClear = false
и renderer.autoClearColor = false
. Вот как все настроено сейчас:
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 0 );
document.body.appendChild( renderer.domElement );
// EffectComposer
const params = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, params );
effectComposer = new THREE.EffectComposer( renderer , renderTarget );
effectComposer.setSize( window.innerWidth, window.innerHeight );
// Render Passes
const renderPassBg = new THREE.RenderPass( sceneBg , camera );
const renderPassFg = new THREE.RenderPass( sceneFg , camera );
renderPassFg.clear = false;
const taaRenderPass = new THREE.TAARenderPass( sceneFg, camera );
taaRenderPass.clear = false;
const copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;
effectComposer.addPass( renderPassBg );
effectComposer.addPass( renderPassFg );
// effectComposer.addPass( taaRenderPass );
effectComposer.addPass( copyPass );
Здесь есть полный CodePen .
Все работает как положено (за исключением эффектов пост-обработки), когда effectComposer.addPass( taaRenderPass )
закомментирован. Но когда комментирование удалено, рендерится только белый куб.
Как заставить красный самолет отображаться позади taaRenderPass
? Спасибо!