需要源码可以Q群:828202939 或者点击这里 希望可以和大家一起学习、一起进步!!纯手打!!
书籍是PDF电子档,也在Q群里,所有的课程源代码在我上传的资源里面,本来想设置开源,好像不行!
如有错别字或有理解不到位的地方,可以留言或者加微信15250969798,在下会及时修改!!!!!
上一节课我们学习了图形的变换之平移
这一节课我们将学习图形的变换之旋转
如果你学会了图形的平移,再学习旋转的话你就会发现他们的实现方式是一样的,那就是在顶点着色器中计算顶点变换后的新坐标
在学习旋转之前,我们先来看看需要知道的一些基础知识点:
1.旋转轴 图形将围绕旋转轴旋转
2.旋转方向 方向:顺时针或者逆时针
3.旋转角度 图形旋转经过的角度
webgl中默认右手法则旋转:右手握拳,大拇指指向旋转轴的正方向,区域手指的弯曲方向就是旋转的方向
旋转公式:
x' = x cos 旋转角度 -y sin 旋转角度
y' = x sin 旋转角度 - y cos 旋转角度
z' = z
JS的内置Math对象的sin() 和 cos() 方法可以进行三角函数
为了显示出效果,本案例旋转45°
也许你们觉得这样写比较麻烦,下一课我们将学习图形的矩阵变换
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>旋转三角形</title>
</head>
<body οnlοad="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="RotatedTriangle.js"></script>
</body>
</html>
// 顶点着色器
var VSHADER_SOURCE =
// x' = x cosβ - y sinβ
// y' = x sinβ + y cosβ
// z' = z
'attribute vec4 a_Position;\n' +
'uniform float u_CosB, u_SinB;\n' +
'void main() {\n' +
' gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n' +
' gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n' +
' gl_Position.z = a_Position.z;\n' +
' gl_Position.w = 1.0;\n' +
'}\n';
// 片元着色器
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
// 旋转角度
var ANGLE = 45.0;
function main() {
// 获取canvas元素
var canvas = document.getElementById('webgl');
// 获取canvas上下文
var 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 intialize shaders.');
return;
}
// 设置顶点位置
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// 将旋转图形所需的数据传输给顶点着色器
var radian = Math.PI * ANGLE / 180.0; // 角度转弧度
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
if (!u_CosB || !u_SinB) {
console.log('Failed to get the storage location of u_CosB or u_SinB');
return;
}
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_SinB, sinB);
// 设置背景色
gl.clearColor(0, 0, 0, 1);
// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n);
}
//这里设置的是点的位置,本例设置为三角形
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // 顶点数
// 创建缓冲区对象
var 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.STATIC_DRAW);
// 获取attribute的位置
var 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变量,这里只有平面的顶点xy,所谓分量为2,第三四分量会默认为0.0,1.0
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 开启attribute变量
gl.enableVertexAttribArray(a_Position);
return n;
}
运行结果::
来源:CSDN
作者:webgl_谷子
链接:https://blog.csdn.net/weixin_39452320/article/details/81192844