GLSL中的椭圆梯度旋转

Question

我在GLSL中实现了基本的椭圆渐变，它工作正常。但是我无法旋转渐变。我的代码如下：
顶点着色器

uniform mat4 camera;
uniform mat4 model;

in vec3 vert; // coordinates of vertex
in vec2 vertTexCoord; //pseudo texture coordinates, used for calculating relative fragment position

out vec2 fragTexCoord;

void main() {
    fragTexCoord = vertTexCoord; //pass to fragment shader
    gl_Position = camera * model * vec4(vert, 1); //apply transformations
}

片段着色器

uniform vec2 gradientCenter; //center of gradient
uniform vec2 gradientDimensions; //how far gradient goes in right and up direction respectively
uniform vec2 gradientDirection; //rotation of gradient, not used..yet

in vec2 fragTexCoord;

out vec4 finalColor;

void main() {
    vec2 gradient = gradientCenter - fragTexCoord; //gradient itself
    gradient.x = gradient.x * (1.0 / gradientDimensions.x); //relative scale on right direction, currently X axis
    gradient.y = gradient.y * (1.0 / gradientDimensions.y); //relative scale on up direction, currently Y axis
    float distanceFromLight = length(gradient); //lenght determines output color
    finalColor = mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.0, 0.0, 1.0, 1.0), distanceFromLight * 2); //mixing red and blue, placeholder colors
}

为了更好地说明，在上面的图片中我拥有并正在工作，在下图中我的目标是什么。如何改进我的代码以允许椭圆渐变操作，如下图所示？

Answer 1

我假设gradientDirection是第一主轴的标准化方向。然后，您可以使用点积计算本地系统中的坐标：

vec2 secondaryPrincipal = vec2(gradientDirection.y, -gradientDirection.x);
vec2 gradient = gradientCenter - fragTexCoord; //gradient itself
vec2 localGradient(dot(gradient, gradientDirection)  * (1.0 / gradientDimensions.x),
                   dot(gradient, secondaryPrincipal) * (1.0 / gradientDimensions.y));
float distanceFromLight = length(localGradient); 
//...