Blinking while grid moving

Questions
1

I try to create very simple example with grid.

var groundMaterial = new BABYLON.GridMaterial(“groundMaterial”, scene);
ground.material = groundMaterial;

scene.registerBeforeRender(function() {
ground.position.x += 0.02;
});

So when ground move i see some blinking. I don’t understund why? It’s interesting that blinking is present only when i change ground.position.x and ground moves directly towards the viewer. If i change angle blinking less and it’s order other than grid.

Also if i reduce transparency blinking less

What am I doing wrong?

2

Are you able to setup a repro in the Playground?

It will be easier for the community to help.

1 Like
3

Of course , please https://playground.babylonjs.com/#J66LMX#2

Also I didn’t mean jumping on the edge. It’s subtle ripples of whole surface

4

It seems to be a bit better with Pipeline - https://playground.babylonjs.com/#J66LMX#3
But I think it is not possible to completely avoid moire pattern here.

5

You can enable FXAA to improve things a bit:

1 Like
6

I don’t think that your version is better. But if set ground.rotation.y = 30 for example blinking more less. It’s interesting how it’s connected ?

7

Even more terrible)

8

Here are some insights about moire patterns - https://www.pop3dart.com/post/the-3d-moire-law

It greatly depends on the view angle.

9

That’s just what happens when you have a perfectly horizontal line moving slowly - you see it jump to the next pixel.

You could try thicker lines so the AA works better.

10

I’m not sure that blinking it’s moire. Another interesting example

No blinking. Almost perfect) But grid on the cylinder.

And if you look closely at my first example you can see that blinking it’s ripples of light. Ripples of light move to the left or to the right depend of angle of ground

11

It’s the same at the same angle. You just think it’s not because it’s moving faster and more spread out.

1 Like
12

Not the same. If you set camera beta to 0,400 in my first example you will see that blinking still present. But in this case grid lines moves from top to bottom.

13

Make the contrast the same. It’s the same.
You can style it different, you can’t change the mechanics of a pixel.

1 Like
14

could you share a video of the issue you are seeing ? I am not seeing the blink you mention.

15

It’s my first example

First example with change beta

Second example

16

Also i increase contrast in capture program

In this video ripples of light move to the left

17

those definitely looks like moire pattern as @labris motioned and unfortunately no real simple workaround I could think of.

18

There is a very strange line of code in the grid material shader.

I think the clamping is causing the Moire pattern to be visible. Can anyone explain what this code is doing? Removing this line and replacing with a straight multiply or setting the grid material opacity to 1 seems to be a lot better.

Opacity set to 1: https://playground.babylonjs.com/#J66LMX#8

19

Yes opacity to 1 way better. In this case tiniest moire are present only in this area

moire
moire1678×576 199 KB

20

One more example that shows that only the last row is blinking