Does The Web Support Multisampling/Antialiasing At All?

I had this question in the back of my mind for quite a while now so I hope and appreciate if someone with knowledge about the web, specifically WebGL & Canvas could give me an answer to the questions found below. (Perhaps the creator Ashley himself, if there is some free-time in between working on Construct 2 and Construct 3.)

Please note that this isn't meant to be a topic about: pro vs anti-aliasing.

bad pun, I know...

Does the web support multisampling/antialiasing?

Almost every game engine supports multisampling, including Construct Classic. So far neither Construct 2 nor Construct 3 seem to support this. Everything I could find regarding this was the "sampling" project setting, which doesn't really seem to smooth out edges at all (or at least not as effectively as you'd expect from multisampling).

If the web supports multisampling, will we see support for this anytime soon?

It would be amazing if we could toggle multisampling (MSAA) inside the project properties like you could using Construct Classic. System actions to set the sampling level ingame would also be appreciated, even if they require a restart of the application like the most native games supporting this feature do.

People that still have no clue about what "multisampling" is, here is an example of it in action:

*AA = Anti-Aliasing aka smooth object edges

WebGL supports antialiasing, but it has a big performance overhead and isn't necessary for smooth edges, so we have it permanently disabled in C2 and C3. The reason the crop tool leaves a 1px transparent border is to get the smooth-edges appearance using linear sampling only, since it smoothly blends with an extra pixel of transparency at the edges, rather than having a hard edge. This is much more efficient than running a full antialiasing engine and looks pretty much the same. So enabling antialiasing will only cause a major slow down with no real visual quality improvement.

WebGL supports antialiasing, but it has a big performance overhead and isn't necessary for smooth edges, so we have it permanently disabled in C2 and C3. The reason the crop tool leaves a 1px transparent border is to get the smooth-edges appearance using linear sampling only, since it smoothly blends with an extra pixel of transparency at the edges, rather than having a hard edge. This is much more efficient than running a full antialiasing engine and looks pretty much the same. So enabling antialiasing will only cause a major slow down with no real visual quality improvement.

Every videogame developer and player is well aware about the performance overhead of antialiasing (that's why you can usually disable it in the ingame settings) but I don't think that it "looks pretty much the same" in my opinion. I mean you can test this by yourself, use a simple box sprite and rotate it. Without antialiasing it just looks terrible, even with the more efficient 1px transparent border workaround.

Is this somehow implemented into WebGL so that I can easily enable it using JS?

I'd really like to do some performance tests of my own if that's possible, just out of curiosity.

Wouldn't it be just as easy to use an fx?

Wouldn't it be just as easy to use an fx?

If you have such an effect which is doing true antialiasing (not just softening/bluring), please share it in here so I can give it a try.

The closest I know of would be:

Not sure if it qualifies as multisampling, but there is some sampling going on.

Otherwise a shout out to Gigatron to see if he might have one.

I don't think that it "looks pretty much the same" in my opinion. I mean you can test this by yourself, use a simple box sprite and rotate it. Without antialiasing it just looks terrible, even with the more efficient 1px transparent border workaround.

It looks fine with a 1px transparent border. I don't see what antialiasing would add to this. Can you compare with a screenshot to show what you mean? Here's what it looks like today with a 1px transparent edge and no antialiasing. I can't see how the quality of this could be better.

The closest I know of would be:

Not sure if it qualifies as multisampling, but there is some sampling going on.

Otherwise a shout out to Gigatron to see if he might have one.

Thanks for the link and general information about WebGL effects. I checked it out and it seems to be some kind of "post-processing" effect and not really what I'm looking for.

Nonetheless I'll consider asking Gigatron about this and if it's possible to somehow antialias using WebGL effects.

It looks fine with a 1px transparent border. I don't see what antialiasing would add to this. Can you compare with a screenshot to show what you mean? Here's what it looks like today with a 1px transparent edge and no antialiasing. I can't see how the quality of this could be better.

*image here*

Also thanks to you Ashley for taking your time in order to respond to my questions.

The 1px transparent border workaround comes close to antialiasing without a doubt but it's still worse in certain cases.

Instead of making the case for or against antialiasing using screenshots, I'd rather like to provide two practical examples found below.

These tests are fairly simple, they require the latest versions of Construct 2 and Construct Classic.

Download Construct 2 Example | Download Construct Classic Example

Steps to reproduce both examples:

• Start the preview
• See that the blue box rotates slowly at about 10 degrees per second
• Notice that Construct Classic delivers smoother edges (if 8xMSAA is supported)

Here is a screenshot of my observation as well, although I don't really see a point in sharing screenshots of static sprites.

(Problem Solution: Always crop your sprites inside the image editor if possible!)

Your example doesn't use a 1px transparent border, so you're not making the right comparison. Edit the sprite, press crop (which adds the 1px border), and try again.

Your example doesn't use a 1px transparent border, so you're not making the right comparison. Edit the sprite, press crop (which adds the 1px border), and try again.

Wow, you're 100% right about this! I thought that Construct 2 did that on its own, my bad.

This explains why some of my in-game graphics looked terrible, just had to manually crop them after importing them into C2.

Alrighty then, no need for multisampling at all! This is much better in comparison to demanding antialiasing.

Thanks again and I hope that people reading this won't do the same mistake and always crop their sprites after importing them.