Three.js后处理运动模糊渲染黑屏

Question

我创建了一个codepen showing the issue。问题是：渲染的是黑屏而不是旋转的立方体。

我在三个.js 之上使用https://github.com/vanruesc/postprocessing。

核心后处理代码如下：

const composer = new POSTPROCESSING.EffectComposer(renderer)
const renderPass = new POSTPROCESSING.RenderPass(scene, camera)
renderPass.renderToScreen = false
composer.addPass(renderPass)

const renderTargetParameters = { format: THREE.RGBAFormat, stencilBuffer: true }
const renderTarget2 = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters)
const effectSaveTarget = new POSTPROCESSING.SavePass(renderTarget2)
effectSaveTarget.clear = false

// motion blur
const effectBlend = new POSTPROCESSING.ShaderPass(THREE.BlendShader, 'tDiffuse1')
effectBlend.material.uniforms[ 'tDiffuse2' ].value = effectSaveTarget.renderTarget
effectBlend.material.uniforms[ 'mixRatio' ].value = 0.0
effectBlend.material.needsUpdate = true
effectSaveTarget.renderToScreen = false
effectBlend.renderToScreen = true
console.log(effectBlend)

composer.addPass(effectBlend)
composer.addPass(effectSaveTarget)

然后在主渲染循环中我只输入composer.render(delta)

Answer 1

three.js 讨论论坛为我提供了一个使用 vanilla three.js 的解决方案：

https://discourse.threejs.org/t/trying-to-do-simple-motion-blur-but-only-get-a-black-screen/3076

https://jsfiddle.net/f2Lommf5/6731/

我认为我的错误是向 ShaderPass 提供了一个着色器对象，而应该使用 ShaderMaterial。

// post processing starts here

composer = new THREE.EffectComposer( renderer );

// render pass

var renderPass = new THREE.RenderPass( scene, camera )

// save pass

var renderTargetParameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    stencilBuffer: false
};

var savePass = new THREE.SavePass( new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters ) );

// blend pass

var blendPass = new THREE.ShaderPass( THREE.BlendShader, 'tDiffuse1' );
blendPass.uniforms[ 'tDiffuse2' ].value = savePass.renderTarget.texture;
blendPass.uniforms[ 'mixRatio' ].value = 0.65;

// output pass

var outputPass = new THREE.ShaderPass( THREE.CopyShader );
outputPass.renderToScreen = true;

// setup pass chain

composer.addPass( renderPass );
composer.addPass( blendPass );
composer.addPass( savePass );
composer.addPass( outputPass );