如何在片段着色器（SpriteKit）中绘制纹理的特定部分

Question

我的节点大小为 64x32，纹理大小为 192x192，我正在尝试在第一个节点处绘制此纹理的第一部分，在第二个节点处绘制第二部分...

片段着色器（附加到 SKSpriteNode，纹理大小为 64x32）

void main() {
    float bX = 64.0 / 192.0 * (offset.x + 1);
    float aX = 64.0 / 192.0 * (offset.x );
    float bY = 32.0 / 192.0 * (offset.y + 1);
    float aY = 32.0 / 192.0 * (offset.y);
    float normalizedX = (bX - aX) * v_tex_coord.x + aX;
    float normalizedY = (bY - aY) * v_tex_coord.y + aY;
    gl_FragColor = texture2D(u_temp, vec2(normalizedX, normalizedY));
}

• offset.x - [0, 2]
• offset.y - [0, 5]
• u_temp - 纹理大小为 192x192
• function to convert a value from [0,1] to, for example, [0, 0.33]

但结果似乎是错误的：

带有附加纹理的SKSpriteNode

没有纹理的SKSpriteNode（我想用纹理来实现）

Answer 1

当纹理位于 altas 中时，不再通过从 (0,0) 到 (1,1) 的坐标寻址。地图集真的是在幕后组装的一张大纹理。当您在普通精灵中使用来自图集的特定命名图像时，SpriteKit 会在有关图集如何组装的信息中查找该图像名称，然后告诉 GPU 类似“使用bigAtlasTexture 绘制此精灵，坐标(0.1632,0.8814)通过(0.1778, 0.9143)"。如果您要使用相同的纹理编写自定义着色器，则需要有关它在图集中的位置的信息，您可以从textureRect 获得：

https://developer.apple.com/documentation/spritekit/sktexture/1519707-texturerect

因此，您的纹理实际上并不是一张图像，而是由位置textureRect() 在包含大量纹理的大型打包图像中定义的。我发现用(0,0) 到(1,1) 来思考最容易，所以在编写着色器时我通常会做textureRect => 减去和缩放以得到(0,0)-(1,1) => 计算所需的修改坐标=> 缩放和添加再次到达textureRect => texture2D 查找。

由于您的着色器需要知道textureRect，但您不能从着色器代码中调用它，您有两个选择：

1. 制作一个属性或统一来保存该信息，从外部填充它，然后让着色器引用它。
2. 如果着色器仅用于特定纹理或少数纹理，则您可以生成专用于所需textureRect 的着色器代码，即它只是在纹理代码中包含一些常量。李>

这是使用方法 #2 的示例的一部分：

func myShader(forTexture texture: SKTexture) -> SKShader {
  // Be careful not to assume that the texture has v_tex_coord ranging in (0, 0) to
  // (1, 1)!  If the texture is part of a texture atlas, this is not true.  I could
  // make another attribute or uniform to pass in the textureRect info, but since I
  // only use this with a particular texture, I just pass in the texture and compile
  // in the required v_tex_coord transformations for that texture.
  let rect = texture.textureRect()
  let shaderSource = """
  void main() {
    // Normalize coordinates to (0,0)-(1,1)
    v_tex_coord -= vec2(\(rect.origin.x), \(rect.origin.y));
    v_tex_coord *= vec2(\(1 / rect.size.width), \(1 / rect.size.height));
    // Update the coordinates in whatever way here...
    // v_tex_coord = desired_transform(v_tex_coord)
    // And then go back to the actual coordinates for the real texture
    v_tex_coord *= vec2(\(rect.size.width), \(rect.size.height));
    v_tex_coord += vec2(\(rect.origin.x), \(rect.origin.y));
    gl_FragColor = texture2D(u_texture, v_tex_coord);
  }
  """
  let shader = SKShader(source: shaderSource)
  return shader
}

这是此处一些具体示例的精简版： https://github.com/bg2b/RockRats/blob/master/Asteroids/Hyperspace.swift