在 iOS OpenGL ES 2.0 中将部分纹理（精灵表/纹理贴图）应用于点精灵

Question

看起来这应该很容易，但我在使用带有点精灵的纹理的一部分时遇到了很多困难。我已经广泛搜索并找到了各种答案，但没有一个涉及我遇到的具体问题。

到目前为止我学到了什么：

1. Basics of point sprite drawing
2. How to deal with point sprites rendering as solid squares
3. How to alter orientation of a point sprite
4. How to use multiple textures with a point sprite，这里越来越近了..
5. 之前已经做过点精灵 + 精灵表，但只能在 OpenGL ES 2.0（不是 1.0）中实现

这是我正在努力实现的图表

我在哪里：

• 我有一组工作点精灵都使用同一个正方形图像。例如：16x16 的圆形图像效果很好。
• 我有一个 Objective-C 方法，它生成一个 600x600 的图像，其中包含一个带有多个图像的精灵表。我已经通过将整个精灵表图像应用到使用 GL_TRIANGLES 绘制的四边形来验证这是有效的。
• 我已成功使用上述方法将精灵表的一部分绘制到四边形上。我只是无法让它与点精灵一起使用。
• 目前，我正在生成纹理坐标，指向我要定位的精灵表上的精灵中心。例如：使用底部的图像；星级：0.166,0.5；云：0.5,0.5；心脏：0.833,0.5。

代码：

顶点着色器

uniform mat4 Projection;
uniform mat4 Modelview;
uniform float PointSize;

attribute vec4 Position;
attribute vec2 TextureCoordIn;

varying vec2 TextureCoord;

void main(void)
{
    gl_Position = Projection * Modelview * Position;
    TextureCoord = TextureCoordIn;
    gl_PointSize = PointSize;
}

片段着色器

varying mediump vec2 TextureCoord;
uniform sampler2D Sampler;

void main(void)
{
    // Using my TextureCoord just draws a grey square, so
    // I'm likely generating texture coords that texture2D doesn't like.
    gl_FragColor = texture2D(Sampler, TextureCoord);

    // Using gl_PointCoord just draws my whole sprite map
    // gl_FragColor = texture2D(Sampler, gl_PointCoord);
}

我的困惑：

1. 我不明白如何在片段着色器中使用gl_PointCoord 变量。 gl_PointCoord 最初包含什么？为什么？它从哪里获取数据？
2. 我不明白要传入什么纹理坐标。例如，点精灵如何根据纹理坐标选择要使用我的精灵表的哪个部分？我习惯于绘制实际上具有 4 组纹理坐标（每个顶点一组）的四边形，这有什么不同（显然是这样）？

Answer 1

我的一位同事帮助解答了这个问题。事实证明，诀窍是利用点的大小（以 OpenGL 为单位）和精灵的大小（以纹理为单位，（0..1））结合一点矢量数学来仅渲染部分sprite-sheet 到每个点上。

顶点着色器

uniform mat4 Projection;
uniform mat4 Modelview;
// The radius of the point in OpenGL units, eg: "20.0"
uniform float PointSize;
// The size of the sprite being rendered. My sprites are square
// so I'm just passing in a float.  For non-square sprites pass in
// the width and height as a vec2.
uniform float TextureCoordPointSize;

attribute vec4 Position;
attribute vec4 ObjectCenter;
// The top left corner of a given sprite in the sprite-sheet
attribute vec2 TextureCoordIn;

varying vec2 TextureCoord;
varying vec2 TextureSize;

void main(void)
{
    gl_Position = Projection * Modelview * Position;
    TextureCoord = TextureCoordIn;
    TextureSize = vec2(TextureCoordPointSize, TextureCoordPointSize);

    // This is optional, it is a quick and dirty way to make the points stay the same
    // size on the screen regardless of distance.
    gl_PointSize = PointSize / Position.w;
}

片段着色器

varying mediump vec2 TextureCoord;
varying mediump vec2 TextureSize;
uniform sampler2D Sampler;

void main(void)
{
    // This is where the magic happens.  Combine all three factors to render
    // just a portion of the sprite-sheet for this point
    mediump vec2 realTexCoord = TextureCoord + (gl_PointCoord * TextureSize);
    mediump vec4 fragColor = texture2D(Sampler, realTexCoord);

    // Optional, emulate GL_ALPHA_TEST to use transparent images with
    // point sprites without worrying about z-order.
    // see: http://stackoverflow.com/a/5985195/806988
    if(fragColor.a == 0.0){
        discard;
    }

    gl_FragColor = fragColor;
}

Answer 2

点精灵由单个位置组成。因此，任何“变化”的值实际上都不会变化，因为它们之间没有任何插值。

gl_PointCoord 是一个vec2 值，其中 XY 值介于 [0, 1] 之间。它们代表该点上的位置。 (0, 0) 是点的左下角，(1, 1) 是右上角。

因此，您希望将 (0, 0) 映射到精灵的左下角，并将 (1, 1) 映射到右上角。要做到这一点，你需要知道一些事情：精灵的大小（假设它们都是相同的大小），纹理的大小（因为纹理获取函数采用标准化纹理坐标，而不是像素位置），以及 当前正在渲染哪个 sprite。

后者可以通过varying 设置。它可以只是作为每个顶点数据传递到顶点着色器中的varying 的值。

您使用它加上精灵的大小来确定要在纹理中的哪个位置为该精灵提取数据。一旦有了要使用的纹理坐标，就可以将它们除以纹理大小以生成归一化的纹理坐标。

在任何情况下，点精灵，尽管有这个名字，实际上并不意味着 sprite 渲染。为此使用四边形/三角形会更容易，因为您可以更准确地确定所有东西的位置。