HARDWARE-ACCELERATED WEB VISUALIZATION

OF VECTOR FIELDS

Case Study in Oceanic Currents

Mauricio Aristizabal

1

, John Congote

1,2

, Alvaro Segura

2

, Aitor Moreno

2

, Harbil Arregui

2

and Oscar Ruiz

1

1

CAD/CAM/CAE Laboratory, EAFIT University, Medellin, Colombia

2

Vicomtech Research Center, Donostia - San Sebastian, Spain

Keywords:

Line Integral Convolution, Hierarchical Integration, Flow Visualization, WebGL.

Abstract:

Visualization of vector ﬁelds plays an important role in research activities nowadays. Increasing web appli-

cations allow a fast, multi-platform and multi-device access to data. As a result, web applications must be

optimized in order to be performed heterogeneously as well as on high-performance as on low capacity de-

vices. This paper presents a hardware-accelerated scheme for integration-based ﬂow visualization techniques,

based on a hierarchical integration procedure which reduces the computational effort of the algorithm from

linear to logarithmic, compared to serial integration methodologies. The contribution relies on the fact that

the optimization is only implemented using the graphics application programming interface (API), instead of

requiring additional APIs or plug-ins. This is achieved by using images as data storing elements instead of

graphical information matrices. A case study in oceanic currents is implemented.

1 INTRODUCTION

Vector ﬁeld visualization has an important role in

the automotive and aero-spatial industries, maritime

transport, engineering activities and others. It allows

the detection of particularities of the ﬁeld such as vor-

texes or eddies in ﬂow ﬁelds, but also permits ex-

ploring the entire ﬁeld behavior, determining stream

paths.

In what regards to WebGL, integration based ﬂow

visualization, such as Line Integral Convolution (LIC)

might not be suitable, since in order to build the

integrals, several computational cycles must be per-

formed, hence, low capacity devices might have per-

formance issues. Therefore optimization procedures

must be applied.

Our contribution is a hardware-accelerated opti-

mization scheme for LIC ﬂow visualization imple-

mented in WebGL. The optimization is based on a

hierarchical integration procedure (Hlawatsch et al.,

2011), which reuses previously calculated informa-

tion in order to build the integrals and therefore

avoids unnecessary calculations. Compared with

other methodologies, our implementation only re-

quires WebGL API to be performed, as it employs im-

ages as data storing elements instead of graphical in-

formation matrices. This images are rendered with

the WebGL API, hence parallel computing perfor-

mance is achieved without additional APIs such as

CUDA or OpenCL.

This paper is organized as follows. Section 2

presents the related work. Section 3 exposes the

methodology of LIC ﬂow visualization and its opti-

mization. Section 4 presents a case of study in oceanic

currents and ﬁnally the conclusions of our work are

presented in section 5.

2 LITERATURE REVIEW

A great amount of methodologies to visualize vector

ﬁelds (ﬂow ﬁelds) has been developed among the last

decades. Geometric-based approaches draw icons on

the screen whose characteristics represent the behav-

ior of the ﬂow (as velocity magnitude, vorticity, etc).

Examples of these methodologies are arrow grids

(Klassen and Harrington, 1991), streamlines (Ken-

wright and Mallinson, 1992) and streaklines (Lane,

1994). However, as these are discrete approaches, the

placement of each object is critical to detect the ﬂow’s

759

Aristizabal M., Congote J., Segura A., Moreno A., Arregui H. and Ruiz O..

HARDWARE-ACCELERATED WEB VISUALIZATION OF VECTOR FIELDS - Case Study in Oceanic Currents.

DOI: 10.5220/0003843707590763

In Proceedings of the International Conference on Computer Graphics Theory and Applications (IVAPP-2012), pages 759-763

ISBN: 978-989-8565-02-0

Copyright

c

2012 SCITEPRESS (Science and Technology Publications, Lda.)

anomalies (such as vortexes or eddies), and therefore,

data preprocessing is needed to perform an illustra-

tive ﬂow visualization. Reference (McLoughlin et al.,

2010) presents an up-to-date survey on geometric-

based approaches.

On the other hand, texture-based approaches rep-

resent both a more dense and a more accurate visual-

ization, which can easily deal with the ﬂow’s feature

representation as a dense and semi-continuous ﬂow

visualization is produced. A deep survey in the topic

on texture-based ﬂow visualization techniques is pre-

