NICOGRAPH International 2014

Real-Time Screen-Space Liquid Renderingwith Two-Sided Refractions
Takuya Imai

Yoshihiro Kanamori

Yukio Fukui

Jun Mitani

University of Tsukuba
imai-t@npal.cs.tsukuba.ac.jp, {kanamori, fukui, mitani}@cs.tsukuba.ac.jp

Abstract
In interactive applications such as games, particle-based liquids are often used for simulation. Such liquids are
rendered with only a single refraction at the front-facing surface, which damages photorealism because it cannot
express the thickness of liquid. In this paper, we propose an approach to render particle-based liquid with twice
refraction at front- and back-facing surfaces in real time. We use two existing approaches, i.e., one is to generate
the liquid surface from particles in real time, and the other is to render a polygon mesh with handling two-sided
refraction in real time. We further accelerate the intersection calculation of the back-facing surface and viewing raysby the secant method.

1

Introduction

In interactive applications such as games, liquid simulation is performed by discretizing liquid as a finite set ofparticles and by calculating the motion of particles. Results of rendering such particle-based liquids in real time
are, however, not sufficiently photorealistic because lightreflection and refraction are approximated and calculated
only once when each ray enters the liquid, which damages photorealism because it cannot express the thickness of liquid.
In this paper, we propose an approach to render particlebased liquid with two-sided refractions, considering twice
refractions at front- and back-facing surfaces in real time(see Figure 1). For twice refractions, there exist real-timerendering methods for polygon meshes [1, 2], which require front- and back-facing depth and normal maps. We
thus obtain depth and normal maps of particle-based liquid by extending a screen-space method [3] and thencalculate twice refractions. To reduce rendering passes
required for front- and back-facing depth maps, we obtain them simultaneously using Dual Depth Peeling [4].
We further accelerate the intersection calculation of the
back-facing surface and viewing rays by the secant method
instead of binary search used in [2]. We demonstrate theeffectiveness of our method through comparisons with− 71 −

Figure 1: Our result of liquid rendered with twice refractions. 8,000 liquid particles are rendered at 85.9 fps at
resolution of 640 × 480.

two results where only a single refraction is considered
or intersections are calculated using binary search.

2

Related Work

Particle-based liquid is often rendered as metaballs.
Kanamori et al. [5] extracted metaball surfaces using Bézier

NICOGRAPH International 2014

Figure 2: Overview of our method. (a) First, depth maps of front- and back-facing surfaces are created by rendering
particles as spheres. (b) Second, depth maps for both front- and back-facing surfaces are smoothed simultaneously byapplying the bilateral filter iteratively. (c) Third, normal maps are created from the smoothed depth maps. (d) Finally,
twice refractions at front- and back-facing surfaces are calculated to obtain the final result.
Clipping and Depth Peeling, which handled only a single refraction. Gourmel et al. [6] accelerated ray tracingof metaballs using Bounding Volume Hierarchy (BVH).
Yu and Turk [7] introduced anisotropic kernels to reducethe bumpiness of metaball surfaces. Although these approaches can generate more photorealistic results, they
are too expensive to render liquid in real time.
Müller et al. [8] extracted liquid surfaces as screenspace polygon meshes from particles in real time. Cords
and Staadt [3] generated a surface by smoothing a depth
map obtained after rendering particles as spheres. vander Laan el al. [9] also smoothed depth maps using Mean
Curvature Flow, which minimizes mean curvature of liquid surface. They further calculated the pseudo thickness
to imitate the thickness of liquid. These approaches target only a single refraction at front-facing surfaces without handling twice refractions. In this paper we present
an approach handling twice refractions at front- and backfacing surfaces.
Wyman [1] showed that just twice refractions at frontand back-facing surfaces make results sufficiently photorealistic for polygon meshes. However, Wyman’s approach requires precalculation of the distance from eachvertex to an exiting intersection calculated along the normal direction, which is not applicable to deformable objects. Wyman’s approach is further extended by calcu-− 72 −

