web gl api to render interactive graphics in html
TRANSCRIPT
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