Three.js postprocessing not working with effectcomposer

user_2783087 0
Viewed 789

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());
three.js
1 Answers

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

enter image description here

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

user_19960660
Related