WebGL 绘制Line的bug（一）

插播一则广告（长期有效）

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机房）