Question

我正在尝试绘制一个居中的圆圈，使用Swift在SpriteKit中使用着色器填充图像。我正在使用此链接了解着色器，我使用的部分如下所示：

vec2 center = vec2(uResolution.x/2., uResolution.y/2.);

float radius = uResolution.x/2.;

vec2 position = gl_FragCoord.xy - center;

if (length(position) > radius) {
    gl_FragColor = vec4(vec3(0.), 1.);
} else {
    gl_FragColor = vec4(vec3(1.), 1.);
}

但我想在SpriteKit中使用它，所以我把它重写为：

void main() {

    vec2 center = u_sprite_size / 2.0;
    float radius = center.x;
    vec2 position = v_tex_coord - center;

    if (length(position) > radius) {
        gl_FragColor = vec4(vec3(0.0), 1.0);
    } else {
        gl_FragColor = vec4(vec3(1.0), 1.0);
    }

}

这就是我加载着色器的方式：

let node = SKSpriteNode(imageNamed: "napolean.png")
node.position = CGPoint(x: size.width / 2, y: size.height / 2)
node.shader = SKShader(fileNamed: "circle.fsh")
addChild(node)

当我运行时，图像始终为黑色，并且gl_FragColor = vec4(vec3(1.0), 1.0);永远不会运行，并且控制台中没有错误。有人可以解释出了什么问题吗？感谢

更新

Okapi指出u_tex_coord是规范化的，所以我将中心归一化，然后将其分成两半：vec2 center = (u_sprite_size) / length(u_sprite_size) / 2.0;。在我这样做后，我可以使用圆圈，但它太小而偏离中心

Answer 1

由于v_tex_coord已归一化，因此您根本不必使用u_sprite_size - 纹理坐标始终位于（0,0） - （1,1）范围内，这意味着您的中心和半径分别为（0.5,0.5）和0.5。您的着色器代码可以是这样的：

void main() {
    const float radius = 0.5;
    vec2 position = v_tex_coord - vec2(0.5, 0.5);

    if (length(position) > radius) {
        gl_FragColor = vec4(vec3(0.0), 1.0);
    } else {
        gl_FragColor = vec4(vec3(1.0), 1.0);
    }
}

在SpriteKit中使用着色器绘制圆圈

1 个答案: