Glowing effect on emissive map and not on color map

Questions
,
1

Hi, pretty new to Three.js!

In Babylon.js, I was using a GlowLayer to prettify the glowing effect on my material. It is applied on the emissive map/emissive color and not on the color map/base color. So for example, if you want a drawing to glow on your color map, it can be done:
379640225_3579954622290249_5679484462992696895_n

However, I tried few things in Three.js to obtain this, but never met success :frowning:
I was wondering if there is a way to do so?

Also, I am adding/removing elements interactively in Vue, by watching the computed values when changed and calling methods from my Babylon/Three scenes to update the scene accordingly ; So if the glowing method can be compatible with that, that would be perfect :star_struck:

(ps, if it makes any difference: I’m using PBR materials, with MeshStandardMaterial.)

1 Like
2

I tried with emissive map (vanilla Three.js) and here is what I got:

3

How did you do this?
When I simply add an emissive map, I have no glowing effect:
Emissive intensity at 0,1:
Capture d’écran 2023-09-21 132522
Emissive intensity at 5,0:
Capture d’écran 2023-09-21 132559

mesh.material.emissiveMap = texture; 
mesh.material.emissiveIntensity = emissiveIntensity;
if (mesh.material.emissive.r === 0 && mesh.material.emissive.g === 0 && mesh.material.emissive.b === 0) {
  mesh.material.emissive = new THREE.Color(1, 1, 1);
}
texture.repeat.set(1000 / realWidth, 1000 / realHeight);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
mesh.material.needsUpdate = true;
4

The emissive map is blurred via Canvas 2D. I’ve added left cube without emissive map, and right cube with only emissive map. Here is the code:

https://codepen.io/boytchev/full/OJrzzQg

image

1 Like
5

Ooooh
But you’re cheating :laughing:
Also, at some point you can’t perfectly mimic a real glowing effect, such as:
Capture d’écran 2023-09-21 134605

6

Computer Graphics is all about cheating the human brain. If you want to mimic a “real” glowing effect, you can check how it is done in these examples:

https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html

7

UnrealBloomPass is applied on the color map/base color :confused:
Or maybe there is a way to only apply it to the emissive map, but I don’t know how

8

Some people just want to watch the world burn 
 in extreme glow. Here you go:

https://codepen.io/boytchev/full/XWoVZYK

image

PS. I’m not good with glows, so most likely you can write much better code if you look how the selective bloom is implemented.

1 Like
9

I’ve got this result :slight_smile:


Demo: https://codepen.io/prisoner849/full/WNLdMpP

10

OP is right.

@prisoner849

image
image506×524 37.7 KB

The glow in the red shouldn’t be there, since the emissive value of the box itself is 0. It may depend on your monitor if the effect is obvious or not, but the feature generation pass that extracts bright colors from the source image should only extract values above 1.0.

SimonDev has an awesome video about the technique: https://www.youtube.com/watch?v=ml-5OGZC7vE

This one from TheCherno is a very good one as well: https://www.youtube.com/watch?v=tI70-HIc5ro

11

Thanks for all the insights!
I’m a noob in Three.js, so it’s going to take me quite some time to analyze all of it :raised_hands:

12

In three.js this is managed by the bloom threshold, as shown in this demo. Bloom does not only affect emissive surfaces – a strong light directed at a metallic surface would also give a bloom, for example, the source of the bright light does not matter.

For the case shown above you’d probably want to raise the threshold to around 1, and ensure you’re using a HalfFloatType (default) or FloatType render target for post-processing so input values are not clamped to [0, 1] before bloom.

2 Likes
13

Oooohh my
 Now i feel a bit dumb
 I never thought about metallic reflections or specular highlights in this use-case. That makes a lot of sense! Thanks for the insight :smiley:

14

The bloom acts on the whole color buffer. That’s why in my demo I separated the renderings:

  • one (composite) rendering of only the emissive areas + bloom effect
  • separate rendering of the base object (without any bloom)
  • both are then combined
16

Does the line 102 blending: THREE.AdditiveBlending make the glowing of the first rendering go threw the second rendering?

17

The second rendering (the cube) is added to the first rendering (the glowing emission). Comment line 135 to see only the glowing effect.

18

When I comment line 102, the glowing effect disappears, that’s why I’m asking if the line 102 works this way or not

19

When you comment line 102 the second rendering overwrites the first rendering. So, the glowing within the cube is deleted, and only the glowing outside the cube is left visible.

Additive blending allows to merge both images.

20

Hi,
I don’t get the key point(s) that make only the emissiveMap glows.
When I try to adapt it to my code, everything glows.
Where should I look specifically in the code, please?

21

I don’t know your setup for EffectComposer and for emissive stuff in material :thinking:

The main things to look at:

  • lines 11-16 (settings for WebGLRenderTarget, that passed in super(renderer, target);)
  • line 20 (const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.2, 0.0, 1.01 );, where 1.01 is threshold greater than 1)
  • line 112 (emissiveIntensity: 10,)