TWaver3D直线、曲线、曲面的绘制

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

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

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

今天来说关于绘图的那些事儿。

先说说绘图引擎的种类。目前市面上绘图引擎大致可以分为两类。一类基于HTML技术，比如TWaver2D/3D引擎。HTML5是业界公认的Web标准和最热门和主流的技术，可以在浏览器中直接创建2D、3D场景，无需安装任何插件，几乎已经应用到所有行业的Web应用中。目前所有的主流浏览器都很好的支持HTML5技术，包括手机、平板等移动端浏览器的支持。

还有一种是Unity公司的Unity3D引擎。Unity3D需要在浏览器中安装专门的播放器插件才能运行，有点类似正在垂死挣扎的Flash技术。另外，Unity3D主要支持桌面浏览器，并不支持移动端的浏览器插件。由于安装插件不便利，并且有一定的安全隐患，所以Unity3D在企业应用中并不常见，反倒在游戏行业中能够很好地一展身手。

---

下面就分享一下如何用 TWaver3D引擎绘图吧。

1. WebGL原生线

WebGL支持绘制点、线、三角；绘制线的方法比较简单，给定顶点，设置绘制方式即可；

假设给定顶点信息为：

var vertices = new Float32Array([
0.0, 0.5, -0.5, -0.5, 0.25, -0.5
]);

调用gl.drawArrays(gl.LINE_STRIP, 0, 3);后效果如下：

Chrome:

Safari:

另外还有个兼容性问题，在Windows上，绘制线的时候无法指定线宽。OpenGL本身有glLineWidth这个方法，而且在WebGL中也有这个方法。但是在Windows虽然调用不会失败，但是也不会生效，无论是在Chrome还是在FireFox上测试都无效。但是Linux上有效，应该是操作系统的限制问题。这个问题之前就有人提出过，如果有兴趣可以看看https://bugs.chromium.org/p/chromium/issues/detail?id=60124。也许在以后的WebGL版本中会修复这个问题吧。测试网站http://alteredqualia.com/tmp/webgl-linewidth-test/。
设置lineWidth为10后，Chrome效果不变，Safari线条加粗了.

测试网站测试：

Chrome不正常

Safari正常

FireFox正常：

是Chrome长期存在的一个Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=60124

可以参考WebGL大咖彪叔的文章：WebGL 绘制Line的bug

2. mono.Line类

构造函数：

实线：

var line = new mono.Line({
vertices:[
new mono.Vec3( -100, 0, 0 ),
new mono.Vec3( 100, 100, 0 ),
],
type:'mono.LinePieces',
styles:{
'm.color':'red',
},
});
box.add(line);

虚线：
原来的参数是通过segments来计算出更多的顶点信息；其实可以通过配置line的style属性，如line.pattern = [10,2]来计算出顶点信息；
封装了mono.Line.createDottedLine方法，用于根据pattern创建虚线；

var line = new mono.Line({
type:TGL.LinePieces,
styles:{
'm.color':'green',
'm.type':