设备像素比知多少(threejs踩坑之旅)

Posted 2021-04-21 肥肠负能量

自从做可视化以来，就在三维世界里摸爬滚打，最近项目出现了一个问题，2k屏幕和4k屏幕显示二维平面世界地图都没有问题，可是到16k屏幕完全惨不忍睹，咨询了很多大佬，都表示说threejs没有这种奇葩的问题，肯定是代码问题。好吧，接下来就开始了各种排查，排查的小编已经濒临猝死边缘，等到发现问题根源的时候，我真的是想一头撞死。接下来就一起说说这个Bug到底是怎么回事儿吧。

Tip1.设备像素比devicePixelRatio

    Window.devicePixelRatio是设备上物理像素和设备独立像素（device-indepentpixel(dips)）的比例。

设备独立像素是什么呢？做前端的小伙伴应该都知道，设备独立像素是与设备无关的像素，代表着通过程序控制使用的虚拟像素，这是由操作系统定义的一种像素单位，应用程序将设备独立像素告诉操作系统，操作系统再将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。像我们在css中经常使用的像素实际上并不存在，这是一个抽象的概念。

 

设备像素顾名思义就是显示器上的真实像素，每个像素的大小是屏幕固有的属性。设备分辨率描述的就是这个显示器的宽和高分别是多少个物理像素，设备像素和设备分辨率是确定的，出厂后就不会改变了。

 

Bug所在：

在threejs渲染的时候，我为了保证16k屏下的显示效果，设置了渲染器的设备像素比如下：

renderer.setPixelRatio(window.devicePixelRatio);

遗憾的是，在我的1080p和4k屏显示的时候，window.devicePixelRatio均为1，影响不大，当页面投放到16k屏显示的时候，出现了本来应该居中显示的平面世界地图错位了，整体向右上方偏移了，如下图所示。  

 

                         

当时手头上没有16k屏，现场调试的小伙伴只给我发回了这样一张图片，无奈我在review了N遍代码之后只能去现场调试一下，查看了一下设备参数发现，系统的字体按照150%显示，浏览器放大到了175%，这时候window.devicePixelRatio变成了2.625，相当于canvas的内容比原来放大了2.625倍，这也就是为什么我们只看到了地图的一部分，而且还是整体偏移了，调整好设备参数，妥妥的解决了这个问题，但是我们在不了解设备的状况的情况下，一般不要设置render的pixelRatio，因为很有可能因为设备的问题导致的你页面运行错乱。

 

Tip2.世界地图的二维显示

  我们在用threejs进行世界地图的绘制的时候，一般是按照宽高比2:1进行绘制的，我的Canvas是按照window.innerWidth和window.innerHeight的大小进行绘制的，在2k屏上我的Canvas大小是1920*974，宽高比为1.97，近似于2:1，完全显示地图是没有问题的，可是切换到其他的例如4k屏下，我的Canvas是3840*2054，宽高比约为1.87：1,这时候你会发现你的地图在水平方向上溢出了屏幕，有一部分区域被遮挡了，其显示状态如下图所示。所以，如果你想地图完整的显示在屏幕上，最好要让Canvas按照宽高比2:1的比例去绘制。

TIP3.字体大小的设置

  根据前面介绍的设备独立像素的知识，我们知道，在高分辨率屏幕下，同样的像素值会比低分辨率屏幕下显示的小一些，为了适应4k、16k这些大屏下的显示效果，不要把字体和宽高设置成固定的像素值，最好设置成%、vh、vw，vh和vm作为css3中的新单位，表示相对于视窗的宽度和高度，这里的视窗指的是浏览器内部的可视区域大小，即我们在js中通过window.innerWidth和window.innerHeight得到的大小，具体vh和vw的使用，可以参照参考2来进行深入了解。

 

最后补充一下屏幕的叫法：

  一般我们用k表示水平方向的像素点，p表示垂直方向的像素点，横向像素个数在1000n之上，我们称之为nK屏。例如：水平方向上大于2000个像素点的屏幕我们才称为2k屏，2k屏一般指的是2048*1080的屏幕分辨率，一般16：9的显示器中，我们的屏幕分辨率为1920*1080，其实也可以称之为2k屏，但一般我们称之为1080p。同理，4k屏我们一般有3840*2160与4960*2160这两种分辨率，我们都叫4k屏。

 

[1] https://segmentfault.com/a/1190000011753855

[2] https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/