07.平移

作者: cmd_ts | 来源:发表于2020-03-20 14:58 被阅读0次

07.平移
晶体学笔记15：晶体的微观对称性-操作和轴
7.1：OpenGL 自转公转案例
css3系列之transform详解translate
【浏览相册】01、文莱
图解密码技术学习-第二章历史上的密码
《平移》
《平移》
苏教版数学四年级下册第一单元《平移、旋转和轴对称》
医用门的分类

坐标平移：

<script type="shader" id="vertex">
        attribute vec4 a_Position;
        uniform vec4 u_Translation;
        void main(){
            gl_PointSize = 2.0;
            gl_Position = a_Position + u_Translation;
        }
</script>

let u_Translation = gl.getUniformLocation(program, 'u_Translation');
var Tx = 0.2, Ty = 0.0, Tz = 0.0;
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

333.png

矩阵平移：

<script type="shader" id="vertex">
        attribute vec4 a_Position;
        uniform mat4 xf;
        void main(){
            gl_PointSize = 2.0;
            gl_Position = xf * a_Position;
        }
</script>

// 旋转角度
var tx = 0.3;
var ty = 0.4;
var ty = 0.0;

let apos = gl.getAttribLocation(program,'a_Position');
var xfLocation = gl.getUniformLocation(program, 'xf');

var xf = 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
]);

gl.uniformMatrix4fv(xfLocation,false,xf);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cmd_webgl_study9</title>
</head>
<body>
<!-- 1.创建webgl标签 -->
<canvas id="webgl" width="500" height="500"></canvas>
<script type="shader" id="vertex">
        attribute vec4 a_Position;
        uniform mat4 xf;
        void main(){
            gl_PointSize = 2.0;
            gl_Position = xf * a_Position;
        }
</script>
<script type="shader" id="fragment">
        precision mediump float;
        uniform vec4 vColor;
        void main(){
            gl_FragColor = vec4(0.0,1.0,0.0,1.0);
        }
    </script>
<script src="./libs/webgl_libs.js"></script>
<script>
    // 2.得到canvas element
    let canvas = document.getElementById('webgl');
    // 3.得到上下文对象 context
    let gl = canvas.getContext('webgl');

    //4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
    let vertex_shader_source = document.getElementById("vertex").innerHTML;

    //5.片元着色器源代码：描述一个点的颜色 片元着色器
    let fragment_shader_source = document.getElementById("fragment").innerHTML;



    let program = create_program(gl,vertex_shader_source,fragment_shader_source);
    //获取坐标点
    let apos = gl.getAttribLocation(program,'a_Position');
    var xfLocation = gl.getUniformLocation(program, 'xf');
    // 平移
    var tx = 0.2;
    var ty = 0.0;


    var xf = 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 ,  0.0,  1.0
    ]);

    gl.uniformMatrix4fv(xfLocation,false,xf);

    // 1.创建buf
    let buffer = gl.createBuffer();
    //2.绑定buf
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    //3.
    let data = new Float32Array([
        0.0,0.5,
        -0.5,0.0,
        0.5,0.0
    ]);

    //向缓冲区写入数据
    gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(apos,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(apos);

    // 13.设置背景色
    gl.clearColor(1.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 14.绘制
    gl.drawArrays(gl.TRIANGLES,0,3);

</script>
</body>
</html>