用于渲染精灵的纹理采样坐标 [英] Texture Sampling Coordinates to Render a Sprite

问题描述

假设我们有一个纹理(在本例中为 8x8 像素)，我们想将其用作精灵表.其中一个子图像(精灵)是纹理内部 4x3 的子区域，如下图所示:

(显示四个角的归一化纹理坐标)

现在，基本上有两种方法可以将纹理坐标分配给 4px x 3px 大小的四边形，以便它有效地成为我们正在寻找的精灵；第一个也是最直接的方法是在子区域的角落对纹理进行采样:

//纹理坐标GLfloat sMin = (xIndex0)/imageWidth;GLfloat sMax = (xIndex0 + subregionWidth )/imageWidth;GLfloat tMin = (yIndex0)/imageHeight;GLfloat tMax = (yIndex0 + subregionHeight)/imageHeight;

虽然在第一次实现此方法时，ca.2010 年，我意识到精灵看起来有点扭曲".经过一番搜索，我在 cocos2d 论坛上看到了一篇文章，解释了在渲染精灵时采样纹理的正确方法"是这样的:

//纹理坐标GLfloat sMin = (xIndex0 + 0.5)/imageWidth;GLfloat sMax = (xIndex0 + subregionWidth - 0.5)/imageWidth;GLfloat tMin = (yIndex0 + 0.5)/imageHeight;GLfloat tMax = (yIndex0 + subregionHeight - 0.5)/imageHeight;

...在修复了我的代码之后，我高兴了一阵子.但在此过程中的某个地方，我相信是在 iOS 5 推出前后，我开始觉得我的精灵看起来不太好.经过一些测试，我切换回蓝色"方法(第二张图片)，现在它们看起来不错，但并非总是.

我是不是疯了，或者 iOS 5 与 GL ES 纹理映射相关的东西发生了变化?也许我做错了什么?(例如，顶点位置坐标略微偏离?错误的纹理设置参数?)但是我的代码库没有改变，所以也许我从一开始就做错了什么......?

我的意思是，至少在我的代码中，感觉好像红色"方法过去是正确的，但现在蓝色"方法提供了更好的结果.

现在，我的游戏看起来不错，但我觉得我迟早必须修复一些半错​​误的地方......

有什么想法/经验/意见吗?

附录

为了渲染上面的精灵，我会在正交投影中绘制一个 4x3 的四边形，每个顶点都分配了前面提到的代码中隐含的纹理坐标，如下所示:

//左上顶点{ sMin, tMin };//左下顶点{ sMin, tMax };//右上顶点{ sMax, tMin };//右下顶点{ sMax, tMax };

原始四边形是从 (-0.5, -0.5) 到 (+0.5, +0.5) 创建的；即它是屏幕中心的单位正方形，然后缩放到子区域的大小(在本例中为 4x3)，其中心位于整数 (x,y) 坐标处.我闻到这也有关系，尤其是当宽度、高度或两者都不均匀时?

附录 2

我也找到了这篇文章，但我仍在尝试整理(这里是凌晨 4:00)

Let's say we have a texture (in this case 8x8 pixels) we want to use as a sprite sheet. One of the sub-images (sprite) is a subregion of 4x3 inside the texture, like in this image:

(Normalized texture coordinates of the four corners are shown)

Now, there are basically two ways to assign texture coordinates to a 4px x 3px-sized quad so that it effectively becomes the sprite we are looking for; The first and most straightforward is to sample the texture at the corners of the subregion:

// Texture coordinates

GLfloat sMin = (xIndex0                  ) / imageWidth;
GLfloat sMax = (xIndex0 + subregionWidth ) / imageWidth;
GLfloat tMin = (yIndex0                  ) / imageHeight;
GLfloat tMax = (yIndex0 + subregionHeight) / imageHeight;

Although when first implementing this method, ca. 2010, I realized the sprites looked slightly 'distorted'. After a bit of search, I came across a post in the cocos2d forums explaining that the 'right way' to sample a texture when rendering a sprite is this:

// Texture coordinates

GLfloat sMin = (xIndex0                   + 0.5) / imageWidth;
GLfloat sMax = (xIndex0 + subregionWidth  - 0.5) / imageWidth;
GLfloat tMin = (yIndex0                   + 0.5) / imageHeight;
GLfloat tMax = (yIndex0 + subregionHeight - 0.5) / imageHeight;

...and after fixing my code, I was happy for a while. But somewhere along the way, and I believe it is around the introduction of iOS 5, I started feeling that my sprites weren't looking good. After some testing, I switched back to the 'blue' method (second image) and now they seem to look good, but not always.

Am I going crazy, or something changed with iOS 5 related to GL ES texture mapping? Perhaps I am doing something else wrong? (e.g., the vertex position coordinates are slightly off? Wrong texture setup parameters?) But my code base didn't change, so perhaps I am doing something wrong from the beginning...?

I mean, at least with my code, it feels as if the "red" method used to be correct but now the "blue" method gives better results.

Right now, my game looks OK, but I feel there is something half-wrong that I must fix sooner or later...

Any ideas / experiences / opinions?

ADDENDUM

To render the sprite above, I would draw a quad measuring 4x3 in orthographic projection, with each vertex assigned the texture coords implied in the code mentioned before, like this:

// Top-Left Vertex
{ sMin, tMin };

// Bottom-Left Vertex
{ sMin, tMax };

// Top-Right Vertex
{ sMax, tMin };

// Bottom-right Vertex
{ sMax, tMax };

The original quad is created from (-0.5, -0.5) to (+0.5, +0.5); i.e. it is a unit square at the center of the screen, then scaled to the size of the subregion (in this case, 4x3), and its center positioned at integer (x,y) coordinates. I smell this has something to do too, especially when either width, height or both are not even?

ADDENDUM 2

I also found this article, but I'm still trying to put it together (it's 4:00 AM here) http://www.mindcontrol.org/~hplus/graphics/opengl-pixel-perfect.html

解决方案

There's slightly more to this picture than meets the eye, the texture coordinates are not the only factor in where the texture gets sampled. In your case I believe the blue is probably what want to have.

What you ultimately want is to sample each texel in center. You don't want to be taking samples on the boundary between two texels, because that either combines them with linear sampling, or arbitrarily chooses one or the other with nearest, depending on which way the floating point calculations round.

Having said that, you might think that you don't want to have your texcoords at (0,0), (1,1) and the other corners, because those are on the texel boundary. However an important thing to note is that opengl samples textures in the center of a fragment.

For a super simple example, consider a 2 by 2 pixel monitor, with a 2 by 2 pixel texture.

If you draw a quad from (0,0) to (2,2), this will cover 4 pixels. If you texture map this quad, it will need to take 4 samples from the texture.

If your texture coordinates go from 0 to 1, then opengl will interpolate this and sample from the center of each pixel, with the lower left texcoord starting at the bottom left corner of the bottom left pixel. This will ultimately generate texcoord pairs of (0.25, 0.25), (0.75,0.75), (0.25, 0.75), and (0.75, 0.25). Which puts the samples right in the middle of each texel, which is what you want.

If you offset your texcoords by a half pixel as in the red example, then it will interpolate incorrectly, and you'll end up sampling the texture off center of the texels.

So long story short, you want to make sure that your pixels line up correctly with your texels (don't draw sprites at non-integer pixel locations), and don't scale sprites by arbitrary amounts.

If the blue square is giving you bad results, can you give an example image, or describe how you're drawing it?

Picture says 1000 words:

这篇关于用于渲染精灵的纹理采样坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！