lating the ray-intersection at back-facing surfaces using
binary search for handling deformable objects [2] andby calculating total internal refraction [10]. These approaches target polygon meshes. If we render particlebased liquids using these approaches, we require depth
maps of liquid surfaces. In this paper, we achieve rendering of particle-based liquid with twice refractions inreal time using a screen-space method of generating liquid surfaces.

3

Our Method

3.1

OutlineThe input data are the position and the radius of eachparticle. We extend the method by Cords and Staadt [3]to obtain liquid surfaces. We then extend the method by
Oliveira and Brauwers [2] to calculate twice refractions
with obtained depth maps of front- and back-facing surfaces of liquid. Our method approximately determines
pixel colors by linearly blending the colors of light reflected at the front-facing surface and light refracted at
the back-facing surface. Figure 2 shows the overview ofour method.
We improve the rendering performance as follows. Creating depth maps of front- and back-facing surfaces re-

NICOGRAPH International 2014

Figure 3: Illustration of the secant method.
quires rendering a large number of spheres twice, whichis computationally expensive. To reduce the rendering
passes, we obtain the two depth maps simultaneously using Dual Depth Peeling [4]. For smoothing the depth
maps, instead of the binomial filter used in [3], we apply
the bilateral filter to preserve depth edges. We use a filter kernel of small radius and apply the filter iteratively
to reduce computational cost. Both depth maps of frontand back-facing surfaces are smoothed simultaneously
to reduce rendering passes.
In [2], intersections of refracted rays and the backfacing surface are calculated using binary search, which
requires additional calculation of minimum and maximum values for the back-facing depth map to limit the
search range. Instead we use the secant method to reduce
the number of iterations of ray intersection tests and toomit min/max calculation of the depth map.

Figure 4: Solution in case that an invalid depth value
is referenced. At t = t1 , the secant method cannot be′′applied because Dview
back (x (t1 ), y (t1 )) is invalid. We halvet iteratively until a valid depth value is obtained.
calculated as follows:wD′(i, j) =w

∑ ∑ D(i+m, j+n)W1 (m,n)W2 (m,n,i, j)n=−w m=−w
w

∑

w

,

∑ W1 (m, n)W2 (m, n, i, j)n=−w m=−w(1)()
m2 + n2,(2)
W1 (m, n) = exp −2σ12()(D(i, j) − D(i + m, j + n))2W2 (m, n, i, j) = exp −
,
2σ22
(3)
where w is the kernel radius, and σ1 and σ2 are the constants of the bilateral filter. In our results, we set σ1 =√w
√ and σ2 = 2 2r, where r is the particle radius. We
2 2empirically determined w = 4 and the number of iterations for filtering as 20. Finally, normal maps are cal3.2 Surface Generation
culated from the smoothed depth maps, as described in
We obtain liquid surfaces by rendering particles as spheres [9].
and by smoothing the resultant depth maps, similarly to
Cords and Staadt [3]. We use an optimized method for
rendering spheres, proposed by Kanamori et al. [5]. Forsmoothing the depth maps, we apply the bilateral filter
iteratively, instead of the binomial filter used in [3]. Let
D be an input depth map before smoothing. The depth
value at pixel (i, j) in the filtered depth map D′ is then

− 73 −

3.3

Intersection Calculation

For calculating the refraction at the back-facing surface, we need to calculate the intersection of viewing
rays and back-facing surface. For this, Oliveira and Brauwers applied the binary search, which requires two initial points to restrict the search range; one is nearer andanother is farther than the back-facing surface. Theirmethod thus additionally calculates the minimum andmaximum depth values of the back-facing depth map tolimit the search range. Instead we use the secant method

NICOGRAPH International 2014(a) Result with single refraction only(b) Result using binary search(c) Our result

Figure 5: Comparison of different rendering methods.
so that we can calculate intersections with fewer iterations without additional calculation of min/max depth
values. The secant method also requires two points for
initialization but, unlike binary search, they do not haveto be points with min/max depth values.
We calculate intersections at the back-facing surface
as follows. Let P f and T f be the intersection point andthe unit directional vector of a viewing ray refracted at
the front-facing surface, respectively. Point P(t) along
the refracted ray is then expressed with a ray parametert(≥ 0) as follows:
P(t) = P f + t T f .

