clay-core
Version:
Provide a more friendly web-side drawing interface!
56 lines (52 loc) • 1.91 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>
着色器分为两种：顶点着色器（Vertex shader）和片元（或片段）着色器（Fragment shader）。
</p>
<h4>
顶点着色器
</h4>
<p>
用于描述顶点特征（比如位置，大小，颜色等）的程序，在这里就是一段字符串，为了书写和调试方便，常常这样书写：
</p>
<pre class='prettyprint lang-js'><script type='x-shader/x-vertex' id='vs'>
// 定义参数
void main(){
// 设置顶点特征
}
</script></pre>
<h4>
片元着色器
</h4>
<p>
用于配置逐片元处理过程中，如何计算光照等数据，和上面一样，也是一段字符串，和上面的区别在于，这是针对全部点的配置：
</p>
<pre class='prettyprint lang-js'><script type='x-shader/x-fragment' id='fs'>
// 基本配置
// 定义参数
void main(){
// 设置顶点特征
}
</script></pre>
<h2>
使用着色器
</h2>
<pre class='prettyprint lang-js'>render3D.shader($$('#vs')[0].innerHTML, $$('#fs')[0].innerHTML);</pre>
<p>
编辑好着色器字符串以后，运行上面的语句，表示启用着色器，然后才可以借助这两个着色器程序绘图（编译着色器字符串创建的着色器程序存储在gl.program中）。
</p>
</body>
</html>