纹理采样坐标以渲染精灵 [英] 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;
虽然第一次实施此方法时， 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 ES相关的GL ES纹理映射有什么变化？也许我做错了什么？ （例如，顶点位置坐标稍微偏离？错误的纹理设置参数？）但是我的代码库没有改变，所以也许我从一开始就做错了什么......？
我的意思是，至少在我的代码中，感觉好像红色方法曾经是正确但现在是蓝色方法给出了更好的结果。
现在，我的游戏看起来还不错，但我觉得有一些错误，我迟早要修好......
任何想法/经验/意见？
ADDENDUM
为了渲染上面的精灵，我会在正交投影中绘制一个4x3的四边形，每个顶点分配前面提到的代码中隐含的纹理坐标，如下所示：
//左上顶点
{sMin，tMin};
//左下顶点
{sMin，tMax};
//右上顶点
{sMax，tMin};
// Bottom-right Vertex
{sMax，tMax};
原始四边形是从（-0.5，-0.5）到（+0.5，+ 0.5）创建的;即它是屏幕中心的单位正方形，然后缩放到子区域的大小（在这种情况下，4x3），其中心位于整数（x，y）坐标。我觉得这有什么可做的，特别是当宽度，高度或两者都不均匀时？
ADDENDUM 2
我也找到了这篇文章，但我还是想把它放在一起（这是凌晨4点）
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屋！
