What's the easiest / recommended way to create glow layers?

Questions
1

How can we do something like this in three.js? https://www.babylonjs-playground.com/#LRFB2D#1

Thanks

1 Like
2

Maybe with a bloom pass: https://threejs.org/examples/#webgl_postprocessing_unreal_bloom

3 Likes
3

Looks pretty good. Will try, thanks!

4

Hi @Mugen87,

Thanks for the suggestion, I’ve tried it, but I have a few problems, and questions. You can check my example here: http://vargapeter.info/webgl/threejs/unreal_bloom_test/

  • As you can see, the scene is rendered for only a very short amount of time, then the canvas goes blank. Do you have any idea why this happens?

  • Is there a way to apply this effect only for certain elements (materials), and not the whole scene? (Like in the babylon example)

  • So as far as I understand, when we use an effectcomposer, we must call the composer.render, instead of renderer.render. But in this case, we cannot set the animation loop using setAnimationLoop. So I assume there’s currently no way of having this effect within a VR project. Is that so?

5

I think the visual error occurs as soon as you set the skybox. I’m not sure why this happens. Is it possible for you to isolate this problem in a fiddle?

UnrealBloomPass applies the bloom effect to the whole render target (readBuffer). You can try to put your certain objects into a separate scene and create an additional RenderPass which acts as the input source for UnrealBloomPass. After the effect is applied, you have to blend the result on top of the entire scene. Unfortunately, there is no example that demonstrates this workflow.

Post-processing is currently not supported for WebVR/WebXR. This is WIP.

2 Likes
6

Just for reference to readers of this topic thread, a selective glow example was added since then (found it in another thread on this forum):
https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective

3 Likes