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

小白菜学前端

已于 2024-10-22 10:44:36 修改

阅读量556

点赞数 20

分类专栏： WebGl 文章标签： webgl

于 2024-10-22 10:32:49 首次发布

本文链接：https://blog.youkuaiyun.com/dlmyrt/article/details/143139682

版权

WebGl 专栏收录该内容

15 篇文章

订阅专栏

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>