SpriteKit中自定义OpenGL片元着色器无法应用于门精灵问题排查

我在SpriteKit中遇到了无法将自定义OpenGL片元着色器（.fsh）应用于精灵纹理的问题，下载了另一款可正常工作的着色器文件对比，想找出第一个着色器的问题所在。

项目中的初始化代码如下：

class GameScene: SKScene {

    private var leftDoor: SKSpriteNode!
    private var doorShader: SKShader!

override func didMove(to view: SKView) {
    self.initializeDoors()
    self.initializeShader()
}

func initializeShader() {
        // Initialize shaders
        self.doorShader = SKShader(fileNamed: "shader.fsh")
    }
func initializeDoors() {
    // Initializing left door
        self.setDoorAttributes("left")
    leftDoor.position = CGPoint(x:(view!.bounds.size.width/2) - (25 * leftDoor.frame.size
            .width / 20), y: self.view!.bounds.size.height + leftDoor.frame.size.height/2)
        // Specifying zPosition
        leftDoor.zPosition = 1
        // Adding the door to the scene
        addChild(leftDoor)
    }
func setDoorAttributes(_ position: String) {
     switch position {
            case "wrong_left_door", "correct_left_door", "left":
                // Setting the door sprite randomly
            if (arc4random_uniform(2) == 0) {
                    // Initialize the door if null
                    if (leftDoor == nil) {
                        leftDoor = SKSpriteNode(imageNamed: "wrong_door")
                    }
                    // Update texture and name attributes
                    leftDoor.texture = SKTexture(imageNamed: "wrong_door")
                    leftDoor.name = "wrong_left_door"
                    leftDoor.shader = self.doorShader
                } else {
                    // Initialize the door if null
                    if (leftDoor == nil) {
                        leftDoor = SKSpriteNode(imageNamed: "correct_door")
                    }
                    // Update texture and name attributes
                    leftDoor.texture = SKTexture(imageNamed: "correct_door")
                    leftDoor.name = "correct_left_door"
                    // Remove shader
                    leftDoor.shader = nil
                }
    }
}

门的着色器从未生效，怀疑是着色器代码过时或文件添加错误，以下是着色器文件内容：

float M_PI  = 3.141592653589793;
float M_2PI =  6.283185307179586;

vec3 c1a = vec3(0.0, 0.0, 0.0);
vec3 c1b = vec3(0.9, 0.0, 0.4);
vec3 c2a = vec3(0.0, 0.5, 0.9);
vec3 c2b = vec3(0.0, 0.0, 0.0);

void main() {
    vec2 point = (0.5 * u_sprite_size - gl_FragCoord.xy) / u_sprite_size;
    float angle = atan(point.y, point.x);
    float turn = (angle + M_PI) / M_2PI;
    float radius = sqrt(point.x * point.x + point.y * point.y);
    
    float sine_kf = 19.0;
    float ka_wave_rate = 0.94;
    float ka_wave = sin(ka_wave_rate * u_time);
    float sine_ka = 0.35 * ka_wave;
    float sine2_ka = 0.47 * sin(0.87 * u_time);
    float turn_t = turn + -0.0 * u_time + sine_ka * sin(sine_kf * radius) + sine2_ka * sin(8.0 * angle);
    bool turn_bit = mod(10.0 * turn_t, 2.0) < 1.0;
    
    float blend_k = pow((ka_wave + 1.0) * 0.5, 1.0);
    vec3 c;
    if(turn_bit) {
        c = blend_k * c1a + (1.0 -blend_k) * c1b;
    } else {
        c = blend_k * c2a + (1.0 -blend_k) * c2b;
    }
    c *= 1.0 + 1.0 * radius;
    
    gl_FragColor = vec4(c, 1.0);
}

问题排查与修复建议 #

1. 初始化顺序错误，导致Shader未被正确赋值 #

在didMove(to:)方法中，先调用了initializeDoors()再调用initializeShader()，这意味着执行setDoorAttributes()时，doorShader还未初始化（值为nil），此时给leftDoor.shader赋值的是nil，后续即使初始化了doorShader，也没有重新给门设置这个着色器。

修复方法：调整初始化顺序，先初始化着色器，再初始化门：

override func didMove(to view: SKView) {
    self.initializeShader()
    self.initializeDoors()
}

2. 着色器代码存在语法错误 #

着色器中的<是HTML转义字符，GLSL编译器无法识别，会直接导致编译失败，这是着色器无法生效的关键原因。需要将<替换为实际的小于号<。

3. 着色器未采样原纹理（可选调整） #

当前着色器完全忽略了精灵的原纹理，直接生成自定义颜色。如果希望保留门的纹理并叠加着色器效果，需要添加纹理采样逻辑：

• 声明SpriteKit内置的纹理采样器：uniform sampler2D u_texture;
• 使用纹理坐标v_tex_coord采样原纹理：vec4 originalColor = texture2D(u_texture, v_tex_coord);
• 将生成的颜色与原纹理颜色混合，比如：gl_FragColor = vec4(c * originalColor.rgb, originalColor.a);

修复后的完整着色器示例：

uniform sampler2D u_texture;
varying vec2 v_tex_coord;

float M_PI  = 3.141592653589793;
float M_2PI =  6.283185307179586;

vec3 c1a = vec3(0.0, 0.0, 0.0);
vec3 c1b = vec3(0.9, 0.0, 0.4);
vec3 c2a = vec3(0.0, 0.5, 0.9);
vec3 c2b = vec3(0.0, 0.0, 0.0);

void main() {
    vec2 point = (0.5 * u_sprite_size - gl_FragCoord.xy) / u_sprite_size;
    float angle = atan(point.y, point.x);
    float turn = (angle + M_PI) / M_2PI;
    float radius = sqrt(point.x * point.x + point.y * point.y);
    
    float sine_kf = 19.0;
    float ka_wave_rate = 0.94;
    float ka_wave = sin(ka_wave_rate * u_time);
    float sine_ka = 0.35 * ka_wave;
    float sine2_ka = 0.47 * sin(0.87 * u_time);
    float turn_t = turn + -0.0 * u_time + sine_ka * sin(sine_kf * radius) + sine2_ka * sin(8.0 * angle);
    bool turn_bit = mod(10.0 * turn_t, 2.0) < 1.0;
    
    float blend_k = pow((ka_wave + 1.0) * 0.5, 1.0);
    vec3 c;
    if(turn_bit) {
        c = blend_k * c1a + (1.0 - blend_k) * c1b;
    } else {
        c = blend_k * c2a + (1.0 - blend_k) * c2b;
    }
    c *= 1.0 + 1.0 * radius;

    // 采样原纹理并混合颜色
    vec4 originalColor = texture2D(u_texture, v_tex_coord);
    gl_FragColor = vec4(c * originalColor.rgb, originalColor.a);
}

额外检查点 #

• 确认着色器文件已正确添加到项目中，且目标成员资格已勾选（在文件检查器的"Target Membership"中确保勾选了你的项目目标）。
• 可以通过SKShader的compileStatus属性检查着色器是否编译成功，排查潜在错误：

func initializeShader() {
    self.doorShader = SKShader(fileNamed: "shader.fsh")
    if !doorShader.compileStatus {
        print("Shader compile failed: \(doorShader.compileLog ?? "No log")")
    }
}

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