As global broadband penetration continues to rise, consumers are increasingly empowered to enjoy high fidelity media and rich interactive applications on the Web. Providers often use interactive applications to deliver comprehensive user experiences to both consumers and enterprises in an effort to enhance revenues and operating margins. Thus, application providers are finding it increasingly important to deliver differentiated user experiences across a variety of channels—including mobile, Web, and desktop—in order to attract new customers and retain existing ones. Application users are typically more discerning than ever in the content or the services they choose to consume. They also want compelling user experiences that are quickly and smoothly delivered and responsive to user control and inputs.
This Background is provided to introduce a brief context for the Summary and Detailed Description that follow. This Background is not intended to be an aid in determining the scope of the claimed subject matter nor be viewed as limiting the claimed subject matter to implementations that solve any or all of the disadvantages or problems presented above.
Functionality for storing and modifying multi-resolution texture atlases is provided so that applications can expose methods to enable users to access and browse a collection that includes a set of multi-resolution images. The images are stored as thumbnails in a texture atlas having different levels of detail in which the levels are arranged in an image pyramid that includes multiple tiles which are each stored as separate files. At the top of the pyramid, the thumbnail images have the lowest resolution and are typically packed into a single tile. In the middle levels of the pyramid, the thumbnails have more detail and will share tiles, but multiple tiles can be used to store all of the images in the collection. At the bottom level of the pyramid, the images have their greatest level of detail and are typically unpacked so that each image will occupy one tile.
The thumbnail images are spatially stored as textures in the texture atlas on a server using a fractal layout (which in one illustrative example may comprise a Morton layout) that enables images to be efficiently packed in the tiles. The fractal layout ensures that no more than one tile stores less than a fully packed texture at each level of detail. The same packing order scales across each level of detail in the texture atlas so that layout information is stored for the individual images in the collection only once using metadata comprising, for example, a Morton number (i.e., an ordinal which indicates an image's position in the layout) and an aspect ratio (i.e., ratio of image width to height).
An application uses the metadata to store the thumbnail images in the collection on a server so that specific images in the collection (e.g., those being browsed by an application user) can be downloaded to a client device and rendered on a display. Rather than fetching the entire set of tiles, only the relevant subset of tiles needed to render the specific images has to be downloaded from the server. Thumbnails can be located on the tile and cropped out using the information contained in the metadata and then handled as individual images so that the appropriate display may be composed and rendered.
The scalable mutable tiled multi-resolution texture atlases advantageously enable applications to support rich user experiences when dealing with image collections that may be large and which could include thousands or even millions of images in some implementations. Normally, browsing a large collection is less than an ideal experience for a user because there can be a considerable time lag as the collection loads from the server. In particular, downloading a collection as individual images can result in thousands of separate file requests which is a sub-optimal process for commonly used file transfer protocols such as HTTP (HyperText Transfer Protocol).
The texture atlas can mitigate such difficulties by minimizing the metadata needed to store collections of multi-resolution images which allows even very large collections to open fast on the client device. In addition, the present texture atlases are mutable and may be modified so that thumbnail images are added or removed from a collection. When a new image is added, it is positioned in the fractal layout at the next available location. When an image is deleted from the collection, its position in the layout is marked as open. Utilization of these techniques enables a texture atlas to be managed dynamically and without needing to be rebuilt each time a collection is modified with new or deleted images. In addition, because a fractal layout (e.g., a Morton layout) is utilized, the addition or deletion of images from the collection can be performed in constant time (i.e., irrespective of the size of the collection).
In an illustrative embodiment, the entire collection can be quickly loaded from the server by a rendering engine running on the client device and displayed as low resolution thumbnails using a small amount of data from a single tile. In addition, as only a minimal amount of metadata is needed to store and dynamically manage the collection, the data transferred from the server to the client on application startup is further reduced.
As the user zooms in to browse a particular part of the collection, the rendering engine loads additional tiles containing higher resolution thumbnails from the server. This results in further bandwidth savings because only some of the tiles from the texture atlas that are needed to render the particular images of interest have to be loaded. The fractal layout provides efficient packing of images to minimize wasted space due to empty tiles while enabling the collection to be quickly dynamically modified when images are added or deleted from a collection.
This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used as an aid in determining the scope of the claimed subject matter.
Like reference numerals indicate like elements in the drawings. Elements are not drawn to scale unless otherwise indicated.
In this example, the application providers 105 support web-based user experiences. While the specific user experiences can vary by implementation, the applications 105 will typically support rich graphics and user interaction through a browser that runs on a client device 112. As shown in
For example, the browser plug-in 211 may be embodied by Microsoft Corporation's Silverlight™ cross-browser, cross-platform plug-in. The rendering engine 216 functions to fetch stored images from a server at the application provider 105 and render the images responsively to input from a user 110, as described in more detail below. In alternative implementations, the rendering engine functionality can also be implemented using a client-side application 221 on the device 112 or some other application 225.
As shown in
As shown in
As shown in
To support the illustrative user experience shown in
For purposes of clarity in exposition, only a small subset of the thumbnail images that make up the collection used in the museum example above are shown in the image pyramid 700 using three levels. However, it is emphasized that a given collection may contain level 0 up to some maximum level (“maxlevel”) as needed to store all the images in the collection at the various desired levels of detail. Thus, the concepts described in this example are equally applicable to collections that may have hundreds, thousands, or even millions of images using a multiplicity of levels.
Towards the top of the image pyramid 700 at level 0, the thumbnail images 7050 . . . N are typically packed into a single, shared tile 712. Each tile will further be typically stored as a separate file using conventional file formats for images. For example, but not by way of limitation, JPEG (Joint Photographic Experts Group), PNG (Portable Network Graphics), or other known formats may be utilized. In this example, each of the tiles in the image pyramid is 256×256 pixels. However, it is emphasized that other tile sizes and files formats can be utilized as necessary to meet the requirements of a particular application.
The thumbnail images will have the smallest dimensions and lowest resolution at level 0 in the pyramid, for example, 1×1 pixels. In the middle of the image pyramid 700, the thumbnail images 7150, 1, 2 . . . N will still share tiles 7220, 1, 2 . . . N, but multiple tiles will typically be needed to contain all the images in the collection. The thumbnail images in the middle levels are larger in size compared with images in the levels towards the top of the pyramid. At the bottom level of the image pyramid 700, the thumbnail images 7250, 1, 2 . . . N are the largest in size with the greatest amount of detail, and are typically unpacked so that each image will occupy one of the tiles 7300, 1, 2 . . . N.
Storing the thumbnail images using the tiled texture atlases can enable fast access to images because semantically related images, which can frequently share tiles, can be downloaded from the server with fewer roundtrips and the rendering engine 216 (
As shown in table 800 in
As shown in
The location in the Morton layout is calculated for the Nth image in a collection by separating the odd and even bits of N to find the appropriate row and column. So for example, for the 5th thumbnail image, 510=1012 which is separated into odd and even bits, 112=310 and 02=010, the image is stored in the 3rd column and 0th row. This Morton calculation can be used for each level which thus allows the same layout to advantageously scale from one level to another.
At application startup, the rendering engine 216 (
The application uses the Morton number to locate the desired images from the tiles in the layout. The aspect ratio is used to crop the located images out of the tiles which are then handled as individual images by the rendering engine 216 on the client so that the appropriate display can be composed and rendered. The utilization of a small amount of metadata minimizes the storage requirements for collections while enhancing the user experience by minimizing application startup time and enabling the collection to be quickly retrieved and built as the user interacts with the collection.
Utilization of the Morton layout further enables changes to be handled dynamically in constant time without having to rebuild the entire collection each time a change is implemented. Changes to a collection may comprise thumbnail images being added or removed. When a new image is added to a collection, it is appended to the layout at the next available Morton number. Because the collection is multi-resolution, corresponding images, each having different sizes and resolutions, will be respectively added to each of the levels in the image pyramid. However, as noted above, a given thumbnail image will utilize the same Morton number at every level of resolution.
For example, as shown in
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.