image3D

Fork me on Github

概要

我们的目的是借助这份文档和image3D可以比较轻松的绘制三维图形,包括一些交互和控制。这个库永远都是自由、开源、讨论和进步的。

我们欢迎任何人的加入,任何时候,特别是遇到疑惑,联系 作者都会是一个好主意。当然,提 issue也是不错的,因为这样更方便大家交流!

起步

具体的接口请查看对应章节,我们这里来演示一个简单的例子,向你说明绘制图形的基本方法,以便让你有一个整体的认识。

我们将绘制一个红色的正方形点(更复杂的图形绘制请学习 教程一章 ),完整的代码你可以 点击这里查看。

第一步:获得绘图对象

因为webgl是把canvas作为画布的,因此,我们首先需要有一个canvas结点:

<canvas width=500 height=500>非常抱歉,您的浏览器不支持canvas!</canvas>

有了画布以后,就可以获取画笔了?不,三维绘图比较麻烦,为了更方便绘制,我们要先获取一个叫 3D对象 的东西:

var render3D = $$(document.getElementsByTagName('canvas')[0]).render3D();

这个绘图对象非常重要,会提供我们需要的画笔和别的最基本的绘图相关接口。

第二步:设置着色器

和svg或canvas2D不一样,webgl绘图其实是借助着色器来实现的,以这个例子来简单说明就是:我们需要提供二个着色器,前者存储点的位置、大小,后者存储颜色。

是不是有点糊涂?其实简单的说,就是二段字符串(我们用script标签包裹起来只是为了方便编辑),我们直接看看代码:

存储点的位置、大小的着色器我们称为顶点着色器:

<script type='x-shader/x-vertex' id='vs'>
    void main(){
        gl_Position=vec4(0.0,0.0,0.0,1.0);
        gl_PointSize=100.0;
    }
</script>

存储颜色的我们称为片段着色器或片元着色器:

<script type='x-shader/x-fragment' id='fs'>
    void main(){
        gl_FragColor=vec4(1.0,0.0,0.0,1.0);
    }
</script>

上面已经说过了,这只是二段字符串,我们需要让它生效:

// 启用着色器
render3D.shader(
    document.getElementById('vs').innerHTML,
    document.getElementById('fs').innerHTML
);

到这一步,绘图的信息(也就是着色器)已经准备好了。

第三步:绘制
// 获取画笔
var gl = render3D.painter();
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
        

至此,一个红色的矩形点就绘制好了!

怎么样?是不是挺简单的,更复杂的图形其实绘制流程也是这样子,只不过数据更多了(这就需要用到缓冲区等别的辅助工具,这些工具也是由render3D或image3D提供),业务更复杂了,不过究其本质都大同小异。

下一步

通过上面的学习,你应该已经感受到了2D绘图和3D绘图的一些区别,接下来你应该跟着 教程 章节来系统学习一下(其余章节是重要文档,在学习和开发的时候随时查阅)。这里还有一个 问题交流 的部分,你可以把你使用的后的改进意见反馈给我们,或者在这里提出使用疑惑。