关于 shader 计算精度丢失问题的解决|WebGL地图引擎系列第四期

关于 shader 计算精度丢失问题的解决|WebGL地图引擎系列第四期   作者：J

大多数 GPU 只支持32位浮点数，因此在 GLSL（OpenGL Shading Language） 中使用 32bit 浮点数，当计算较大数值时会出现精度丢失的问题。

矩阵精度丢失问题和解决

在地图场景中，道路、绿地、水系这些元素的坐标是相对于一个网格的，因此坐标基本在0到256之间，在进行坐标转换时，程序将相对于网格的坐标转换为相对于屏幕中心点的坐标，每个网格的视图模型变换矩阵都要实时计算。在该矩阵中，位移的距离都比较小，因此不会出现精度丢失的问题。而另一类元素，比如文字、标注等，这类元素使用的坐标是相对于整个地图平面坐标原点的像素坐标，随着地图级别的放大，像素坐标值也跟随一起放大。 

如果不对精度丢失问题做处理，那么当放大到达一定级别后，移动地图时就会发现这些文字、标注会出现抖动。其本质原因是文字元素的视图模型变换矩阵的位移值较大，在 shader 中计算时会有精度的丢失，从而出现抖动。

不同的解决方案对比

一、提前用 JavaScript 计算好相对于屏幕中心点的坐标，再交给 shader 计算

这个方案能够解决精度丢失问题，但它的坏处是增加了 CPU 的开销，而且只要地图位置、级别发生变化，所有元素的屏幕坐标都会随之更改，因此要求在每一帧渲染前都要同步计算好屏幕坐标。随着添加到地图上的标注点的数量增多，计算量也随之增加，这会影响地图的渲染性能，因此该方案不太可行。