Browse Prior Art Database

Efficiently Path-Clipping Layered UI Content for Mobile Devices Disclosure Number: IPCOM000238083D
Publication Date: 2014-Jul-31
Document File: 7 page(s) / 155K

Publishing Venue

The Prior Art Database


Techniques for efficiently path clipping anti-aliased content are provided. These techniques can be used for static and animated graphical applications, such as graphical user interfaces (UIs). Desired content is first drawn to a window. Then, an anti-aliased border can be drawn on the desired content, for example, using a thin border of alpha-ramped tessellated polygons. Additional content, such as a drop shadow, can then be added to the desired content. The additional content can be blended so that it appears below the desired content. These techniques can be performed in an efficient fashion, particularly by graphical processing units (GPUs) commonly deployed with mobile devices, such as smart phones.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 40% of the total text.

Page 01 of 7

Efficiently Path-Clipping Layered UI Content for Mobile Devices

    User Interfaces (UIs) are often defined in rectangular terms for simplicity, even though curved, rounded shapes are desirable. Clipping a UI to a path is a way to define an overall shape for hierarchy of UI elements without each element having to individually respect the shape being used. In path clipping of a shape, a closed path of the shape is generated. The portion of space within the closed path is kept for output by the UI, and the remainder is omitted from the output. In an example of a rounded rectangle, a path of a rounded rectangle can be generated and the UI can keep anything within the rounded-rectangle path as being part of the rounded rectangle, and omit the remainder.

     Path clipping, if sufficiently efficient, can be changed from UI frame to UI frame. However, in many cases, path clipping is inherently expensive, difficult to anti-alias and layer with other content on mobile GPUs. In this context, anti-aliasing involves reducing the appearance of visual artifacts due to pixel-based sampling. For example, suppose a continuous path is drawn onto a grid of pixels, such as a modern graphical display, where each pixel can be colored either black or white. Then, when the path is drawn onto the grid, each pixel is colored black if the path touches the pixel, and otherwise colored white. That is, each pixel can represent a discrete (black or white) sample of the continuous path. As the pixels have only two colors, then many paths will show obvious aliases, or discontinuities from the sampled continuous path based on pixel-by- pixel sampling. Anti-aliasing can involve reducing the appearance (smoothing) of the aliases; e.g., by using multiple shades of color to blur the aliases.

Page 1

Page 02 of 7

    In one use case, a dialog is clipped to a simple path, such as a rounded rectangle, and a drop shadow is drawn beneath it. A drop shadow of an object can be a grey or black area representing a shadow of the object drawn shifted and below the object. An example drawing of a rounded rectangle (object), drop shadow, and clipping paths for the object and for the object with the drop shadow (shown using a heavy line) are shown in Figure 1 below.


Clipping Path for Object + Drop


Clipping Path for Object

 Drop Shadow

FIG. 1

    In some environments, such as graphical UIs (GUIs) for mobile devices, such as smart phones, path clipping for relatively-complex paths, such as the clipping path for the object + drop shadow shown in Figure 1 is too inefficient and resource-intensive to be feasible.

    As another technique for path-clipping, user interfaces can be clipped using a stencil buffer. A stencil buffer is a buffer of pixels available on many GPUs that can be used to specify an area of rendering; e.g., if a pixel in a stencil buffer is set to "1" then that pixel will be rendered by the GPU. Then, user interface clipping can be specified using the stencil buffer by drawi...