WebGL纹理UV坐标16位精度异常问题排查

核心原因 #

这个现象的本质是GPU纹理采样单元对UV坐标的处理依赖16位定点数精度，而非float32的全精度，导致远早于float32阈值的精度丢失。

具体逻辑拆解 #

• 纹理采样的坐标转换：调用texture()时，GPU会先将归一化UV（0.0~1.0）转换为纹理空间坐标：UV * 纹理分辨率。但硬件纹理单元为了采样效率，会将UV值转换为16位定点数进行运算，而非保留float32的23位尾数精度。
• 17位精度丢失的触发：当UV偏移所需的精度超过16位时，定点数无法准确表示该偏移，导致计算出的纹理像素坐标偏移，原本应采样的绿色像素被相邻蓝色像素覆盖，出现渗色。
• 手动取整的修复原理：你写的取整代码是在着色器的浮点运算单元（用float32全精度）完成UV * 512的取整，再转回归一化UV，相当于绕过了纹理单元的定点数转换，用更高精度保证了坐标与纹理像素中心的对齐，因此能恢复正确采样。

官方依据 #

WebGL2基于OpenGL ES 3.0规范，相关细节如下：

1. OpenGL ES 3.0规范中明确，纹理采样单元的坐标转换可采用固定精度定点数实现，只要最终结果符合采样模式的行为要求。
2. 官方实现文档补充：硬件纹理单元普遍使用16位定点数存储UV的小数部分，这是因为常规纹理尺寸（如4096×4096仅需12位精度）下16位足够覆盖，但超出16位精度的偏移会丢失信息。

额外说明 #

你的512×512纹理仅需9位精度即可定位像素，但当UV偏移的精度需求达到17位时，超出了16位定点数的表示范围，因此触发异常。手动对齐的方式本质是将坐标精度控制在纹理单元能处理的范围内。

内容的提问来源于stack exchange，提问作者Doofus