Question

I’m following this tutorial to learn something more about OpenGL and in particular point sprites. But I’m stuck on one of the exercises at the end of the page:

Try to rotate the point sprites 45 degrees by changing the fragment shader.

There are no hints about this sort of thing in the chapter, nor in the previous ones. And I didn’t find any documentation on how to do it. These are my vertex and fragment shaders:

Vertex Shader

#version 140

attribute vec2 coord2d;

varying vec4 f_color;

uniform float offset_x;
uniform float scale_x;
uniform float point_size;

void main(void) {
    gl_Position = vec4((coord2d.x + offset_x) * scale_x, coord2d.y, 0.0, 1.0);
    f_color = vec4(coord2d.xy / 2.0 + 0.5, 1.0, 1.0);
    gl_PointSize = point_size;
}

Fragment Shader

#version 140

varying vec4 f_color;

uniform sampler2D texture;

void main(void) {
    gl_FragColor = texture2D(texture, gl_PointCoord) * f_color;
}

I thought about using a 2×2 matrix in the FS to rotate the gl_PointCoord, but I have no idea how to fill the matrix to accomplish it. Should I pass it directly to the FS as a uniform?

Answer 1

The traditional method is to pass a matrix to the shader, whether vertex or fragment. If you don’t know how to fill in a rotation matrix, Google and Wikipedia can help.

The main thing is that you’re going to run into is the simple fact that a 2D rotation is not enough. gl_PointCoord goes from [0, 1]. A pure rotation matrix rotates around the origin, which is the bottom-left in point-coord space. So you need more than a pure rotation matrix.

You need a 3×3 matrix, which has part rotation and part translation. This matrix should be generated as follows (using GLM for math stuff):

glm::mat4 currMat(1.0f);
currMat = glm::translate(currMat, glm::vec3(0.5f, 0.5f, 0.0f));
currMat = glm::rotate(currMat, angle, glm::vec3(0.0f, 0.0f, 1.0f));
currMat = glm::translate(currMat, glm::vec3(-0.5f, -0.5f, 0.0f));

You then pass currMat to the shader as a 4×4 matrix. Your shader does this:

vec2 texCoord = (rotMatrix * vec4(gl_PointCoord, 0, 1)).xy
gl_FragColor = texture2D(texture, texCoord) * f_color;

I’ll leave it as an exercise for you as to how to move the translation from the fourth column into the third, and how to pass it as a 3×3 matrix. Of course, in that case, you’ll do vec3(gl_PointCoord, 1) for the matrix multiply.