本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用
实现旋转和平移的基本方式一样，都是在顶点着色器中计算顶点(平移或旋转后)的新坐标
旋转三要素：
1.旋转轴（图形将围绕旋转轴旋转）
2.旋转方向（顺时针、逆时针）
3.旋转角度（图形旋转经过的角度）
WebGL遵循右手法则旋转，绕轴，逆时针选择角度，旋转角度为正时为逆时针，旋转角度为负时为顺时针
右手法则：右手握拳，拇指伸直并指向旋转轴的正方向，其余手指则指明了旋转的方向
【逆时针旋转】 可称为 【正旋转】
围绕z轴正旋转
x‘ = x cosB - y sinB
y' = x sinB + y cosB
z' = z
WebGL的坐标轴方向
截图.png
截图.png
截图.png
截图.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10绘制三角形-旋转</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' = x cosB - y sinB
// y' = x sinB + y cosB
// z' = z
//======
//======
let VSHADER_SOURCE =
`
attribute vec4 a_Position;
uniform float u_CosB, u_SinB;
void main() {
gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
gl_Position.y = a_Position.x * u_SinB - a_Position.y * u_CosB;
gl_Position.z = a_Position.z;
gl_Position.w = 1.0;
}
`;
//======
// 片元着色器程序
let FSHADER_SOURCE =
`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 旋转角度
//======
let ANGLE = 90.0;
//======
// 主程序
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 nLength = initVertexBuffers(gl);
if ( nLength < 0) {
console.log('无法设置点的位置');
return;
}
// 将旋转图形所需的数据传输给顶点着色器
// ============
let radian = Math.PI * ANGLE / 180.0; // 转为弧度制
let cosB = Math.cos(radian); // js的Math.cos() 方式只支持弧度制参数
let sinB = Math.sin(radian);
let u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
let u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_SinB, sinB);
//=============
// 设置<canvas> 背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, nLength); // nLength为n个点
}
function initVertexBuffers(gl) {
// 类型化数组, 用于储存顶点的坐标或颜色。比Array性能更高，不支持push(),和pop()
let vertices = new Float32Array([
0.0, 0.5, -0.5, -0.5, 0.5, -0.5
]); // 坐标 x1,y1,x2,y2,x3,y3
let n = 3; // 点的个数
// 1.创建缓冲区对象
let vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('不能创建缓冲区对象');
return -1;
}
// 2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 3.向缓冲区对象写入数据,不能直接向缓冲区写入数据，只能向绑定的目标输入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 获取a_Position变量的存储位置
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('无法获取 a_Position')
return -1;
}
// 4.将缓冲区对象分配给attribute变量--所有点数据一次性传入
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 5.连接a_Position变量与分配给它的缓冲区对象,开启attribute变量
gl.enableVertexAttribArray(a_Position);
return n; // 返回待绘制顶点的数量， 函数内部发生错误后返回-1
}
</script>
</body>
</html>
网友评论