webGL--平移 - 掘金

学习目标：

掌握三角形的平移；

平移

假设三角形的三个分量对应平移距离分别为Tx、Ty、Tz；就可以得到三个角平移后的坐标公式：

$x'=x+Tx;$

$y'=y+Ty;$

$z'=z+Tz;$

我们只需将平移距离Tx、Ty、Tz的值传入顶点着色器，然后分别在顶点坐标对应的分量上再赋值给gl_Position;

例子

 const canvas = document.getElementById("canvas");
        const gl = canvas.getContext("webgl");

        const vertexSource = `
        attribute vec4 a_Position;
        uniform vec4 u_Translation;

        void main(){
            gl_Position=u_Translation+a_Position;
        }
        `;

        const fragmentSource = `
        void main(){
            gl_FragColor=vec4(1.0,0.0,0.0,1.0);
        }
        `;

        const shaderProgram = initShaders(gl, vertexSource, fragmentSource);

        gl.useProgram(shaderProgram);

        const vertices = new Float32Array([
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ])

        const vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);



        const aPosition = gl.getAttribLocation(shaderProgram, "a_Position");
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0.0, 0.0);
        gl.enableVertexAttribArray(0);

        const Tx = 0.5, Ty = 0.5, Tz = 0.0, count = 3;
        const uTranslation = gl.getUniformLocation(shaderProgram, "u_Translation");
        gl.uniform4f(uTranslation, Tx, Ty, Tz, 0.0);

        gl.drawArrays(gl.TRIANGLES, 0, count);

使用变换矩阵改下,只需将顶点着色器和uniform 赋值方式改变.


        const vertexSource = `
        attribute vec4 a_Position;
        uniform mat4 u_Translation;

        void main(){
            gl_Position=u_Translation * a_Position;
        }
        `;

        const formMatrix = new Float32Array([
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0.5, 0.5, 0.5, 1
        ])

        const uTranslation = gl.getUniformLocation(shaderProgram, "u_Translation");
        // gl.uniform4f(uTranslation, Tx, Ty, Tz, 0.0);
        gl.uniformMatrix4fv(uTranslation, false, formMatrix);

uniformMatrix[234]fv(location, transpose, value)
1. location：参数：要修改的 uniform attribute位置；
2. transpose：是否转置矩阵。必须为 false;
3. value： Float32Array 型或者是 GLfloat 序列值.假定值以列主要顺序提供.