Web gl api to render interactive graphics in html
•Download as PPTX, PDF•
0 likes•640 views
Recommended
More Related Content
Similar to Web gl api to render interactive graphics in html
Similar to Web gl api to render interactive graphics in html (20)
Recently uploaded
Recently uploaded (20)
Web gl api to render interactive graphics in html
- 1. Anuj Deshpande 3216 Seminar guide – Prof. Atish Londhe
- 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 Anuj Deshpande 2
- 3. Added in HTML5 What all can it do ? Supported on : ◦ Firefox ◦ Safari ◦ Opera ◦ IE (>9) ◦ Chrome Anuj Deshpande 3
- 4. History OpenGL ES Collabarative effort Integration with DOM Anuj Deshpande 4
- 5. Integration with browsers Why low level ? Hardware accelerated graphics ANGLE for Microsoft Anuj Deshpande 5
- 6. Paper published in Shadong University Browser/server vs. Client/server Security X3DOM Anuj Deshpande 6
- 8. Platforms ◦ Windows 8 ◦ Debian GNU/Linux ◦ Andorid 4.2.2 Browsers ◦ Opera ◦ Chrome ◦ Firefox ◦ IE/default browser Anuj Deshpande 8
- 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() Anuj Deshpande 9
- 12. History of Flash Why Flash is such a predominant technology on the web ? Drawbacks of Flash Advantages of WebGL Drawbacks of WebGL Anuj Deshpande 12
- 13. Khronos group Apple, Google, Adobe Almost all major browsers Why NOT Microsoft ? Anuj Deshpande 13
- 14. Frameworks ◦ Need ◦ Examples Research and development being done using WebGL Anuj Deshpande 14
- 15. WebGL : still a work in progress Research WebGL is the future of graphics on the Web Anuj Deshpande 15
- 16. For architecture http://stackoverflow.com/questions/732847 2/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," Anuj Deshpande 16
Editor's Notes
- HTML5Client/server vs browser/serverWhat is webglArchitectureFrameworks availableDOM interfacesFlash vs WebGLHistory – opengl Cross platform Support community who is backing webgl – in short it shows a serious commitment to webgl as a technology to key players in the industrtyOpen source nature and development its advantagesAreas where it can be and is being used : games, advertisements, 3D web, CAD,
- Added in HTML5, the HTML <canvas> element is an element which can be used to draw graphics via scripting (usually JavaScript).draw graphs, make photo compositions, create animations or even do real-time video processing or renderingused by WebGL to do hardware-accelerated 3D graphics on web pagesHTML 5 canvas element The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.the canvas tag can be styled with CSS, be under or over other parts of the page. Is composited (blended) with other parts of the page. Be transformed, rotated, scaled by CSS along with other parts of the page. That's a big difference from OpenGL or OpenGL ES.
- Hardware-accelerated 3D graphicsCollabarativeRendering graphics on the flyWebGL is a cross-platform, royalty-free API used to create 3D graphics in a Web browser. Based on OpenGL ES 2.0, WebGL uses the OpenGL shading language, GLSL, and offers the familiarity of the standard OpenGL API. Because it runs in the HTML5 Canvas element, WebGL has full integration with all Document Object Model (DOM) interfaces. Efforte WebGL API is essentially just a set of (browser-supplied) JavaScript functions which wrap around the OpenGL ES specification. So if you know OpenGL ES, you can adopt WebGL pretty quickly. Don't confuse this with pure OpenGL, though. The "ES" is important.The WebGL spec was intentionally left very low-level, leaving a lot to be re-implemented from one application to the next. It is up to the community to write frameworks for automation, and up to the developer to choose which framework to use (if any). It's not entirely difficult to roll your own, but it does mean a lot of overhead spent on reinventing the wheel. (FWIW, I've been working on my own WebGL framework called Jax for a while now.)
- e WebGL API is essentially just a set of (browser-supplied) JavaScript functions which wrap around the OpenGL ES specification. So if you know OpenGL ES, you can adopt WebGL pretty quickly. Don't confuse this with pure OpenGL, though. The "ES" is important.The WebGL spec was intentionally left very low-level, leaving a lot to be re-implemented from one application to the next. It is up to the community to write frameworks for automation, and up to the developer to choose which framework to use (if any). It's not entirely difficult to roll your own, but it does mean a lot of overhead spent on reinventing the wheel. (FWIW, I've been working on my own WebGL framework called Jax for a while now.)Hardware-accelerated 3D graphicsCollabarative Rendering graphics on the flyWebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group. Hardware acceleratedBrowsers are the key, no need for applicationThe browser is just that, a Web browser. All it does is expose the WebGL API (via JavaScript), which the programmer does everything else with.As near as I can tell, the WebGL API is essentially just a set of (browser-supplied) JavaScript functions which wrap around the OpenGL ES specification. So if you know OpenGL ES, you can adopt WebGL pretty quickly. Don't confuse this with pure OpenGL, though. The "ES" is important.The WebGL spec was intentionally left very low-level, leaving a lot to be re-implemented from one application to the next. It is up to the community to write frameworks for automation, and up to the developer to choose which framework to use (if any). It's not entirely difficult to roll your own, but it does mean a lot of overhead spent on reinventing the wheel. (FWIW, I've been working on my own WebGL framework called Jax for a while now.)gl_Position = PROJECTION_MATRIX * VIEW_MATRIX * MODEL_MATRIX * VERTEX_POSITIONThe graphics driver supplies the implementation of OpenGL ES that actually runs your code. At this point, it's running on the machine hardware, below even the C code. While this is what makes WebGL possible in the first place, it's also a double edged sword because bugs in the OpenGL ES driver (which I've noted quite a number of already) will show up in your Web application, and you won't necessarily know it unless you can count on your user base to file coherent bug reports including OS, video hardware and driver versions. Here's what the debug process for such issues ends up looking like.On Windows, there's an extra layer which exists between the WebGL API and the hardware: ANGLE, or "Almost Native Graphics Layer Engine". Because the OpenGL ES drivers on Windows generally suck, ANGLE receives those calls and translates them into DirectX 9 calls instead.
- PaperThis paper proposes an effective method totransfer the software development from conventional C/S(Client/Server) mode to B/S (Browser/Server) mode for thevisualization of intelligent grid. The results show that theWebGL-based system model is feasible and practicable, and itincreases the range of intelligent grid visualizations and reducesthe maintenance costsX3DOM is a framework for integrating and manipulating (X)3D scenes as HTML5 DOM elements, which are rendered via an X3D plugin, Flash/Stage3D or WebGL. The open-source system allows defining 3D scene description and runtime behavior declaratively, without any low-level JavaScript or GLSL coding. X3DOM is used in [3] to visualize a power grid application of an intelligent grid and security control.
- History of flash : has been around for over a decadeAdobe Flash (formerly called "Macromedia Flash") is a multimedia and softwareplatform used for authoring of vector graphics, animation, games and Rich Internet Applications (RIAs) which can be viewed, played and executed in Adobe Flash Player. Flash is frequently used to add streamed video or audio players, advertisement and interactive multimedia content to web pages, although usage of Flash on websites is declining.[1]Very matureVery oldreliable An API that is based on a familiar and widely accepted 3D graphics standard Cross-browser and cross-platform compatibility Tight integration with HTML content, including layered compositing, interaction with other HTML elements, and use of the standard HTML event handling mechanisms Hardware-accelerated 3D graphics for the browser environment A scripting environment that makes it easy to prototype 3D graphics—you don't need to compile and link before you can view and debug the rendered graphics