Blender emission strength not displayed in three js

Hello guys, I am playing with the emission strength proprety on blender and I find a good result for the pistoes of the futurama spaceship but when I export the model in glb and render it in my scene the emission strength is not displayed. Any idea ? Thanks for helping :slight_smile:

I tried to played with emissive, emissiveMap, emissiveIntensity on the material but no good results…

1 Like

Emissive strengths >1 do not yet export from blender – that’s in progress at KHR materials by julienduroure · Pull Request #1646 · KhronosGroup/glTF-Blender-IO · GitHub. Until then you’d need to increase the values manually in three.js.

Also note that the ‘glow’ you see here must be done in post-processing in engines like three.js, see the official bloom examples.

2 Likes

made a small tutorial for this in case it’s still relevant

3 Likes

Thanks for the helpful tutorial! To make sure I’m understanding the suggested solution, is the only solution to explicitly list out all meshes and specify necessary props (geometry, material, material-toneMapped, etc.) for the relevant meshes (after enabling Bloom effect via EffectComposer)?

I noticed both meshes already have “emissive” and “emmissiveIntensity” properties in the materials map (json) after printing out the materials variable obtained from useGLTF. Am I correct in understanding that we need to manually specify such emissive properties because threejs does not handle the emissive properties out-of-the-box?

three materials have color, emissive, emissiveIntensity and emissiveMap. the latter is a texture. you can use all of them to make things glow. if there’s a map all you need to do is bump emissiveIntensity over 1 and the areas marked by that texture will glow. if you don’t have a map any material whose emissive color (or regular color) is above the threshold (set by the bloom effect) will glow.

<Bloom mipmapBlur luminanceThreshold={1} />

// ❌ will not glow, same as RGB [1,0,0]
<meshStandardMaterial color="red"/>

// ✅ will glow, same as RGB [2,0,0]
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />

// ❌ will not glow, same as RGB [1,0,0]
<meshBasicMaterial color="red" />

// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
<meshBasicMaterial color={[2,0,0]} />

// ✅ will glow, same as RGB [2,0,0]
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
1 Like

Thanks for the quick response! Makes sense. I think the main link I was missing was the usage of gltfjsx for autogenerating the jsx representation of the glb/gltf model. I thought you had to manually outline react component by looking at either the glb/gltf file or the mesh tree in the project file (I’m using Blender) :P.

You can also not use it but toneMapped is automatically set by the gltfloader so you would have to traverse and deactivate it

When using post-processing bloom as in this example, I think you might generally want to disable tone-mapping on the renderer completely. And then add the tone-mapping stage in a post-processing effect instead, rather than doing this per-material.