WebGL文字渲染的那些问题 (2)

WebGL文字渲染的那些问题

  开辟一块内存区域

WebGL文字渲染的那些问题

  在需要的时候动态更新局部纹理,其中src这里是ImageData对象

WebGL文字渲染的那些问题

 

  具体代码可以参考这里,我这里也是基于它来定制的。
  https://github.com/spite/THREE.UpdatableTexture
  原文作者通过更改THREE.js源码的方式实现,而我是直接把下面这个函数拷贝到这个子类中

WebGL文字渲染的那些问题

四、高清屏的大坑

  现在我们的方案是,先在gpu中开辟一块全局纹理区域,然后绘制时将poi绘制到一张与全局纹理同样大小的canvas上,然后从canvas中调用createImageData来获取像素,将像素局部更新到gpu中。那么在pc上我们得到的结果很完美。

WebGL文字渲染的那些问题

   然而放到移动端上后,我们得到的结果是:

WebGL文字渲染的那些问题

    

WebGL文字渲染的那些问题

  TMMD中间那块哪去了!找了大半天发现问题出现在高清屏上,挡在高清屏上绘制canvas上时,我们通常会做一些高清处理,比如四像素绘制一像素。
  我们做高清处理的方式是利用radio*radio设备像素绘制一css像素,看起来是css像素的大小,但实际在浏览器内部,看起来css上一像素实际在canvas里的像素是radio * radio(radio代表window.devicePixelRatio)

WebGL文字渲染的那些问题

  但实际上在浏览器内部绘制canvas图像的单位是设备像素。那么如果我们还以上面的rectW、rectH来获取像素的话,我们得到的这部分像素并不是这个poi真正占有的像素数目。

WebGL文字渲染的那些问题

  所以,问题就来了我们需要在gpu开辟的全局纹理的单位跟canvas中获取像素的单位要保持一致,我们统一使用设备像素。

 

WebGL文字渲染的那些问题

   我们对canvas也不用使用style来设置样式宽高了。

WebGL文字渲染的那些问题

   那么获取poi图像的真正像素范围时:

WebGL文字渲染的那些问题

   所以利用getImageData取像素时候,就要小心取到真正的像素区域,(startX * radio,startY * radio)- (poiRectW * radio, poiRectH * radio);否则某些像素就会被丢弃掉,这部分像素才是浏览器真正使用的设备像素。

   现在在移动设备上能够获取正确的高清label啦!

WebGL文字渲染的那些问题

五、局部更新引起的新问题

   当全局纹理被占满时候,在继续绘制poi,这时候新的poi区域需要更新到gpu中,那么也就带来了新的问题,在gpu中的纹理还保持着之前的像素,而新的poi会覆盖这部分区域,但有时候往往会与之前的文字叠加起来,效果如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyffd.html