Three.js postprocessing not working with effectcomposer

Question

Outlines are not being created. I attempted a BloomFilter as well and it looks the same as if I didn't add any filters.

What could be the issue here?

// in global scope
const clock = new THREE.Clock();

// in initialization
this.composer = new EffectComposer(this.renderer);
this.composer.addPass(new RenderPass(this.scene, this.camera.camera_object));
this.composer.addPass(new EffectPass(this.camera.camera_object, new OutlineEffect(this.renderer, this.camera.camera_object, {
  defaultThickness: 0.01,
  defaultColor: [0, 0, 0],
  defaultAlpha: 0.8,
  defaultKeepAlive: true
})));

// in render loop

this.composer.render(clock.getDelta());

adelriosantiago · Accepted Answer · 2021-01-15 23:16:22Z

3

It is hard to see the error without a full sample of the code. PostProcessing effects require the following:

Load the postprocessing lib. In the example below I provided the full URL to for effects.
Create the effect pass. A new THREE.OutlinePass or new THREE.UnrealBloomPass or similar.
Add effect with composer.addPass([your_pass]).

Here is a minimal CodePen sample using both a OutlinePass and UnrealBloomPass:

https://codepen.io/adelriosantiago/pen/qBaLmZK?editors=1010

Note that OutlinePass requires selectedObjects to be an array with the objects that you want to affect.

edited Jan 15, 2021 at 23:16

answered Jan 15, 2021 at 22:05

adelriosantiago

8,18410 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js postprocessing not working with effectcomposer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related