Rendering the geometry of parallel lines

Hello friends! The geometry of my model has parallel bulges and concavities. When the camera is removed, the rendering of the model becomes sloppy and rough. Circles and dotted lines appear. Please tell me, is there any way to smooth out this effect?
arguv.com/ar_ba/test/panel/
image

This is called the Moiré effect, it is caused by the resolution of your screen not being enough to display the very small details of your models from afar.

Anti-aliasing could improve that a bit, but I think having different level of details will definitely be a better solution :+1:

1 Like

Thanks for the advice, CrashMaster! Unfortunately, Anti-aliasing does not help much in this case. I completely agree about the other angle. As for the screen resolution, it seems to me that this is a little cunning. If there is no tool to process this in BJS right now, I am sure that over time the bright minds of the developers will come up with something.

The core issue is that the frequency of the details of your mesh is higher than your screen resolution. Following this we can either increase the screen resolution or do some work on the object being rendered to lower the frequency of the details.

I think that Nanite from Unreal Engine can solve this issue as it is basically an automatic continuous LoD system. But no other engine that I know of replicated the goodness of Nanite so that’s why the LoD solution is the most realistic in your use case. (on the web we don’t have Mesh Shaders so no Nanite for now it seems Meshlet for babylonjs? - #8 by roland)

The LoD is only one solution to this issue, but it is the simplest. You could also use a normal map and decrease the normal perturbation with distance so that only low frequency details are retained from afar.

More advanced solutions could also use some smoothing function in normal space before the lighting pass, again to reduce high frequency details.

The laws of physics are not always on our side :slight_smile:

Here, for a comparison of BJS and modelviewer. I don’t believe that BJS can render worse than model viewer)) Maybe some light settings would be useful here, or is there some other secret?

Could you share a repro in the playground? That would help understanding what is happening

I tried loading your model in three.js editor and when zooming out there is also the moiré effect, so it might not be a BabylonJS only issue :thinking:

What model viewer did you use to get rid of the effect?

Unfortunately, I do not know how to add my models to the sandbox. You can download it from this link https://catalog.arguv.com/test_dev/panel/10.glb . I used this resource to view it Model Editor

Of course, this may be subjective, but it seems to me that BJS does not show better. Nevertheless, can you give recommendations on lighting or some other parameters that may affect this? What is better to use in such cases?

No problem, if you need to load external assets in a future PG, we have some doc about that:

https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets

Using what you gave me, I still get some Moiré effect (although not as much as with Babylon I give you that :wink: )

Model viewer result:

BJS Sandbox result:

I don’t know what is causing this difference in visuals :thinking:

One possibility is that the model viewer is rendering at a higher resolution (super sampling) but I doubt it. Btw you may be able to do super sampling with BabylonJS to improve the result, that’s another simple solution, but you will pay some performance of course

1 Like

Okay, thanks, I’m sorry for taking up so much of your time.

No worries, you are not bothering me :wink: And you might have found an issue with the engine (someone of the team will be able to tell I think), which means possible improvements in the future!

I hope that it will be so. If it’s not difficult, could you give me a link to “super sampling” in the documentation?
I do not find such an article ((

You are right, we don’t have a page about it, that’s why I was unsure :joy:

Anyway there you go:

(I took it from here: What is the exact procedure to do the SuperSampling and DownSampling with DefaultRenderingPipeline - #3 by Deltakosh)

Let me know if it improves the rendering quality!

1 Like

Yes, it improves the image quality by an order of magnitude. But it also worsens the response of the page by the same amount. I’m going to think about what’s more important))

1 Like