Flickering effect when many glowing objects are moving

Questions
1

I have a simulated galaxy, which is composed of 50k glowing planes, all facing the camera and showing a circle texture. When the glow intensity is bright enough, there is a very prominent flickering effect while the galaxy is moving. The flickering disappears when the stars are not moving (You can click without moving the mouse to stop the rotation; click-drag-release to get it spinning again.).

I’m also not sure why it’s red in the playground. My local copy is colored correctly. This is unrelated to the flickering issue though, which is the important part.

I’m assuming there’s a decent chance that this issue is common in glowing objects rendering, but I don’t know what it’s called or what causes it. Is there anything I can do, or am I stuck with it?

It takes a few seconds for the positions to generate. Just wait a moment and it’ll pop in.

2

Hi Micah. Your galaxy swirl is really cool! Very nice.

Your mainTextureSamples are set too low for the glow layer (line 26). Try bumping it up. 16 produced a much smoother result, but I used 256 and still get good performance with very little flicker.

The flicker will probably not completely go away since the stars move in and out of the glow from the other stars, increasing and decreasing the color. The texture sample rate makes it smoother though.

3

Also, it’s coming out red because the texture path is not accessible. A red & black checkerboard pattern is being displayed when the texture file is not found/accessible. You can read about CORS here:

2 Likes
4

Hello !

I would say that it mainly comes from the fact that your meshes are non transparent, and since they are in high number, they occlude each other ON and OFF while rotating, inducing them to be toggles ON and OFF to be considered in the glow layer.

What you could try is to use the post processing blom instead, since it’s not “per instance” but global to the main render :

But still, you will have a bit of flicher for example if some stars go in and out of the screen (Since it’s “post processing”, a start outside of the screen won’t be considered, eventough in reallife it would have a large glow, and the instant ON/OFF while going out will trigger this flickering

2 Likes
5

Thanks! Unfortunately bloom doesn’t seem to appropriately propagate individual star colors (when the texture is fixed; a working link is https://mlasala.45.github.io/images/circle_blank.png).

6

Thanks for the help! I fiddled with the glow layer settings a bit more, and discovered that the mainTextureRatio and blurKernelSize have a dramatic effect on the blur rendering, and seem to mostly eliminate the flicker (as long as mainTextureSamples is high enough).

Though, this dramatically reduces performance, so it’s not without cost.

It looks pretty good at:

const gl = new BABYLON.GlowLayer("glow", scene, {
    mainTextureRatio: 1,
    blurKernelSize: 64,
    mainTextureSamples: 512,
});
7

Glad I could help. I was hoping to get the solution for this one, but hey, it’s all good.