Unity Pictures stitching middle gap problem Comments

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/CC_childe/article/details/102745632

There is a beauty, called symmetrical beauty. Symmetry can be seen everywhere, from Imperial temples to houses Hin Terrace, symmetrical beauty, beauty in solemn. Project, we often encounter some symmetrical picture, but in order to save resources, we will often choose to split in half, only choose one, the other half wants to flip directly in Unity.

emmmmmm ... it seems a bit wrong, in the middle of the black line is how is it?

Well, to figure out in the middle of that line, we need to figure out these two parameters - Wrap Mode and Filter Mode.


Mode Wrap: Texture.wrapMode cycle mode

Mode the Filter: UnityShader development of texture - Image Interpolation Point Unity in, Bilinear, Trilinear


Then look at the original material, the right is a few transparent pixels, of course, not to say that there must be a transparent pixel, as long as the left and right of the first pixel of the first pixel color inconsistency will happen, but clearly obvious differences.

Now slowly we analyze the reason for this result, we note that the value of the two parameters chosen above me:

        Wrap Mode: When Repeat as needed to render the UI size larger than the actual size of a pixel on the first extra part will be rendered from the left, again, when the need to be rendered twice as wide as the original, the image should be rendered two pictures side by side;

        Filter Mode: Bilinear 在渲染一个像素点位时,系统是从相邻的4个点位进行插值运算的,而不是等于原来这个点位上对应的颜色值,这样处理会使得图片在一些曲线上面看起来更加自然,但是也相应的会模糊一些。那么问题来了,既然是从相邻的4个点位取值,最左边和最右边都只有一侧有数据,另一侧的两个数据怎么取?把两边的尺寸各加一个像素,问题不就解决了么。既然要加一个像素,那这个像素又是怎么赋值?Look Wrap Mode。所以我们当前这种模式下最右边的那个像素取的值其实是那个像素左上、左下、右上、右下(到最左边那一列取值)这4个点的插值,而当前图片的最左边是空像素,所以最右边那一列像素要比实际的淡很多;

好了,原理已经说完了,怎么处理好这个问题呢?答案有两种:

一、将 WrapMode 设置为 Clamp,这样,最初(后)那一列边上拓展出来的像素也就是当前像素本身了,这样的出来的值也更贴近原来的效果;

二、将 Filter Mode 设置为 Point(Trilinear主要处理的3D场景UI时的优化方案,原理同Bilinear,勾选了 MipMap 后才能生效,不在 2DUI 的讨论范围),但是这个模式,在一些曲线比较明显的地方,块状化很明显。


别以为知道了上面的解决方案就能解决所有问题了,有的是坑让你跳 —— 和 UI 打交道怎么少的了图集,各种大大小小的图片打成一个图集,图片和图片之间总是存在透明像素,就算你将图片之间的透明像素设置为0,但相邻的图片的那一列像素基本不会是你想要的颜色值,这也就是说在图集里面通过设置图集图片的 WrapMode 这一方案基本是无效的,剩下的就只有设置 FilterMode 了,但是设置成 FilterMode 在不放大(缩小)原来的尺寸的情况下,或许能满足你想要的结果,但是你怎么能保证设置成 Point 后会不会对其他图片产生影响,特别是移动端,绝大多数的图片都要进行压缩处理,在被压缩过的图集上,你设置 FilterMode 为 Point,嘿嘿……

那图集里面怎么处理这种情况,反正我目前是没想到很好的解决办法,只能说能避免就避免吧。

Guess you like

Origin blog.csdn.net/CC_childe/article/details/102745632
Recommended