作者：新叶时间：2020-01-2120:08image3D是一个基于WebGL开发的web端3D绘图库，包括常用的3D接口和辅助方法，助你快速绘制您自己的3D图形。如何使用？首先要说明一下绘制的基本过程：编辑shader→创建3D对象→准备数据→绘制我们接下来要绘制一个点，点的颜色、大小和位置是不断变化的。当着色器绘制时，我们本质上需要通过着色器与GPU进行交互。所以这里需要提前定义好需要传递的数据。看看这个例子中的着色器：attributevec4a\_position;属性floata\_size；属性vec4a\_color；变化vec4v\_color；voidmain(){gl\_Position=a\_position;gl\_PointSize=a\_size;v\_color=a\_color;precisionmediumpfloat;变化vec4v\_color；voidmain(){gl\_FragColor=v\_color;}shader有两种：Vertexshader和fragmentshader，前者用来传递点的位置和大小，后者用来传递点的颜色。从本质上讲，shader其实就是两个字符串，用script标签包裹起来，方便在html文本中编辑，可以看下面的流程。shader的代码有点像C语言。这三个点我们要明白：gl开头的三个，分别对应点的位置、大小、颜色（从上到下）。这些是shader的内置变量，属于第二个shader，我们所谓的传值，从这个层面来说，就是最后给这三个变量赋值。再看属性修饰的三个变量。这个修饰符修饰的变量相当于暴露了一个入口。image3D提供了一种传递值的方法。所谓传值就是通过这个入口实现的（第二个修饰符vec4和float都是可变数据类型，其他语言类似）。上一篇中提到的入口是通过属性修改实现的，为每个点提供，片段着色器是针对所有点的，所以属性不能直接出现在第二类着色器中，我们需要使用varying修饰符来实现标记一个桥接器实现两个着色器之间的数据传输。3D物体着色器准备好之后，我们就可以使用这两个着色器来创建一个3D物体了。同样，看这个例子中的代码：varimage3d=newimage3D(document.getElementsByTagName('canvas')\[0\],{//passshader"vertex-shader":document.getElementById("vs").innerText,"片段着色器":document.getElementById("fs").innerText});从这里可以看出，着色器无非是两段字符串。传递数据的实际例子是不断变化的。为了方便说明，我们这里假设有一个瞬间的操作：image3d//设置点的位置.setAttributeFloat("a\_position",0.5,0.5,0.0)//设置点的大小point.setAttributeFloat("a\_size",50.0)//设置点的颜色.setAttributeFloat("a\_color",1.0,0.0,0.0);例如，点的位置，“a_position”是用变量对应的着色器中的属性修改的。大部分都是凭感觉就能看出来的。这里有两点：image3D选择的是右手坐标系，记为uvz（对应数学上的坐标系是xyz），每个轴的有效可视范围是-1.0~1.0，所以坐标(0.5,0.5,0.0)这里出现在页面第一象限的中心（右上角），请注意与浏览器坐标的区别。点的颜色需要传三个值，范围从0.0到1.0，对应RGB（当然也可以有alpha透明度，这里不传）。当一切准备就绪可以开始绘制时，只需拿起画笔进行绘制即可：image3d.Painter().drawPoint(0,1);这里示例的缩小版最终会绘制一个大小为50px的红色正方形，位于第一象限的中心。如需完整示例，请单击此处查看实际效果。当然，上面的例子可能过于简单，你也可以尝试稍微复杂一点的旋转24边形的例子，下面是某个时刻的截图（本身在运动，不断旋转）：