sented by (Laramee et al., 2004).

Reference (Van Wijk, 2002) implements an ani-

mated ﬂow visualization technique in which a noise

image is bended out by the vector ﬁeld, and then

blended with a number of background images. In

(Van Wijk, 2003) the images are then mapped to a

curved surface, in which the transformed image visu-

alizes the superﬁcial ﬂow.

Line Integral Convolution (LIC), presented by

(Cabral and Leedom, 1993), convolves the associated

texture-pixels (texels) with some noise ﬁeld (usually a

white noise image) over the trajectory of each texel in

the vector ﬁeld. This methodology has been extended

to represent animated (Forssell and Cohen, 1995), 3D

(Liu and Moorhead II, 2004) and time varying (Liu

and Moorhead, 2005; Liu and Moorhead II, 2004)

ﬂow ﬁelds.

An acceleration scheme for integration-based ﬂow

visualization techniques is presented by (Hlawatsch

et al., 2011). The optimization relies on the fact

that the integral curves (such as LIC) are hierarchi-

cally constructed using previously calculated data,

and, therefore, avoid unnecessary calculations.

Several WebGL implementations of different ap-

plications have been done such as volume rendering,

presented by (Congote et al., 2011) or visualization

of biological data, presented by (Callieri et al., 2010).

However, for the best of our knowledge, no other im-

plementation that regards to LIC ﬂow visualization on

WebGL has been found in the literature or in the Web.

Conclusion of the Literature Review: WebGL im-

plementations allow to perform applications for het-

erogeneous architectures in a wide range of devices

from low-capacity smart phones to high-performance

workstations, without any external requirement of

plug-ins or applets. As a result, optimized applica-

tions must be developed. In response to that, this

work optimizes the visualization of 2D steady vector

ﬁelds using images as data storing elements instead

of graphical information matrices. As a consequence,

previously calculated data is reused, avoiding unnec-

essary calculations, and reducing the complexity of

the algorithm to O(logN). Hence, only the graphics

API is required for its implementation, preserving the

multi-platform purpose of the application.

3 METHODOLOGY

This article addresses the optimization of integration-

based ﬂow visualization procedures using only the

graphics API. It starts from a 2D vector ﬁeld F : X →

R

2

, with X ⊆ R

2

, representing the velocity at each

point inside the ﬁeld. An image represented as the 2D

matrix M : [1, h

M

] × [1, w

M

] → (R, G, B, A), with h

M

and w

M

representing its height and width respectively

in pixels, and a noise ﬁeld W : R

2

→ R, both mapping

to F.

The goal is to calculate a 2D matrix I : [1, h

I

] ×

[1, w

I

] → (R, G, B, A) that deﬁnes an image, with h

I

and w

I

representing its height and width in pixels.

Each pixel is a four-component vector (R, G, B, A) of

red, green, blue and alpha values (R, G, B, A ∈ [0, 1]).

3.1 Line Integral Convolution

In order to visualize 2D vector ﬁeld, the procedure

convolves the mapping image M with its noise ﬁeld W

along the trajectory of each point in the vector ﬁeld, as

proposed by (Cabral and Leedom, 1993). For this pur-

pose, let us deﬁne q as an arbitrary point in the ﬁeld.

Hence, for its associated ﬁnite trajectory c (extracted

from F), with p(s) ∈ c, and s the parameter associated

to c, the resulting image is obtained as follows:

I(q) =

R

c

M(p(s))W (p(s))ds

R

c

W (p(s))ds

(1)

q = p(0)

c

s

s > 0

s < 0

Figure 1: Trajectory of the point p inside F.

Note that q represents the starting point of the tra-

jectory that is going to be convolved (i.e. p(0) = q),

and the trajectory c evaluates the upstream (s > 0) and

downstream (s < 0) directions. This integral is per-

formed for all q ∈ X .

For a computer implementation, a discrete calcu-

lation of the integral is required. As a result, a PL ap-

proximation of c is performed using a ﬁrst-order ap-

IVAPP 2012 - International Conference on Information Visualization Theory and Applications

760

proximation of the point’s displacement, and the inte-

grals are calculated using an Eulerian-based method.

3.2 Hierarchical Integration

Integration over massive point trajectories in n-

dimensional vector ﬁelds suffer from unnecessary

step calculations since several points in the ﬁeld might

lie over the same trajectory and therefore share por-

tions of the integrals (see ﬁgure 2). In response to

