Hi Everyone,
I hope you are doing well! I was curious if there was a clever way someone has thought of to have a glow effect to LineBasicMaterials without using bloom. In my project, numerous lines simultaneously will be doing animations, thus I am worried about the performance issues if I were to use bloom.
Thank you so much
bloom is a fixed cost since it’s a screenspace effect. if you render 1 line with bloom, or a 1000, the bloom should take the same amount of time.
if you reaaally don’t want to use bloom, you might be able to use quads to draw lines and apply some kind of texture to them, and render them with additive blending.. but that’s a lotta work.
Hi @manthrax,
Thank you for the response! If I were to apply texture to multiple lines with additive blending, do you think the performance would be better than bloom? I am mainly just concerned about making this work on mobile or low end laptops.
well… its complicated. an even more performant approach would be to use a custom shader instead of a texture… but the logic isn’t trivial.
If you use a purely texture based approach, you would have to render each line as 3 quads.. one for the interior, and 2 more for the end caps (miter)…
With a shader, you could probably get away with 1 quad per line with some custom logic to render the end caps.
But creating such a shader is not trivial.
There are some threejs classes that get you part of the way like:
But they don’t “glow” per se.. so they would have to be modified.
IMO using lines + unrealbloom is easier and faster to get working. The performance of it can be managed by carefully controlling the size of the bloom targets, and your framebuffer… not rendering at ultra high res.
It’s kindof a big topic.
But i am very partial to bloom. It would be hard to get something as nice as three.js examples
without using bloom.
In summary.. yes you can probably make lines that are more performant than hardware lines + a bloom pass, but the implementation complexity is very high. Also it will potentially be less dynamic than just using lines+bloom, and require more work on the cpu to generate the geometry.
(if you’re aiming for something like geometry dash.. they use bloom afaik)
Thank you for the thoughtful response, I appreciate it! I was actually thinking about creating a custom shader worst case scenario over the next week, but really wanted to hold off on it if I could and gain some inspiration here. I will most likely play around with bloom more and worst comes to worst create a custom shader. Once again, thank you!
I don’t know if this helps, but I was also considering creating lines with bloom a few months ago.
Here is a WebGPU example, I created using r167.1. The line on the left uses bloom, the line on the right does not.
I was trying to create lines that stood out against both light and dark backgrounds. I ended up creating 2 adjacent lines, one light and one dark, without bloom.
@PavelBoytchev has demonstrated a technique to do this with standard meshes previously How to add a selective glow effect that works with dark colors too? - #2 by PavelBoytchev there’s the possibility of replicating something similar with lines, however this would have it’s own cost of having to render the same line n times for each “bloom” iteration…
Careless about performance issues, just for the fun of it, I’m just passing by and dropping this in:
https://codepen.io/boytchev/full/YPXJgLd
And I promise to never code drunk again.
Thank you for this!
Thank you for the link!
Thank you for the example! This is actually a pretty clever way, might experiment with this!