---

The official translation (with a bit of polishing) is available here.

---

Another introductory article for beginners to program real-time graphics.

I once had a task to (quickly) visualize molecules. For example, a molecule can be represented simply as a collection of spheres like this:


')
Specifically, this virus consists of about three million atoms. You can download his model on the wonderful site rcsb.org .

This is a great topic for learning shaders.

First, I’ll just show you how OpenGL is called and how our shader code is linked to it.

Opengl helloworld

As usual, I created a repository for companion code. OpenGL itself does not have a normal cross-platform way to create a context for the render, so here I use the GLUT library to create a window, although I don’t really do any user interaction. At the same time, in addition to GLUT, for this tutorial we need the GLU and GLEW libraries.

Here is the simplest program that draws a kettle :



Let's figure it out, and start right away with main ().

• The first line just initializes the library, the second one says that we will use the double framebuffer, colors and z-buffer.
• Then we give the dimensions, location and title of the window and the background color, in this case blue.
• Then interesting things start: glutDisplayFunc, glutReshapeFunc and glutKeyboardFunc set the callbacks to our code, which will be called during the screen redraw events, changes in the window geometry and keyboard processing.
• Then we turn on a certain set of checkboxes that simply say that yes, we will have one light source, that yes, the z-buffer should be used, and so on.
• Well, the final chord is the call to the main window processing cycle, as long as glutMainLoop is running, the operating system shows our window.

We have the simplest keyboard handling, I (somewhat brutally) quit the program when I press the ESC key. When changing the geometry of the window, I say OpenGL that the projection is still orthogonal, and that it should display a square with the coordinates [-1,1] x [-1,1] to the full window size.

The most interesting thing about us is the render_scene () function.

• First erase the screen and the corresponding z-buffer.
• then reset the ModelView matrix and load the current camera position into it (in this case, it is constant, so you could define it in main ())
• Set the color red
• Draw a kettle
• switch screen buffers

As a result, we should have this picture:

GLSL helloworld

Here you can find the source for the simplest use of shaders. Github has a very handy version comparison tool, see what I changed .

The picture should be like this:



What exactly was added to the code? To begin with, two new files were added: frag_shader.glsl and vert_shader.glsl, written not in C ++, but in GLSL . This is the shader code that will be fed directly to the graphics card. And a binding was added to main.cpp that tells OpenGL to use these shaders.

Namely, a prog_hdlr handler is created, and previously read from text files are linked to it, and then compiled vertex and fragment shaders are linked to it.

We draw "molecule" by means of standard OpenGL

So, we learned to call OpenGL context and link shaders to it. Let's lay them aside and draw a dozen thousand randomly spaced spheres. I want to keep the code as simple as possible, and therefore I will not load the real molecule, although the .pdb format is quite text-based and very simple. The task is set as follows: let's just draw a large number of randomly spaced spheres of random color.

Here is a commit that does not use shaders, but draws just ten thousand spheres by calling glutSolidSphere ().

Do not forget to look at the changes. I added an array of atoms that contains arrays of seven elements: the first three are the coordinates of the center of the current atom, then its radius, and then three more of its color.

This picture should be:



Personally, it hurts me to look at this picture: the intersection of two spheres is an arc of a circle, and here we have anything, but not a circle. This is a consequence of the fact that we drew each sphere with sixteen parallels and sixteen meridians, that is, about five hundred triangles for each sphere. And besides the poor quality of the picture, we also directly raise the question of efficiency: if we want to draw ten million atoms, then we will need to send five billion triangles, which is starting to hurt the bus bandwidth.

Can shaders help us?

They can! Shaders are not only a change in lighting, although initially they were designed specifically for this. I want to minimize data transfer between the CPU and the GPU, so I will send only one vertex for each sphere that needs to be drawn.

I am writing code under the old GLSL # 120, because I need it to run on very old machines, the new GLSL has a slightly different syntax, but the general ideas are strictly the same.

Here is the code that draws the same areas, but using shaders.

So what is the idea?

To begin with, on the CPU side, we send one vertex for each sphere that needs to be drawn.
If you do not write any shaders, then we get just such a picture:



Further, in the vertex shader, we can change gl_PointSize, this will end up with a set of squares:


Note that the fragment shader will be executed for each pixel of the square!

That is, now everything is quite simple, we consider how far the given pixel of the square is far from the center, if
it exceeds the radius of the sphere, then we call discard:


Received a set of flat confetti, which pass through the center of each sphere.

What is interesting, we have the right to change the depth of each fragment:



It remains only to calculate the lighting, so this picture will turn out as a result:



Compare it with the picture where we drew the triangulated spheres. The image is much more accurate and is drawn much faster.

Now it remains to add the reading of the .pdb file, screen-space ambient occlusion and you will get the title picture of this article.

---

For those who want to understand how to draw spheres with the help of shaders, but with perspective, and not with glOrtho, there is an excellent article .