WebGl 实现图片平移、缩放和旋转

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_Angleconst 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>