Click to choose your tutorial
Tutorial 1: SDK
Tutorial 2: Creating a Window
Tutorial 3: Vulkan Instance
Tutorial 4: Supported Extensions
Tutorial 5: Drawing Points
Tutorial 6: Drawing Lines
Tutorial 7: Drawing Triangles
Tutorial 8: Introduction to Shaders
Tutorial 9: Loading Shaders
Tutorial 10: Using Multiple Shaders
Tutorial 11: Loading 3D Model
Tutorial 12: Displaying 3D Model
Tutorial 13: Vertex Animation
Tutorial 14: Bone Animation
OpenGL Tutorials
site is v0.1a build Sep 11, 2016
Join to be notified of new tutorials

WebGL Tutorial 2 - OpenGL GLSL Shader Tutorial

Written by staff. Contact us to submit your article for review.
Sep 13, 2016
tags Tags opengl, shader, version
Post #42

Before we begin please take a look at this GLSL diagram below, that explains the general structure of GLSL command flow. First we compile our shaders. Then we pass them, together with our data in an ordered progression.

Note: Shader executables are not Windows API executables (they are not files with .exe extention, but rather they are executable programs that OpenGL GLSL Shader Processor can understand and execute, a process that happens in real time as your OpenGL program is running.)

GLSL Shader 330 Example

You can skip the Geometry Processor step by eliminating it from the pipeline altogether. In other words, it is perfectly fine for Vertex Processor to output data directly into Fragment Processor. That's it. No Geometry compilation or processor step.

Geometry Processor does have its unique function (tessellation, or polygon clipping, for example,) however if you're writing your first OpenGL shader application, you probably want to first make the Vertex/Fragment combo work, without the Geometry shader. Then later, when you understand how these two work together to build one pipeline, you can add the geometry shader in between. But you can completely skip the geometry shader altogether in your first test.

Each shader processor has IN and OUT data. IN is what you supply it with (vertices data array, texture data, color data, etc.) OUT is what it outputs after processing IN data.

What goes in must go out. This is a principle at work in shader processors. You pass some data in, and expect it to output some data. This new output data is then used as an input data passed to the next process. And so forth, until we are ready to output it on the screen.

First we compile all 3 shaders (vertex, geometry and fragment) into executables. (But again, geometry shader can be skipped, if you'd like, I am just explaining the full process.) Then, first vertex data - our 3D model - is processed. This is where you pass your vertices to precompiled vertex shader as IN data. It outputs OUT data.

This OUT data from vertex processor is then passed on to the Geometry Shader as IN data. The Geometry Shader outputs OUT data, which it finally passes to the Fragment (Pixel) Shader as IN data.

Whatever the Fragment Shader outputs as OUT data, is usually rendered either on the screen or on a separate texture (not visible on the screen.) This depends on current OpenGL pipeline state. You can set fragment shader to "render to texture" or render directly to the screen buffer (which will be instantly visible on the screen.)

Switching between render to texture or screen will be covered later in my tutorials.

These shaders are compiled right from inside your OpenGL source code. OpenGL provides a function called glCompileShader that takes the numeric integer ID (int or GLint) that was obtained by compiling the source code of your shader using the function glCreateShader.

Each shader first needs a "shader program" created. This is accomplished using glCreateProgram() OpenGL function. It returns a numeric ID, a handle to the program that can be used later to refer to this program.

The shader source code itself is stored in a text string variable (const char or const GLchar) which is passed to glShaderSource(const GLchar) function, right before glCompileShader function is called.

Here is a brief example of how a fragment shader could be constructed:

/* Source code for our Fragment Shader Example 1 - For Texturing */ const GLchar *fragmentShaderSource = "#version 330 core\n" "in vec3 ourColor;\n" "in vec2 TexCoord;\n" "out vec4 color;\n" "uniform sampler2D ourTexture;\n" "void main() { color = texture(ourTexture, TexCoord) * vec4(ourColor, 1.0f); } "; // Create a blank shader program, and grab its OpenGL-generated numeric ID GLuint shaderProgramID = glCreateProgram(); // Create a new FRAGMENT SHADER from scratch GLuint fragmentShaderID = glCreateShader(GL_FRAGMENT_SHADER); // Compile this shader glShaderSource(fragmentShaderID, 1, &fragmentShaderSource, 0); glCompileShader(fragmentShaderID); // Our new fragmentShader is stored in numeric handle fragmentShaderID // It is now available for use, so let's attach it to our shaderProgram glAttachShader(shaderProgramID, fragmentShaderID);

As you can see there are some in and out variables. These are the parameters that are passed into the shader. These are the links between IN and OUT data. For example, the color vec4 in this shader is the placeholder for the data that this shader will produce. It is what will be passed to the Frame Buffer (to render on the screen) or to a texture, depending on the current state of your OpenGL program.

You will also see one "uniform" parameter called ourTexture, which is of type sampler2D. This is just a data type that stores our texture's pixel data. This is the texture that is passed to this shader. We'll see how this is done later on. This is just a general case example.

This fragment shader in particular blends texture pixels, stored in TexCoord parameter which is an "in" parameter of type vec2, with arbitrary color stored in ourColor which is an "in" parameter of type vec3.

article tab
Follow OpenGL Tutorials
You will only receive important news about OpenGL tutorial updates.
Who is joining?
  • Programmers You want to stay in touch to receive OpenGL tutorial updates.
  • Game Devs You're a game developer, and you also want to learn more about OpenGL!
  • Supporters You have invested interest in supporting OpenGL tutorial site.
Follow OpenGL Tutorials