Very Fast Real-Time Ocean Wave Foam Rendering Using Halftoning.pdf
(
1778 KB
)
Pobierz
Very Fast Real-Time Ocean Wave Foam
Rendering Using Halftoning
Mary Yingst, Jennifer R. Alford, and Ian Parberry
Technical Report LARC-2011-05
Laboratory for Recreational Computing
Department of Computer Science & Engineering
University of North Texas
Denton, Texas, USA
June 2011
Very Fast Real-Time Ocean Wave Foam Rendering Using Halftoning
Mary Yingst
Dept. of Computer
Science & Engineering
University of North Texas
maryyingst@my.unt.edu
Jennifer R. Alford
Digital Teapot, Inc.
gralford@acm.org
Ian Parberry
Dept. of Computer
Science & Engineering
University of North Texas
ian@unt.edu
ABSTRACT
We introduce an efficient method for emulating sea foam
dissipation suitable for use in real-time interactive en-
vironments such as video games. By using a precom-
puted dither array with controlled spectral characteris-
tics adopted from halftone research as a control mecha-
nism in the pixel shader, we can animate the appearance
of foam bubbles popping in a random manner while al-
lowing them to clump naturally.
Introduction
Real-time animation and rendering of ocean waves is of-
ten seen in video games, and adding foam to the waves
lends an added level of realism. We describe a fast
and effective method for rendering ocean wave foam by
augmenting traditional texture based foam saturation
methods with techniques from halftoning.
Takahashi
et al.
[6] and Th¨rey
et al.
[7] represent foam
u
as a particle system. Although this is visually pleas-
ing, it is computationally intensive. In large scale envi-
ronments such as the ocean it is more practical to use
faster texture based methods. Many methods of render-
ing foam rely on applying a texture of foam to the wa-
ter surface. These methods apply a texture using a foam
saturation,
or
density
value to represent transparency of
the texture which is applied to a mesh representing the
water’s surface(see, for example, Jensen and Golias [2],
Jeschke, Birkholz and Schmann [3], and Kryachko [4]).
Li, Jin, Yin, and Shen [5] similarly apply a foam color
according to its density.
Real ocean foam consists of bubbles clumped together
by surface tension on the surface of the water. Foam
does not simply fade or become transparent as the bub-
bles dissipate. Traditional methods of foam generation
ignore the active nature of foam density where bubbles
pop over time. Since surface bubbles are either present
or not in an area of water, this binary nature lends itself
to the use of halftoning, a process used to reproduce im-
ages using patterns of black dots. Our use of halftoning
with a saturation function that changes over time causes
bubbles to appear to pop.
The remainder of this note is divided into five sections.
First we give a high-level overview of our approach.
Then we review in more depth our choice of foam satu-
ration function, our use of a halftoning mask generated
using methods from the halftoning literature, and how
we apply that mask in a pixel shader. Finally we con-
clude with a discussion of our results.
Overview of Our Approach
To generate foam on the surface of the water using a
foam saturation function, we must create the water sur-
face as a mesh. Each location on the water’s surface
has a calculable saturation value using this function.
The function must vary over time for the foam to ani-
mate and become more and less dense as waves pass and
change. In figure 1 we see that by applying halftoning
methods to a saturation function, we take an otherwise
smooth area of the function and create the randomness
expected when foam generates and dissipates.
Halftone
Figure 1: By replacing the application of a foam texture
with a white tone we see that applying our method cre-
ates randomness on the right in the otherwise smooth
saturation results pictured on the left.
masks,
or
dither arrays,
are arrays of values that have
a one-to-one correspondence with pixels in an image, or
in our application, a texture. Each value of the halftone
mask is used as a threshold against the corresponding
texture pixel to produce a binary output image that in-
dicates, at each pixel position, whether the texture falls
above or below the threshold. This process is commonly
referred to as
thresholding.
Halftone masks are charac-
terized by the binary pattern that results when thresh-
olded against a constant image, or texture. Choosing
threshold value values at each mask position is non-
trivial. Ulichney [8] provides a classic study of mask
design and describes widely used metrics, based on the
Fourier Transform, to characterize masks by their ra-
dially averaged power spectrum (RAPS), a measure of
energy at different frequency bands, and anisotropy, a
measure of radial symmetry. While halftoning can be
accomplished with a variety of computational methods,
we restrict ourselves to the use of masks because, as
point operations, they are computationally efficient and
naturally suited to pixel shader operations.
We depart from the traditional use of halftoning in print-
ing and image display, which seeks to reduce visually
objectionable noise in image reproduction, and instead
we use a halftone mask to add noise. We draw on re-
cent work in halftone mask design by observing that it
is possible to design masks to produce lumping binary
patterns which are reminiscent of the clumping of sea
foam. We also observe that the binary nature of the
threshold output is well-suited to simulate foam bubble
popping when the mask is fixed per frame but the un-
derlying image is not. In this work, we present a novel
way to use halftone masks in conjunction with a satu-
ration function and a texture to simulate foam and the
popping behavior of foam. Further, we observe that the
difference between the threshold value and an image or a
texture provides a magnitude at each pixel position that
we use as a transparency value for additional realism.
We use halftone masks that have been generated using
a symmetric Gaussian function to filter white noise as
described in Alford and Sheppard [1]. Gaussian filtering
applies a two-dimensional Gaussian function to an im-
age.
σ
is a value in the Gaussian function that denotes
the width of the curve in the function; as
σ
increases,
the width of the curve increases.
We simulate the effect of foam bubbles popping by find-
ing the saturation of foam on the water’s surface and
applying a precomputed halftone mask to it. We use a
modified version of the vertex shader outlined in a pa-
per by Van Dresek III, Bookout, and Lake [9] to create
parametric waves upon which to apply our foam. The
next two sections will describe the saturation function
and the halftone mask in more detail.
The Saturation Function
Kryachko [4] uses the following foam saturation func-
tion which is dependent on ocean height.
H
0
is base
height,
H
is height, and
H
max is height where foam is
maximum.
f
(x) =
H
−
H
0
H
max
−
H
0
Figure 2: Foam with Kryachko’s saturation function.
Although Kryachko’s function achieves somewhat at-
tractive results (see Figure 2 for example), the function
results in a symmetric foam distribution, whereas we
wish to model foam that is created by turbulence at the
front of the wave and fades away behind it. Knowing
the target foam density along the wave shape, we chose
to apply
e
tan(x)
to the same vector and frequency used
to determine wave shape.
Figure 3:
e
tan(x)
,
sin(x)
We use the following formulae from Van Dresek III,
Bookout, and Lake [9] for the height
y
of the wave:
y
θ(v)
φ
=
A((sin(θ(x, z))
+ 1)/2)
K
=
=
(v
·
k)2π/λ
adj
+
φt
2sπ/λ,
and so we use
θ(v)
to also generate the periodic function.
f
(v) =
e
−
tan((v·
k)2π/λ
adj
+φt))
,
where
v
= (x,
z)
is position,
k
is the wave direction,
s
is
the speed of the wave,
t
is time,
K
is wave slope,
A
is
wave amplitude,
λ
adj
is wavelength adjusted for ocean
depth, and
λ
is original wavelength.
Since we are overlaying this function on the sine func-
tion that determines wave shape, we need to modify the
formula slightly to align the foam with the waves. In
Figure 3 we see that
e
tan(x)
is twice as frequent as sin(x),
so we divide
θ(x, z)
by 2. Also to align the highest part
of our function with the front part of the sine wave we
add
π/2.
Our final formula is as follows, and gives a
attractive saturation of foam starting at the wave front
and fading behind it.
f
(x) = (e
−
tan((v·k)π/λ
adj
+φt/2)+π/2)
)/C,
where
C
is a user defined constant that governs the in-
tensity of the foam. (We use
C
= 4 for convenience, but
this value may be tuned by the designer.)
Saturation is computed as follows. Adjwavelength, and
phaseC are calculated in the vertex shader and the val-
ues are interpolated for use in the pixel shader.
f l o a t getmysaturation ( f l o a t 2
wavedirection , f l o a t 2 xzposition ,
f l o a t Adjwavelength , f l o a t phaseC )
{
float result =
dot ( w a v e d i r e c t i o n , x z p o s i t i o n )
∗
6 . 2 8 f / Adjwavelength ;
r e s u l t = r e s u l t + phaseC
∗gTimeNow
;
r e s u l t = pow ( 2 . 7 1 8 f ,
−
1 . 0 f
∗
tan ( ( r e s u l t / 2 . 0 f )+ 1 . 0 7 f ) ) / 4 . 0 f ;
return r e s u l t ;
}
saturation decreases over time at a specific location, the
value will approach and pass the threshold used in our
mask. While the saturation value is above the thresh-
old, the foam will be present, but as time passes and the
value decreases, eventually the foam will
pop
and diss-
appear. Since bubbles in foam clump, we must choose
a halftone mask that produces clumps in the resulting
dot patterns. Clumpiness, or clustering, can be seen in
how close together some of the foam is while in other
areas there are gaps.
Alford and Sheppard [1] show a variety of halftone masks
created using radially symmetric Gaussian filters. We
used their masks created using filters having
σ
ranging
from 1.5 to 24 to produce the images in Figure 4 col-
umn 1. In Figure 4 we can see that the higher the
σ,
the closer together some of the dots are. By analyzing
the RAPS we see that as
σ
increases, first oscillation
is dampened in the high frequencies, then the values
of the high frequency region is greatly reduced (Alford
and Sheppard [1]). The results of this can be seen in
the increased clustering and clumping behavior of the
dot patterns. We found
σ
= 24 gives adequate visual
clusters of foam.
To pass values from the vertex shader we simply define
an extra variable in the vertex output with a TEXCO-
ORD semantic. Then the vertex shader sets the required
values as follows:
s t r u c t VertexOutput
{
...
f l o a t 4 impVars : TEXCOORD4;
}
VertexOutput VS ( . . . )
{
VertexOutput OUT = ( VertexOutput ) 0 ;
...
OUT. impVars [ 1 ] = a d j u s t e d W a v e l e n g t h ;
OUT. impVars [ 0 ] = p h a s e C o n s t a n t ;
OUT. impVars [ 2 ] = Po [ 0 ] ; // x p o s i t i o n
OUT. impVars [ 3 ] = Po [ 2 ] ; // z p o s i t i o n
}
f l o a t 4 PS ( VertexOutput IN ) : COLOR
{
f l o a t s a t u r a t e d=g e t m y s a t u r a t i o n
( d i r e c t i o n , f l o a t 2 ( IN . impVars [ 2 ] ,
IN . impVars [ 3 ] ) , IN . impVars [ 1 ] ,
IN . impVars [ 0 ] ) ;
...
}
(a)
σ
= 1.5
(b)
σ
= 6
The Halftone Mask
We use a halftone mask to threshold the saturation func-
tion to create dissipation through bubble popping. As
(c)
σ
= 24
Figure 4: Halftone masks created by Gaussian filters
having
σ
ranging from 1.5 to 24, with corresponding
RAPS (images courtesy Alford and Sheppard [1]).
Applying the Mask
To create the halftoned saturation function
h(u, v)
where
u, v
are texture coordinates and
h(u, v)
is a
float4
RGBA color value at that position, we first cre-
ate a texture to contain the mask information so that
the data can be imported into the pixel shader. Given
a 512
×
512 halftone mask, a 512
×
512 pixel texture is
generated. This texture, when tiled across the surface
of the water, has a corresponding
u, v
texture coordi-
nate for each
v
= (x,
z)
position on the water. The
mask value
m(u, v)
can then be used to threshold the
saturation function
f
(x,
z)
as follows:
Figure 6: Coastline image using our new halftoning
method, Equation 3.
(1)
h(u, v)
=
(0, 0, 0, 1) if
f
(x,
z)
≤
m(u, v)
(1, 1, 1, 1) if
f
(x,
z) > m(u, v)
Given a sampler for the halftone mask texture,
MaskSampler; a sampler for the foam texture,
SAMP FoamTexture; and a sampler for the water sur-
face texture, SAMP WaterTexture; the following code
finds the resulting color for the water’s surface. The
higher TEXscale or MASKscale is, the smaller the tiled
texture will appear. A value of 400 for MASKscale gives
suitably sized dots when using a 512
×
512 pixel mask.
Figure 5: Applying Equation 1 to the saturation func-
tion at left gives the image at right.
// g e t water and foam t e x t u r e c o l o r
f l o a t 4 textureSamp = tex2D (
SAMP WaterTexture ,
IN . TexCoord1
∗
TEXscale ) ;
f l o a t 4 foamSamp = tex2D (
SAMP FoamTexture ,
IN . TexCoord1
∗
TEXscale ) ;
// g e t t h e t h r e s h o l d from t h e mask
f l o a t masknumber=( tex2Dl od (
MaskSampler , f l o a t 4 ( IN . TexCoord1 . xy
∗MASKscale
, 0 , 0 ) ) ) ;
// t h r e s h o l d t h e s a t u r a t i o n v a l u e
i f ( ! ( ( s a t u r a t e d )
>(masknumber
) ) )
{
foamSamp [ 0 ] = 0 ;
foamSamp [ 1 ] = 0 ;
foamSamp [ 2 ] = 0 ;
}
// f i n d t h e v a l u e f o r f a d i n g t h e foam
f l o a t d i f f e r e n c e = clamp ( s a t u r a t e d
−
masknumber , 0 . 1 5 f , 3 . 0 f ) ;
// g e t t h e f i n a l foam v a l u e
foamSamp = d i f f e r e n c e
∗
foamSamp ;
// add t h e v a l u e t o t h e water t e x t u r e
// and clamp t o a v a l i d c o l o r
f l o a t 4 r e s u l t =clamp ( ( textureSamp+
foamSamp ) , 0 , 1 ) ;
result [ 3 ] = 1.0 f ;
We can then create a fading halftoned saturation func-
tion,
g(u, v),
so the dots fade before they pop. We do
this by taking the difference between saturation and
mask number. Figure 1 shows the results of applying
halftoning with fading to the saturation function.
(0, 0, 0, 1)
if
f
(x,
z)
≤
m(u, v)
g(u, v)
= clamp(f (u,
v)/2−
m(u/v),
0, 1)
if
f
(x,
z) > m(u, v)
(2)
Finally we apply
t(u, v),
the foam texture to generate
the final halftoned, textured, and faded image
j(u, v).
(0, 0, 0, 1)
j(u, v)
= clamp(f (u,
v)/2−
m(u/v),
0, 1)t(u,
v)
if
f
(x,
z)
≤
m(u, v)
if
f
(x,
z) > m(u, v)
(3)
Plik z chomika:
p.pablo
Inne pliki z tego folderu:
Real-time Realistic Ocean Lighting.pdf
(16848 KB)
Real-Time Synthesis and Rendering of Ocean Water.pdf
(7696 KB)
Realistic Real-time Underwater Caustics and Godrays.pdf
(3422 KB)
Screen Space Foam Rendering.pdf
(3910 KB)
Real-time Animation and rendering of whitecaps presentaion.pdf
(5498 KB)
Inne foldery tego chomika:
[Game Developer]
Archiwum Blender Art Magazine
Game Developer Magazine
ImagineFX - Issue 76 - 2011-12 (December) Materials - DVD + PDF
ImagineFX - Issue 80 - 2012-03 (March) Materials - DVD + PDF
Zgłoś jeśli
naruszono regulamin