一、平移
1、为顶点坐标的每一个分量,加上一个变量即可实现平移效果。
2、定义u_Translation变量,使用uniform变量,因为平移对所有的顶点都一致。gl_Position是vec4类型,u_Translation也必须是vec4才能相加
'uniform vec4 u_Translation;' // 定义u_Translation 平移相关信息 // void main()函数中俩者相加 'gl_Position = a_Position + u_Translation;' // 俩者相加 // 平移函数 function translation(gl) { const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation'); gl.uniform4f(u_Translation, 0.5, 0.0, 0.0, 0.0); }
3、使用变换矩阵实现
'uniform mat4 u_xformMatrix;' + // 定义平移矩阵 // void main俩者相乘即可 'gl_Position = a_Position * u_xformMatrix;' + // 定义变换矩阵函数 /** * 平移 * gl gl对象 */ function translationMatrix(gl) { const TX = 0.5; // X轴方向 const TY = 0.5; // Y轴方向 const TZ = 0.0; // Z轴方向 // 平移变换矩阵 /* * [ [ [ * x` 1.0, 0.0, 0.0, TX x * y` = 0.0, 1.0, 0.0, TY, * y * z· 0.0, 0.0, 1.0, TZ, z * 1 0.0, 0.0, 0.0, 1.0, 1 * ] ] ] * */ const xformMatrix = new Float32Array([ 1.0, 0.0, 0.0, TX, 0.0, 1.0, 0.0, TY, 0.0, 0.0, 1.0, TZ, 0.0, 0.0, 0.0, 1.0, // TX, TY, TZ ]); const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix'); gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); }
二、旋转
1、旋转分为3个步骤
1)、定义旋转轴,图形围绕旋转轴旋转
2)、定义旋转方向
3)、定义旋转角度
2、根据公式计算旋转后的X Y Z W的值,并相加
'uniform float u_CosB;' + // 定义角度相关信息
'uniform float u_SinB;' + // 定义角度相关信息
// void main()
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' + // 根据公式计算X轴相关信息
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' + // 根据公式计算Y轴相关信息
'gl_Position.z = a_Position.z;' + // 等于自身或者1
'gl_Position.w = 1.0;' + // // 颜色管道 等于1
/**
* 旋转
* gl gl对象
*/
function rotation(gl) {
// 如果饶Z轴旋转 则旋转公式为
// x` = xcos阝- ysin阝
// y` = xsin阝+ ycos阝
// z` = z
const angle = 30;
// 转换弧度
const radian = Math.PI * angle / 180.0;
const cosB = Math.cos(radian);
const sinB = Math.sin(radian);
const u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
const u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_SinB, sinB);
}
3、根据变换矩阵实现
'uniform mat4 u_xformMatrix;' + // 定义变换矩阵变量
// void main
'gl_Position = a_Position * u_xformMatrix;' + // 俩者相乘即可
/**
* 根据矩阵进行旋转
* gl gl对象
*/
function rotationMatrix(gl) {
// 旋转变换矩阵
/*
* [ [ [
* x` cos阝, -sin阝, 0.0, 0.0 x
* y` = sin阝, cos阝, 0.0, 0.0, * y
* z· 0.0, 0.0, 1.0, 0.0, z
* 1 0.0, 0.0, 0.0, 1.0, 1
* ] ] ]
* */
const angle = 30;
// 转换弧度
const radian = Math.PI * angle / 180.0;
const cosB = Math.cos(radian);
const sinB = Math.sin(radian);
const xformMatrix = 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.0, 1.0,
]);
const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
}
三、缩放
1、X Y Z等想乘
'uniform float u_Sx, u_Sy, u_Sz;' + // 定义缩放相关比例
// void main
'gl_Position.x = a_Position.x * u_Sx;' + // 相乘
'gl_Position.y = a_Position.x * u_Sy;' + // 相乘
'gl_Position.z = a_Position.z * u_Sz;' + // 相乘
'gl_Position.w = 1.0;' + // // 颜色管道 等于1
/**
* 缩放
* gl gl对象
*/
function zoom(gl) {
const Sx = 2;
const Sy = 2;
const Sz = 1;
const u_Sx = gl.getUniformLocation(gl.program, 'u_Sx');
const u_Sy = gl.getUniformLocation(gl.program, 'u_Sy');
const u_Sz = gl.getUniformLocation(gl.program, 'u_Sz');
gl.uniform1f(u_Sx, Sx);
gl.uniform1f(u_Sy, Sy);
gl.uniform1f(u_Sz, Sz);
}
2、变换矩阵实现
/**
* 矩阵缩放
* gl gl对象
*/
function zoomMatrix(gl) {
// 缩放变换矩阵
/*
* [ [ [
* x` Sx, 0.0, 0.0, 0.0 x
* y` = 0.0, Sy, 0.0, 0.0, * y
* z· 0.0, 0.0, Sz, 0.0, z
* 1 0.0, 0.0, 0.0, 1.0, 1
* ] ] ]
* */
const Sx = 2;
const Sy = 2;
const Sz = 1;
const xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
}
四、矩阵组合
'gl_Position = a_Position * u_xformMatrixTranslation * u_xformMatrixRotation * u_xformMatrixZoom;' + // 俩者相乘即可 变换矩阵运算
/**
* 根据矩阵进行混合变换 平移 旋转 缩放
* gl gl对象
*/
function hybridTransformation(gl) {
const angle = 30;
// 转换弧度
const radian = Math.PI * angle / 180.0;
const cosB = Math.cos(radian);
const sinB = Math.sin(radian);
const xformMatrixRotation = 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.0, 1.0,
]);
const Sx = 2;
const Sy = 1;
const Sz = 1;
const xformMatrixZoom = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
const TX = 0.1; // X轴方向
const TY = 0; // Y轴方向
const TZ = 0; // Z轴方向
const xformMatrixTranslation = new Float32Array([
1.0, 0.0, 0.0, TX,
0.0, 1.0, 0.0, TY,
0.0, 0.0, 1.0, TZ,
0.0, 0.0, 0.0, 1.0, // TX, TY, TZ
]);
// u_xformMatrixTranslation, u_xformMatrixRotation, u_xformMatrixZoom;'
const u_xformMatrixTranslation = gl.getUniformLocation(gl.program, 'u_xformMatrixTranslation');
gl.uniformMatrix4fv(u_xformMatrixTranslation, false, xformMatrixTranslation);
const u_xformMatrixRotation = gl.getUniformLocation(gl.program, 'u_xformMatrixRotation');
gl.uniformMatrix4fv(u_xformMatrixRotation, false, xformMatrixRotation);
const u_xformMatrixZoom = gl.getUniformLocation(gl.program, 'u_xformMatrixZoom');
gl.uniformMatrix4fv(u_xformMatrixZoom, false, xformMatrixZoom);
}