Vivek Negi
Vivek Negi

Created

8 August 2016

Requirements     

               
Prerequisite knowledge
Basic knowledge of how Stage3D works is sufficient for understanding the working of anti-aliasing feature.
Required products
Adobe Animate CC (Download trial)
 
Additional products required
Internet browser (for FlashPlayer)
   
User level
All
   

Introduction

Anti-aliasing is a useful technique for improving perceived image quality in your applications. You can achieve hardware-based Multisampling anti-aliasing (MSAA) in your Flash and AIR applications using Stage3D APIs configureBackBuffer() and setRenderToTexture().

Note: Anti-aliasing is not available on AIR mobile using configureBackBuffer() API.

This feature helps you deliver an improved user experience in many aspects, such as when you use filters in 2D framework and post-effects in 3D framework. See the image samples shown below of a Stage3D scene rendered without anti-aliasing and the improvement achieved when the same texture is rendered with anti-aliasing.

Stage3D scene rendered without anti-aliasing.
Stage3D scene rendered without anti-aliasing

As we can see in the image above, there is jaggedness in the image rendered without anti-aliasing. To reduce this jaggedness, we can render the same texture using anti-aliasing. See the same texture rendered with anti-aliasing (x16 anti-aliasing) below.

Stage3D scene rendered with anti-aliasing
Stage3D scene rendered with anti-aliasing

Anti-aliasing is achieved by rendering the nearby pixels of the actual texture in a way such that the image appears to be smooth. The number of nearby pixels rendered are called subsamples. Higher the number of subsamples, smoother the picture appears. However, a higher number of subsamples can cause substantial GPU overhead in calculating the subsamples, which can lead to a drop in performance.

Let us take a look at how you can implement anti-aliasing in your application using the Stage3D APIs.

How to implement?

You can specify the quality of anti-aliasing that you want to achieve using the following Stage3D APIs:

1. configureBackBuffer()

public function configureBackBuffer(width:int, height:int, antiAlias:int, enableDepthAndStencil:Boolean = true, wantsBestResolution:Boolean = false, wantsBestResolutionOnBrowserZoom:Boolean = false):void

2. setRenderToTexture()

setRenderToTexture (texture:flash.display3D.textures:TextureBase, enableDepthAndStencil:Boolean, antiAlias:int , surfaceSelector:int ):void

The parameter antiAlias in these APIs represents the anti-aliasing quality.

To disable anti-aliasing, you can set this parameter as 0; higher integer values can be used to improve anti-aliasing quality, but it requires more calculations. This value is currently ignored in software rendering context. Also in AIR Mobile, only setRenderToTexture() is available for software rendering.

The relation between the number of subsamples and the antiAlias parameter value that we pass in these APIs is given by the following equation:

Subsamples = 2^antiAlias

From this equation, we can infer:

  • antiAlias value 0 means 1 subsample; no antialiasing.
  • antiAlias value 1 means 2 subsamples; minimal antialiasing.
  • antiAlias value 2 means 4 subsamples; medium high-quality antialiasing.
  • antiAlias value 3 means 8 subsamples; high-quality antialiasing.
  • antiAlias value 4 means 16 subsamples; very high-quality antialiasing.

The maximum value of antiAlias parameter that we can pass is 4 and minimum value is 0. If you pass a value greater than 4, it clamps to 4. Similarly, if you pass a value less than 0, it clamps to 0.

Note: In case of mobiles, the maximum number of subsamples is limited to 4, therefore the maximum value of antiAlias that you can pass is 2.

Anti-aliasing feature availability on desktop and mobile:

(Desktop)

Anti-aliasing is available on desktop beginning from:

  • FlashPlayer 11, AIR 3 using configureBackBuffer()
  • FlashPlayer 13, AIR 13 using setRenderToTexture()

(Mobile)

Anti-aliasing is available on mobile beginning from:

  • AIR 22 using setRenderToTexture()

Where to go from here

Read Working with Stage3D profiles to get a brief overview of the capabilities different Stage3D profiles offer to the AS developers.