I have a project where I need to showcase 3D objects with small LED lights that should emit a glow effect. I've attempted to use UnrealBloom, but the issue is that it affects the entire scene and makes everything look blurry, not just the parts with the actual emission value from the texture map.
Check out the sample image: https://i.sstatic.net/kV9Jv.jpg
This is not the desired outcome. I want only the little red LED light bulb to glow, not the entire object. I haven't figured out how to instruct the engine to apply the bloom effect only to the areas indicated by the emission map.
The code setup I'm using is similar to the UnrealBloom Example:
How can I correctly set up the emission texture so that only the emissive parts of the object glow, and prevent the overly shiny surfaces and excessively blurry visuals?
Check out my updated setup example on JSFiddle here: UPDATE: Editable example of my setup is now available on JSFiddle!
<body style="margin:0px; overflow:hidden;">
<div id="bloom-solution">
<div id="body">
<h2 id="info" style="
color: rgb(255,255,255);
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
">loading scene, this might take a few seconds..</h2>
<script type="x-shader/x-vertex" id="vertexshader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
varying vec2 vUv;
void main() {
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
}
</script>
<script type="module">
/* JavaScript module imports */
</script>
</div>
</div;
</body>