Techniques for rendering images in a tiled view

A computer-implemented technique includes determining whether to first render an image at a first quality or a second quality based on whether a viewable portion of the image is moving within an image space, a second quality being less than the first quality. The technique further includes first rasterizing the image at the first or second quality based on the determination and first rendering the image at the first or second quality based on the determination. Additionally, the technique includes second rasterizing the image at the other of the first or second quality based on the determination and second rendering the image at the other of the first or second quality based on the determination.

FIELD

The present disclosure relates to computing devices and, more particularly, to techniques for rendering images on a display of a computing device.

BACKGROUND

A “user device” generally refers to a computing device that includes a user interface, a display, and a processor. User devices may include non-portable or stationary devices such as desktop computers, as well as mobile devices such as mobile phones, tablet computers, and the like. User devices can be utilized to display an image. The user device may display a blank or other default screen while waiting for the image to be fully rendered such that the user experience is diminished.

SUMMARY

A computer-implemented method can include receiving, at a computing device, image data corresponding to an image to be displayed on a display of the computing device. The method can further include partitioning, at the computing device, the image into one or more first image tiles, the one or more first image tiles being at a first quality. Additionally, the method can include partitioning, at the computing device, the image into one or more second image tiles, the one or more second image tiles being at a second quality less than the first quality. The method can also include determining, at the computing device, a first set of the one or more first image tiles and a second set of the one or more second image tiles based on a location of a viewable portion of the image within an image space. The method can further include determining, at the computing device, a priority of rasterizing the first set and the second set based on user input, the user input indicating whether the viewable portion of the image is moving within the image space. Further, the method can include rasterizing, at the computing device, one of the first set and the second set based on the priority to obtain a first rasterized image, and rendering, on the display of the computing device, the viewable portion of the first rasterized image. Also, the method can include rasterizing, at the computing device, the other one of the first set and the second set based on the priority to obtain a second rasterized image, and rendering, on the display of the computing device, the viewable portion of the second rasterized image.

DETAILED DESCRIPTION

Referring now toFIGS. 1A and 1B, a schematic illustration of a user device10according to some embodiments of the present disclosure is shown. The user device10may include a processor (not shown), a display12and one or more input devices such as input buttons14. While the user device10is illustrated inFIGS. 1A and 1Bas a tablet computer, one will appreciate that the user device10may be any form of computing device (a desktop computer, laptop computer, mobile phone, etc.).

The user device10can obtain image data for display, for example, via a network connection, a stored data file or the like. The image data may be processed by the user device10to render an image100to display on the display12, for example, through the use of a web browser or other application. It should be appreciated that obtaining image data is specifically meant to include, but is not limited to, a situation in which data that is stored the user device10(such as, in a memory) is retrieved and processed to generate an image100for display.

In some embodiments, the image100may be rendered in non-overlapping portions (or “tiles”) such that one or more of these tiles can be displayed while waiting for the remaining tiles of the image100to be rendered. The portion of the image100that is being displayed on the display12will be referred to as the “viewable portion” of the image100. The viewable portion can be of any size and be located at any location within the image space. In some situations, the viewable portion can include the entire image space of the image100.

Upon receiving an instruction, the user device10may begin rendering the image100based on the image data. In some embodiments, the user device10may partition the image100into one or more first image tiles115at a first quality and one or more second image tiles120at a second quality. The second quality may be a lower quality than the first quality such that the first image tiles115can be referred to as “high quality tiles” and the second image tiles120can be referred to as “low quality tiles.” One will appreciate that the terms “high quality tiles” and “low quality tiles” are merely descriptive of the relationship between the quality of the first image tiles115and the second image tiles120and do not describe any relation to a specific quality or resolution standard/threshold. By partitioning the image100into first and second image tiles115,120, the image100can be displayed at both a high quality (by displaying the first image tiles115) and a low quality (by displaying the second image tiles120), as described more fully below.

In some embodiments, the user device10can determine a first set of the first image tiles115and a second set of the second image tiles120based on the location of the viewable portion within the image space. The first set can include the first image tiles115that correspond to the viewable portion. In other words, the first set can include those first image tiles115that are at least partially within the viewable portion of the image100. Similarly, the second set can include the second image tiles120that correspond to the viewable portion, i.e., the second set can include those second image tiles120that are at least partially within the viewable portion of the image100. In this manner, the user device10can begin rendering of the first and/or second sets of image tiles115,120in order to provide at least a partial display of the image100on the display12. As shown inFIG. 1B, both the first image tiles115and the second image tiles120can be displayed at the same time.

As described above, the user device10may render both the first and second image tiles115,120at the same time. In some embodiments, the first image tiles115(at the higher quality) can be displayed “on top” of the second image tiles120. In these embodiments, when both the first and second image tiles115,120are rendered, the first image tiles115will be visible to a user, i.e., the first image tiles115will obscure the second image tiles120. The display of the first image tiles115“on top” of the second image tiles120is specifically meant to include, but is not limited to, hiding the second image tiles120in the background such that the second image tiles120are not viewable by the user when both the first and second image tiles115,120are rendered.

In order to provide a pleasing user experience, the user device10may alternate between displaying the first image tiles115and the second image tiles120. In some embodiments, the user device10may determine a priority of rasterizing the first set of first image tiles115and the second set of second image tiles120. For example only, when the viewable portion of the image100is static (not moving), the user device10may prioritize the rasterizing of the first image tiles115(at the higher quality) before rasterizing the second image tiles120to obtain a first rasterized image, which is then displayed. In this manner, the user device10can display the viewable portion of image100at the higher quality with a shorter delay.

