Game Development Reference
In-Depth Information
Please note that performance optimizations depend on the runtime environment. Optimizations that have a
positive impact today can become useless, or even harmful, tomorrow. They will also severely impact the
maintainability and readability of your code.
Single particles
If we want more particles, we will need to make the particles smaller to make them look right. If we restrict
ourselves to single-pixel particles, we can gain a lot of performance by manipulating the image data directly.
The 2D context of the canvas element allows this by using the get/putImageData() methods. Note that
calls to get/putImageData are quite expensive. They are only worth their cost when rendering a lot of
particles (~1000), otherwise falling back to fillRect/drawImage is faster.
Typed arrays
Another performance bottleneck is the use of objects for each particle and vector.
We can do this much more efficiently by using a large array. When we use a single array and inline all
operations, we gain a lot of performance. Some of the benefits of this approach are:
No more function call overhead
No more memory allocation (per particle) / garbage collection overhead
Less time spent dereferencing properties
Reduced memory usage
WebGL introduced typed arrays to JavaScript. Typed arrays are arrays that only accept a single type.
Because of this, they can be stored and accessed in a more efficient manner. Their interface is mostly
backwards compatible with the array interface. We can use this to fall back to normal arrays if the browser
does not support typed arrays. The code for this can be as simple as this:
Var Float32Array = window.Float32Array || Array;
 
Search WWH ::




Custom Search