clay-core
Version:
Provide a more friendly web-side drawing interface!
111 lines (100 loc) • 3.44 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
绘图对象
</header>
<p>
3D绘图采用的是WebGL实现，当然，你使用2D绘图对象，借助投影矩阵等实现也是可以的，不过这不是天然支持的。
</p>
<pre class='prettyprint lang-js'>var render3D=$$('canvas').webgl();</pre>
<p>
Canvas默认就是一个画布，调用webgl方法，表示我们要在上面绘制3D图形，这样就返回了一个3D启动器。
</p>
<pre class='prettyprint lang-js'>var gl=render3D.painter();</pre>
<p>
3D启动器用于处理许多基础的操作（比如着色器，缓冲区等），而绘制图形的时候，和2D一样，需要获取画笔，就像上面那样。
</p>
<p class="warn">
请记住render3D和gl，并明确他们是干什么的，这对阅读后续文档非常重要！
</p>
<h2>
一个简单的例子
</h2>
<img src="../../images/webgl.png" width='300' alt="彩色三角形">
<p>
绘制一个渐变色的三角形，主要用于说明借助clay.js绘制webgl图形的大致过程。
</p>
<h4>
着色器
</h4>
<p>
首先，我们需要准备好着色器：
</p>
<pre class='prettyprint lang-js'><!-- 顶点着色器 -->
<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></pre>
<pre class='prettyprint lang-js'><!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
precision mediump float;
varying vec4 v_color;
void main(){
gl_FragColor=v_color;
}
</script></pre>
<p>
着色器的语法采用的是GLSL SE语法，着色器在后续会有专门说明。
</p>
<h4>
程序代码
</h4>
<pre class='prettyprint lang-js'>// 启动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);</pre>
<h4>
最终效果
</h4>
<p>
最终效果如上右图所示，因为我们定义了三角形三个点的颜色都不一样，着色器会自动进行颜色插值，也就是你看见的渐变效果。
</p>
<p>
虽然这是一个2D的例子，不过绘制3D的过程也和这差不多，特别是借助clay.js绘制的时候。
</p>
</body>
</html>