An Introduction to High Performance Graphics: OpenGL & WebGL

Slides presented during the YouTube video session "An Introduction to High Performance Graphics: OpenGL & WebGL" on 24 October 2021: https://www.youtube.com/watch?v=MaOfxH4I0v8

Transcript

2. An Introduction to High Performance Graphics Programming with Behnood
3. Computer Graphics: Geometry, Primitives & Vertex Programming with Behnood Point Line/ Curve Polyline Polygon Plane Cube Pyramid Cylinder Torus Sphere Plane Primitives Solid Primitives Color Texture/UV coordinates Normal Vectors Tangent Vectors Position Vertex Attributes
4. Computer Graphics: Rasterization Programming with Behnood
5. Computer Graphics: Tessellation vs. Subdivision Programming with Behnood Tessellation Subdivision https://graphics.pixar.com/opensubdiv/docs/subdivision_surfaces.html
6. Computer Graphics: Shading & Shaders Programming with Behnood Flat Shading Shading Techniques Smooth Shading Gouraud Shading Phong Shading Deferred Shading Fragment Fragment Shaders Shaders Ray Tracing Ray Tracing Shaders Shaders Compute Compute Shaders Shaders Tessellation Tessellation Shaders Shaders Geometry Geometry Shaders Shaders Vertex Vertex Shaders Shaders Shader Types
7. Computer Graphics: Rendering Programming with Behnood Rendering Techniques Rasterization Rasterization Ray Tracing Ray Tracing Ray Casting Ray Casting Rendering Features: - Shading - Texture-Mapping - Bump-Mapping - Fogging - Shadows - Lighting - Reflection - Transparency/Opacity - Refraction - Diffraction - Indirect Illumination - Caustics - Depth of Field
8. Computer Graphics: Rendering Pipeline Programming with Behnood https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory
9. What Is OpenGL? • Cross-Language (C/C++, C#, Java, JavaScript, Python) • Cross-Platform (Windows, macOS & Linux) • API (rendering 2D and 3D vector graphics) • GPU-based Applications (Video Games, AR/VR/MR Apps, Scientific Visualizations, 3D Modeling & CAD Softwares, 3D Animations, …) • Silicon Graphics (Original Author) • Khronos Group (Developer) • Open Source Mesa3D: an open-source software implementation of OpenGL • Free Developers Only Programming with Behnood
10. How OpenGL Works? Programming with Behnood Block Diagram of Typical Application / OpenGL / OS interactions https://emunix.emich.edu/~mevett/GraphicsCourse/Labs/Lab1/wip.html • Windowing API functions specifically developed to support OpenGL are used to set up, shut down, and handle event signals for an OpenGL drawing area called a Rendering Context (RC) in a window or component . These functions may be defined by the operating system, a third party widget set, or by a cross platform OpenGL library. • The OpenGL Extension Wrangler Library (GLEW) is a cross-platform open-source C/C++ extension loading library. GLEW provides efficient run-time mechanisms for determining which OpenGL extensions are supported on the target platform. • OpenGL API functions defined in gl.h and provided by the active OpenGL driver (specified by the RC) are used to draw. • OpenGL Drivers implement the details of OpenGL functions either by passing data directly to 3D hardware, performing computations on the main CPU or some combination of the two.
11. How OpenGL Works? Programming with Behnood Rendering Pipeline Structure Application Geometry Rasterization Vertex Specification Vertex Shader Tessellation Geometry Shader Vertex Post-Processing Primitive Assembly Rasterization Fragment Shader Per-Sample Operations OpenGL Rendering Pipeline Shader Stages https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview https://openglinsights.com/pipeline.html
12. OpenGL Developer Roadmap .c .cpp .java .py .js .cs Programming with Behnood
13. OpenGL Language Bindings C/C++ JavaScript Java Python C# Programming with Behnood Java Bindings: - Java OpenGL (JOGL) - Lightweight Java Game Library (LWJGL) Python Bindings: - PyOpenGL - ModernGL C# Bindings: - OpenGL.NET - OpenTK JavaScript Bindings: - Three.js - Babylon.js https://www.khronos.org/opengl/wiki/Language_bindings
14. OpenGL API Programming with Behnood https://openglinsights.com/pipeline.html
15. OpenGL Shading Language (GLSL) Programming with Behnood • C-style Language (with some C++ features) • Strongly Typed • Shaders are written in GLSL. (Shader stages are programmable.) Shader Stages: • Vertex Shaders: GL_VERTEX_SHADER • Tessellation Control & Evaluation Shaders: GL_TESS_CONTROL_SHADER & GL_TESS_EVALUATION_SHADER • Geometry Shaders: GL_GEOMETRY_SHADER • Fragment Shader: GL_FRAGMENT_SHADER • Compute Shader: GL_COMPUTE_SHADER requires GL 4.3 or ARB compute shader
16. What Is WebGL? Programming with Behnood • Cross-Browser (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) • Cross-Platform (Windows, macOS, Linux, Android & iOS) • JavaScript API (rendering 2D and 3D vector graphics) • GPU-based Web Applications • Mozilla Foundation (Original Author) • Khronos Group (Developer)
17. How WebGL Works? Programming with Behnood Ideal WebGL Application / OpenGL / OS interactions Windows WebGL Application / OpenGL / OS interactions
18. Thanks for Watching! Programming with Behnood • Twitter: @behnoooood • GitHub: behnood-eghbali • DEV Community: behnoodeghbali