前言
这是webgl入门的第2节，内容包含weblg的坐标系和动态设置图形样式。
1. webgl坐标系统
由于webgl处理的是三维图形，所以它使用三维坐标系统。具有x轴、y轴、z轴。当你面对屏幕的时候，X轴是水平的（正方形向右），Y轴是垂直的（正方向向上（原文中有错）），而Z轴垂直于屏幕（正方向向外） 这套坐标系又叫右手坐标系。
如图所示，webgl的坐标系(原点在画布中间)跟canvas的坐标系（原点在画布左上角）是不同的。使用canvas显示webgl的时候，需要将webgl的坐标转换成canvas坐标。
- canvas中心点在:(0.0,0.0,0.0)
- canvas的上边缘和下边缘：(0.0,1.0,0.0)和(0.0,-1.0,0.0)
- canvas的左边缘和右边缘：(-1.0,0.0,0.0)和(1.0,0.0,0.0)
原书关于这里的描述是错误的，已订正
你可以点击这里通过修改gl_Position来查看效果。
2.绘制一个点（版本2）
这一节我们将讨论如何在Javascript和着色器之间传输数据。
在这一节中，webgl程序可以将顶点位置坐标从js传到着色器程序中我，然后在对应的位置将点绘制出来。
2.1 attribute变量
我们的目标是将位置信息从js传到着色器，有2种方式可以做到这点：attribute变量和uniform变量。使用哪个变量取决于要传递的数据本身。
- attribute变量传输的是与顶点有关的数据
- uniform变量传输的是那些对于所有顶点都相同的数据
attribute变量是GLSL ES变量，被用来从外部向顶点着色器内部传递数据，只有顶点着色器能使用它
使用attribute变量，程序应该包含如下步骤：
- 在顶点着色器中，声明attribute变量
- 将attribute变量赋值给gl_Position变量
- 向attribute变量传输数据
html代码(跟之前一样)：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webgl学习title>
head>
<body>
<canvas id="canvas" width="400" height="400">canvas>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/webgl-utils.js">script>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/webgl-debug.js">script>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/cuon-utils.js">script>
<script src="./index.js">script>
body>
html>
复制代码javascript代码（顶点着色器不一样了）:
// 顶点着色器 注意这里的\n不能省略。否则不符合语法
var VSHADER_SOURCE = `
attribute vec4 a_Position\n;
void main(){\n
gl_Position = a_Position;\n
gl_PointSize = 10.0;\n
}\n
`
// 片段（片元）着色器
var FSHADER_SOURCE = `
void main(){\n
gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n
}\n
`
function main () {
// 获取canvas
var canvas = document.getElementById('canvas')
// 获取webgl绘图上下文
var gl = canvas.getContext('webgl')
if (!gl) {
console.log('Failed to get the rendering context')
retun
}
// 初始化着色器函数
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('设置着色器失败')
return
}
// 获取attribute的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
if (a_Position < 0) {
console.log('Failed to get the storage of a_Position')
return
}
// 将顶点位置传输给attribute变量
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)
// 指定清空canvas的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
// 画一个点
gl.drawArrays(gl.POINTS, 0, 1)
}
window.onload = function () {
main()
}
复制代码点击查看效果
3. 代码解析
3.1 声明attribute变量
我们在着色器中声明的attribute变量
attribute vec4 a_Position;
在这一行中，关键词attribute被称为存储限定符，表示接下来的变量是一个attribute变量。attribute变量必须声明为全局变量，数据将从着色器外部传递给该变量。
变量声明的格式如下： <存储限定符><类型><变量名>
然后我们将attribute变量赋值给gl_Position
gl_Position = a_Position;
复制代码3.2 获取attribute变量的存储位置
每一个变量都有一个存储地址，我们通过存储地址向变量传输数据。为了向attribute变量传输数据，我们要先获取其存储地址。
// 获取attribute的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
复制代码方法的第一个参数是程序对象，它包含顶点着色器和片元着色器。gl.program是怎么来的，你可以查看html代码中引入的帮助函数cuon-utils.js
方法返回值是attribute变量的存储地址，这个地址被存储在js变量中。为了便于理解，本书存储变色器地址的js变量名跟着色器变量名一致（都是a_Position）。
gl.getAttribLocation(program,name)函数规范如下：
| 类型 | 参数 | 含义 |
|---|---|---|
| 参数 | program | 指定包含顶点着色器和片元着色器的程序对象 |
| 参数 | name | 指定想要获取存储地址的attribute变量名称 |
| 返回值 | 大于等于0 | 变量地址 |
| 返回值 | -1 | 指定的attribute变量不存在，或其命名具有gl_或者webgl_前缀 |
| 错误 | INVALID_OPERATION | 程序对象未能成功连接 |
| INVALID_VALUE | name参数的长度大于attribute变量名的最大程度（256个字节） |
3.3 向attribute变量赋值
// 将顶点位置传输给attribute变量
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)
复制代码gl.vertexAttrib3f(location,v0,v1,v2)的用法
| 类型 | 参数 | 含义 |
|---|---|---|
| 参数 | location | 指定要修改的attribute变量的存储位置 |
| v0 | 第一个分量的值（x的值） | |
| v1 | 第二个分量的值（y的值） | |
| v2 | 第三个分量的值（z的值） | |
| 返回值 | 无 | |
| 错误 | INVALID_OPERATION | 没有当前program对象 |
| INVALID_VALUE | location大于等于attribute变量的最大数目默认为8. |
gl.vertexAttrib3f() 同族函数
gl.vertexAttrib3f是一系列同族函数中的一个，该系列函数的任务就是象js顶点着色器中的attribute传值。
- gl.vertexAttrib1f(location,v0)
- gl.vertexAttrib2f(location,v0,v1)
- gl.vertexAttrib3f(location,v0,v1,v2)
- gl.vertexAttrib4f(location,v0,v1,v2,v3)
v0为x坐标，v1为y坐标，v2为z坐标，v3默认填1.0就可以。
3.4 webgl函数命名规范
<函数名称><参数个数><参数类型>
4 通过鼠标点击绘点
这一节我们将灵活的拓展js传输数据到顶点着色器的能力：在鼠标点击的位置上把点绘制出来。
html代码（跟之前相同）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webgl学习title>
head>
<body>
<canvas id="canvas" width="400" height="400">canvas>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/webgl-utils.js">script>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/webgl-debug.js">script>
<script src="https://mycode04-1252305175.cos.ap-guangzhou.myqcloud.com/webgl-lib/lib/cuon-utils.js">script>
<script src="./index.js">script>
body>
html>
复制代码js代码
// 顶点着色器 注意这里的\n不能省略。否则不符合语法
var VSHADER_SOURCE = `
attribute vec4 a_Position\n;
void main(){\n
gl_Position = a_Position;\n
gl_PointSize = 10.0;\n
}\n
`
// 片段（片元）着色器
var FSHADER_SOURCE = `
void main(){\n
gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n
}\n
`
function main () {
// 获取canvas
var canvas = document.getElementById('canvas')
// 获取webgl绘图上下文
var gl = canvas.getContext('webgl')
if (!gl) {
console.log('Failed to get the rendering context')
retun
}
// 初始化着色器函数
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('设置着色器失败')
return
}
// 获取attribute的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
if (a_Position < 0) {
console.log('Failed to get the storage of a_Position')
return
}
// 注册鼠标点击事件响应函数
canvas.onmousedown = function (ev) {
click(ev, gl, canvas, a_Position)
}
// 指定清空canvas的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
// 鼠标的点击位置数组
var g_pointArr = []
// 鼠标点击处理函数
function click (ev, gl, canvas, a_Position) {
var x = ev.clientX
var y = ev.clientY
var rect = ev.target.getBoundingClientRect()
// 计算点击位置在webgl系统中的x坐标（原书中这里有错误）
var x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)
// 计算点击位置在webgl系统中的y坐标（原书中有错误）
var y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)
// 将点x和y的坐标存入数组
g_pointArr.push(x)
g_pointArr.push(y)
// 清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
var len = g_pointArr.length
for (var i = 0; i < len; i += 2) {
gl.vertexAttrib3f(a_Position, g_pointArr[i], g_pointArr[i + 1], 0.0)
gl.drawArrays(gl.POINTS, 0, 1)
}
}
}
window.onload = function () {
main()
}
复制代码点击查看效果
5 函数解析
5.1 注册鼠标响应函数
这跟我们普通的注册dom事件是一样的。
canvas.onmousedown = function (ev) {
click(ev, gl, canvas, a_Position)
}
复制代码5.2 计算鼠标点击时的坐标
这一段程序中比较难理解的可能就是这点了。其实很简单。
var x = ev.clientX
var y = ev.clientY
var rect = ev.target.getBoundingClientRect()
// 计算点击位置在webgl系统中的x坐标（原书中这里有错误）
var x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)
// 计算点击位置在webgl系统中的y坐标（原书中有错误）
var y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)
复制代码以x坐标为例，我们简单的说明下。
ev.clientX为鼠标点击时鼠标距离浏览器左边的距离。 rect.left为canvas元素左边距离浏览器屏幕左边的距离。
那么x-rect.left就是鼠标距离浏览器左边的距离减去canvas元素距离浏览器左边的距离，得到的就是鼠标距离canvas左边的距离。
x - rect.left - canvas.width / 2 这个式子计算的结果的绝对值就是鼠标距离canvas中心点（webgl原点）的距离。
(x - rect.left - canvas.width / 2) / (canvas.width / 2) 就是鼠标点击时鼠标在wegl系统中的坐标值。
y坐标同理，因为我们就得到了鼠标点击时的x、y坐标。
6. 改变点的颜色
要改变点的颜色，就要使用片元着色器。可以使用uniform变量，将颜色值传给着色器。代码如下：
html代码同上,我这里就不写了。
js代码:
// 顶点着色器 注意这里的\n不能省略。否则不符合语法
var VSHADER_SOURCE = `
attribute vec4 a_Position\n;
void main(){\n
gl_Position = a_Position;\n
gl_PointSize = 10.0;\n
}\n
`
// 片段（片元）着色器
var FSHADER_SOURCE = `
precision mediump float;\n
uniform vec4 u_FragColor;\n
void main(){\n
gl_FragColor = u_FragColor;\n
}\n
`
function main () {
// 获取canvas
var canvas = document.getElementById('canvas')
// 获取webgl绘图上下文
var gl = canvas.getContext('webgl')
if (!gl) {
console.log('Failed to get the rendering context')
retun
}
// 初始化着色器函数
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('设置着色器失败')
return
}
// 获取attribute的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
if (a_Position < 0) {
console.log('Failed to get the storage of a_Position')
return
}
// 获取u_FragColor变量的存储位置
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
// 注册鼠标点击事件响应函数
canvas.onmousedown = function (ev) {
click(ev, gl, canvas, a_Position)
}
// 指定清空canvas的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
// 鼠标的点击位置数组
var g_pointArr = []
// 存储点颜色数组
var g_colorArr = []
// 鼠标点击处理函数
function click (ev, gl, canvas, a_Position) {
var x = ev.clientX
var y = ev.clientY
var rect = ev.target.getBoundingClientRect()
// 计算点击位置在webgl系统中的x坐标（原书中这里有错误）
var x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)
// 计算点击位置在webgl系统中的y坐标（原书中有错误）
var y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)
// 将点x和y的坐标存入数组
g_pointArr.push([x, y])
// 将点的颜色存储到g_colorArr中
if (x >= 0.0 && y >= 0.0) {
// 第一象限 红色
g_colorArr.push([1.0, 0.0, 0.0, 1.0])
} else if (x < 0.0 && y < 0.0) {
// 第三象限 绿色
g_colorArr.push([0.0, 1.0, 0.0, 1.0])
} else {
// 其他象限 白色
g_colorArr.push([1.0, 1.0, 1.0, 1.0])
}
// 清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
var len = g_pointArr.length
for (var i = 0; i < len; i++) {
gl.vertexAttrib3f(a_Position, g_pointArr[i][0], g_pointArr[i][1], 0.0)
console.log('u_FragColor:', u_FragColor)
// 将点的颜色传给u_FragColor变量中
gl.uniform4f(
u_FragColor,
g_colorArr[i][0],
g_colorArr[i][1],
g_colorArr[i][2],
g_colorArr[i][3]
)
gl.drawArrays(gl.POINTS, 0, 1)
}
}
}
window.onload = function () {
main()
}
复制代码点击这里查看效果
7. 程序解析
7.1 声明uniform变量
使用片元着色器就必须使用uniform变量，当然你也可以使用varying变量，不过varying变量要复杂的多，我们暂时先不讲它。
使用uniform变量之前，首先需要按照与声明attribute变量相同的格式<存储限定符><类型><变量名>来声明uniform变量。
uniform vec4 u_FragColor
复制代码在声明uniform变量之前，我们还使用精度限定词指定了变量的范围和精度，本例中为中等精度。关于精度的详细讨论我们在第5章再讲。
precision mediump float
复制代码7.2 获取uniform变量的存储地址
gl.getUniformLocation(program,name)
| 类型 | 参数 | 含义 |
|---|---|---|
| 参数 | program | 指定包含顶点着色器和片元着色器的程序对象 |
| name | 指定想要获取存储地址的uniform变量名称 | |
| 返回值 | non-null | 指定的uniform变量位置 |
| null | 指定的uniform变量不存在，或者其命名具有gl_或者webgl_前缀 | |
| 错误 | INVALID_OPPERATION | 程序对象未能成功连接 |
| INVALID_VALUE | name参数长度大于uniform变量名的最大长度（默认256字节） |
7.3 向uniform变量赋值
gl.uniform4f(location,v0,v1,v2,v3)
| 类型 | 参数 | 含义 |
|---|---|---|
| 参数 | location | 将要修改的uniform变量的存储位置 |
| v0,v1,v2,v3 | 指定填充uniform变量的第1-4分量 | |
| 返回值 | 无 | |
| 错误 | INVALID_OPERTAION | 没有当前program对象，或者location是非法的变量存储位置 |
7.4 gl.uniform4f()同族函数
gl.uniform4f也有一系列的同族函数，gl.uniform1f()函数传递1个值，gl.uniform2f()函数传递2个值，gl.uniform3f()函数传递3个值，
总结
在这一章中我们学习了，一些webgl的核心函数，并学习了如何使用它们，我们重点学习了着色器的相关知识，它是webgl的基石。