坐标P（x,y,z） , 绕Z轴旋转β角度变成 p1（x1, y1, z1）
clipboard.png
推理出来：
cos a = x/r;
sin a = y/r;
cos(a+b) = x'/r;
sin(a+b) = y'/r;
换个角度：
r = x/cos a;
r = y/sin a;
x' = rcos(a+b);
y' = rsin(a+b);
clipboard (1).png
则根据数据三角函数公式可得：
x1 = xcosβ - ysinβ
y1 = xsinβ + ycosβ
z1=z
顶点着色器需要加上 uniform float u_cosB, u_sinB 存储旋转角度。
顶点坐标位置 ：
gl_Position.x = a_Position.x * u_cosB - a_Position.y * u_inB
gl_Position.y = a_Position.x * u_sinB + a_Position.y * u_cosB
<script type="shader" id="vertex">
attribute vec4 a_Position;
uniform float u_CosB, u_SinB;
void main(){
gl_PointSize = 2.0;
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;
}
</script>
// 旋转角度
var ANGLE = 45.0;
var radian = Math.PI * ANGLE / 180.0;
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var u_CosB = gl.getUniformLocation(program, 'u_CosB');
var u_sinB = gl.getUniformLocation(program, 'u_SinB');
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_sinB, sinB);
矩阵实现：
333.png
uniform声明了一个mat4矩阵类型的变量xf
<script type="shader" id="vertex">
attribute vec4 a_Position;
uniform mat4 xf;
void main(){
gl_PointSize = 2.0;
gl_Position = xf * a_Position;
}
</script>
// 旋转角度
var ANGLE = 45.0;
var radian = Math.PI * ANGLE / 180.0;
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
let apos = gl.getAttribLocation(program,'a_Position');
var xfLocation = gl.getUniformLocation(program, 'xf');
var xf = 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
]);
gl.uniformMatrix4fv(xfLocation,false,xf);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cmd_webgl_study9</title>
</head>
<body>
<!-- 1.创建webgl标签 -->
<canvas id="webgl" width="500" height="500"></canvas>
<script type="shader" id="vertex">
attribute vec4 a_Position;
uniform mat4 xf;
void main(){
gl_PointSize = 2.0;
gl_Position = xf * a_Position;
}
</script>
<script type="shader" id="fragment">
precision mediump float;
uniform vec4 vColor;
void main(){
gl_FragColor = vec4(0.0,1.0,0.0,1.0);
}
</script>
<script src="./libs/webgl_libs.js"></script>
<script>
// 2.得到canvas element
let canvas = document.getElementById('webgl');
// 3.得到上下文对象 context
let gl = canvas.getContext('webgl');
//4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
let vertex_shader_source = document.getElementById("vertex").innerHTML;
//5.片元着色器源代码：描述一个点的颜色 片元着色器
let fragment_shader_source = document.getElementById("fragment").innerHTML;
let program = create_program(gl,vertex_shader_source,fragment_shader_source);
//获取坐标点
let apos = gl.getAttribLocation(program,'a_Position');
var xfLocation = gl.getUniformLocation(program, 'xf');
// 旋转角度
var ANGLE = 45.0;
var radian = Math.PI * ANGLE / 180.0;
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var xf = 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
]);
gl.uniformMatrix4fv(xfLocation,false,xf);
// 1.创建buf
let buffer = gl.createBuffer();
//2.绑定buf
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
//3.
let data = new Float32Array([
0.0,0.5,
-0.5,0.0,
0.5,0.0
]);
//向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(apos,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(apos);
// 13.设置背景色
gl.clearColor(1.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 14.绘制
gl.drawArrays(gl.TRIANGLES,0,3);
</script>
</body>
</html>
网友评论