Points material map blending overlapped sprites

#1

Hello :slight_smile:
I am doing some light-imitation particles with Points and geometry along vertical vec3( 0 , 1 , 0 ) (blue) three.curves. They are size 100, square pngs with transparency. However, when they overlap they leave off ugly parts (I marked them with red).
lights

Is there some way to give them smooth blending? Maybe in a way where the lower one overlaps the higher? I tried different blending constants options with no success.
Here is my material code:

 let material = new THREE.PointsMaterial({
		size: 50,
		map: Textures.lightParticle3,
		transparent: true,
		alphaTest: 0.01,
		opacity: 0.1,
		blending: THREE.AdditiveBlending,
	});
#2

Any chances to provide a live example with your code? That’s the best way to get help in such cases.

In any event, you might want to play around with depthTest/depthWrite and see if this improves your visual output.

#3

Sorry, here is a jsfiddle. There are no textures but the problem is still visible on default points
https://jsfiddle.net/f2Lommf5/15585/

#4

Thanks for the fiddle. Now I actually understand your issue :sweat_smile:

Well, the overlapping bright parts is the result of blending. It is the expected result. If you want to avoid this visual outcome, try to avoid points and use a bigger geometric primitive like a plane in order to create a fake light effect (so called light shafts). Another approach might be the usage of post-processing.

#5

I tried doing it with a plane, but the results didn’t seem much better. I’d love to try post-processing methods, however when it comes to shader programming I only know the basics. Simple sky shader is the furthest I’ve gotten. Could you please recommend me some tutorials/materials to checkout, where I could learn to create the effect I need or maybe just become better at post-processing overall? Most of the stuff I see is either for absolute beginners, or methods for pros. I tried learning from the godrays shaders, but they are still too hard for me to understand.

#6

I’m not sure about this. Developing post-processing effects means you have to be good in shader programming in general. The Book of Shaders might be worth reading although it is intended for beginners. I actually don’t know intermediate resources since it’s hard to define an intermediate level in shader programming.

A while ago, I’ve studied some fake lighting techniques used in games. In this context, I have rewritten an existing demo based on the latest three.js version. I actually want to write a little post about it and explain the different approaches but I think it’s okay to already share it at this place. You might want to check out how light shafts are implemented. Maybe you can use the code in a similar fashion for your own project.

Demo: https://jsfiddle.net/4a9zhcux/638/show

#7

Awesome demo, looks incredible :slight_smile:
Thank you for all your help :smiling_face_with_three_hearts:

1 Like
#8

May I asked: How many FPS do you have with that demo? In some sense it’s a test application for fragment-shader bound apps.

#9

The great thing about it is that you achieve those effects without complex PBR materials. It’s a combination of more or less simple shaders, fog and a trivial particle system.

You could speed up the performance by using level of detail (LOD). Right now, the trees far away are as complex as the trees in the focus area which is actually not necessary.

#10

I have 15 fps, although my current laptop is quite awful