# Light emitting objects

**URL:** <https://discourse.threejs.org/t/light-emitting-objects/24533>\
**Category:** Questions\
**Tags:** lighting\
**Created:** [March 18, 2021, 3:52pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533 "2021-03-18T15:52:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 3:52pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/1 "2021-03-18T15:52:10Z")

</div>

I want to achieve similar stuff: [Shader - Glow (Three.js)](https://stemkoski.github.io/Three.js/Shader-Glow.html)  
But I want the object to glow and emit light, in Mr.Stemkoski’s example he adds another object around the original objects, I do not wish to take that path as I intend to place my objects randomly. I want THE object to emit light, literally - not something around it.

Any ideas?  
Thanks in advance, anything could be helpful.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 18, 2021, 4:01pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/2 "2021-03-18T16:01:32Z")

</div>

Could be faked with [Material.emissive](https://threejs.org/docs/?q=meshst#api/en/materials/MeshStandardMaterial.emissive) and a [PointLight](https://threejs.org/docs/?q=point#api/en/lights/PointLight) (also [Bloom](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom) postprocessing if you want the bloom to be visible as if the environment was a bit humid.)

If you’d like actual light emission from a 3D object - you’d probably need some kind of path/ray tracing 🤔 ([thread](https://discourse.threejs.org/t/is-there-a-photo-realistic-rendering-engine-for-the-broswer/8372/7).)

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 4:04pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/3 "2021-03-18T16:04:06Z")

</div>

Thanks for the reply.

Unfortunately, bloom is blacklisted for me, since I do not favor the effect at all, same goes for Material.emissive, as it doesn’t actually glow around and PointLight can not be an option, firstly, it doesn’t actually emit light even if you attach an object directly to it, secondly, I need hundreds of objects to have and that many pointlights aren’t really good for performance.

Is it possible to achieve it through the fragment shader?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 18, 2021, 4:11pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/4 "2021-03-18T16:11:49Z")

</div>

Well, you do kinda cross out most of your options right away 😅

> [@Lonely\_Wanderer](#):
>
> Is it possible to achieve it through the fragment shader?

Technically, but only in a way that you already mentioned you do not want. If (hundreds of) point lights glued to glowing objects are ok - you can follow the steps of @Usnul and create either a deferred or [magical](https://discourse.threejs.org/t/dr-strangelight-or-how-i-learned-to-stop-worrying-and-love-the-cluster/23104) renderer, that will allow you to render 1000s of lights with a good performance. Then mix with with `emissive` to create emission effect.

Keep in mind - unless you brute-force raytracing and demand every app user to run tripple RTX 3080 SLI, most of effects (especially in WebGL) are created by making close-enough fakes (ex. look at the normal maps - they are basically faking surface light scattering.)

(As for bloom - yep, it’s quite a cheap way of faking light emission and not very realistic in most cases 😅 )

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 4:19pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/5 "2021-03-18T16:19:34Z")

</div>

You know what I think? A combination of OutLinePass and Material.emissive, but without hovering over or any interaction, would it work?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 18, 2021, 4:21pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/6 "2021-03-18T16:21:41Z")

</div>

It should work (and give a cartoon-y kind of glow.) 😁

The objects won’t affect the world around them though (emissive doesn’t really make them glow, it’s just making the surface of the object lighter) - that’s the only disadvantage I can imagine.

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 4:23pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/7 "2021-03-18T16:23:22Z")

</div>

Yeah, that’s not a problem, in fact, I do not need them to cast shadows at all.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 18, 2021, 5:08pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/8 "2021-03-18T17:08:52Z")

</div>

This is very interesting. These two thoughts in a row:

> [@Lonely\_Wanderer](#):
>
> bloom is blacklisted for me, since I do not favor the effect at all, same goes for Material.emissive

and then

> [@Lonely\_Wanderer](#):
>
> A combination of OutLinePass and Material.emissive

Why not to use bloom/selective bloom then?

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 5:16pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/9 "2021-03-18T17:16:17Z")

</div>

OutlinePass/Material.emissive is already out of my list now, I just checked it more closely, doesn’t give a desired effect.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 18, 2021, 5:44pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/10 "2021-03-18T17:44:12Z")

</div>

What’s the desired effect 👀

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 5:59pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/11 "2021-03-18T17:59:17Z")

</div>

Objects emitting light (with glow).

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 18, 2021, 6:07pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/12 "2021-03-18T18:07:24Z")

</div>

To _emit_ light, you don’t have many other choices - either a PointLight or raytracing (these options are able to create actual light sources within the scene, not only casting shadows.) `Material.emissive`, shaders, and postprocessing can’t really do that - since they work either on single objects, or entire rendered scenes, at least in the default WebGLRenderer.)

If there’s some specific style - a video / screenshot of what you have in mind - it might be a bit easier to help.

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 6:14pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/13 "2021-03-18T18:14:13Z")

</div>

Something like this:

 ![test](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/3/a3ea556e2afcf25caabc9355ec3cb3b0eee2d67a.jpeg)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 18, 2021, 6:27pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/14 "2021-03-18T18:27:37Z")

</div>

If it’s not dynamic, then just create a texture with brighter/lighter parts on the spots where these “lights” must be placed.  
Or welcome to the world of shaders.

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 6:35pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/15 "2021-03-18T18:35:07Z")

</div>

Do you happen to have any reference for it? (other than stemkoski’s).

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 18, 2021, 6:46pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/16 "2021-03-18T18:46:48Z")

</div>

Stemkoski’s example is nice, but I would use (selective) bloom for glowing objects.

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 6:48pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/17 "2021-03-18T18:48:37Z")

</div>

No, it’s not nice, it’s okay, but far from nice, though I respect his work a lot and am thankful.  
When you have (say spheres) objects and you have an object inside that needs to receive shadows and you also have a glowing material outside and you orbit around, the objects that are placed above have the glow displaced. And selective bloom is a big no no for me. His examples are great for a single object with a fixed position.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 18, 2021, 6:50pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/18 "2021-03-18T18:50:44Z")

</div>

> [@Lonely\_Wanderer](#):
>
> selective bloom is a big no no

What reason of that “no no”?

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [March 18, 2021, 6:51pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/19 "2021-03-18T18:51:15Z")

</div>

It’s kinda ugly, as simple as that.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 18, 2021, 6:52pm UTC](https://discourse.threejs.org/t/light-emitting-objects/24533/20 "2021-03-18T18:52:36Z")

</div>

And you already have tried it?

[Next page](https://discourse.threejs.org/t/light-emitting-objects/24533.md?page=2)