KEMBAR78
Low Level Graphics & OpenGL | PDF
Graphics and Libraries
Dominic Farolino
• twitter.com/domfarolino

• github.com/domfarolino

• dom@chromium.org
• Senior

• Chromium Committer

• WHATWG Editor
What is this talk?
@domfarolino
Rendering
@domfarolino
Graphics APIs
@domfarolino
OpenGL + Graphics Pipeline
@domfarolino
Pixel Buffering & V-Sync
@domfarolino
WebGL
@domfarolino
–some smart person
“Converting object description > 2D image plane representation”
Rendering
“Object Description”
“Object Description”
Geometric
serialization of
shape to be painted
“Object Description”
Geometric
serialization of
shape to be painted
= Vector graphic
–some smart person
“Converting vector graphic > 2D image plane representation”
Rendering
Raster vs Vector {ization}
Raster vs Vector {ization}
Raytracing
Raster vs Vector {ization}
Raytracing
Radiosity
Vectorization
Vectorization
Rasterization
Rasterization
Practical Difference
Practical Difference
• Rasterizations

• Complex shapes + filled areas

• Trouble producing smooth lines = blocky
Practical Difference
• Rasterizations

• Complex shapes + filled areas

• Trouble producing smooth lines = blocky
• Vectorizations

• Perfectly smooth lines

• Less versatile
How do we actually do this
stuff?
GFX APIs
Why?
DirectX
DirectX
• Released with Windows 95
DirectX
• Released with Windows 95
• Included in every version of Windows
DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |
DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |
• Input
DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |
• Input
• Audio
OpenGL
OpenGL
• Alternative to DirectX
OpenGL
• Alternative to DirectX
• Basically same functionality
OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:
OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:
• Very-cross platform
OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:
• Very-cross platform
• OPEN STANDARD (Khronos Group)
Graphics Card
Graphics Card
Graphics Card Drivers
Graphics Card
Graphics Card Drivers
Graphics APIs
Graphics Card
Graphics Card Drivers
Graphics APIs
Game Engines
Graphics Card
Graphics Card Drivers
Graphics APIs
Game Engines
You, the gamer!!
Graphics APIs
Game Engines
You, the gamer!!
Graphics APIs
Game Engines
You, the gamer!!
Physics
Graphics APIs
Game Engines
You, the gamer!!
A.I.Physics
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2 SFML
Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2 SFML GLFW
SDL(2)
SDL(2)
• Simple DirectMedia Layer 2
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??
• Used in many game engines (Valve Source)
SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??
• Used in many game engines (Valve Source)
Why SDL?
Why SDL?
• OpenGL doesn’t specify:
Why SDL?
• OpenGL doesn’t specify:
• Window creation
Why SDL?
• OpenGL doesn’t specify:
• Window creation
• Input handling
Why SDL?
• OpenGL doesn’t specify:
• Window creation
• Input handling
• More…
Vertices
(VBO)
Data of any format
Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)
Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)
Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)
Fragment
Shader
(On the GPU)
Fragment
Shader
(On the GPU)
Fragment
Shader
Blending and
sampling
(On the GPU)(On the GPU)
Fragment
Shader
Blending and
sampling
(On the GPU)
Final output
image!
(On the GPU)
Vertex Data
@domfarolino
Vertex Data
Vertex Data
Vertex Data
Interpreting Vertices
@domfarolino
Vertex Shader
Vertex Shader
Vertex Shader
Vertex Shader
Vertex Shader
Attach/Compile
Interpreting Color
@domfarolino
Fragment Shader
Fragment Shader
Fragment Shader
Example
Pixel buffering & V-Sync
@domfarolino
Getting rid of screen tears?
@domfarolino
Synchronizing Vertical Refresh
Rate
@domfarolino
V-Sync
@domfarolino
Slower FPS?
@domfarolino
Cool, but what about the web?
@domfarolino

Low Level Graphics & OpenGL