this, hierarchical integration (Hlawatsch et al., 2011)

only calculates the necessary steps and then itera-

tively grows the integrals reusing the data, reduc-

ing the computational complexity of the algorithm

from O(N), using serial integration methodology, to

O(logN). The procedure is summarized as follows.

s

y=x(0)

x(1)

x(2)

f(x(0))

f(x(1))

f(x(2))

Figure 2: Trajectory overlapping in line integral evaluation.

Let us deﬁne some arbitrary line integral f : Y →

R

m

, with Y ⊆ R

n

, bounded by its trajectory c, and its

discrete approximation like described in equation 2.

f (y) =

Z

c

w(x(s))ds ≈

t

∑

i=1

w(x(i))∆s (2)

where t is is the maximum number of steps, repre-

senting the curve length, x(0) = y is the starting point

of the trajectory path. The integration procedure is

performed for all points y ∈ Y in parallel.

For the sake of simplicity assume that ∆s = 1 ,

∀y ∈ Y and therefore f (y) ≈

t

∑

i=1

w(x(i)). The algo-

rithm starts with the calculation of the ﬁrst integration

step for all the points in the ﬁeld, this is:

f

0

(y) = w(x(1)) (3)

It is required to store the last evaluated point x(1)

over the growing trajectory and the value of f

1

(y) for

every point in order to reuse them in the following

steps to build the integral. With this, the following is

to update the value of the integral, using the sum of

the previously calculated step at y and the step evalu-

ated at its end point (x(1)), namely,

f

1

(y) = f

0

(x(0)) + f

0

(x(1)) (4)

In this case, the end point of f

1

(x(0)) is x(2) as the

calculation evaluates f

0

(x(1)), and therefore the next

iteration must evaluate f at x(0) and x(2) in order to

grow the integral. In general, the k’th iteration of the

procedure is calculated as

f

k

(y) = f

k−1

(x(0)) + f

k−1

(x(end)) (5)

where ’end’ represents the parameter associated to the

tail point of the trajectory.

3.3 Data Storing

Despite graphics APIs does not allow to transfer data

calculated on shaders (such as matrices, vectors or

single values), between rendering procedures, they

can transfer images. An image is a 2D matrix that

stores at each position a four-component vector that

deﬁnes its color, i.e. [1, h]×[1, w] → (R, G, B, A), with

h and w its height and width in pixels respectively. A

pixel color is deﬁned by red, green blue and alpha val-

ues (R, G, B, A ∈ [0, 1]).

As a result, for any ﬁeld X ∈ R

2

it is possible to

store four values associated to any point p

j

∈ X in an

image that maps to X. Note that pixels are discrete

values and p

j

might be continuous. In this case, av-

erage and interpolation of data are required to both

read and write the values on the image that maps to

the ﬁeld, and therefore avoid high error between cal-

culations. If more than four values are required to be

stored, it is needed to render (calculate) more than one

image in order to store those values.

4 CASE STUDY

Many data services regards to the measurement of

earth’s information such as wind ﬂow, superﬁcial tem-

perature, ocean salinity and others. For this applica-

tion, the vector ﬁeld that deﬁnes the velocity is re-

quired. The Global Ocean Data Assimilation System

(GODAS)

1

provides this information in a netCDF for-

mat (Hankin et al., 2010), which allows, throughout

servers, to visualize the data as an image informa-

tion. The ocean’s longitudinal and latitudinal com-

ponents of the velocities are gray-scale images. They

represent for a full white color (R = G = B = 1.0) a

velocity component of 3.0 and for a full black color

(R = G = B = 0.0) a velocity component of -3.0.

Taking advantage of massive parallel computing

capabilities and data interpolation of SIMD program-

ming architectures, it is possible to optimize the cal-

culation of the integrals using images. Although

1

http://www.esrl.noaa.gov/psd/

HARDWARE-ACCELERATED WEB VISUALIZATION OF VECTOR FIELDS - Case Study in Oceanic Currents

761

graphic libraries can not return or store previously cal-

culated data as arbitrary matrices, they are capable of

performing render-to-texture operations. This allows

to store a rendered image in GPU’s memory instead

of displaying it, to then access it from another render-

ing procedure and access its information. As a result,

images might be used as data storing elements instead

of graphical information matrices.

Regarding that LIC integrates along both the up-

stream and the downstream directions hierarchical in-