Furthermore, as described above, in order to provide a shorter delay, the user device10can prioritize the rasterizing of the first set (the first image tiles115tiles that are visible within the viewable portion of the image100) before rasterizing the second set such that a user can see the portion of the image100in which they are interested more quickly and while the remainder of the image100is being rendered. In some embodiments, if the priority indicates that the first image tiles115(at the higher quality) should be rasterized before rasterizing the second image tiles120, the user device10may not rasterize and/or render the second image tiles120. Thus, if the priority indicates that the higher quality tiles should be rendered before the lower quality tiles, the user device10may skip the rasterizing and rendering of the lower quality tiles altogether.

In some embodiments, the user device10can determine a third set of the first image tiles115and a fourth set of the second image tiles120based on the location of the viewable portion within the image space. The third set can include the first image tiles115that correspond to an area proximate to but not within the viewable portion. In other words, the third set can include those first image tiles115that are just outside of the viewable portion of the image100. Similarly, the fourth set can include the second image tiles120that correspond to an area proximate to but not within the viewable portion, i.e., the fourth set can include those second image tiles120that are just outside of the viewable portion of the image100. In this manner, the user device10can prioritize the rendering of the first, second, third and fourth sets based on user input, as described more fully below.

Depending on the processing capabilities of the user device10, rasterizing the first image tiles115while the viewable portion of the image100is moving within the image space may be impractical or difficult. Thus, in order to provide a pleasing user experience, the user device10may prioritize the rasterizing of the second image tiles120(at the lower quality) before the rasterizing of the first image tiles115to obtain a first rasterized image, which is then rendered in order to provide the user with a displayed image100—even if at a lower quality than desired—instead of a blank or default screen. In this manner, the user device10can display the viewable portion of image100at the lower quality with little or no delay. Furthermore, as described above, in order to provide a shorter delay, the user device10can prioritize the rasterizing of the second set (the second image tiles120tiles that are visible within the viewable portion of the image100) before rasterizing of the first set such that a user can see the portion of the image100in which they are interested more quickly and while the remainder of the image100is being rasterized.

In some embodiments, the user device10can continue to rasterize the first image tiles115and the second image tiles120until the entire image100is rasterized. As described above, the first image tiles115(at the higher quality) can be displayed on top of the second image tiles120(at the lower quality) such that the image100can be displayed at the higher quality when the rendering process is complete.

Additionally or alternatively, the user device10can prioritize the rendering of the first, second, third and fourth sets of image tiles115,120based on whether while the viewable portion of the image100is moving within the image space (e.g., when a user is scrolling the image within the display). For example only, when the viewable portion of the image100is moving within the image space, the priority may indicate to first rasterize and render the second set of second image tiles120(the lower quality image tiles at least partially within the viewable portion), then the fourth set of second image tiles120(the lower quality image tiles just outside of the viewable portion), then the first set of first image tiles115(the higher quality image tiles at least partially within the viewable portion), and then the third set of first image tiles115(the higher quality image tiles just outside of the viewable portion). When the viewable portion of the image100is not moving within the image space, the priority may indicate to first rasterize and render the first set of first image tiles115(the higher quality image tiles at least partially within the viewable portion), then the third set of first image tiles115(the higher quality image tiles just outside of the viewable portion), then the second set of second image tiles120(the lower quality image tiles at least partially within the viewable portion), and then the fourth set of second image tiles120(the lower quality image tiles just outside of the viewable portion). In some embodiments, when the viewable portion of the image100is not moving within the image space, the user device10may not rasterize and render any of the second image tiles120(the lower quality image tiles), as described above.

The rasterizing and rendering of the image100can be an on-going process, for example, when updates to the image100are received or when rendering an animated GIF or similar image100. Thus, it should be appreciated that updating the image tiles115,120may be performed by the user device10based on an indication of priority, as described herein. When transitioning from the viewable portion of the image100moving within the image space to a static viewable portion, the user device10may block the updating of the second image tiles120(the lower quality image tiles) such that a user can see the higher quality image100in which they are interested more quickly.

Referring now toFIG. 2, a flow diagram of a technique200for rendering images in a tiled view according to some implementations of the present disclosure is illustrated. At202, the user device10can obtain image data corresponding to an image to be displayed on the display12. The image can be partitioned into high quality tiles (first image tiles115) and low quality tiles (second image tiles120) at204. At206, if the viewable portion is static, i.e., not moving within the image space, the user device10can determine the priority to rasterize the high quality tiles (first image tiles115) before the low quality tiles (second image tiles120). The user device10can first rasterize (208) and render (210) the high quality tiles (first image tiles115), and then rasterize (212) and render (214) the low quality tiles (second image tiles120). Alternatively, the user device10can rasterize (208) and render (210) the high quality tiles (first image tiles115) without then rasterizing and rendering the low quality tiles (second image tiles120).

If, at206, the viewable portion is moving within the image space, the user device10can determine the priority to rasterize the low quality tiles (second image tiles120) before the high quality tiles (first image tiles115). The user device10can first rasterize (216) and render (218) the low quality tiles (second image tiles120), and then rasterize (220) and render (222) the high quality tiles (first image tiles115).

As used herein, the term module may refer to, be part of, or include an Application Specific Integrated Circuit (ASIC); an electronic circuit; a combinational logic circuit; a field programmable gate array (FPGA); a processor (shared, dedicated, or group) that executes code, or a process executed by a distributed network of processors and storage in networked clusters or datacenters; other suitable components that provide the described functionality; or a combination of some or all of the above, such as in a system-on-chip. The term module may include memory (shared, dedicated, or group) that stores code executed by the one or more processors.