☑ Simple anti-aliasing missing?

It seems that all our models render in the scene with jagged edges. I know of FXAA (which, IMHO looks kind of blurry), but I am talking here about simple anti-aliasing of polygon edges. I thought this is supported out-of-the-box by all rendering engines.

I would accept it if simple AA was missing from mobiles, but I am talking about the desktop version.

Thank you for your time

1 Like

What browser and OS?

On iOS, they’ve only just fixed anti-aliasing yesterday:


All other platforms should use hardware anti-aliasing, turned on by default. On platforms that have Retina displays (devicePixelRatio > 1), you have to select ‘Use Device Pixel Ratio’ in your project settings.

@will forgot to mention that AA on all platforms in WebGL goes off if you render not directly to BackBuffer. So when there is any of post-effects, unfortunately WebGL will render to RenderTargets without AA.

1 Like

We DO use post effects (bloom & motion blur), so that’s the source of the problem. What’s the solution? FXAA on top of all?

Then yes, FXAA or any other solution that suits your performance and quality requirements.

That’s correct, yes. I think WebGL 2.0 can hardware antialias frame buffer objects (pc.RenderTarget) but WebGL 1.0 can only do AA on the back buffer.

Aren’t desktop browsers (Firefox and Chrome tested) NOT WebGL2-ready? Neither does AA with post-fx.

As of today, you can force enable WebGL 2.0 in Chrome Canary via chrome://flags. WebGL 2.0 can also be forcibly enabled in Firefox too. PlayCanvas does not have a WebGL 2.0 codepath to take advantage of the new API though. We have not yet scheduled any work around this.

Thank you so much :smile:

Actually, @will you are late already, as Firefox Nightly has WebGL 2.0 enabled by default already :wink:
And WebGL 2.0 is backwards compatible with WebGL 1.0. My quick tests of simply using webgl2 context were positive. So it technically possible to enable it today already. But adding features that would rely on webgl2 has to be replicated in webgl1, as we always want to support Everyone and Everything possible :slight_smile:

Hi. I read all topics related to antialiasing, tried to google webgl AA, looked at other engines like SketchFab and Goo, and I’m a little confused.

In SketchFab when I rotate or pan a camera there is no aa, but when I stop then image became smoothly antialiased. This behaviour is actually good because in my understanding it increases fps on mobile devices but let user see static image in good quality.
I suppose nobody needs this in dynamic games, but in product configurators it’s very important because user needs perfect quality in small frame on website.

So, I tried to add FXAA, I tried all render settings, and no luck. My objects have jagged edges all the time.
Here is the screenshot http://joxi.ru/D2PYQklhdM19wA

We want to buy Organization plan of PlayCanvas and create product configurator, but we need to solve this problem before

Link to my scene

FXAA generally has not the best AA quality. If you want turn on/off post effect when you spin around and then when you stop, then you need a better AA post-effect. Perhaps could summon @Mr_F here, to ask for his advice on this.

Actually I didn’t notice any difference between FXAA on and off :slight_smile:
I’m talking about geometry edges aliasing, if it matters.

I’m just comparing Playcanvas AA with Sketchfab. Did you see Sketchfab AA?

If you disable post effect, it might render directly to Back Buffer, so then it enabled default MSAA.
There is a way to disable AA for canvas, but webgl context has to be requested with appropriate flag, and currently this flag option is not exposed in project settings.

I have seen Sketchfab rendering behaviour, and in fact they use AA in both cases: when rotating camera as well as when camera is stopped.
They are using some cheap post effect AA when camera rotates, and then when camera is stopped they use some expensive AA technique to make it all smooth.
It is not possible with WebGL 1.0 to use AA with post effects, because post-effects do render into Render Targets, and AA is not available for Render Targets, unless engine renders everything 2 or 4 times bigger, but that is way too expensive for realtime.

So in your case, you need two techniques of AA, and simply switch between them based on camera state.

I’m working in 3dsmax and I’m not familiar with js, webgl and game engines, so some of your words a bit difficult to understand :slight_smile:

Do I understand correctly that there is no good (expensive) built in AA method like in SketchFab for static camera? And to add it I need to create some js script?

All post-effects in PlayCanvas like in many other engines are simply a script available for download.

In this case you would need to know a bit of shaders (GLSL) to modify existing one to suit your specific needs.
Then in order to change on spinning, yes - you will have to write some JS logic, as it will be expressing behaviour of app that is your case specific.