🏈 [WebGL编程指南] 9. 层次模型
多个简单模型组成复杂的模型
绘制由多个小部件组成的复杂模型，最关键的问题是如何处理模型的整体移动，以及模型之间的相对移动。
当情况比较简单时，实现“部件A带动部件B转动”，只需要对部件B施以A的旋转矩阵即可。比如，使模型矩阵上臂绕关节转动30都，然后再绘制关节以下部位时，为它们施加同一个模型矩阵。这样就能自动跟随上臂旋转了
情况再复杂一些，比如先使上臂绕肩关节转动30度，然后使前臂绕肘关节转动 10度，那么对肘关节以下的部分，你就得先施加上臂绕肩关节转动30度的矩阵，再施加前臂绕肘关节转动10度的矩阵。将这两个矩阵相乘，然后施加给关节以下的矩阵。
javascriptCopy
// 初始化顶点坐标
// ...
const u_MvpMatrix = ...
const u_NormalMatrix = ...
// 视图投影矩阵
const viewProjMatrix = new Matrix4()
// 坐标变换矩阵
const g_ModelMatrix = new Matrix4()
const g_MvpMatrix = new Matrix4()
// arm1
const arm1Length = 10.0
g_ModelMatrix.setTranslate(...)
g_ModelMatrix.rotate(...)
drawBox(gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix )
// arm2
g_ModelMatrix.setTranslate(...) // 移动至连接处
g_ModelMatrix.rotate(...)
g_ModelMatrix.scale(...)
drawBox(gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix )
function drawBox(gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix ) {
// 计算模型视图矩阵并传递给 u_MvpMatrix
g_MvpMatrix.set(viewProjMatrix)
g_MvpMatrix.multiply(g_ModelMatrix)
gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements)
// 计算法向量
g_normalMatrix.setInverseOf(g_modelMatrix)
g_normalMatrix.transpose()
gl.uniformMatrix4fv(u_NormalMatrix , false, g_normalMatrix.elements)
gl.drawElements(...)
}多节点模型
TODO