tegration must be implemented separately for each di-

rection and then merged to obtain the ﬁnal image I.

The mapping image (M) is a gray-scale noise im-

age. Therefore the values of each color components

are the same for each pixel, i.e. R = G = B. The

weight ﬁeld used is W (q) = 1.0 ∀q ∈ X. In order

to perform LIC with hierarchical integration, for both

directions, one value is needed to store the partial in-

tegral (since M is single-valued), and two values are

required to store the two coordinates that deﬁne the

ﬁnal point of the partially evaluated trajectory. As a

consequence, two images are required to store the val-

ues for each point q in the ﬁeld. For this purpose let

us deﬁne the following convention of data storing in

the next two images in order to store the data:

Image Q : [1, h

Q

] × [1, w

Q

] → (R, G, B, A), is used

to store the data in the upstream direction for each

point q

j

in the ﬁeld. The ﬁrst component (where the

red component is stored) is used to store the partially

evaluated convolution and the second and third com-

ponents (green and blue components) store the coor-

dinates of the tail point of the trajectory. The fourth

component is always used as 1.0. Note that since the

weight ﬁeld is 1.0 for all points in the ﬁeld, the con-

volution becomes the average of all values of M along

the partially evaluated trajectory. As a result, the up-

date throughout the iterations of the image is calcu-

lated as follows

Q

k

(q

j

) =

Q

k−1

(p(0)).R+Q

k−1

(p(end)).R

2

Q

k−1

(p(end)).G

Q

k−1

(p(end)).B

(6)

As a consequence, the ﬁnal visualization of the

ﬂow is calculated as the average between the integral

components of images Q and S.

4.1 Data Storage in WebGL

WebGL permits to set up vertex and index buffers,

to change rendering engine state such as active tex-

ture units or transform matrices, and to invoke draw-

ing primitives. It also allows to perform render-to-

texture operations using FBOs, which allow to render

into images instead than displaying the information.

WebGL also incorporates ﬂoating-point texture man-

agement as color attachments in FBOs, which enables

to store the rendered images with ﬂoating point preci-

sion values, instead of 8-bit integers.

In order to perform render-to-texture operations in

WebGL it is needed to deﬁne the necessary FBOs.

Each FBO has an associated texture (image) to which

the rendering code is performed. Additionally, for the

matter of this implementation, it is important to con-

sider that when the rendering procedure of an FBO is

being performed, it does not allow to access the same

memory space (in GPU) to which the rendering oper-

ation will write the information.

As a result, the ﬂow visualization, regarding the

hierarchical integration, requires the twice as FBOs

than the number of rendered images, this is, one FBO

is used to calculate and update the image and the other

is used to copy the resulting image in another place of

memory in order to allow data to be reused for the

next iteration. Hence 4 FBOs are required to perform

LIC ﬂow visualization for this case study.

4.2 Flow Visualization in WebGL

Final results are shown in ﬁgure 3. The ﬁnal LIC

image I is used to determine the brightness of each

point in the ﬁeld. Color-mapping is determined by

the speed at each point in a warm-cold color-scale.

Figure 3: Visualization of the Paciﬁc and Atlantic oceans

currents using LIC with hierarchical line integration in We-

bGL. Four iterations achieve 32 integration steps and shows

distinguishable streams.

Final results were obtained after 4 hierarchical it-

erations (see ﬁgure 3), this is, 16 total integration

steps for both the upstream and downstream direc-

tions, making a detailed visualization with long and

distinguishable trajectories.

IVAPP 2012 - International Conference on Information Visualization Theory and Applications

762

5 CONCLUSIONS AND FUTURE

WORK

This article presents a hardware accelerated LIC ﬂow

visualization in WebGL. The procedure is suitable to

be performed on multi-platform and in low-capacity

devices such as smart phones and tablet computers

since no other API or plug-in is required to perform

the procedure, and the number of iterations that is

usually required is reduced. The procedure is not

only suitable for WebGL implementation but for any

render-to-texture capable parallel graphics implemen-

tation.

It is proposed the development of a human user in-

teraction application for the visualization of oceanic

currents as a subsequent activity to this work. Apart

from this, other topics might be suitable as future

work such as the implementation of this methodology

to visualize 3D vector ﬁelds and to other integration-

based visual applications.

ACKNOWLEDGEMENTS

This work was partially supported by the Basque

Government’s ETORTEK Project (ITSASEUSII) re-