(4)threshold ε , P(t ∗ ) is considered as the intersection of therefracted ray and the back-facing surface. Otherwise, either P(ts ) or P(te ) is replaced with P(t ∗ ) to satisfy thecondition ts < te , and then the procedure is repeated untilconvergence. At the begining, we initialize ts = 0 and teaste = (Z f ar − Pf .z)/T f .z,(8)where Z f ar is z coordinate of the far plane of the viewing
frustum, Pf .z and T f .z are z components of P f and T f .
In case that no particles are rendered at pixel (x′ (t), y′ (t)),
the depth value referenced at that pixel is invalid andthus cannot be used as the initial value for the secant
method. In this case we halve ray parameter t iteratively
until a valid depth value is obtained at (x′ (t), y′ (t)) (seeFigure 4).

Let P′ (t) = (x′ (t), y′ (t), z′ (t)) be the point obtained byprojecting P(t) = (x(t), y(t), z(t)) onto the screen. Also
let Dview
back be a depth map that records depth values in the′′viewing coordinates for the back-facing surface. Dview
back (x (t), y (t))
represents the depth value at (x′ (t), y′ (t)) in the screen
3.4 Calculation of the Output Color
coordinates. The difference between the z component of
The output color C is calculated as follows:′′
the point P(t) and Dview
back (x (t), y (t)) is then calculated asfollows (see Figure 3):
C = F(v, n )C + (1 − F(v, n ))C .
f′′∆z(t) = z(t) − Dview
back (x (t), y (t)).

(5)

f

f

b

(9)

where v is the unit directional vector of a viewing ray, n f

We define a linear function f (t) that passes through (ts , ∆z(ts ))is the normal vector at the front-facing surface, C f is thecolor fetched from the environment map along the direcand (te , ∆z(te )), where ∆z(ts ) and ∆z(te ) represent thetional vector reflected at the front-facing surface, Cb isz-component differences for two points P(ts ) and P(te )the color fetched from the environment map along the di(ts < te ) along the refracted ray,rectional vector refracted at the back-facing surface, and∆z(te ) − ∆z(ts )F is the Fresnel coefficient for which we employ Shlick’s
f (t) =(t − ts ) + ∆z(ts ).
(6)te − ts
approximation [11].
Ray parameter t ∗ that yields f (t ∗ ) = 0 is calculated ast ∗ = ts −te − ts∆z(ts ).
∆z(te ) − ∆z(ts )(7)

At t = t ∗ , ∆z(t ∗ ) represents the difference between P(t ∗ )and the back-facing surface. If |∆z(t ∗ )| is below a certain− 74 −

4

Results

We implemented our method using C++ with OpenGL,
GLUT, GLUI and GLEW. We wrote the shader codes

NICOGRAPH International 2014

Figure 6: The results of an animating liquid. The liquid consists of about one hundred thousand particles, and are
rendered at 79.1 fps at resolution of 640 × 480. Each image is obtained per 30 frames.
using GLSL. The experiments were conducted on a PC
equipped with an Intel Core i7-4770 3.40GHz CPU, 8GB
RAM, and an NVIDIA GeForce GTX TITAN GPU. The
following results were rendered at resolutions of 640 ×
480 and 1024 × 768 using pre-simulated liquid consisting of about one hundred thousand particles. The reported computational times do not include the time forsimulation.
Figure 5 shows a comparison of the results using our
method, binary search used for ray-surface intersectionin [2], and with single refraction only. Also, Tables 1, 2
and 3 respectively represent the computational times required for rendering using our method, binary search,
and with single refraction only. In each table, “Depthmap” represents the construction of depth maps by rendering spheres, “Smoothing” the iterative smoothing by
the bilateral filter, “Normal map” the construction of normal maps, “Min/max comp.” the calculation of min/max
values of the back-facing depth map, and “Refraction”
the calculation of refraction as well as the final colors.
Tables 1 and 2 show that our method is faster than using binary search, while the resultant images are almost
identical, as shown in Figures 5(b) and 5(c). On the other
hand, Tables 1 and 3 show that we can render images
about 1.5 times faster when we only consider single refraction. However, as shown in Figures 5(a) and 5(c), ourresult conveys the thickness of the liquid more faithfully.

