初识WebGL
01-手动绘制一个WebGL图形
image-20190325140143588.png
实现的步骤：
- 添加一个画布元素
- 获取到画布元素的基于webgl上下文环境对象
- 使用对象中的API实现图形绘制
02-使用着色器绘制一个 WebGL图形
image-20190325144201606.png
- WebGL 中的坐标系统：
01-坐标.jpg
02-坐标.jpg
- 着色器的介绍：
着色器是使用 OpenGL ES Shading Language 语言编写的程序，负责记录像素点的位置和颜色，并由顶点着色器和片段着色器组成，通过用GLSL 编写这些着色器，并将代码文本传递给WebGL执行时编译，另外，顶点着色器和片段着色器的集合我们通常称之为着色器程序。
顶点着色器的功能是将输入顶点从原始坐标系转换到WebGL使用的缩放空间坐标系，每个轴的坐标范围从-1.0到1.0，顶点着色器对顶点坐标进行必要的转换后，保存在名称为gl_Position的特殊变量中备用。
片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次，它的功能是确定像素的颜色值，并保存在名称为gl_FragColor的特殊变量中，该颜色值将最终绘制到图形像素的对应位置中。
绘制三角形
01-多点绘制的方法
image-20190326133332093.png
-
什么attribute 变量
它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它。
-
使用attribute 变量
-
在顶点着色器中，声明一个 attribute 变量。
-
将 attribute 变量赋值给 gl_Position 变量。
-
向 attribute 变量传输数据。
-
-
使用缓存区关联attribute变量
- 创建缓存区对象
- 绑定缓存区对象
- 将数据写入对象
- 将缓存区对象分配给attribute变量
- 开启attribute变量
02-绘制三角形的方法
- 实现代码
WebGL动画
01-图形的移动
image-20190318160443253.png
- 平移原理
为了平移一个三角形，只需要对它的每个顶点进行移动，即每个顶点加上一个分量，得到一个新的坐标：
X1=X+TX``Y1=Y+TY``Z1=Z+TZ
只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现，当然这这修改在顶点着色器上。
- uniform类型变量
用于保存和传输一致的数据，既可用于顶点，也可用于片断。
02-图形的旋转
image-20190326165438537.png
旋转原理
为了描述一个图形的旋转过程，必须指明以下内容：
-
旋转轴(围绕X和Y轴旋转)
-
旋转的方向(顺时针和逆时针)，负值是为顺时针，正值时为逆时针
-
旋转的角度(图形经过的角度)
image-20190319154151430.png
image-20190327174612322.png
03-图形的缩放
image-20190318160344389.png
- 缩放的原理
通过改变原有图形中的矩阵值，实现图形的拉大和缩下效果，因此，只需要修改原有图形的矩阵值即可。
image-20190319154240988.png
-
动画实现
需求：制作一个按旋转三角形的动画
效果：
[图片上传失败...(image-d185fd-1589540667105)]
屏幕刷新频率
图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，一般是60Hz的屏幕每16.7ms刷新一次。
动画原理
图像被刷新时，引起以连贯的、平滑的方式进行过渡变化。
核心方法
requestAnimationFrame(callback) //执行一个动画,并在下次绘制前调用callback回调函数更新该动画
WebGL颜色
01-操作步骤介绍
image-20190318162409517.png
-
颜色添加步骤
- 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color
- 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。
- 重新传入到顶点坐标和颜色值的类型化数组
- 将数组值传入缓存中并取出，赋值给顶点的两个变量
- 接收缓存值并绘制图形和颜色
-
vertexAttribPointer 方法
-
参数 说明 第1个参数 指定待分配attribute变量的存储位置 第2个参数 指定缓存区中每个顶点的分量个数（1~4） 第3个参数 类型有，无符号字节，短整数，无符号短整数，整型，无符号整型，浮点型 第4个参数 表示是否将非浮点型的数据归到[0,1][-1,1]区间 第5个参数 相邻两个顶点的字节数。默认为0 第6个参数 表示缓存区对象的偏移量（以字节为单位），attribute 变量从缓冲区中的何处开始存储 -
案例实现
- 添加画布元素，并获取webGL对象，保存在变量中。
- 定义着色器内容，并进行附件编译。
- 使用缓存对象向顶点传入多个坐标数据。
- 根据坐标数据绘制图像。
02-着色器编译与图像绘制
- 代码实现
网友评论