《WebGL编程指南》学习笔记24——从指定视点观察旋转后的三角
2021-05-19 本文已影响0人
小鸟游露露
本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用
改变 【观察者的状态】与【对整个世界进行平移和旋转变换】本质上一样，都可以用矩阵描述。
模型矩阵：旋转矩阵、平移矩阵、缩放矩阵或它们的组合
公式1：<视图矩阵> X <模型矩阵> X <原始顶点坐标>
模型视图矩阵：视图矩阵 X 模型矩阵
公式2：<模型视图矩阵> X <顶点坐标>
image.jpeg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22绘制三维的三角形-模型视图矩阵公式</title>
<script src="./lib/cuon-matrix.js"></script>
<script src="./lib/cuon-utils.js"></script>
<script src="./lib/webgl-debug.js"></script>
<script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
不支持canvas的浏览器会展示这段文字
</canvas>
<script>
// <模型视图矩阵> X <顶点坐标>
// =============================👇
// 顶点着色器程序
let VSHADER_SOURCE =
`
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_ModelViewMatrix;
varying vec4 v_Color;
void main() {
gl_Position = u_ModelViewMatrix * a_Position;
v_Color = a_Color;
}
`;
// =============================👆
// 片元着色器程序
let FSHADER_SOURCE =
`
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`;
// 主程序
function main() {
let canvas = document.getElementById('webgl');
// 获取WebGL绘图上下文
let gl = getWebGLContext(canvas);
if(!gl) {
console.error('无法使用WebGL');
return;
}
// 初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error('无法使用着色器');
return;
}
// 设置顶点位置
let n = initvertexColorBuffers(gl);
if ( n < 0) {
console.log('无法设置点的位置');
return;
}
// 设置<canvas> 背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 获取u_ModelViewMatrix变量的存储地址
let u_ModelViewMatrix = gl.getUniformLocation(gl.program, 'u_ModelViewMatrix');
if(!u_ModelViewMatrix) {
console.log('无法获取u_ModelViewMatrix');
return;
}
// 设置视点、视线和上方向
let viewMatrix = new Matrix4();
viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
let modelMatrix = new Matrix4();
modelMatrix.setRotate(-10, 0, 0, 1);
// =============================👇
// 两个矩阵相乘 模型视图矩阵 = viewMatrix * modelMatrix
let modelViewMatrix = viewMatrix.multiply(modelMatrix);
// =============================👆
// 将模型视图矩阵传给u_ModelViewMatrix变量
gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix.elements);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, n); // n为n个点
}
function initvertexColorBuffers(gl) {
let verticesColors = new Float32Array([
// 顶点坐标和颜色
0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形在最后
-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形在中间
-0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // 蓝色三角形在最前面
-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
]);
let n = 9; // 点的个数，三个三角形
// 1.创建缓冲区对象
let vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log('不能创建缓冲区对象');
return -1;
}
// 2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
// 获取a_Position变量的存储位置
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('无法获取 a_Position')
return -1;
}
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
gl.enableVertexAttribArray(a_Position);
// 获取a_Color变量的存储位置
let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < 0) {
console.log('无法获取 a_Color');
return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return n; // 返回待绘制顶点的数量， 函数内部发生错误后返回-1
}
</script>
</body>
</html>
let viewMatrix = new Matrix4();
viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
let modelMatrix = new Matrix4();
modelMatrix.setRotate(-10, 0, 0, 1);
可以合并写成为
let modelViewMatrix= new Matrix4();
