3D绘图采用的是WebGL实现，当然，你使用2D绘图对象，借助投影矩阵等实现也是可以的，不过这不是天然支持的。

var render3D=$$('canvas').webgl();

Canvas默认就是一个画布，调用webgl方法，表示我们要在上面绘制3D图形，这样就返回了一个3D启动器。

var gl=render3D.painter();

3D启动器用于处理许多基础的操作（比如着色器，缓冲区等），而绘制图形的时候，和2D一样，需要获取画笔，就像上面那样。

请记住render3D和gl，并明确他们是干什么的，这对阅读后续文档非常重要！

一个简单的例子

绘制一个渐变色的三角形，主要用于说明借助clay.js绘制webgl图形的大致过程。

着色器

首先，我们需要准备好着色器：

<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
    attribute vec4 a_position;
    attribute vec4 a_color;
    varying vec4 v_color;
    void main(){
        gl_Position=a_position;
        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>

着色器的语法采用的是GLSL SE语法，着色器在后续会有专门说明。

程序代码

// 启动3D绘图
var render3D = $$('canvas').webgl();

// 启用着色器
render3D.shader($$('#vs')[0].innerHTML, $$('#fs')[0].innerHTML);

// 获取画笔
var gl = render3D.painter();

// 数据
var data = new Float32Array([
    // 顶点坐标     色彩
    0.0, 0.5,      1.0, 0.0, 0.0,
    -0.5, -0.5,    0.0, 1.0, 0.0,
    -0.5, 0.5,     0.0, 0.0, 1.0
]);

render3D
    // 初始化缓冲区
    .buffer()

    // 数据写入缓冲区
    .write(data)

    // 写入缓冲区的数据分配
    .use('a_position', 2, 5, 0)
    .use('a_color', 3, 5, 2);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

最终效果

最终效果如上右图所示，因为我们定义了三角形三个点的颜色都不一样，着色器会自动进行颜色插值，也就是你看见的渐变效果。

虽然这是一个2D的例子，不过绘制3D的过程也和这差不多，特别是借助clay.js绘制的时候。