WebGL入门课程03-图形变换

[TOC]

九、WebGL变换

平移

1582515428288

缩放

旋转

1582516039703

十、WebGL矩阵变换

平移

1582517270018

缩放

1582517390025

旋转

1582517428509

注:在WebGL中矩阵以列为朱序

function translate(Tx, Ty, Tz) {
    return new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        Tx, Ty, Tz, 1.0,
    ])
}

function scale(Tx, Ty, Tz) {
    return new Float32Array([
        Tx, 0.0, 0.0, 0.0,
        0.0, Ty, 0.0, 0.0,
        0.0, 0.0, Tz, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ])
}

function rotate(angle) {
    let sinB = Math.sin(Math.PI * angle / 180.0);
    let cosB = Math.cos(Math.PI * angle / 180.0);
    return new Float32Array([
        cosB, sinB, 0.0, 0.0,
        -sinB, cosB, 0.0, 0.0,
        0.0, 0.0, 1, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ])
}

十一、高级变换与动画基础-矩阵复合变换

1582523538789

十二、动画基础

1582523746227

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="lib.js"></script>
    <script src="matrix.js"></script>
    <style>
        #web10 {
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body>
<canvas id="web10"></canvas>
<script>
    let canvas = document.querySelector('#web10');
    let gl = canvas.getContext('webgl');
    let VERTEX_SHADER = '' +
        'attribute vec4 a_pos;' +
        'uniform mat4 u_translate;' +
        'uniform mat4 u_rotate;' +
        'uniform mat4 u_scale;' +
        'void main(){' +
        'gl_Position=u_scale*u_rotate*u_translate*a_pos;' +
        '}';//右侧的先执行
    let FRAG_SHADER = '' +
        'void main(){' +
        'gl_FragColor=vec4(1.0,0.5,0.0,1.0);' +
        '}';
    let program = initShader(gl, VERTEX_SHADER, FRAG_SHADER);
    let dataVer = new Float32Array([
        -0.3, 0.0,
        0.0, 0.3,
        0.3, 0.0
    ]);
    bufferInit(gl, dataVer, 'a_pos', program);

    gl.clearColor(0.6, 0.0, 0.3, 1.0);

    let u_translate = gl.getUniformLocation(program, 'u_translate');
    let u_rotate = gl.getUniformLocation(program, 'u_rotate');
    let u_scale = gl.getUniformLocation(program, 'u_scale');

    let x = 0.0, y = 0.0, angle = 4.0, a = 1.0, b = 1.0;

    function animation() {
        x += 0.01;
        y += 0.01;
        angle += 5;
        a -= 0.01;
        b -= 0.01;
        gl.uniformMatrix4fv(u_translate, false, translate(x, y, 0.0));
        gl.uniformMatrix4fv(u_rotate, false, rotate(angle));
        gl.uniformMatrix4fv(u_scale, false, scale(a, b, 1.0));
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    }

    function run() {
        animation();
        let act = requestAnimationFrame(run);
        if (a < 0) {
            cancelAnimationFrame(act);
            alert("我一定会回来的!")
        }
    }

    run();
</script>
</body>
</html>