This talk explains how low level graphics works, the OpenGL rendering pipeline, and digs into pixel buffering techniques, and even includes some example code and demos.

1. Graphics and Libraries

2. Dominic Farolino
• twitter.com/domfarolino
• github.com/domfarolino
• dom@chromium.org
• Senior
• Chromium Committer
• WHATWG Editor

3. What is this talk?
@domfarolino

4. Rendering
@domfarolino

5. Graphics APIs
@domfarolino

6. OpenGL + Graphics Pipeline
@domfarolino

7. Pixel Buffering & V-Sync
@domfarolino

8. WebGL
@domfarolino

9. –some smart person
“Converting object description > 2D image plane representation”
Rendering

10. “Object Description”

11. “Object Description”
Geometric
serialization of
shape to be painted

12. “Object Description”
Geometric
serialization of
shape to be painted
= Vector graphic

13. –some smart person
“Converting vector graphic > 2D image plane representation”
Rendering

14. Raster vs Vector {ization}

15. Raster vs Vector {ization}
Raytracing

16. Raster vs Vector {ization}
Raytracing
Radiosity

17. Vectorization

18. Vectorization

19. Rasterization

20. Rasterization

21. Practical Difference

22. Practical Difference
• Rasterizations
• Complex shapes + filled areas
• Trouble producing smooth lines = blocky

23. Practical Difference
• Rasterizations
• Complex shapes + filled areas
• Trouble producing smooth lines = blocky
• Vectorizations
• Perfectly smooth lines
• Less versatile

24. How do we actually do this
stuff?

25. GFX APIs

26. Why?

30. DirectX

31. DirectX
• Released with Windows 95

32. DirectX
• Released with Windows 95
• Included in every version of Windows

33. DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs

34. DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)

35. DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |

36. DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |
• Input

37. DirectX
• Released with Windows 95
• Included in every version of Windows
• Tons of APIs
• 3D GFX API (Direct3D)
• 2D | |
• Input
• Audio

38. OpenGL

39. OpenGL
• Alternative to DirectX

40. OpenGL
• Alternative to DirectX
• Basically same functionality

41. OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:

42. OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:
• Very-cross platform

43. OpenGL
• Alternative to DirectX
• Basically same functionality
• Pros:
• Very-cross platform
• OPEN STANDARD (Khronos Group)

45. Graphics Card

46. Graphics Card
Graphics Card Drivers

47. Graphics Card
Graphics Card Drivers
Graphics APIs

48. Graphics Card
Graphics Card Drivers
Graphics APIs
Game Engines

49. Graphics Card
Graphics Card Drivers
Graphics APIs
Game Engines
You, the gamer!!

50. Graphics APIs
Game Engines
You, the gamer!!

51. Graphics APIs
Game Engines
You, the gamer!!
Physics

52. Graphics APIs
Game Engines
You, the gamer!!
A.I.Physics

53. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics

54. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection

55. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.

56. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.

57. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2

58. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2 SFML

59. Graphics APIs
Game Engines
You, the gamer!!
LightingA.I.Physics
Collision
Detection
Audio Manip.
SDL2 SFML GLFW

60. SDL(2)

61. SDL(2)
• Simple DirectMedia Layer 2

62. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows

63. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library

64. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥

65. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??

66. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??
• Used in many game engines (Valve Source)

67. SDL(2)
• Simple DirectMedia Layer 2
• macOS, Linux, Android, iOS, Windows
• Game development library
• ⌨ + 🐭 + 📢 + 🕹 + 🖥
• Game engine??
• Used in many game engines (Valve Source)

68. Why SDL?

69. Why SDL?
• OpenGL doesn’t specify:

70. Why SDL?
• OpenGL doesn’t specify:
• Window creation

71. Why SDL?
• OpenGL doesn’t specify:
• Window creation
• Input handling

72. Why SDL?
• OpenGL doesn’t specify:
• Window creation
• Input handling
• More…

79. Vertices
(VBO)
Data of any format

80. Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)

81. Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)

82. Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)

83. Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)

84. Vertices
(VBO)
Data of any format
Vertex
Shader
(On the GPU)
Rasterization
(On the GPU)

85. Fragment
Shader
(On the GPU)

86. Fragment
Shader
(On the GPU)

87. Fragment
Shader
Blending and
sampling
(On the GPU)(On the GPU)

88. Fragment
Shader
Blending and
sampling
(On the GPU)
Final output
image!
(On the GPU)

89. Vertex Data
@domfarolino

90. Vertex Data

91. Vertex Data

92. Vertex Data

93. Interpreting Vertices
@domfarolino

94. Vertex Shader

95. Vertex Shader

96. Vertex Shader

97. Vertex Shader

98. Vertex Shader

99. Attach/Compile

100. Interpreting Color
@domfarolino

101. Fragment Shader

102. Fragment Shader

103. Fragment Shader

104. Example

109. Pixel buffering & V-Sync
@domfarolino

121. Getting rid of screen tears?
@domfarolino

122. Synchronizing Vertical Refresh
Rate
@domfarolino

123. V-Sync
@domfarolino

131. Slower FPS?
@domfarolino

136. Cool, but what about the web?
@domfarolino