Post processing in release 106

Questions
1

Hello guys I recently tried to add postprocessing with the latest threejs release 106.

As soon as i add the effect to my composer , my screen goes black with no errors .

Can somebody help me with this. This is my effectcomposer code:

var composer = new THREE.EffectComposer(renderer);

var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
renderPass.renderToScreen = true;

var sepiaPass = new THREE.ShaderPass(THREE.SepiaShader);
composer.addPass(sepiaPass);
//sepiaPass.renderToScreen = true;


var render = function () {
 //renderer.render(scene, camera);
 composer.render();

  requestAnimationFrame( render );

};


render();
2

I’m unable to reproduce: https://jsfiddle.net/b2c6g3hx/

Notice that it’s not necessary anymore to set renderToScreen. The last pass in the pass chain is automatically rendered to screen.

2 Likes
3

This could be several different things. Mind sharing the rest of the code (including your index.html)?

5

Can you please share your entire project with all files (not just index.html) as a github repo?

7

You are using R94 but examples files from later releases. The documentation says:

When using code from the examples directory, it’s important that all files match the version of your three.js main file. For example, it’s not acceptable to use GLTFLoader and OrbitControls from R96 together with three.js R103.

If I switch to the latest three.js version R106, everything works fine.

image
image1350×1840 348 KB

BTW: Consider to develop with the three npm package and try to focus on a ES6 module based workflow to avoid such problems.

3 Likes