1 |
|
- 2 1/2 D !!! |
2 |
|
|
3 |
Irregular edges as viewports |
------ |
4 |
|
|
5 |
Special type of animation requires texel processing flexibility |
Rendering and animating torn 2 1/2 D viewports efficiently |
6 |
|
================================================== |
7 |
|
|
8 |
|
In our as-yet-unpublished manuscript "Tearing instead of rectangular |
9 |
|
clipping/framing viewports in user interfaces" (preprint available on |
10 |
|
request) we present the use of break lines[Fig.1] as an alternative |
11 |
|
to the ubiquitous rectangular frames in user interfaces. In a sense, |
12 |
|
we figuratively tear a piece off the large canvas instead of presenting |
13 |
|
a framed view (window) to it[Fig.2]. |
14 |
|
|
15 |
|
In order to maintain the illusion, the animation has to be appropriate: |
16 |
|
having the shape of the jagged edge remain while the viewport moves over |
17 |
|
the canvas would still *feel* like a window. The shape of the jagged |
18 |
|
edge must be tied to the location on the background[Fig.3]. |
19 |
|
|
20 |
|
We show how the GPU can be used to accomplish this - this is the easy |
21 |
|
part and we can even do this on unextended OpenGL 1.3 (XXX jvk!), |
22 |
|
although the flexibility of the NV10 architecture allows us to obtain |
23 |
|
some more accuracy and improved shapes. The technique is simple: |
24 |
|
we tie the texture coordinates to the canvas inside (two different |
25 |
|
ways to do this for different appearance in the results - completely |
26 |
|
connected or with pieces of the shape separating from the edge) and |
27 |
|
draw smoothly interpolated polygons with a different color inside and |
28 |
|
outside of the viewport. The pixel pipeline is coaxed to combining the |
29 |
|
interpolated value and the texture value into a single alpha value. |
30 |
|
Because the alpha test is performed prior to the stencil test, we can |
31 |
|
create the shape by rejecting fragments with the alpha test and drawing |
32 |
|
the remaining shape into the stencil buffer. Once the shape is in the |
33 |
|
stencil buffer, it can be used as a viewport for any graphics. |
34 |
|
|
35 |
|
The more difficult part to do efficiently is the rendering of the black |
36 |
|
non-photorealistic edge of the viewport. The problem is that we need the |
37 |
|
edge to be of a constant thickness so just offsetting it in one direction |
38 |
|
will not suffice. The old trick is of course drawing the original shape |
39 |
|
several times, slightly shifted, but this is relatively inefficient. |
40 |
|
We present several approximative algorithms which are able to draw the |
41 |
|
required shape in one pass. The algorithms require various levels of |
42 |
|
hardware flexibility - ranging from dot products to NV25 offset textures. |
43 |
|
(and if we obtain our NV30 and NV34 cards in time, we'll also discuss |
44 |
|
the possibilities there). |
45 |
|
|
46 |
|
The core of this proposal is in the original use of texture coordinates |
47 |
|
to obtain the connected shape, the generation of the shapes from the |
48 |
|
interpolated color and alpha, and the rendering of the edges of constant |
49 |
|
thicnkess. Together, the generation of the shapes and drawing of the edge |
50 |
|
explain several details of the capabilities of the fragment pipelines |
51 |
|
of different levels of hardware and how to accomplish better results in |
52 |
|
this task using them. |
53 |
|
|
54 |
|
The line algorithms are immediately applicable by anyone wishing to draw an |
55 |
|
edge to any shape that is obtained programmatically from textures. |
56 |
|
|
57 |
|
Our current implementations are OpenGL1.3 with NV extensions but we |
58 |
|
can easily rewrite them using Cg. |
59 |
|
|
60 |
|
--- Figures |
61 |
|
|
62 |
|
Fig.1 shows break lines in their conventional context: break lines |
63 |
|
are the freehand lines implying that the object extends outside the |
64 |
|
depicted region. |
65 |
|
|
66 |
|
Fig.2 shows a screenshot from our BuoyOING user interface. |
67 |
|
|
68 |
|
Fig.3 shows how the shape of a torn frame changes when the frame moves |
69 |
|
(the canvas stays still in this figure). The shape of the edge is tied |
70 |
|
to its location, making the movement feel more like "a piece of paper |
71 |
|
that has magically been torn from a slightly different location from |
72 |
|
where it was a moment ago". Obtaining |
73 |
|
|
|
Drawing a shape obtained from texture and dot product manipulation |
|
|
into stencil buffer. |
|