提示
教程例子都可以到下面网址进行运行，不需要另外安装软件环境：
官方提供在线编写shader工具：https://thebookofshaders.com/edit.php
glslsandbox网站：http://glslsandbox.com/
shadertoy网站：https://www.shadertoy.com/
本文提到的关键字
| 关键字 | 描述 |
|---|---|
| GL_ES | openGLES （移动端/网页openGL） |
| precision | 精确度 |
| mediump | 中等精度，16位 |
| float | 浮点 |
| main | 主函数 |
| gl_FragColor | 输出颜色 |
| vec4 | 四维浮点数，定义4个一组的浮点值 |
填充纯色
在线效果：
http://glslsandbox.com/e#55143.0
#ifdef GL_ES
precision mediump float;
#endif
void main( void ) {
gl_FragColor = vec4(1.,.0,.0,1.);
}
- shader 语言 有一个 main 函数
- 最终的像素颜色取决于预设的全局变量 gl_FragColor
- 这个类 C 语言有内建的变量（像gl_FragColor），函数和数据类型 (这也是很多人蒙圈的原因，如果不了解这些内建变量，你会不知道输入与输出的逻辑）
- 如果我们仔细观察 vec4 类型，可以推测这四个变元分别响应红，绿，蓝和透明度通道
- 另一个可以从本例看出来的很重要的类 C 语言特征是，预处理程序的宏指令。在例子中，我们检查了 GL_ES 是否被定义，这个通常用在移动端或浏览器的编译中。（这里的是将精度调低，让浏览器/移动端运算速度更快，当然效果相对更差）
- float类型在 shaders 中非常重要，所以精度非常重要。更低的精度会有更快的渲染速度，但是会以质量为代价。你可以选择每一个浮点值的精度。在第一行（precision mediump float;）我们就是设定了所有的浮点值都是中等精度。但我们也可以选择把这个值设为“低”（precision lowp float;）或者“高”（precision highp float;）。
- GLSL 语言规范并不保证变量会被自动转换类别。所以写成整数
gl_FragColor = vec4(1,0,0,1);是会出错的。 - 你可以把vec4拆成两个vec2或者vec3+float的形式，非常灵活。
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0);或者vec4 color = vec4(vec2(1.0,0.0),vec2(1.0,1.0),);
