Anitaliasing issue or model sharpness

Questions
1

Hi @all, I made 3D model rendere using Babylon. If you check this link here click here.
Basically the problem is the model is not look clear in desktop or mobile. clear in the context of shrapness and some zittering issue looks on model either anti aliasing issue.

can you please guide us how to fix this issue to look model more good and no anti aliasing issue in edges.

image
image1029×507 97.4 KB

2

Create the engine with this parameter on.

const engine = new BABYLON.Engine(canvas, true);
3

this is already done

// create a BabylonJs engine
const engine = new BABYLON.Engine(canvas, true, {
  preserveDrawingBuffer: true,
  stencil: true,
  disableWebGL2Support: false,
});
4

Ok try enabling it in the options too.
Options from the wiki

Also check to avoid engine pixelating image from zoom level of the browser.

5

The first thing is to check (and correct if possible) the geometry and texturing of the problem areas.
The second is to use the Rendering Pipeline - Using the Default Rendering Pipeline | Babylon.js Documentation
(One can create the Default Pipeline from Inspector by right-click on Rendering Pipelines).

This is the screenshot with FXAA antialiasing and 4 MS antialiasing samples.

pipeline.samples = 4;
pipeline.fxaaEnabled = true;

image
image1914×972 120 KB

You may also experiment with other settings, I believe the Bloom effect will be good for motorcycles - Using the Default Rendering Pipeline | Babylon.js Documentation

3 Likes
6

I’m currently working in a local environment. I added the render pipeline, but it seems there is an antialiasing issue again.
There is now an antialiasing issue affecting all the edges.

And one point also if you added the renderpipeline the background layer is changed.

image
image1366×702 85.2 KB

7

You can try engine.setHardwareScalingLevel(0.4), but it will be a bit expensive.

20231108152913
20231108152913895×871 99.8 KB

https://doc.babylonjs.com/typedoc/classes/BABYLON.Engine#setHardwareScalingLevel

3 Likes
8

yes i used this and it look promising but i set the value 0.5 in value 1 or greater more zittering behaviour visible.

@musk can you please tell bit expensive??? in the case of loading the mesh???

9

The cost is that it increases the final resolution of each frame.The jitter is probably due to z-fighting.

2 Likes
10

i tried this it works but for responsivness case it shows the zitter behaviour do you have any idea how to tackle them i set the value for different different screen size

11

Have you tried the solution within the link ?

12

I tried with camera nearplane of far plane but it did’t work.

13

If the jitter you are talking about is here, I think it is a normal expectation of the model.
image
This mesh does not have smooth reflections, so it will look flickering. You can try changing the mesh to plane

1 Like