着色器

着色器程序是以字符串的形式 “嵌入” 在 js 文件中，在程序真正开始运行前它就已经设置好了

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片断着色器方法。 片断着色器的作用是计算出当前绘制图元中每个像素的颜色值。

顶点着色器（Vertex Shader）

用来描述顶点特性（如位置、大小）的程序。顶点（vertex）是指二维空间或三维控件中的一个点，比如二维或三维图形的端点或交点

片段着色器（Fragment Shader）

进行逐片段处理过程的程序（颜色），片段就是显示在屏幕上的一个像素，包括该像素的位置、颜色和其他信息

着色器之间的图形装配和光栅化过程

1. 执行顶点着色器
2. 装配图形: 将孤立的顶点根据 gl.drawArrays() 的第一个参数装配成几何图形
3. 光栅化: 将装配好的几何图形转化成片元（片段或像素）
4. 逐片元调用片段着色器

着色器获取数据的方法

数据类型

1. float 浮点数
2. vec4 由4个浮点数组成的矢量

齐次坐标： （x, y, z, w） 价于 (x/w, y/w, z/w), w 通常为 1.0, 设置它的目的主要是为了提高处理三维数据的效率

获取数据的4种方法

attribute(属性)

缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。我们可以一次性向缓冲区对象中填充大量的顶点数据，然后保存这些数据供顶点着色器使用。

属性用来指明怎么从缓冲（js程序）中获取所需数据并将它提供给 顶点着色器

uniform(全局变量)

全局变量在着色程序运行前赋值，在运行过程中全局有效 uniform 设置的颜色信息是对所有的顶点设置同一种颜色，如果要对不同的顶点设置不同颜色，需要使用 varying

varying

从顶点着色器向片段着色器传递数据。

顶点着色器向片段着色器传递颜色值时，会经过 内插过程

texture(纹理)

1. 纹理映射就是将一张图片贴到一个几何图形的表面上去，这张图片就可以称为 纹理

2. 纹理坐标是纹理图像上的坐标，需要转成 webgl 坐标系统

3. webgl通过一种称为 “纹理单元” 的机制来同时使用多个纹理（一般是8个纹理单元), 每个纹理单元通过编号管理一张纹理图像

4. texParameteri

• 缩小方法（gl.TEXTURE_MIN_FILTER）：纹理图像比纹理范围大时的处理方法
• 放大方法（gl.TEXTURE_MAX_FILTER）
• 水平填充方法（gl.TEXTURE_WRAP_S）：如何对纹理图像左侧或者右侧填充
• 垂直填充方法（gl.TEXTURE_WRAP_T）

变换矩阵

1. vec 为数组，分别表示 [x, y, z], 大小为（-1， 1）
2. 矩阵相乘时，先变换的为被乘数。比如先平移后旋转，就是 旋转矩阵 X 平移矩阵 X 原始矩阵

旋转

旋转角度为正表示逆时针

其他

drawArrays

1. TRIANGLE_STRIP 三角形设为逆时针方向

三维世界

基本概念

1. 将观察者所处的位置称为 视点，从视点出发沿着观察方向的射线称为 视线。视点默认为 （0, 0, 0）
2. 观察目标点： 被观察目标所在的点，默认为 (0, 0, -1)
3. 上方向：最终绘制在屏幕上的影像中的向上的方向，是一个具有3个分量的矢量，默认为 (0, 1, 0)
4. 通过上述3个数据创造出的矩阵称为 视图矩阵