# 3.使用平移矩阵要点

## 3.1声明平移矩阵

``````//顶点着色器
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'uniform mat4 u_TranslateMatrix;\\n' + //声明uniform变量u_TranslateMatrix(类型是mat4)，用来存放平移矩阵
'void main(){\\n' +
'  gl_Position = u_TranslateMatrix * a_Position;\\n' + //将平移矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
'}\\n';
``````

## 3.2获取平移矩阵u_TranslateMatrix的存储地址

``````//获取顶点着色器uniform变量u_TranslateMatrix(平移矩阵)的存储地址
var u_TranslateMatrix = gl.getUniformLocation(gl.program, 'u_TranslateMatrix')
``````

## 3.3向平移矩阵u_TranslateMatrix传值

``````调用示例：gl.uniformMatrix4fv(location, transpose, array)
----------------------------------------------------------------------------------

----------------------------------------------------------------------------------

location			uniform变量的存储地址
transpose			在WebGL中必须指定为false
array				待传输的类型化数组，4*4矩阵按列主序

----------------------------------------------------------------------------------

----------------------------------------------------------------------------------

INVALID_VALUE		transpose不为false，或者数组的长度小于16
``````

``````//在 x、y、z轴方向上平移的距离
var Tx = 0.5
var Ty = 0.5
var Tz = 0.0

//创建平移矩阵的类型化数组
var translateMatrix = 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
])

//向顶点着色器uniform变量u_TranslateMatrix传值
gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix)
``````

# 4.demo代码

``````<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<title></title>

<body>
<!--通过canvas标签创建一个400px*400px大小的画布-->
<canvas id="webgl" width="400" height="400"></canvas>

<script>
//顶点着色器
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'uniform mat4 u_TranslateMatrix;\\n' + //声明uniform变量u_TranslateMatrix(类型是mat4)，用来存放平移矩阵
'void main(){\\n' +
'  gl_Position = u_TranslateMatrix * a_Position;\\n' + //将平移矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
'}\\n';

//片元着色器
'precision mediump float;\\n' + // 设置精度
'uniform vec4 u_FragColor;\\n' + //声明uniform变量u_FragColor，用来存放顶点颜色信息
'void main(){\\n' +
//通过u_FragColor变量设置片元颜色
' gl_FragColor = u_FragColor;\\n' +
'}\\n';

//初始化着色器函数
//创建顶点着色器对象
//创建片元着色器对象
//引入顶点、片元着色器源代码
//编译顶点、片元着色器

//创建程序对象program
var program = gl.createProgram();
//附着顶点着色器和片元着色器到program
//链接program
//使用program
gl.useProgram(program);
gl.program = program
//返回程序program对象
return program;
}

function init() {
//通过getElementById()方法获取canvas画布
var canvas = document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl = canvas.getContext('webgl');
//初始化着色器

// 设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);

//给片元着色器uniform变量u_FragColor赋值
setFragColor(gl)

//初始化顶点
var n = initVertexBuffers(gl)

//获取顶点着色器uniform变量u_TranslateMatrix(平移矩阵)的存储地址
var u_TranslateMatrix = gl.getUniformLocation(gl.program, 'u_TranslateMatrix')

//在 x、y、z轴方向上平移的距离
var Tx = 0.5
var Ty = 0.5
var Tz = 0.0

//创建平移矩阵的类型化数组
var translateMatrix = 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
])

//向顶点着色器uniform变量u_TranslateMatrix传值
gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix)

//绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)

}

//给片元着色器uniform变量u_FragColor赋值
function setFragColor(gl) {
//获取片元着色器uniform变量u_FragColor的存储地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
//向片元着色器uniform变量u_FragColor传值
gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0) //绿色
}

//初始化顶点
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])

//1.创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('创建缓冲区对象失败！')
return -1
}

//2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

//3.向缓冲区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取着色器attribute变量a_Position的存储地址

//4.将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

//5.连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position)

return vertices.length / 2

}
init()
</script>
</body>

</html>
``````