25. 屏幕像素和纹理像素不匹配

1.一个屏幕像素对应多个纹理像素

2.一个纹理像素对应多个屏幕像素

1.一个屏幕像素对应多个纹理像素

1).先明确核心场景

一张1024 × 1024的纹理贴在3D地面上:

a.当地面离相机很近时, 纹理在屏幕上占满几百上千个像素, GPU能逐个采样纹理像素, 画面清晰

b.当地面离相机很远时, 这张1024×1024的纹理在屏幕上只占10 × 10甚至2 × 2个像素, GPU需要从纹理的1024 × 1024个原

始像素里, 挑出少数几个来填充屏幕上的这几个像素, 问题就出在这个"挑像素"的过程

2).出现的问题

a.闪烁: 侧重"视角微移后的采样突变"

当这个情况出现在"纹理的非边缘区域", 比如布满细密图案的地面、墙面时, 就会出现闪烁; 单个屏幕像素覆盖纹理上的一

大片密集像素区域(比如: 100个纹理像素), GPU会从这一片里"随机/固定采样少数几个像素来代表屏幕像素的颜色"

相机只要轻微移动一丢丢, 这个屏幕像素对应的纹理区域就会完全切换成旁边另一批像素, GPU采样的颜色会突然剧变, 比如

从浅灰变深灰、从有图案变无图案; 最终视觉上就是远处纹理忽明忽暗、跳来跳去, 也就是闪烁(也叫纹理走样)

b.锯齿: 侧重"纹理边缘的采样不连贯"

这个情况出现在纹理的清晰边缘, 比如黑白交界、图形轮廓时, 就会出现锯齿; 单个屏幕像素覆盖的纹理区域里, 既有边缘

一侧的颜色比如黑, 也有另一侧的颜色比如白; GPU无法同时显示两种颜色, 只能硬选其中一种, 导致边缘的屏幕像素要么全

黑, 要么全白, 没有中间过渡; 最终视觉上就是边缘呈现阶梯状的锯齿, 而非平滑的线条

2.一个纹理像素对应多个屏幕像素

1).先明确核心场景

这个情况出现在纹理的物理分辨率 < 显示区域的像素分辨率时, 简单说就是"纹理被放大了", 比如一张256 × 256的低分辨

率纹理, 贴在1024 × 1024的UI背景/3D 模型面上, 屏幕上显示的区域需要1024 × 1024个像素, 而纹理只有256 × 256个像

素, 就会出现1个纹理像素需要填充4 × 4 = 16个屏幕像素

GPU的处理逻辑: 没有额外的像素信息可以采样, 只能把"单个纹理像素的颜色, 直接填充给对应的多个屏幕像素", 问题就出

在这个"无信息填充"的过程

2).出现的问题

a.最明显: "像素化/马赛克效果"

这是最核心的问题, 用生活化的比喻就是: 把一张小尺寸的手机照片, 强行放大成海报贴在墙上, 照片里的每个小像素点,都

会变成海报上的一个大色块, 画面全是密密麻麻的方块, 边缘清晰的格子感就是马赛克

- Unity场景举例: 用128 × 128的低分辨率Sprite做手机端的全屏UI背景, 会看到整个背景都是大块的颜色方格,没有细腻

的过渡

- GPU逻辑: 单个纹理像素的颜色被直接复制到多个屏幕像素, 形成颜色一致的"像素块", 纹理的"平滑感完全消失"

b.次明显: 边缘生硬/阶梯感

这里也会出现锯齿, 但和之前"单屏幕像素对应多纹理像素"的锯齿成因、表现都不同; 前者的锯齿是采样不连贯,边缘无过渡

后者的锯齿是"纹理本身分辨率不足, 边缘的纹理像素被放大后, 形成更粗的阶梯状边缘"

举例: 一张低分辨率的圆形纹理, 放大后边缘不是平滑的曲线, 而是一格一格的方形阶梯, 圆形看起来像"圆角正方形"

c.隐性问题: 纹理细节完全丢失

如果纹理上有细密的细节, 比如文字、小图案、纹理纹路, 放大后这些细节会直接被抹平/消失

比如一张带文字的128 × 128纹理, 放大后文字会变成模糊的色块, 根本看不清; 3D模型的低分辨率贴图放大后, 表面的纹路

质感会完全丢失, 变成"光面"