插播一则广告(长期有效)

MONO哥需要在武汉招JavaScript工程师若干
要求:对前端技术(JavasScript、HTML、CSS),对可视化技术(Canvas、WebGL)有浓厚的兴趣
基础不好的可培养,基础好的可共谋大事
感兴趣的给我发邮件:hr@servasoft.com

------------------------------------------------------------正文的分割线----------------------------------------------------------------

今天来谈点跟WebGL有关的事儿,不知道大家有没有碰到过类似的困扰。

熟悉WebGL的同学都知道,WebGL绘制模式有点、线、面三种;通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系;面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象。

一切看起来都很完美,perfect。

然而,不幸的是,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(应该是大多数情况下)线宽只能设置为1,而不能设置成其他的值。

通过网址http://alteredqualia.com/tmp/...,我们可以测试自己的电脑是否有线宽的不能设置的bug,以下是我的电脑(mac 电脑)用chrome(版本59.0.3071.115)的测试效果:

图片描述

(麻蛋,以前的mac 下的chrome是好使的,看来这病越来越严重了)

用firefox试试:

图片描述

在firefox下面看来还是正常的。

事实上,这是一个长久以来一直存在的bug,下面这个地址就是证明:

https://bugs.chromium.org/p/c...

图片描述

很早之前就有人提过了,只是一直没有解决。

这是病,得治,只是那些搞浏览器大佬们不想出药。

我们就只能想点偏方来自己治疗了。 

偏方是啥,由于Line的线宽是底层问题,我们并不好解决;不过,我们可以考虑通过面的绘制来模拟线,线的特点就是不随镜头变化而改变宽度,只要能够达到这个特点就可以达到模拟的效果。

下一篇将会介绍 如何通过三角形(面)的方式来模拟线条的绘制。

如果你对WebGL 感兴趣,可以了解下我们用WebGL开发的3D机房项目:

HTML5,不只是看上去很美(第二弹:打造最美3D机房)


MonoLog
2.9k 声望727 粉丝

专注UI,最近关注HTML5,以及webGL 3D,欢迎一起探讨。