1 / 23

Introduction to WebGL

Introduction to WebGL. Greg Balek. Structure. What is WebGL Introduction to Graphics Simple Example 3 rd Party Dev Tools. Overview. WebGL is a JavaScript API for rendering interactive 3D and 2D graphics Supported on all current browsers GPU accelerated Integrates with HTML5 Canvas.

kevlyn
Download Presentation

Introduction to WebGL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to WebGL Greg Balek

  2. Structure • What is WebGL • Introduction to Graphics • Simple Example • 3rd Party Dev Tools

  3. Overview • WebGL is a JavaScript API for rendering interactive 3D and 2D graphics • Supported on all current browsers • GPU accelerated • Integrates with HTML5 Canvas

  4. Graphics & Rendering • Every image on an electronic screen is just a 2D array of pixels • Rendering to 3D means coloring the pixels to produce a convincing illusion

  5. GPU & Rasterization • Can offload the computationally intensive rendering process to the GPU • Rasterizer draws all images triangle by triangle, creating a mesh • WebGL calls this a “TRIANGLE_STRIP” 5 4 3 2 1

  6. Rendering Pipeline 5 4 3 2 1

  7. Pipeline Details • 3: Scan Converted Triangle • Convert the triangle to pixels • 1: Normalized Clip Space Transformation • 4 dimensional (X, Y, Z, Visibility Extents) • 2: Window Transformation • Scale triangle to relative to canvas element’s dimensions • 4: Fragment Processing • Applies color transformations

  8. Shaders • User defined algorithms to create special effects on the triangle fragments • Run during the fragment processing stage of the pipeline • Offloaded to the GPU

  9. WebGL example • Looks can be deceiving

  10. The HTML • WebGL acts on the HTML5 canvas element • No need to point to external JavaScript file

  11. Program Flow • Four helper functions to push the image through the pipeline

  12. initGL() Method • Purpose is to set the “context” of the program • A specific set of state used for rendering. Context is like a large C-style struct that contains a large number of fields that can be accessed. If you were to create multiple windows for rendering, each one would have its own.

  13. Program Flow

  14. initShaders() Method • Loads the shader algorithms

  15. Vertex Shader • Defines the clipping space of the object after transformation • 4D Vector (X, Y, Z, Clipping)

  16. Fragment Shader • Applies color to each triangle fragment • 4D Vector (R, G, B, A)

  17. Program Flow

  18. initBuffers() Method • Pushes the vertex data onto the GPU 3 2 1 1 2 3

  19. Program Flow

  20. drawScene() Method

  21. Result

  22. 3rd Part Dev Tools • Free, open source content creation editors • Mozilla’s shader editor

  23. Questions?

More Related