web gl api to render interactive graphics in html

WebGL API to render interactive graphics in

HTML5Anuj Deshpande

3216Seminar guide – Prof. Atish Londhe

Anuj Deshpande 2

1. HTML5 and <canvas>

2. What is WebGL?

3. Architecture

4. A WebGL-based method for visualization of intelligent grid

5. Benchmarking

6. Flash vs. WebGL

7. Community

8. Development

9. Concluding remarks

Contents

Anuj Deshpande 3

Added in HTML5 What all can it do ? Supported on :

◦ Firefox◦ Safari◦ Opera◦ IE (>9)◦ Chrome

HTML5 and <canvas>

Anuj Deshpande 4

History

OpenGL ES

Collabarative effort

Integration with DOM

What is WebGL ?

Anuj Deshpande 5

Integration with browsers

Why low level ?

Hardware accelerated graphics

ANGLE for Microsoft

Architecture

Anuj Deshpande 6

Paper published in Shadong University

Browser/server vs. Client/server

Security

X3DOM

A WebGL-based method for visualization of intelligent grid

Anuj Deshpande 7

Visualization

Anuj Deshpande 8

Platforms

◦ Windows 8

◦ Debian GNU/Linux

◦ Andorid 4.2.2

Browsers

◦ Opera

◦ Chrome

◦ Firefox

◦ IE/default browser

Benchmarking

Anuj Deshpande 9

Init() Set scene parameters like width, height Configure camera. Set values like view angle, aspect ratio, etc Check for WebGL renderer Initialize mouse controls and set lighting conditions Initialize statistics control panel Add all of the parameters to the already initialized scene

variable

Animate() render()

reload scene and camera with the current control inputs update()

update controls and statistics to reflect the latest state Animate()

Algorithm

Anuj Deshpande 10

Demo

Anuj Deshpande 11

Results

Anuj Deshpande 12

History of Flash

Why Flash is such a predominant

technology on the web ?

Drawbacks of Flash

Advantages of WebGL

Drawbacks of WebGL

Flash vs. WebGL

Anuj Deshpande 13

Khronos group

Apple, Google, Adobe

Almost all major browsers

Why NOT Microsoft ?

Community

Anuj Deshpande 14

Frameworks

◦ Need

◦ Examples

Research and development being done

using WebGL

Development

Anuj Deshpande 15

WebGL : still a work in progress Research WebGL is the future of graphics on the Web

Concluding remarks

Anuj Deshpande 16

For architecture http://stackoverflow.com/questions/7328472/how-webgl-works

Official documentation at https://www.khronos.org/webgl/

Weigang Zhang; Hao Yuan; Jiangong Wang; Zhonghua Yan; , "A WebGL-based method for visualization of intelligent grid,"

References

Anuj Deshpande 17

Thank you