0

I've made a codepen showing the issue. Problem is: a black screen is rendered instead of a rotating cube.

I'm using https://github.com/vanruesc/postprocessing on top of three.js.

The core postprocessing code is the following:

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)

Then in the main render loop I just put composer.render(delta)

1 Answer 1

1

The three.js discourse forum provided me with a solution ubsing 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/

I think my mistake was to provide a shader object to the ShaderPass while a ShaderMaterial was expected.

// 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 );
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.