webgl复习笔记——三角形平移、旋转(1)

平移

每个点都加一个变量

x' = x + Tx;
y' = y + Ty;

    let v_shader = `
    attribute vec4 a_position;
    uniform vec4 u_translation;
    void main(){
        gl_Position = a_position + u_translation;
    }
    `;
......
    initShaders(webgl, v_shader, f_shader);

    let n = initBuffer();

    let u_fragColor = webgl.getUniformLocation(webgl.program, "u_fragColor")
    webgl.uniform4f(u_fragColor, 1, 0, 1, 1);

    let tx = .2,ty = .5,tz = 0;
    let u_translation = webgl.getUniformLocation(webgl.program,"u_translation");
    webgl.uniform4f(u_translation,tx,ty,tz,0.0);

    webgl.clearColor(0, 0, 0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);
    webgl.drawArrays(webgl.TRIANGLE_FAN, 0, n);

旋转

    let v_shader = `
    attribute vec4 a_position;
    uniform float u_cosb,u_sinb;
    void main(){
        gl_Position.x = (a_position).x * u_cosb -(a_position).y*u_sinb;
        gl_Position.y = (a_position).x * u_sinb +(a_position).y*u_cosb;
        gl_Position.z = a_position.z;
        gl_Position.w = a_position.w;
    }
    `;

........
    var angle = 90.0;
    var radian = Math.PI * angle / 180.0;//弧度
    var cosb = Math.cos(radian);
    var sinb = Math.sin(radian);

    var u_cosb = webgl.getUniformLocation(webgl.program,'u_cosb');
    var u_sinb = webgl.getUniformLocation(webgl.program,'u_sinb');
    webgl.uniform1f(u_cosb,cosb);
    webgl.uniform1f(u_sinb,sinb);

    webgl.clearColor(0, 0, 0, 1.0);