webGL进阶（三）-动态变换与动画理论基础

前言：

医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。

理论：

webgl中的图形变换与图形学中的图形变换基本一致，使用变换举证进行平移，旋转，缩放等功能。

平移矩阵

旋转矩阵

缩放矩阵

webgl内置矩阵系统，有api-WebGLRenderingContext.uniformMatrix2fv(location,transpose,value)

                                             WebGLRenderingContext.uniformMatrix3fv(location,transpose,value)

参数说明：

Location：对象包含了要修改的uniform attribute位置，可以通过getUniformLocation()获得；

transpose:指定是否转置矩阵，必须为false；

value:Float32Array型或是GLfloat序列值，假定值以列为主要顺序提供。

效果：

缩放

旋转

移动

实现：

  <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        void main(void){
            gl_Position =u_formMatrix * a_position;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        void main(void){
          gl_FragColor =vec4(1.0,1.0,0.0,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;
        var uniformTexture = 0;
        var uniformTexture1 = 0;
        var uniformAnim = 0;
        var count = 0;
        var texture0;
        var texture1;
        function webglStart() {
            init();
            tick();
        }
        function tick() {
            requestAnimFrame(tick)
            draw();
        };
        function init() {
            initWebgl();
            initShader();
            initBuffer();
        }
        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            //mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }
        function initShader() {
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);
            webgl.program = program
        }
        function initBuffer() {
            let matrixArr = [
                1, 0, 0, 0,
                0,2, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ];
            let arr = [
                0, 0, 0, 1,
                0, 0.05, 0, 1,
                0.5, 0, 0, 1,

                0.5, 0, 0, 1,
                0, 0.05, 0, 1,
                0.5, 0.05, 0, 1
            ]
            let pointPosition = new Float32Array(arr);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);

            let matrixPosition = new Float32Array(matrixArr);
            let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");
            webgl.uniformMatrix4fv(uniformMatrix, false, matrixPosition)
        }

        function draw() {
            webgl.clearColor(0.0, 1.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);

            //纹理变动
            uniformAnim = webgl.getUniformLocation(webgl.program, "anim");
            count = count + 0.01;
            webgl.uniform1f(uniformAnim, count);

            webgl.drawArrays(webgl.TRIANGLES, 0, 6);
        }
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback, element) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    </script>
    <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        void main(void){
            gl_Position =u_formMatrix * a_position;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        void main(void){
          gl_FragColor =vec4(1.0,1.0,0.0,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;
        var uniformTexture = 0;
        var uniformTexture1 = 0;
        var uniformAnim = 0;
        var count = 0;
        var texture0;
        var texture1;
        function webglStart() {
            init();
            tick();
        }
        function tick() {
            requestAnimFrame(tick)
            draw();
        };
        function init() {
            initWebgl();
            initShader();
            initBuffer();

        }
        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            //mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }
        function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program
        }
        function initBuffer() {
            let radian = Math.PI *180/180
            let cosb = Math.cos(radian);
            let sinb = Math.sin(radian);
            let matrixArr = [
            cosb,sinb,0,0,
            -sinb,cosb,0,0,
            0,0,1,0,
            0,0,0,1,
            ];
            let arr = [
                0, 0, 0, 1,
                0, 0.05, 0, 1,
                0.5, 0, 0, 1,

                0.5, 0, 0, 1,
                0, 0.05, 0, 1,
                0.5, 0.05, 0, 1,
            ]
            let pointPosition = new Float32Array(arr);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);

            let matrixPosition = new Float32Array(matrixArr);
            let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");
            webgl.uniformMatrix4fv(uniformMatrix,false,matrixPosition)


        }
    
        function draw() {
            webgl.clearColor(0.0, 1.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);



            //纹理变动
            uniformAnim = webgl.getUniformLocation(webgl.program, "anim");
            count = count + 0.01;
            webgl.uniform1f(uniformAnim, count);
            
     

            webgl.drawArrays(webgl.TRIANGLES, 0, 6);
        }
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback, element) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    </script>    <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        void main(void){
            gl_Position =u_formMatrix * a_position;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        void main(void){
          gl_FragColor =vec4(1.0,1.0,0.0,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;
        var uniformTexture = 0;
        var uniformTexture1 = 0;
        var uniformAnim = 0;
        var count = 0;
        var texture0;
        var texture1;
        function webglStart() {
            init();
            tick();
        }
        function tick() {
            requestAnimFrame(tick)
            draw();
        };
        function init() {
            initWebgl();
            initShader();
            initBuffer();

        }
        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            //mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }
        function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program
        }
        function initBuffer() {

            let matrixArr = [
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0.1, 0, 0, 1
            ];
            let arr = [
                0, 0, 0, 1,
                0, 0.05, 0, 1,
                0.5, 0, 0, 1,
                
                0.5,0,0,1,
                0,0.05,0,1,
                0.5,0.05,0,1
         
            ]
            let pointPosition = new Float32Array(arr);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);


            let matrixPosition = new Float32Array(matrixArr);
            let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");
            webgl.uniformMatrix4fv(uniformMatrix, false, matrixPosition)


        }

        function draw() {
            webgl.clearColor(0.0, 1.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);



            //纹理变动
            uniformAnim = webgl.getUniformLocation(webgl.program, "anim");
            count = count + 0.01;
            webgl.uniform1f(uniformAnim, count);



            webgl.drawArrays(webgl.TRIANGLES, 0, 6);
        }
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback, element) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    </script>

复盘：