Share to

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:) Your Best Source for Gaming
Login    or

Creating high performance particle effects

Creating high performance particle effects

With thegrowing popularity of Sparticle, and its increased usage in fields like Gamedevelopment, performance is of significant importance to most developers.Besides the quality of an effect, performance considerations like renderingcost, initializing cost, and memory usage are key factors in deciding whetheran effect is formally released with a product. Although the underlying architectureoptimizes performance to the best possible levels, this article offers a fewtips for creating high performance particle effects.

Particle Number v/s Rendering Area

Thetraditional approach is for designers to use the particle count as an indicatorof performance. This approach limits the options for creating particle effectsbecause of the trade-off between quality and performance. This is whereSparticle helps. Following is a comparison between two approaches:

Figure 1                       Figure2

Figure 1 runssmoothly in spite of containing 5000 particles. Figure 2, on the other hand,contains only 100 particles but does not run smoothly. (If you have a powerfulGPU, both the examples will probably run smoothly. Fork the examples on thewebsite and set the number of particle to a larger number before trying again.)

It is probably evidentthat the rendering area is a key factor in this situation. Figure 1 has multipleparticles, but each particle is very small in size. Figure 2 has fewerparticles that are much larger in size. In the GPU pipe line, the particles arefirst separated into vertices. The vertices are then passed to the ALUs (Arithmeticand Logic Units) to calculate the required data (for example, time, color,position, etc.). The GPU then combines the vertices into triangles. Every pixelin each of the triangles corresponds to a pixel on the screen. At the sametime, the GPU also calculates pixel data based on the data provided byvertices. Next, the GPU calculates the final color for each pixel in thetriangles, based on the data of each pixel. The GPU then calculates the finalpixel color on the screen by blending the pixels in triangles. Assuming thatthere are 5000 particles, each of them having 4 vertices, the GPU will need tocalculate data for 20000 (5000*4) vertices. If a particle takes up 1/4thof the screen area, assuming the resolution is 1920*1080, the particle requires1920*1080/4=518400 pixels to be calculated. It may seem that vertex calculationis more complex than calculation for pixels. However, the numbers for verticesand the numbers for pixels are not at par. This means that the rendering area hasa greater impact on GPU performance than the number of particles does.


Whenrendering a particle effect in a traditional system, the CPU traverses all theparticles in the effect to calculate required data. Too many particles in aneffect can overload the CPU. Designers are therefore compelled to reduce thenumber of particles in a traditional system. Fortunately, Awayeffect Editor is solelyGPU accelerated. This means that the CPU does not perform any calculations forrendering (the exception to this behavior is explained later in this article). Youcan use Scout to analyzeyour application’s performance. You will notice that the CPU usage is almostzero. With Sparticle, this means that the CPU remains unaffected by the numberof particles you create.

In summary, paymore attention to the rendering area rather than the number of particles. When theparticles are small in size, you can increase the number of particles at will.

Rendering Opaque Objects

When creating an effect, you need to setthe blend mode in the materialsection.



If youwant to choose normal for blend mode, there is another propertythat you need to pay attention to. See the following comparison:

Figure4                         Figure5

Figures 4 and 5 are nearly the same, but there is a huge difference in the performance levels. (Ifyou have a powerful GPU, both the examples will probably run smoothly. Fork theexamples on the website and set the number of particles to a larger numberbefore trying again.)



The propertythat makes the difference is alphaBlending.This property is disabled for the effect in Figure 4 and enabled for the one inFigure 5. When alphaBlending isdisabled in the normal mode, theobject is rendered as an opaque object. For the areas of the particles thatoverlap each other, if the GPU first renders the region in the front, it neednot process the rendering for the overlapped region that lies at the back. Thatis because an opaque object hides all objects that lie at the back. Since theregion in the front is the final output on the screen, there is no need tocalculate rendering for the region at the back. Although it is not possible to cause the GPU to always render the opaque objects near the view first (rendering order is determined by the index buffer which is predefined and it’s costly to update it before every drawing), performance is significantly improved by doing away with the processing forhidden areas.


Another advantagewith opaque objects is that you can make sure the object culling in the zdirection is correct. A closer inspection of Figure 5 will reveal that the orderin the z direction is incorrect. Some of the hidden objects have not been culled.For the sake of brevity, this behavior is not explained in the article. See more information.


It is thereforebeneficial to disable alphaBlendingfor opaque particles (like leaf, stone, etc.). Another tutorial highlights that the mostcommon way of forming a particle is to use the billboard with an appropriatetexture. Using a real 3D model like in the earlier example may use up much moretime. This example uses the most common method for creating the effect of fallingleaves. The texture used is the one in Figure 7, with an alpha channel:


Set theblend mode to normal, and disable alphaBlending. The result is as follows:


Theoutput is not as expected. The transparent areas appear opaque. To solve thisproblem, you need another property – alphaThreshold.Set it to 0.5. Now if a pixel’s alpha value is greater than 0.5, the pixel is preserved,else it is discarded. Following is the final result


Toenhance performance, use this tip for effects with opaque objects.


You must Sign up as a member of Effecthub to view the content.

21884 views    33 comments

You must Sign up as a member of Effecthub to join the conversation.

nellaigautham 2019-04-30

very useful

linxinboy 2014-04-04

很多单词都连一块儿了 看着蛋疼

Marco Buccio 2014-01-03

very useful

disound 2013-11-27

Looking forward to more tutorials!

Chenzhi Wu 2013-11-26

It's helpful to create a high level effect

roens 2013-11-26

English tutorial may be more helpful for more users!


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character