一、最短的WebGL程序：清空绘图区
<
二、着色器
2.1、着色器简介
WebGL需要两种着色器：
- 顶点着色器（Vertex shader） —— 顶点着色器用来描述顶点特性（如位置、颜色等）的程序。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点和交点。
- 片元着色器（Fragment shader） —— 进行逐片元处理的程序。片元是一个WebGL术语，可以将其理解为像素（图像的单元）。
2.2、OpenGL ES着色器语言（GLSL ES）
1）顶点着色器
顶点着色器控制点的位置和大小。
<!-- 顶点着色器 -->
顶点着色器的内置变量：
GLSL ES是一种强类型语言，GLSL ES中的数据类型：
GLSL ES内置函数vec4()
2）片元着色器
片元着色器控制点的颜色。
<!-- 片元着色器 -->
片元着色器的内置变量：
2.3、使用着色器
// 初始化着色器，并返回WebGLProgram对象（用于存放着色器对象的容器）
三、WebGL的坐标系统
四、绘制一个点（版本1）
<!DOCTYPE html>
WebGL中使用gl.drawArrays()进行绘制，它的API：
五、绘制一个点（版本2）
5.1、传递位置信息
1）attribute变量
将数据从JavaScript程序中传给顶点着色器，有两种方式：
- attribute变量 —— 传输那些与顶点相关的数据
- uniform变量 —— 传输那些对于所有顶点都相同（或与顶点无关）的数据
attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。
关键词attribute被称为存储限定符，它表示接下来声明的变量是一个attribute变量。attribute变量必须声明成全局变量。
使用attribute变量的步骤：
- 在顶点着色器中，声明attribute变量
- 将attribute变量赋值给gl_Position变量
- 在JavaScript程序中向attribute变量传输数据
<2）获取attribute变量的存储位置
每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。
gl.getAttribLocation(program, name)方法用于获取给定WebGLProgram对象中某属性的下标指向位置（也就是变量的存储地址）。它的API如下：
获取a_Position这个attribute变量的存储地址：
const 3）向attribute变量赋值
void gl.vertexAttrib[1234]f[v]()族函数用于为attribute变量赋值，它的API如下：
将顶点位置传输给a_Position这个attribute变量：
gl5.2、绘制一个点（版本2）的源代码
<!DOCTYPE html>
六、通过鼠标点击绘点
<!DOCTYPE html>
七、改变点的颜色
7.1、uniform变量
uniform变量用来从JS程序向顶点着色器和片元着色器传输“一致的”（不变的）数据。
声明uniform变量的格式：
7.2、获取uniform变量的存储地址
使用gl.getUniformLocation(program, name)函数获取uniform变量的存储地址：
7.3、向uniform变量赋值
使用gl.uniform[1234][fi][v]()族函数向uniform变量传值：
7.4、示例代码
<!DOCTYPE html>
扫一扫
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
