How to get rid of aliasing effect of clipping

Questions
, ,
1

How to get rid of severe aliasing effect of clipping with solid caps.
https://www.babylonjs-playground.com/#95MJI8#368

Found this example from Babylon js forum itself, but it has a lot of aliasing effect. Need help of how to reduce them.

2

A call to chatGPT may provide useful information. Unfortunately, I know from experience that not everything that is spit out is also up to date or works. Still, there are some useful glimmers of hope here and there that you can take a closer look at.

GPT:
To get rid of severe aliasing effects when using solid caps with clipping in Babylon.js, you can use anti-aliasing techniques.

One way to achieve this is by enabling multisampling, which is a technique used to reduce aliasing by sampling multiple pixels within each pixel. In Babylon.js, you can enable multisampling by setting the samples property of the engine to a value greater than 1. For example, the following code sets the number of samples to 4:

phpCopy code

engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, premultipliedAlpha: false, alpha: true, samples: 4 });

Another way to reduce aliasing is by increasing the resolution of your scene. This can be achieved by setting the renderingPipeline.samples property to a higher value. For example, the following code sets the number of samples to 8:

csharpCopy code

var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0, null, [camera]);
pipeline.samples = 8;

You can also try using post-processing effects like FXAA or SMAA, which are anti-aliasing techniques specifically designed for real-time rendering.

Finally, you can experiment with the precision property of your materials. Setting it to a higher value may help reduce aliasing.

csharpCopy code

var material = new BABYLON.StandardMaterial("material", scene);
material.precision = "highp";

Keep in mind that increasing the resolution or enabling multisampling will require more computational resources, so you should consider the performance impact of these techniques on your application.

3

You can try to use Fxaa to help a bit:

3 Likes
4

@CodingCrusader would be great to review the chatgpt answers before posting :slight_smile:

samples does not exist in the engine options.

The issue here is not about multisampling unfortunately but the fact that we discard in the shader so only post processes will help or techniques like alpha to coverage.

fxaa would be the way to go.

3 Likes