Hi, I’m new to Three js, I’m building an Earth modal in Three js, and my task is that initially, earth should have a dull effect on it, but when this website goes live whenever a user comes online or visits our website, a see-through dot should appear which will be representing a user and with that dot we can see the original state of the globe,
Now I’ve already built a globe that has the dull effect and dots exactly to my requirement with the help of lighting, initially, I pointed some directional light from all angles to have the dull effect, and after that, I built small spotlights to have the dot effect, but now I’m stuck at rendering, whenever I point more than 144 spotlights, it doesn’t render anything and gives an error in the console something like “Invalid Shader Status” and my task is to render 1 Million dots on it. Can anyone tell me how I achieve this do I need to change my approach if yes then how?I’ve attached my GitHub live globe link=> Globe
This answer kinda applies here as well a bit.
The answer to “How to have 144 / 1 million lights on the scene” - is simply, “you can’t”. Not with the default WebGLRenderer.
You can fake lit-up points by either using the .emissive property (tbh, there should be little difference between using point lights and emissive when working with small point-like elements, since shading won’t be visible either way.), or just go all-in and use MeshBasicMaterial - it ignores lights entirely and you can set the color manually using .color property.
@DolphinIQ HI, Can you please review this, and help me out with deferred renderer
Why not using small circles (instanced) instead of lights?
Also, rethink the idea of adding 1 million dots … you will have more dots than you can fit on the globe. Here is how it looks like with 100, 1000, 10000, 100000 and 1000000 dots:
https://codepen.io/boytchev/full/rNPdzQa
To make the dot see-through, you might consider adding transparency or using a different blending mode.
2 Likes
because that is not my requirement, i want to add transparent dots so that I can see the original state of the globe
If you do not want to use the transparent, opacity and blend properties, then you may use a texture for the dots and draw as many dots as you want:
Anyway, good luck with your project.
1 Like
yes. I think that would work for me, can you please tell me or guide me through a little bit of the procedure, can I have 1 million dots with the same color using this approach? will they overlap with each other?
Hi, this is not really a proper use case for deferred rendering. Solution proposed by Pavel is a much better idea, where you can spawn instanced circles/spheres with InstancedMesh and adjust their transparency & blending
now they are overlapping, is there any way i can stop the overlapping so that the globe should be seen equally
@DolphinIQ @PavelBoytchev anyone know how can i avoid overlapping? and how can i also reduce spacing between my dots?
