clay-core
Version:
Provide a more friendly web-side drawing interface!
97 lines (93 loc) • 4.21 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>
什么是缓冲区？说的简单点，就是程序快速给GPU一堆数据的特殊通道。分为二种：
</p>
<ul>
<li>
1.缓冲区中保存了包含顶点的数据；
</li>
<li>
2.缓冲区保存了包含顶点的索引值（特殊使用，比如gl.drawElements方法等）。
</li>
</ul>
<p class="warn">
特殊注意：因为缓冲区是用来记录多条数据的，而片元着色器是针对一个片元处理的，因此不可以直接和缓冲区打交道，一般借助顶点着色器间接使用（我不知道这样说是否合适，不过大概是这个意思）。
</p>
<h4>
GLES变量
</h4>
<p>
在使用缓冲区之前，让我们先了解一下着色器语言的变量。其实只有三种（这和int、boolean之类的不是一个概念，这里的"种"是指这个变量是干什么的）：
</p>
<ul>
<li>
1.attribute：只可以出现在顶点着色器里，且只可以声明为全局变量，用来表示逐顶点信息；
</li>
<li>
2.uniform：可以出现在两个着色器中，不过只可以声明为全局变量，只读，用来表示一致的数据（顶点和片元共用，如果两个着色器说明同名的，会共享）；
</li>
<li>
3.varying：只可以声明为全局变量，主要用于从顶点着色器传递数据到片元着色器（此时两个着色器需要定义同名的变量）。
</li>
</ul>
<h4>
第一种缓冲区
</h4>
<p>
数据流动过程大概是：许多数据流到顶点着色器attribute定义的变量 -> 通过varying变量，数据再流到片元着色器（如果需要）。
</p>
<h2>
使用缓冲区
</h2>
<h4>
初始化（或创建）缓冲区对象
</h4>
<pre class='prettyprint lang-js'>var bufferObj=render3D.buffer(boolean);</pre>
<p>
可以传递一个boolean类型的参数，缺省为fasle，表示创建第一种类型的缓冲区，如果会true，创建的是第二种类型的缓冲区。
</p>
<h4>
数据写入缓冲区
</h4>
<pre class='prettyprint lang-js'>bufferObj.write(data[, usage]);</pre>
<p>
第一个参数是一个类型化数组，表示写入的数据，必输；第二个参数表示程序如何使用存储在缓冲区的数据，非必输。返回bufferObj。
</p>
<h4>
分配缓冲区中数据到指定的attribute变量
</h4>
<pre class='prettyprint lang-js'>bufferObj.use(location, size[, stride, offset, type, normalized]);</pre>
<ul>
<li>1.location：必输，字符串或指定待分配的attribute变量的存储位置；</li>
<li>2.size：必输，每个分量个数；</li>
<li>3.stride：非必输，相邻二个数据项的字节数（如果给一个变量参数数据可以不传）；</li>
<li>4.offset：非必输，数据的起点字节位置，默认0；</li>
<li>5.type：非必输，数据类型，默认为gl.FLOAT，也就是Float32Array；</li>
<li>6.normalized：非必输，表示是否把非浮点型的数据归一化到[0,1]或[-1,1]区间。</li>
</ul>
<p class='warn'>
注意：第二种缓冲区到上一步就结束了，这一步是针对第一类缓冲区的。返回bufferObj。
</p>
<h4>
关闭缓冲区
</h4>
<pre class='prettyprint lang-js'>bufferObj.close();</pre>
<p class='warn'>
关闭缓冲区必须在使用结束后（相关绘图结束）。返回gl。
</p>
</body>
</html>