1.图片平移
在WebGL中实现图片平移，可以通过修改顶点着色器中的顶点位置来实现。平移的基本思想是将每个顶点的位置向量沿着指定的方向（通常是x轴和y轴）进行平移。在顶点着色器中，可以通过添加或减去一个统一的偏移量（uniform variable）来实现这一点。例如，如果要在x轴和y轴上分别平移，可以在顶点着色器中编写如下代码：
attribute vec4 aPosition;
attribute float u_Translation; // 平移向量
void main() {
gl_Position = vec4(aPosition.x + u_Translation, aPosition.y, aPosition.z, 1.0);
}在JavaScript中，可以通过设置u_Translation的值来控制平移的距离和方向。
2.图片缩放
实现图片缩放，可以通过在顶点着色器中对顶点位置进行缩放来完成。缩放因子可以作为一个uniform变量传递给着色器，然后乘以顶点位置向量的各个分量。例如，如果要在x轴和y轴上进行缩放，可以使用以下代码：
attribute vec4 aPosition;
attribute float u_Scale; // 缩放因子
void main() {
gl_Position = vec4(aPosition.x * u_Scale, aPosition.y, aPosition.z, 1.0);
}在JavaScript中，可以通过设置u_Scale的值来控制缩放的程度。
3.图片旋转
图片的旋转可以通过在顶点着色器中应用旋转矩阵来实现。旋转矩阵依赖于旋转的中心、旋转轴和旋转角度。在二维空间中，通常围绕原点旋转，可以使用欧拉公式来计算旋转后的顶点位置。在顶点着色器中，可以编写如下代码来实现绕原点的旋转：
attribute vec4 aPosition;
attribute float u_Angle; // 旋转角度（弧度制）
void main() {
float s = sin(u_Angle);
float c = cos(u_Angle);
gl_Position.x = aPosition.x * c - aPosition.y * s;
gl_Position.y = aPosition.x * s + aPosition.y * c;
gl_Position.z = aPosition.z;
gl_Position.w = 1.0;
}在JavaScript中，可以通过设置u_Angle的值来控制旋转的角度。
4.完整代码（以旋转为例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
canvas {
margin: 50px auto;
display: block;
background: pink;
}
</style>
<title>webgl</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
<script src="./js/index.js"></script>
<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 顶点着色器源码
const vertexShaderSource = `
attribute vec4 aPosition;
attribute float u_Angle; // 旋转角度（弧度制）
void main() {
float s = sin(u_Angle);
float c = cos(u_Angle);
gl_Position.x = aPosition.x * c - aPosition.y * s;
gl_Position.y = aPosition.x * s + aPosition.y * c;
gl_Position.z = aPosition.z;
gl_Position.w = aPosition.w;
gl_PointSize = 10.0;
}`
// 片源着色器源码
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}`
const program = initShader(gl, vertexShaderSource, fragmentShaderSource);
const aPosition = gl.getAttribLocation(program, 'aPosition');
// 获取attribute变量u_Angle
const u_Angle = gl.getAttribLocation(program, 'u_Angle');
const points = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
// 1.图形平移
// let x = -1;
// setInterval(() => {
// x += 0.01;
// if (x > 1) {
// x = -1;
// }
// gl.vertexAttrib1f(u_Translation, x);
// gl.drawArrays(gl.TRIANGLES, 0, 3);
// }, 60)
// 2.图形缩放
// let x = 1;
// setInterval(() => {
// x += 0.1;
// if (x > 2) {
// x = 1;
// }
// gl.vertexAttrib1f(u_Scale, x);
// gl.drawArrays(gl.TRIANGLES, 0, 3);
// }, 60)
// 3.图像旋转
let x = 1;
function animation() {
x += 0.1;
gl.vertexAttrib1f(u_Angle, x);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// 实现流畅的动画效果
requestAnimationFrame(animation);
}
animation();
// 着色器
function initShader(gl, vertexShaderSource, fragmentShaderSource) {
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
return program;
}
</script>
</body>
</html>5.效果如下
