WebGL编程指南 - 高级变换与动画基础
- 学习使用一个矩阵变换库，该库封装了矩阵运算的数学细节。
- 快速上手使用该矩阵库，对图形进行复合变换。
- 在该矩阵库的帮助下，实现简单的动画效果。
矩阵变换库：cuon-matrix.js
OpenGL中的函数：
书中 cuon-matrix.js 函数库中是这样实现的：
函数库主要创建了一个Matrix4类（构造函数），在该类原型函数下绑定了众多方法，许多函数之前都留有注释，我们主要看一下代码最前面的注释：
/**
* This is a class treating 4x4 matrix.
* This class contains the function that is equivalent to OpenGL matrix stack.
* The matrix after conversion is calculated by multiplying a conversion matrix from the right.
* The matrix is replaced by the calculated result.
*/
根据注释可知，该函数库主要处理4×4的矩阵，对标OpenGL中矩阵处理函数。函数库提供了一个名为Matrix4的对象(构造函数)，我们可以通过new方法创建它的实例，对象内部挂载了许多关于矩阵计算的方法。
这样使用函数库的方法，写起来更加简单
- 矩阵的创建方式：
// RotatedTriangle_Matrix.js
...
// 创建旋转矩阵
let radian = (Math.PI * ANGLE) / 180.0 // 转换为弧度制
let cosB = Math.cos(radian)
let sinB = Math.sin(radian)
// 注意WebGL中矩阵是列主序的
let xformMatrix = new Float32Array([
cosB, sinB, 0.0, 0.0,
-sinB, cosB, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
])
...
// RotatedTriangle_Matrix4.js
...
// 创建旋转矩阵
// 为旋转矩阵创建Matrix4对象
let xformMatrix = new Matrix4()
// 将xformMatrix设置为旋转矩阵
xformMatrix.setRotate(ANGLE, 0, 0, 1)
...
- 传输矩阵数据
// RotatedTriangle_Matrix.js
...
// 将旋转图形所需数据传输给顶点着色器
let u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix')
if (!u_xformMatrix) {
console.log('Failed to get the storage location of u_xformMatrix')
}
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix)
...
// RotatedTriangle_Matrix4.js
...
let u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix')
if (!u_xformMatrix) {
console.log('Failed to get the storage location of u_xformMatrix')
}
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements)
...
Matrix4在不提供数据直接初始化的情况下，其挂载的element元素就是一个单位阵，之后大部分操作都是对element元素进行的。
从上表可见，Matrix4对象有两种方法：
- 一种方法的名称中含有前缀set，这一类方法会根据参数计算出变换矩阵，然后将变换矩阵写入自身；
- 另一种方法的名称中不含set前缀，这一类方法在计算出变换矩阵后，会将自身与计算出的变换矩阵相乘，最终结果写入Matrix4对象。
复合变换RotatedTranslatedTriangle.js
相关内容：采用Matirx4对象，运用矩阵乘法模拟符合变换。
相关函数：Matrix4.setRotate(), Matrix4.translate()注意：矩阵乘法的先后顺序与模型变换的先后顺序有关，不能随意变化(矩阵乘法不满足乘法交换律)。
注意是 左乘
一个模型可能经过了多次变换，将这些变换全部复合成一个等效的变换，就得到了模型变换(model transformation)，或称建模变换(modeling transformation)，相应的，模型变换的矩阵称为模型矩阵(model matrix)。
重写Rotatedtriangle_Matrix4 代码：
- 命名习惯，在顶点着色器中命名uniform变量(mat4)为u_ModelMatrix，取模型矩阵之意。
// 顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main(){\n' +
' gl_Position = u_ModelMatrix * a_Position;\n' +
'}\n'
- 构建矩阵时，采用Matrix4对象，先设置对象为旋转矩阵，再和平移矩阵相乘。
// 创建Matrix4对象
let modelMatrix = new Matrix4()
// 旋转角度
let ANGLE = 90.0
// 平移距离
let Tx = 0.5
// 设置模型矩阵为旋转矩阵
modelMatrix.setRotate(ANGLE, 0, 0, 1)
// 将模型矩阵乘以平移矩阵
modelMatrix.translate(Tx, 0, 0)
// 将模型矩阵传输给顶点着色器
let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
if (!u_ModelMatrix) {
console.log('Failed to get the storage location of u_ModelMatrix')
}
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
完整代码：
// RotatedTranslatedTriangle.js
// 顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main(){\n' +
' gl_Position = u_ModelMatrix * a_Position;\n' +
'}\n'
// 片元着色器
var FSHADER_SOURCE =
'void main(){\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + '}\n'
// 主函数
function main() {
// 获取canvas元素
let canvas = document.getElementById('webgl')
// 获取WebGL上下文
let gl = getWebGLContext(canvas)
if (!gl) {
console.log('Failed to get the rendering context for WebGL')
return
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to initialize shaders')
return
}
// 设置顶点位置
let n = initVertexBuffers(gl)
if (n < 0) {
console.log('Failed to set the positions of the vertices')
return
}
// 创建Matrix4对象
let modelMatrix = new Matrix4()
// 旋转角度
let ANGLE = 90.0
// 平移距离
let Tx = 0.5
// 设置模型矩阵为旋转矩阵
modelMatrix.setRotate(ANGLE, 0, 0, 1)
// 将模型矩阵乘以平移矩阵
modelMatrix.translate(Tx, 0, 0)
// 将模型矩阵传输给顶点着色器
let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
if (!u_ModelMatrix) {
console.log('Failed to get the storage location of u_ModelMatrix')
}
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
// 设置背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清空绘图区
gl.clear(gl.COLOR_BUFFER_BIT)
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)
}
function initVertexBuffers(gl) {
// 设置类型化数组和顶点数
let vertices = new Float32Array([0.0, 0.3, -0.3, -0.3, 0.3, -0.3])
let n = 3
// 创建缓冲区对象
let vertexBuffer = gl.createBuffer()
if (!vertexBuffer) {
console.log('Failed to create the buffer object')
return -1
}
// 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STREAM_DRAW)
let a_Position = gl.getAttribLocation(gl.program, 'a_Position')
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position')
return -1
}
// 将缓冲区分配给attribute变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启attribute变量(连接)
gl.enableVertexAttribArray(a_Position)
return n
}
动画-RotatingTriangle.js
相关内容：通过JavaScript灵活设计WebGL系统，通过反复变换和重绘图形生成动画效果；setInterval()系列函数和requestAnimationgFrame()系列函数的异同。
相关函数：setInterval(), requestAnimationFrame(), cancelAnimationFrame()
机制一：在t0、t1、t2、t3等时刻反复调用同一个函数来绘制三角形。
机制二：每次绘制之前，清除上次绘制的内容，并使三角形旋转相应的角度。
基于此，该实例程序与前面的示例有以下三点区别：
- 实现反复调用绘制函数的机制（机制一）
- 定义绘制函数，在绘制函数中包括清空绘图区、向着色器传值、绘制三步
- 由于程序需要反复绘制，所以在一开始就指定了背景色。
// RotatedTranslatedTriangle.js
// 顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main(){\n' +
' gl_Position = u_ModelMatrix * a_Position;\n' +
'}\n'
// 片元着色器
var FSHADER_SOURCE =
'void main(){\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + '}\n'
// 旋转速度(度/秒)
var ANGLE_STEP = 45.0
// 主函数
function main() {
// 获取canvas元素
let canvas = document.getElementById('webgl')
// 获取WebGL上下文
let gl = getWebGLContext(canvas)
if (!gl) {
console.log('Failed to get the rendering context for WebGL')
return
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to initialize shaders')
return
}
// 设置顶点位置
let n = initVertexBuffers(gl)
if (n < 0) {
console.log('Failed to set the positions of the vertices')
return
}
// 设置背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 获取u_ModelMatrix变量存储位置
let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
if (!u_ModelMatrix) {
console.log('Failed to get the storage location of u_ModelMatrix')
}
// 三角形当前旋转角度
let currentAngle = 0.0
// 模型矩阵，Matrix4对象
let modelMatrix = new Matrix4()
// 开始绘制三角形
let tick = function () {
currentAngle = animate(currentAngle) // 更新旋转角
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
requestAnimationFrame(tick) // 请求浏览器调用tick
}
tick()
}
function initVertexBuffers(gl) {
// 设置类型化数组和顶点数
let vertices = new Float32Array([0.0, 0.3, -0.3, -0.3, 0.3, -0.3])
let n = 3
// 创建缓冲区对象
let vertexBuffer = gl.createBuffer()
if (!vertexBuffer) {
console.log('Failed to create the buffer object')
return -1
}
// 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STREAM_DRAW)
let a_Position = gl.getAttribLocation(gl.program, 'a_Position')
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position')
return -1
}
// 将缓冲区分配给attribute变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启attribute变量(连接)
gl.enableVertexAttribArray(a_Position)
return n
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
// 设置旋转矩阵
modelMatrix.setRotate(currentAngle, 0, 0, 1)
// 旋转前加个平移
// modelMatrix.translate(0.5, 0, 0)
// 将旋转矩阵传输给顶点着色器
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
// 清空绘图区
gl.clear(gl.COLOR_BUFFER_BIT)
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)
}
// 记录上一次调用函数的时刻
var g_last = Date.now()
// 更新旋转角
function animate(angle) {
// 计算距离上次调用经过多长时间
let now = Date.now()
let elapsed = now - g_last // 毫秒
g_last = now
// 根据上次调用的时间，更新当前旋转角度
let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0
return (newAngle %= 360)
}
参考：【《WebGL编程指南》读书笔记-高级变换与动画基础】_webgl高级-CSDN博客
原文地址：https://blog.csdn.net/zaizai1007/article/details/143082693
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！