Ibrahim Demir

for Hydrological and Atmospheric Simulations

and Visualizations on the Web

GPGPU Applications

Big Data

We are collecting and generating data on a

petabyte scale (1Pb = 1,000 Tb = 1M Gb)

Data contains valuable information that can

drive insights and discoveries

It can be difficult to access, manage,

and generate knowledge and

decisions from this “big data”

JS x 100 - Multicore CPU/GPU

Big Data Analytics

Desktop-like Games

Scientific Visualization

Image / Video Processing

Augmented / Immersive Reality

NVIDIA Titan X – 5760 Cuda Cores

8 TFLOPs compute power

Web 3.0 and GPU

CPU-based Computations

JavaScript (parallel / multi-core)

SIMD.js

ASM.js

GPU-based Computations

WebCL

WebGL

Computing on the Web

Pure JavaScript

50-100x speed improvement

Parallel JavaScript

Web Workers / Multi-core CPU

Background Thread / window-less tab

Distributed volunteer computing applications on the client side

JavaScript

SIMD stands for Single Instruction Multiple Data, and for performing

operations on multiple data elements, in parallel.

SIMD.js is a new API being developed by Intel, Google, and Mozilla. One

of the uses of SIMD is to accelerate processing of large arrays of data.

SIMD.js will accelerate a wide range of demanding applications today,

including games, video and audio manipulation, scientific simulations, and

more, on the web.

SIMD.js

ASM.JS is a highly optimized subset of JS

designed to provide near-native application

performance in a browser, and well suited for

any computationally intensive task.

ASM.js

WebCL (Web Computing Language) is a JavaScript binding to OpenCL

for parallel computing within any compatible web browser without plug-ins.

WebCL allows web applications to actualize speed with multi-core CPUs

and GPUs; this intends to make computationally intensive programs feasible

in the browser, e.g. physics engines, canvas element and video editing.

WebCL is designed and maintained by the Khronos Group. The completed

specification for WebCL 1.0 was released on March 19, 2014.

WebCL

WebGL is a powerful part of the new HTML5 standard, bringing graphics

card capabilities directly to the browser.

To get WebGL to perform scientific calculations, simply trick GPU by

pretending that it is rendering graphics.

GPU executes Fragment Shader for every pixel of output image after

geometry rasterization to calculate resulting colors. For GPGPU

calculations, put your functions here, and calculate a new value of a

simulation cell represented by a texture pixel.

WebGL

GPGPU

The GPGPU is General Purpose computing on GPUs.

GPGPU operates by using graphics methods and primitives to

perform general purpose computations.

For example, textures are used as memory, while shaders are

programmed to be used as kernels, which are computed on each

graphics primitive.

What is GPGPU?

WATERSHED DELINEATION

40m grid cells – 90m res.

150mb terrain raster data

converted to

5mb custom image data

9 directions

WATERSHED DELINEATION

INSTANT

OFFLINE

Video

https://www.youtube.com/watch?v=lVMN76sdCrA

WATERSHED DELINEATION

WEBGL

SHADER

40m grid cells – 90m resolution

150mb terrain raster data

converted to

5mb custom image data

9 directions

Dynamic texture size

Data in multi color channels

Multi level processing in

each iteration

WATERSHED DELINEATION

WEBGL

SHADER

FLOOD VISUALIZER

• Reflections and refractions• Ambient occlusion• Height-field water simulation• Shadows

FLOOD VISUALIZER

IMMERSIVE

REALISTIC

Video

https://www.youtube.com/watch?v=vX8UNdM44_c

DYNAMIC DATA

HIGH-RESOLUTION

FLOW VISUALIZATION

DYNAMIC DATA

HIGH-RESOLUTION

FLOW VISUALIZATION

Video

https://www.youtube.com/watch?v=PWY4z-7hOuQ

Dynamic Objects

Static Objects

Levee/Dam

River System

GAME PHYSICS

VIRTUAL REALITY

Dynamic Objects

Static Objects

Levee/Dam

River System

GAME PHYSICS

VIRTUAL REALITY

Video

https://www.youtube.com/watch?v=DXrBkjr7nec

Webcam

Marker

Augmented Projection

AUGMENTED REALITY

MARKER DETECTION

Augmented Projection

Table

Marker

AUGMENTED REALITY

MARKER DETECTION

Augmented Projection

Table

Marker

AUGMENTED REALITY

MARKER DETECTION

Video

https://www.youtube.com/watch?v=eHgM_0rw1bY

Distorted Projection of Scene

IMMERSIVE REALITY

HEADS-UP DISPLAY

Distorted Projection of Scene

IMMERSIVE REALITY

HEADS-UP DISPLAY

Video

https://www.youtube.com/watch?v=tY9QaDHnyAU

Controls and Interaction

Motion Tracking

Gesture Tracking

Remote

Interaction GESTURE CONTROLS

MOTION TRACKING

Large Scale Geospatial

Data Visualization

FLOOD MAP FLIGHT SIMULATOR

3-DIMENSIONAL

REMOTE INTERACTION

FLOOD MAP FLIGHT SIMULATOR

3-D ENGAGING

REMOTE INTERACTION

Video

https://www.youtube.com/watch?v=6ZzLT_8U6fk

Rainfall Maps

550 hours (2200 steps) of data

RAINFALL & RIVER DRAINAGE

3D PERSPECTIVE VIEW

550 hours (2200 steps) of data

RAINFALL & RIVER DRAINAGE

3D PERSPECTIVE VIEW

Video

https://www.youtube.com/watch?v=FhmMAzyd7fI

RAINFALL PRODUCT DATA BROWSER

SPECIAL GRID

WEBGL + GPU

http://ifis.iowafloodcenter.org

Iowa Flood Information System

Thank you

Ibrahim Demir

ibrahim-demir @ uiowa.edu

http://myweb.uiowa.edu/demir/

Questions