Half-Pixel Offset 究竟是个什么鬼？

墨蓝 2022-05-24 02:51 314阅读 0赞

**友情提示** *Half-Pixel Offset 其实算是个过时话题,请依据个人情况谨慎了解 :)*

讲述之前我们先明确几个概念:

*  窗口由正方形(注1)的像素(pixel)组成,每个像素只能显示一种颜色,并且**像素坐标的原点在左上角像素的中心点(重要)**
    
    ![以 3 \* 3 的窗口为例][3 _ 3]
 *  纹理也是由正方形的纹素(texel)组成,每个纹素代表一种颜色,并且**纹素坐标的原点在左上角纹素的左上角(重要)**
    
    ![以 2 \* 2 的纹理为例][2 _ 2]
 *  纹理的采样使用的是双线性(Bilinear)插值的方式(更多的细节可以看[这里][Link 1])
    
    ![以采样 2 \* 2 的纹理的(0.5, 0.5)点为例][2 _ 2 _0.5_ 0.5]

需要了解的概念就是这些,现在我们尝试在像素坐标的原点处绘制一个 2 \* 2 大小的正方形,还记的像素坐标的原点是在像素的中心吗?我们想要绘制的正方形大概是这个样子:

![示意图][70]

由于像素是离散的,我们需要将绘制的正方形与像素尽可能的”对齐”(这里涉及到光栅化的规则,有兴趣的朋友可以去[这里][Link 2]了解),所以实际绘制的正方形是这个样子的:

![示意图][70 1]

考虑到我们是从像素坐标的原点开始定义正方形的,所以上图所示的实际绘制结果也是符合预期的(正方形左上角与窗口左上角是对齐的)

现在我们想要将上面的纹理映射到刚才所绘制的正方形上去,为此我们需要为正方形的每个顶点计算纹素坐标,计算过程很简单,相关结果如下图所示:

![示意图][70 2]

简单想象一下,通过上面的纹理映射,我们期望得到的绘制结果是这个样子的:

![示意图][70 3]

但实际上,我们得到的绘制结果却是这个样子的:

![示意图][70 4]

什么鬼 ?

不急,我们来简单梳理一下~

回忆一下最开始需要绘制的的正方形示意图,我们在上面标注下纹素坐标:

![示意图][70 5]

根据上图中像素对应的纹素坐标,我们可以计算出像素对应的纹素颜色(此处我们没有详细讲解计算的方法,不清楚的朋友可以理解为取纹素坐标附近的四个像素的加权平均值即可):

![计算公式][70 6]

于是我们便得到了上面那个令人诧异的绘制结果~

怎么修正这个问题呢?

一种方法是直接偏移像素的纹素坐标,拿上面的正方形绘制为例,我们在采样纹素点(0, 0)时做一个(0.25, 0.25)的偏移,即采样(0 + 0.25, 0 + 0.25)点的纹理,这样我们便能采样到预期的纹理颜色了

不过更通用的做法,还是直接偏移顶点的像素坐标,仍然拿上面的正方形绘制举例,我们对正方形的各个顶点做一个(-0.5, -0.5)像素的偏移,那么实际绘制的正方形就是这个样子的:

![示意图][70 1]

此时,各个像素中点对应的纹素坐标如下图所示:

![示意图][70 7]

根据纹素坐标计算一下像素颜色即可发现我们采样到了预期的纹理颜色:

![计算公式][70 8]

而上述那么(-0.5, -0.5)的像素偏移,即是 **Half-Pixel Offset**

Half-Pixel Offset 只会在 Direct3D 9 及之前的Direct3D版本上出现,本质原因是像素坐标和纹素坐标定义不一致,OpenGL的像素坐标和纹素坐标定义是一致的,Direct3D 10以后也统一了像素坐标和纹素坐标的定义, Half-Pixel Offset 的问题也就不再存在了

如果你对于这个话题还有进一步了解的兴趣,可以再看看[这里][Link 3],[这里][Link 4],[这里][Link 5],和[这里][Link 6]

##### 注1 : 严格来讲,像素是点,而不是正方形 #####

[3 _ 3]: /images/20220524/8285507de84d413cb23053edb201c093.png
[2 _ 2]: /images/20220524/833760be274045e39f4dbb43797d6901.png
[Link 1]: https://msdn.microsoft.com/en-us/library/bb172357%28v=vs.85%29.aspx
[2 _ 2 _0.5_ 0.5]: /images/20220524/22e4927396c74bce93137eab6effca04.png
[70]: /images/20220524/ef7b853569ca411aa981c24f9703f62c.png
[Link 2]: https://msdn.microsoft.com/en-us/library/bb147314%28v=vs.85%29.aspx
[70 1]: /images/20220524/37bc05acdee94e4cba90eb0ea13ed2f5.png
[70 2]: /images/20220524/89cd1e546281493e8e2a3ef13e61e5e8.png
[70 3]: /images/20220524/38e5fb64ba6d4e59b1d02c87becd4204.png
[70 4]: /images/20220524/47ccb57da9fd4912bd44e807c7473bcf.png
[70 5]: /images/20220524/202c74503df44143915cef6040c3e779.png
[70 6]: /images/20220524/d352d8a6ccee4ecd814c7d65afbd0df8.png
[70 7]: /images/20220524/ec2b25545e5d481ca10b7f4694850dd9.png
[70 8]: /images/20220524/fed0963db38d4ea08442b7794958320e.png
[Link 3]: https://msdn.microsoft.com/en-us/library/bb219690%28VS.85%29.aspx
[Link 4]: https://msdn.microsoft.com/en-us/library/cc308049%28VS.85%29.aspx
[Link 5]: https://aras-p.info/blog/2016/04/08/solving-dx9-half-pixel-offset/
[Link 6]: http://drilian.com/category/development/graphics/d3d9/