OpenGL点在片段着色器中精灵旋转 [英] OpenGL point sprites rotation in fragment shader

问题描述

我正在关注本教程，以了解有关OpenGL的更多信息，特别是精灵.但是我被困在页面末尾的其中一项练习中:

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:

尝试通过更改片段着色器将点精灵旋转45度.

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:

顶点着色器

#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;
}

片段着色器

#version 140

varying vec4 f_color;

uniform sampler2D texture;

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

我考虑过在FS中使用2x2矩阵旋转gl_PointCoord，但是我不知道如何填充矩阵来完成它.我应该将它作为制服直接传递给FS吗?

I thought about using a 2x2 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?

推荐答案

传统方法是将矩阵(无论是顶点还是片段)传递给着色器.如果您不知道如何填写旋转矩阵，则Google和维基百科可以提供帮助.

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.

最主要的是，您会遇到一个简单的事实，即2D旋转是不够的. gl_PointCoord从[0，1]开始.纯旋转矩阵围绕原点旋转，该原点位于点坐标空间的左下角.因此，您不仅需要一个纯粹的旋转矩阵.

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.

您需要一个3x3矩阵，该矩阵具有零件旋转和零件平移的功能.该矩阵的生成应如下(使用 GLM 进行数学运算):

You need a 3x3 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));

然后将currMat作为4x4矩阵传递给着色器.您的着色器执行此操作:

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

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

对于如何将翻译从第四列移至第三列以及如何将其作为3x3矩阵传递的问题，我将保留它作为练习.当然，在这种情况下，您将对矩阵乘法执行vec3(gl_PointCoord, 1).

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 3x3 matrix. Of course, in that case, you'll do vec3(gl_PointCoord, 1) for the matrix multiply.

这篇关于OpenGL点在片段着色器中精灵旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！