web gl api to render interactive graphics in html
TRANSCRIPT
![Page 1: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/1.jpg)
WebGL API to render interactive graphics in
HTML5Anuj Deshpande
3216Seminar guide – Prof. Atish Londhe
![Page 2: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/2.jpg)
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
![Page 3: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/3.jpg)
Anuj Deshpande 3
Added in HTML5 What all can it do ? Supported on :
◦ Firefox◦ Safari◦ Opera◦ IE (>9)◦ Chrome
HTML5 and <canvas>
![Page 4: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/4.jpg)
Anuj Deshpande 4
History
OpenGL ES
Collabarative effort
Integration with DOM
What is WebGL ?
![Page 5: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/5.jpg)
Anuj Deshpande 5
Integration with browsers
Why low level ?
Hardware accelerated graphics
ANGLE for Microsoft
Architecture
![Page 6: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/6.jpg)
Anuj Deshpande 6
Paper published in Shadong University
Browser/server vs. Client/server
Security
X3DOM
A WebGL-based method for visualization of intelligent grid
![Page 7: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/7.jpg)
Anuj Deshpande 7
Visualization
![Page 8: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/8.jpg)
Anuj Deshpande 8
Platforms
◦ Windows 8
◦ Debian GNU/Linux
◦ Andorid 4.2.2
Browsers
◦ Opera
◦ Chrome
◦ Firefox
◦ IE/default browser
Benchmarking
![Page 9: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/9.jpg)
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
![Page 10: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/10.jpg)
Anuj Deshpande 10
Demo
![Page 11: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/11.jpg)
Anuj Deshpande 11
Results
![Page 12: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/12.jpg)
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
![Page 13: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/13.jpg)
Anuj Deshpande 13
Khronos group
Apple, Google, Adobe
Almost all major browsers
Why NOT Microsoft ?
Community
![Page 14: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/14.jpg)
Anuj Deshpande 14
Frameworks
◦ Need
◦ Examples
Research and development being done
using WebGL
Development
![Page 15: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/15.jpg)
Anuj Deshpande 15
WebGL : still a work in progress Research WebGL is the future of graphics on the Web
Concluding remarks
![Page 16: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/16.jpg)
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
![Page 17: Web gl api to render interactive graphics in html](https://reader034.vdocument.in/reader034/viewer/2022052505/554bd881b4c905706a8b52c7/html5/thumbnails/17.jpg)
Anuj Deshpande 17
Thank you