− 75 −

Table 1: Computational times (msec) per frame using
our method.

Total
Depth map
Smoothing
Normal map
Refraction

640 × 480

1024 × 768

12.64
2.13
10.24
0.10
0.17

30.78
5.14
25.02
0.25
0.37

Table 2: Computational times (msec) per frame using
binary search [2].

Total
Depth map
Smoothing
Normal map
Min/max comp.
Refraction

640 × 480

1024 × 768

12.72
2.13
10.24
0.10
0.12
0.13

30.88
5.14
25.02
0.25
0.20
0.27

NICOGRAPH International 2014

Table 3: Computational times (msec) per frame with single refraction only.

Total
Depth map
Smoothing
Normal map
Refraction

5

640 × 480

1024 × 768

8.78
0.71
8.00
0.03
0.04

19.83
1.91
17.77
0.06
0.09

[4] Louis Bavoil and Kevin Myers. Order independenttransparency with dual depth peeling. Technical report, NVIDIA, 2008.
[5] Yoshihiro Kanamori, Zoltan Szego, and Tomoyuki
Nishita. GPU-based fast ray casting for a large
number of metaballs. Computer Graphics Forum,27(2):351–360, 2008.
[6] Olivier Gourmel, Anthony Pajot, Mathias Paulin,Loı̈c Barthe, and Pierre Poulin. Fitted BVH for fast
raytracing of metaballs. Computer Graphics Forum, 29(2):281–288, 2010.

Conclusions and Future WorkIn this paper, we have proposed a method for rendering particle-based liquids with handling twice refractions
in real time. We extend and utilize the previous methods
for screen-space extraction of liquid surfaces as well as
calculation of twice refractions for polygon meshes. We
enhance the rendering performance using Dual Depth
Peeling [4] to reduce rendering passes, and using the secant method to reduce the cost for calculating intersections of refracted rays and back-facing surfaces.
Our method assumes that the space between front- andback-facing surfaces is fully filled with liquid, and thus
yields unnatural refraction in case that splashes are flying
apart in front of the liquid body, as shown in Figure 6.
A solution for this problem is, for example, to calculate
more accurate refraction with three or more depth maps
by applying Dual Depth Peeling iteratively. We would
like to develop an efficient way for rendering liquid withmore complicated refractions in real time.

[7] Jihun Yu and Greg Turk. Reconstructing surfacesof particle-based fluids using anisotropic kernels.
ACM Trans. Graph., 32(1):5:1–5:12, 2013.
[8] Matthias Müller, Simon Schirm, and Stephan
Duthaler. Screen space meshes. In Proceedingsof the 2007 ACM SIGGRAPH/Eurographics Symposium on Computer Animation, SCA ’07, pages
9–15, 2007.
[9] Wladimir J. van der Laan, Simon Green, andMiguel Sainz. Screen space fluid rendering withcurvature flow. In Proceedings of the 2009 Symposium on Interactive 3D Graphics and Games, pages
91–98, 2009.
[10] Scott T Davis and Chris Wyman. Interactive refractions with total internal reflection. In Proceedingsof Graphics Interface 2007, pages 185–190, 2007.
[11] Christophe Schlick. An inexpensive BRDF model
for physically-based rendering. Computer Graphics Forum, 13(3):233–246, 1994.

References[1] Chris Wyman. An approximate image-space approach for interactive refraction. ACM Trans.
Graph., 24(3):1050–1053, 2005.
[2] Manuel M. Oliveira and Maicon Brauwers. Realtime refraction through deformable objects. In Proceedings of the 2007 Symposium on Interactive 3D
Graphics and Games, pages 89–96, 2007.
[3] Hilko Cords and Oliver Staadt. Instant liquids. In
Poster proceedings of ACM Siggraph/Eurographics
symposium on computer animation, 2008.

− 76 −