Antialiasing troubles, looking for solutions

Hello folk,

I am looking for help and ideas. (project link below)

I am using the PlayCanvas engine locally, and it is as if AA is not applied by default.
In my demo I have a simple plane with a shader material which samples some normal map etc.
There are no post effects in the demo, and as far as I know frames are directly rendered to the back buffer.

This is what I currently see in any browser, look at the edges:

When applying the posteffect-fxaa.js script on the camera the jagged edges actually become worse:

The same can be seen, but to a less extent, in this project. Turn on/off fxaa script in the camera settings.
https://playcanvas.com/editor/scene/490234

  • what is the right way to approach AA in my case, and why is FXAA making it worse?
  • why are the playcanvas editor render result so much smoother than what I’m achieving?

No tips or clarification whatsoever…? :frowning:

If that is on desktop, then I will make assumption you actually using browser with some zoom. Hit Ctrl + 0 to get to 100% zoom level.

If that is on mobile, then you simply need to enable Device Pixel Ration in project settings, so to enforce retina display for canvas.

Hi Max, thanks for your reply.

The result is from a desktop environment, I should have been more clear, my bad.
It has little to do with my zoom, it’s on 100%, always.
Even without the use of custom shaders, the render result is very jagged and blurry on all of my systems.

Can you, or anyone verify this is the result of this small demo? (see share.zip under ‘Downloads’ section)

It is nothing like what I have in the playcanvas editor or other webgl demos, so…
Thanks for the help.

Just opened your archive. You have not set canvas width and height properties.

Here is blank project that is made with Editor and downloaded as archive, that has all rescaling set up as required.

1 Like