设备像素比
有时候我们会发现，使用WebGL绘制的图片在手机上存在明显的锯齿。
这是因为，目前大多数手机屏幕都采用了HiDPI或者Retina高清屏，相比传统的屏幕的优势是，单位CSS pixel可以显示更多物理像素，从而图片显示更细腻。
这里需要引入一个概念，设备像素比（device pixel ratio），缩写dpi，表示显示设备的物理像素分辨率和CSS像素分辨率的比例。近两年的iphone机型的dpi都达到3了。
在JavaScript中，可以通过Window.devicePixelRatio获取当前设备屏幕的dpi。
Cavas尺寸
想让WebGL适配高清屏幕，我们需要一些额外工作。
首先，我们需要理解Canvas的尺寸。Canvas有两个尺寸：
- 绘制缓冲区大小，表示WebGL可以用来绘制内容的最大区域，单位是物理像素。
- Canvas显示大小，表示Canvas元素在屏幕显示的大小，单位是CSS Pixel。
绘制缓冲区大小，可以通过canvas元素的width和height两个属性设置。
// html
<canva width="300" height="300">
// js
canvas.width = 300;
canvas.height = 300;
显示大小，可以通过css的width和height属性设置。
canvas {
width: 300px;
height: 300px;
}
高清适配
在高清屏上，如果仍然把绘制缓冲区大小和 canvas显示大小保持相同，就会出现图片模糊现象。需要让绘制缓冲区的大小和实际绘制的物理像素保持一致。
const displaySize = canvas.getBoundingClientRect();
canvas.width = Math.round(displaySize.width * window.devicePixelRatio);
canvas.height = Math.round(displaySize.height * window.devicePixelRatio);
除此之外，还需要设置WebGL视口的位置和大小，WebGL视口决定了归一化设备坐标如何转换到屏幕坐标。WebGL上下文第一次初始化时，视口的左上角为（0，0），宽高和绘制缓冲区大小相同。如果更改了绘制缓冲区大小，WebGL视口大小不会自动变化，需要手动调用WebGLRenderingContext.viewport()设置。
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
下图是，同一个图片在同一个设备上（dpi=2）的对比，依次是原图、canvas绘制缓冲大小等于canvas显示大小、canvas绘制缓冲大小是canvas显示大小的二倍。可见，不做适配的话，图片锯齿明显。
