UI上显示模型时残留轮廓问题

[liuxq]

在UI上显示模型大致两种方法，一是直接把模型放在UI上渲染，二是另启一个相机（或者commandbuffer）将模型渲染到rendertexture上，然后把rendertexture在UI上当做图片来渲染。

第一种方式由于不利于UI层级管理，大部分项目用的第二种方式。
大体方案是指定一个分辨率的rendertexture，赋给渲染模型的camera，相机clearcolor的a设置成0，这样模型存在的像素上a是大于0的。后续混合到UI背景上时使用One OneMinusSrcalpha的blend就能保证保留实体模型，丢弃原背景。



如上图所示，大体上达到要求，但是细心观察能看到模型的周围有一个轮廓边。轮廓边的产生是由于纹理采样的误差导致的。

在填充一个像素的时候，通过uv坐标去采样纹理，但是uv坐标不一定正好指定在一个像素上，还可能（很可能）指定在四个像素之间，这时候硬件会根据周围四个像素插值出这个坐标的颜色。如下图所示，图中的0和1表示纹理的alpha值，我们把它想象成rendertexture中模型实体和背景的边界，红点表示当前要渲染的像素，此时红点的值应该是0到1之间，blend之后是会渲染出背景颜色的，这个漏出的背景颜色就是我们看到的轮廓边。（比如在渲染模型时用的ClearColor是红色，则轮廓边就是红色的）

想要去掉轮廓边，就需要uv坐标正好取在纹理的像素之上，而不是像素之间。要达到这个要求，需要满足两点：1.渲染像素和输入的纹理像素是一一对应的，也就是渲染的quad的分辨率和输入的rendertexture的分辨率必须一致。2.渲染的每个像素要和输入的纹理像素一一对齐，由于分辨率是一致的，所以只要起始像素对齐，也就都对齐了。

分辨率一致的要求比较简单，需要换算一下渲染的UI上的quad的实际分辨率是多少，然后根据这个分辨率去设置rendertexture的分辨率。
像素对齐的要求可以用一个取巧的方法，把纹理采样的方式从Bilinear改为Point，也就是即使没有对齐，但是会找最近的像素，而不是去相邻四个像素去插值。

[deveuper]

路过，手动点赞