使用 WebGL 绘制三维图片 image3D

做者：心叶
时间：2020-01-21 20:08

image3D是一个基于WebGL开发的web端3D绘图库，包括经常使用的三维接口和辅助方法，帮助你快速绘制本身的三维图形。

如何使用？

首先，咱们不得不说明一下绘图的基本流程： 编辑着色器 → 建立3D对象 → 准备好数据 → 绘制

咱们接下来准备绘制一个点，点的颜色、大小和位置不停改变。

着色器

绘图的时候，本质上咱们都是须要经过着色器来和GPU进行数据交互，所以，须要传递的数据都须要在这里提早定义好，看看本例子的着色器：

<!-- 顶点着色器 -->
<script type\='x-shader/x-vertex' id\='vs'\> attribute vec4 a\_position;
    attribute float a\_size;
    attribute vec4 a\_color;
    varying vec4 v\_color;
    void main(){
        gl\_Position=a\_position;
        gl\_PointSize=a\_size;
        v\_color=a\_color;
    }
<script\> <!-- 片断着色器 -->
<script type\='x-shader/x-fragment' id\='fs'\> precision mediump float;
    varying vec4 v\_color;
    void main(){
        gl\_FragColor=v\_color;
    }
<script\>

着色器分二类：顶点着色器和片断着色器，前者用于传递点的位置和大小，后者用于传递点的颜色。

本质上来说，着色器其实就是二个字符串，用script标签包裹是为了在html文本中方便编辑，在后面的过程就能够看出来了。

着色器的代码有点像C语言，咱们目前须要了解这三点：

• gl开头的有三个，分别对应点的位置、大小和颜色（从上到下），这是着色器内置的变量，分别隶属于二个着色器，咱们所谓的传值，从这个层次看，就是最终给这三个变量赋值。
• 而后再看看attribute修饰的三个变量，被这个修饰符修饰的变量等于暴露了一个入口，image3D提供了传值的方法，所谓的传值，也就是经过这个入口实现的（第二个修饰符，vec4和float是变量的数据类型，相似别的语言）。
• 前一条说的入口由attribute修饰实现，是针对每一个点提供的，片断着色器是针对所有的点，所以attribute不能够直接出如今第二类着色器中，咱们须要使用varying修饰符来标记一个桥梁，实现二个着色器之间的数据传递。

3D对象

着色器准备好了之后，咱们就可使用这二个着色器建立3D对象了，一样的，看看本例中的代码：

var image3d = new image3D(document.getElementsByTagName('canvas')\[0\], {

    // 传递着色器
    "vertex-shader": document.getElementById("vs").innerText,
    "fragment-shader": document.getElementById("fs").innerText

});

从这里是否是能够看出来，着色器只不过是二段字符串。

传递数据

实际的例子是不停的改变，咱们为了方便说明，这里假设某个瞬间的操做：

image3d
    // 设置点的位置
    .setAttributeFloat("a\_position", 0.5, 0.5, 0.0)
    // 设置点的大小
    .setAttributeFloat("a\_size", 50.0)
    // 设置点的颜色
    .setAttributeFloat("a\_color", 1.0, 0.0, 0.0);

好比点的位置，“a_position”是和着色器中attribute修饰的变量对应的。大部分根据感受应该就能够看出来，下面稍微提二点：

• 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边形这个稍微复杂点的例子，下面是某个瞬间的截图（自己是运动的，不停旋转）：