如何将GLSL矩形旋转着色器修改为实现中心点旋转的椭圆

核心问题解答 #

你应该对整体坐标执行旋转变换，而非对半径参数乘旋转矩阵，理由如下：

• 旋转矩阵mat2是作用于二维坐标向量的变换算子，半径r.x/r.y是标量，直接和矩阵相乘不符合数学逻辑
• 先变换坐标系再绘制轴对齐的椭圆，最终呈现的效果就是椭圆围绕中心点旋转，实现逻辑更简洁，计算成本也更低

调整后完整代码 #

const float PI = 3.14159265359;

mat2 rotate2d (float _angle) {
    return mat2 (cos (_angle), -sin (_angle),
                sin (_angle), cos (_angle));
}

void main (void) {
    // 标准化坐标，中心点为(0,0)
    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
    // 先对坐标做旋转变换
    st = rotate2d(sin(time) * PI) * st;
    
    // 椭圆参数设置
    vec2 center = vec2(0.0, 0.0); // 椭圆中心点
    vec2 radius = vec2(0.4, 0.2); // 椭圆水平、垂直半径，可按需调整大小
    // 计算椭圆有向距离
    float d = length((st - center) / radius) - 1.0;
    // 阈值处理得到硬边缘
    float shape = step(0.0, 1.0 - abs(ceil(d)));
    
    vec3 color = vec3(shape);
    gl_FragColor = vec4(color, 1.0);
}

代码修改说明 #

• 保留了原有rotate2d旋转函数和坐标标准化、旋转变换的逻辑
• 移除了原有矩形的距离计算代码，替换为椭圆的SDF（有向距离场）计算逻辑
• 半径参数radius可按需调整，修改数值即可改变椭圆的大小和长宽比
• 如果你需要椭圆边缘有抗锯齿效果，可以把step(0.0, 1.0 - abs(ceil(d)))替换为1.0 - smoothstep(0.0, 0.02, d)

内容的提问来源于stack exchange，提问作者x001017