search program and CAD/CAM/CAE Laboratory at

EAFIT University and the Colombian Council for

Science and Technology COLCIENCIAS. GODAS

data (ocean velocity information) was provided by the

NOAA/OAR/ESRL PSD, Boulder, Colorado, USA,

from their Web site at http://www.esrl.noaa.gov/psd/,

and ohter information such as earth’s bathymet-

ric, topologic and satellite images, was provided by

the NASA’s Earth Observatory from their web site

http://earthobservatory.nasa.gov/.

REFERENCES

Cabral, B. and Leedom, L. (1993). Imaging vector ﬁelds

using line integral convolution. In Proceedings of the

20th annual conference on Computer graphics and in-

teractive techniques, pages 263–270. ACM.

Callieri, M., Andrei, R., Di Benedetto, M., Zopp

`

e, M.,

and Scopigno, R. (2010). Visualization methods for

molecular studies on the web platform. In Proceed-

ings of the 15th International Conference on Web 3D

Technology, pages 117–126. ACM.

Congote, J., Segura, A., Kabongo, L., Moreno, A., Posada,

J., and Ruiz, O. (2011). Interactive visualization of

volumetric data with webgl in real-time. In Proceed-

ings of the 16th International Conference on 3D Web

Technology, pages 137–146. ACM.

Forssell, L. and Cohen, S. (1995). Using line integral

convolution for ﬂow visualization: Curvilinear grids,

variable-speed animation, and unsteady ﬂows. Visu-

alization and Computer Graphics, IEEE Transactions

on, 1(2):133–141.

Hankin, S., Blower, J., Carval, T., Casey, K., Donlon, C.,

Lauret, O., Loubrieu, T., Srinivasan, A., Trinanes,

J., Godoy, O., et al. (2010). Netcdf-cf-opendap:

Standards for ocean data interoperability and object

lessons for community data standards processes. In

Oceanobs 2009, Venice Convention Centre, 21-25

septembre 2009, Venise.

Hlawatsch, M., Sadlo, F., and Weiskopf, D. (2011). Hier-

archical line integration. Visualization and Computer

Graphics, IEEE Transactions on, 99:1–1.

Kenwright, D. and Mallinson, G. (1992). A 3-d stream-

line tracking algorithm using dual stream functions.

In Proceedings of the 3rd conference on Visualiza-

tion’92, pages 62–68. IEEE Computer Society Press.

Klassen, R. and Harrington, S. (1991). Shadowed hedge-

hogs: A technique for visualizing 2d slices of 3d vec-

tor ﬁelds. In Proceedings of the 2nd conference on

Visualization’91, pages 148–153. IEEE Computer So-

ciety Press.

Lane, D. (1994). Ufat: a particle tracer for time-dependent

ﬂow ﬁelds. In Proceedings of the conference on Visu-

alization’94, pages 257–264. IEEE Computer Society

Press.

Laramee, R. S., Hauser, H., Doleisch, H., Vrolijk, B., Post,

F. H., and Weiskopf, D. (2004). The state of the art

in ﬂow visualization: Dense and texture-based tech-

niques. In Computer Graphics Forum, volume 23,

pages 203–221. Wiley Online Library.

Liu, Z. and Moorhead, R. (2005). Accelerated unsteady

ﬂow line integral convolution. IEEE Transactions

on Visualization and Computer Graphics, pages 113–

125.

Liu, Z. and Moorhead II, R. (2004). Visualizing time-

varying three-dimensional ﬂow ﬁelds using acceler-

ated uﬂic. In The 11th International Symposium on

Flow Visualization, pages 9–12. Citeseer.

McLoughlin, T., Laramee, R. S., Peikert, R., Post, F. H., and

Chen, M. (2010). Over two decades of integration-

based, geometric ﬂow visualization. In Computer

Graphics Forum, volume 29, pages 1807–1829. Wi-

ley Online Library.

Van Wijk, J. (2003). Image based ﬂow visualization for

curved surfaces. In Proceedings of the 14th IEEE Vi-

sualization 2003 (VIS’03), page 17. IEEE Computer

Society.

Van Wijk, J. J. (2002). Image based ﬂow visualization. In

ACM Transactions on Graphics (TOG), volume 21,

pages 745–754. ACM.

HARDWARE-ACCELERATED WEB VISUALIZATION OF VECTOR FIELDS - Case Study in Oceanic Currents

763