WebGL编程指南01-着色器与常用API
前言
本系列是在学习WebGL编程指南中，做出的个人总结
Canvas
1.1 什么是 Canvas
Canvas 即画布，顾名思义就是绘画的地方，Canvas 在 HTML5 中被定义为一个标签，从此前端开发者可以通过这个标签和脚本语言(JavaScript)尽情发挥自己的想象力，Canvas 画布不但可以绘制二维图形，同样可以绘制三维图形。
1.2 获取 canvas 对象
实际上就是通过获取 dom 的方式获取 canvas 对象
<body>
<!--canvas标签创建一个宽高均为400像素蓝色背景的画布-->
<canvas id="webgl" width="400" height="400" style="background-color: blue"></canvas>
<script>
//通过getElementById()方法获取canvas画布
var canvas = document.getElementById('webgl');
</script>
</body>
1.3 获取 canvas 上下文
通过 getCentext 上下文
//获取上下文-二维
const gl = canvas.getContext("2d");
//获取上下文-三维
const gl = canvas.getContext("webgl");
着色器
webgl 依赖于一种着色器(shader)的绘图机制进行绘图，它提供了灵活且强大的绘图方式，它很强大，但同时也很复杂，着色器是 WebGL 的一项重要的和兴机制。在编码过程中它是以字符串的形式嵌入到 JavaScript 代码中。
2.1 着色器分类
webgl 有两种着色器,顶点着色器(Vertex shader) 和 片元着色器(Fragment shader)
- 顶点着色器用来描述顶点的位置和大小
- 片元着色器用来描述顶点的颜色
2.2 着色器初始化
在这里你需要知道，WebGL 程序包括运行在浏览器中的 JavaScript 程序和运行在 WebGL 系统的着色器程序这两部分，着色器程序以字符串的形式通过 Javascript 代码传给 WebGL 系统。简单说明一下，这里的以字符串形式体现的着色器程序是使用 着色器语言(GLSL ES) 编写的
2.3 着色器预言类型
这里提及着色器语言的数据类型，是因为该语言是强类型的编程语言
- float 表示浮点数
- vec4 表示四个浮点数组成的矢量
由四个分量组成的矢量被称为 齐次坐标，齐次坐标（x,y,z,w）等价于三维坐标（x/w,y/w,z/w）即你想把一个三维坐标转换为齐次坐标时，只需要给它添加一个分量，值为 1.0
2.4 顶点着色器初始化
顶点着色器的初始化实际就是给它的内置变量赋值，它有两个内置变量分别是 gl_Position 和 gl_PointSize
- gl_Position vec4 表示顶点的位置
- gl_PointSize float 表示点的尺寸(像素 px)
注意：gl_Position 变量必须被赋值，否则着色器无法正常工作，gl_PointSize 不是必须的，缺省时着色器默认取值 1.0
//顶点着色器
const VSHADER_SOURCE = `void main(){
//设置顶点位置(坐标原点)
gl_Position =vec4(0.0,0.0,0.0,1.0);
//设置点的大小(30px)
gl_PointSize=30.0;
}`;
2.5 片元着色器初始化
顶点着色器控制点的位置和大小，片元着色器控制点的颜色，片元着色器将点的颜色赋值给内置变量 gl_FragColor
- gl_FragColor vec4 指定片元颜色(RGBA 格式)
//片元着色器
var FSHADER_SOURCE = `void main(){
//设置片元颜色(红色)
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}\n;`;
3.部分webgl API说明
3.1设置背景色gl.clearColor()
在调用gl.clear清空颜色缓冲区颜色时，指定的背景颜色
函数功能：指定绘图区域的背景色
-----------------------------------------------------------
调用示例：gl.clearColor(red, green, blue, alpha)
-----------------------------------------------------------
参数
red 指定红色值（从0.0到1.0）
green 指定绿色值（从0.0到1.0）
blue 指定蓝色值（从0.0到1.0）
alpha 指定透明度值（从0.0到1.0）
小于0.0的值会被截断为0.0，大于1.0的值会被截断为1.0
-----------------------------------------------------------
返回值 无
-----------------------------------------------------------
错 误 无
3.2清空绘图区gl.clear()
清空绘图区实际上是清空颜色缓冲器，在Webgl中缓冲区有三类：颜色缓冲器、深度缓冲区、模板缓冲区
函数功能：将指定缓冲区设置为预定的值-预定的值指的是gl.clearColor()设置的值
-----------------------------------------------------------------------------------
调用示例：gl.clear(buffer)
-----------------------------------------------------------------------------------
参数
buffer 指定待清空的缓冲区，位操作位|可以用来指定多个缓冲区
gl.COLOR_BUFFER_BIT 代表清空颜色缓冲区
gl.DEPTH_BUFFER_BIT 代表清空深度缓冲区
gl.STENCIL_BUFFER_BIT 代表清空模板缓冲区
-----------------------------------------------------------------------------------
返回值 无
-----------------------------------------------------------------------------------
错 误 INVALID_VALUE 缓冲区不是以上三种类型
3.3绘制操作gl.drawArrays()
建立了着色器之后，我们就要进行绘制了，gl.drawArrays()是一个强大的函数，可以用来绘制各种图形，该函数的规范如下所示
函数功能：执行顶点着色器，按照mode参数指定的方式绘制图形
--------------------------------------------------------------------------
调用示例：gl.drawArrays(mode, first, count)
--------------------------------------------------------------------------
参数
mode 指定绘制的方式，可以接收以下常量符号：
gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP
gl.TRIANGLES,gl.TRIANGLE_STRIP,gl.TRIANGLE_FAN
first 指定从哪个点开始绘制-整形数
count 指定要绘制多少个顶点-整形数
--------------------------------------------------------------------------
返回值 无
--------------------------------------------------------------------------
错 误 INVALID_ENUM 传入的mode参数不是指定参数
INVALID_VALUE 参数first或count是负数