如何在带自定义Shader的SKSpriteNode上实现正常着色与伪3D光照？

我完全懂你的困扰——给SKSpriteNode加上自定义Shader后，原本好好的法线纹理伪3D光照效果突然就没了。其实这是因为SpriteKit的内置法线光照逻辑是和默认的Sprite渲染管线绑定的，一旦你替换成自定义Shader，就相当于完全接管了渲染流程，内置的光照计算不会自动运行了。不过别担心，咱们只需要把法线光照的逻辑手动写到自定义Shader里就行。

核心原理 #

SpriteKit的内置法线光照会自动做这些事：采样法线纹理、结合场景光源位置和节点法线向量计算光照强度。但自定义Shader会覆盖这套流程，所以我们得自己实现这些步骤：

• 同时采样基础纹理和法线纹理的颜色值
• 把法线纹理的RGB值从[0,1]编码转换为[-1,1]范围的法线向量
• 计算光源到节点的方向向量
• 通过向量点积计算漫反射光照强度
• 把基础纹理颜色和光照强度结合，再叠加你的自定义着色逻辑

具体实现步骤 #

1. 编写带法线光照的自定义Shader #

下面是一个基础示例Shader，你可以基于它修改自己的自定义效果：

void main() {
    // 1. 采样基础纹理与法线纹理
    vec4 baseColor = texture2D(u_texture, v_tex_coord);
    vec4 normalMapColor = texture2D(u_normalTexture, v_tex_coord);
    
    // 2. 还原法线向量（从[0,1]映射到[-1,1]并归一化）
    vec3 normal = normalize(normalMapColor.rgb * 2.0 - 1.0);
    
    // 3. 定义光源方向（可根据场景实际光源位置调整，这里用示例方向）
    // SpriteKit坐标系Y轴向上，注意向量方向适配
    vec3 lightDirection = normalize(vec3(1.0, 1.0, 1.0));
    
    // 4. 计算漫反射光照强度（避免出现负值）
    float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
    
    // 5. 这里插入你的自定义着色逻辑，比如颜色滤镜、特效等
    vec4 customProcessedColor = baseColor; // 替换成你的自定义处理代码
    
    // 6. 结合光照与自定义效果得到最终输出
    gl_FragColor = customProcessedColor * diffuseIntensity;
}

2. 在Swift代码中配置Shader与纹理 #

确保你在创建节点时，把法线纹理传递给Shader的uniform变量，而不只是设置节点的normalTexture：

// 创建精灵节点
let cactus = SKSpriteNode(imageNamed: "Saguaro.png")
// 设置法线纹理
let normalTexture = SKTexture(imageNamed: "Saguaro_Normal.png")
cactus.normalTexture = normalTexture

// 加载自定义Shader
guard let customShader = SKShader(fileNamed: "CustomShader.fsh") else {
    fatalError("Failed to load custom shader file")
}

// 将法线纹理绑定到Shader的uniform变量（变量名要和Shader里的u_normalTexture完全一致）
customShader.uniforms = [
    SKUniform(name: "u_normalTexture", texture: normalTexture)
]

// 给节点设置Shader
cactus.shader = customShader

// 添加场景光源（以SKLightNode为例）
let lightNode = SKLightNode()
lightNode.lightColor = .white
lightNode.position = CGPoint(x: 200, y: 200)
addChild(lightNode)

3. 关键注意事项 #

• Shader中的uniform变量名必须和Swift代码里设置的完全匹配，比如示例中的u_normalTexture
• 如果用SKLightNode，可以把光源的位置、颜色等信息也传递给Shader，让光照计算更贴合实际场景（需要在Shader中添加对应uniform变量）
• 确保法线纹理的格式正确，一般是PNG格式，RGB通道分别对应法线的X、Y、Z分量
• 你的自定义着色逻辑要整合到最终颜色输出步骤，别覆盖光照计算结果

这样操作后，自定义Shader和法线纹理的伪3D光照效果就能同时正常工作了。

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