Independently-published OpenGL tutorials since 2003
OpenGL is a cross-language and cross-platform framework for rendering 3D graphics on the screen. It's available on desktop computers and mobile devices (usually via webgl). The GL in OpenGL stands for "Graphics Library".
Read this OpenGL intro tutorial tutorial to briefly familiarize yourself with the key ideas behind 3D graphics programming if you want to start learning OpenGL from scratch.
What Are OpenGL Shaders?
OpenGL is the API for creating 3D games and impressive visual effects with programmable shaders. A shader program is usually written separately from your main OpenGL program in the C-like GLSL language (GL Shading Language).
A shader is a computer program tailored to three operations: data input, computation, and data output. A shader usually passes its output data to the next shader, which forms the chain of the graphics pipeline.
3D graphics are drawn on the screen using 3D shapes called primitives. Once initialized, OpenGL can render these objects using vertex coordinates which are passed to the GPU through shaders. The GPU is the graphics card hardware inside your computer. Executing shader calculations takes place directly on the GPU.
Creating Your First OpenGL Window
There are different ways of making OpenGL windows, depending on what platform you're on. Tutorials on this site assume Windows OS. They were written on my Windows 7 PC, in Microsoft Visual Studio in C++. In this OpenGL creating empty window tutorial we'll explore how to use Windows API (Win32API) to create a window from scratch and load OpenGL into it.
Also another OpenGL project <header> structure tutorial here will explain the basic program structure consisting of multiple C headers. Chances are if you're new to OpenGL and never touched C or C++ you'll inevitably run into issues with C-style headers. And this tutorial helps sort that out.
Drawing 3D Primitives
Drawing 3D graphics is all about rendering triangles on the screen. Triangles are polygons consisting of minimum number of vertices (just 3). Anything less than that, would be a line or a point. Which, are also considered to be 3D primitives.
Triangle rendering is so fundamental to 3D graphics because pretty much any 3D object of any shape can be constructed using just the triangle shape.
And so you can head on to the 3D primitve drawing tutorial on this site to check out the basics. Once you learn how to draw triangles, you can create more complex objects (cubes, cones, donuts, pyramids, tubes, spheres, balls, and so forth) using programmatic algorithms (algorithmically.)
Then, these common shapes can be used to construct pretty much any type of 3D world, including buildings, racing tracks for games, towers, cliffs, indoor and outdoor environments as well as terrans of all sorts.
Shaders are programs running on the video card. Shaders are usually written in a GL shading language such as GLSL. And then they are loaded into your OpenGL program. Once written they need to be compiled and sent ("uploaded") to the graphics card. OpenGL provides functions for this.
Shaders are responsible for creating 3D materials (how shiny your triangles are for creating glossy metallic materials, or how soft they are to imitate plastic, cloth and wood surfaces).
Shaders are extensively used for creating advanced visual effects such as light's water refraction and reflection, distortion and displacement effects, blur, camera focus effects, just to name a few.
Texture mapping in modern GPU's is also achieved by shaders. That is, at their basic, shaders are used to apply an image to the surface of triangles, as though it was wallpaper.
Drawing With One Shader at a Time
Only one shader can be selected at a time during the drawing process in the main game loop in your OpenGL program. If you have multiple materials in one scene you have to switch between shaders one at a time to render each material type individually. This is similar to switching your paint brush to a new color. Except you're changing an entire representation of how your 3D object will be drawn.
Switching shaders is a costly operation and should be kept to a minimum as much as possible. This also means that your should start thinking about organizing your 3D scene (game level or "map") or 3D models by material type.
Geometry, Vertex and Fragment Shaders
Vertex shader accepts vertex coordinates to construct 3D primitives from, and then they pass them on to the fragment shader for rasterization: the process that takes 3D vertex and texture data to draw the final image on the flat, 2-Dimensional surface of your screen. This is where the perspective projection matrix is utilized using basic trigonometry operations.
Fragment shader operates on a single pixel (fragment) in your 3D scene. It's a program written to "shade" the rendered pixel on the screen a certain color based on primitive texture data, vertex color, light source (sun, ambient color,) angle of the model and the light source.
OpenGL for 2D games
OpenGL is often used for making 3D and yes, sometimes even 2D games. 2-Dimensional graphics are not the primary design of OpenGL but imitating 2D with rectangular 3D surfaces that are always facing the viewer has earned an appeal among 2D platformer game developers, due to OpenGL's cross-platform nature.
By rendering rectangular surfaces consisting of 2 triangles we can imitate 2D sprites as long as they are always facing the camera at a straight 90 degree angle. This way OpenGL can be used for making 2D games, which is explained in this tutorial.
What About WebGL?
WebGL is great for experimenting with OpenGL before committing to a desktop application. Visit the sister WebGL tutorial website if you're interested in trying it out OpenGL in your browser first. While a lot of the time HTML5 canvas tag is already hardware-accelerated (when possible) WebGL shaders provide better effects for making 2D graphics.
2D sprite rendering (with stretching, rotation, alpha-blending and transparency effects) is also generally faster than what's offered by the standard 2D canvas implementation.
Because WebGL is supported by many mobile platforms in their respective browsers (Chrome, Firefox, IE, Safari, etc.) there are already a few 2D game engines out there that support WebGL as their primary graphics rasterizer.
Make a Donation
To support this site you can submit a donation to support these free tutorial articles that resemble book chapters. Tons of hard work goes into creating something like this, and your support helps run this website and continue serving useful educational material for OpenGL programmers.