Created on Feb. 20, 2013, 11:04 a.m. by Hevok & updated by Hevok on May 2, 2013, 5:08 p.m.

Atlasing is a way ofgrouping images together to optimize performance.

Once one has the ability to manipulate the Canvas, the next step is to figure out how to do it the right way. As the number of images in the environment and the number of images asset set start increasing exponential, the management of that and drawing to the screen, is getting exponential harder as well. This leads to the concept of an Atlas which boils down all this complexity into something that is usable, and easy to do.

In a situation where one may have a 4000 x 4000 pixel texture that may be fetched from a server. this single fetch can take about 241 ms to download. If one chop up that image into smaller little pixels so for example one would create 4000 separate images, the total load time to request all of those Images to occupy the same amount of space would change drastically. In fact, it would actually increase from 241 milliseconds to 4.3 seconds (increase of 17 times). Given this it makes sense that in order to reduce load for high performance Web Applications, one should group as many of the small elements together into one large image to reduce the number of HTTP requests. This process of packaging smaller Images into larger Images is texture Atlasing. In real-time graphics, a texture Atlas is a single large Image that contains many smaller sub-Images, each of which can be referenced independently.

Atlases define many sorts of charts in a single Image.


Tags: sheet, images, grouping
Categories: Tutorial
Parent: HTML5

Update entry (Admin) | See changes

Comment on This Data Unit