JavaScript Canvas-避免亚像素网格线

时间:2018-07-31 16:25:00

标签: javascript html5-canvas

作为编写许多OpenGL代码的人,我知道使用纹理图集时可以很好地看到的网格线。

话虽如此,一般而言,光栅化器负责子像素绘制。

但是,使用本机2D画布上下文似乎是另外一回事了。 虽然它支持基本的转换API,但我发现实际上很难使用它。 我实现了类似于OpenGL的摄像头系统-转换以移动,缩放以缩放,并且手动组合了这两种操作以围绕一个点缩放。

当平移或缩放比例非整数时,就会开始出现问题,就像在任何平滑相机中一样。 画布将愉快地渲染任何子像素,并在整个位置引入无尽的有缺陷的网格线。 确实,不使整个画布充满网格的唯一方法是始终以像素为单位进行翻译,并以整数进行缩放。这又意味着缩放不能以任何方式平滑。当物体很大时,它就不那么明显了,这样就可以使它们变小,但仍然在像素边界内花费不多。当物体较小时,这非常明显,并且您需要按一下缩放按钮而无所事事,然后突然一切都变小/变大。

所以tl; dr

  • 如果使用平移/缩放的相机是平滑的,则子像素渲染会导致网格线穿过整个画布。
  • 如果使用平移/缩放功能的相机仅适用于像素大小,则与画布尺寸相比,逻辑单元(在本例中为图块)越小,相机的感觉就越差。

是否存在使用转换API的实际方法?我需要WebGL在JS中始终呈现一个简单的图块地图吗?

0 个答案:

没有答案