1 高级变换
平移加旋转
这里会使用到一个旋转工具库matrix
示例程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#canvas {
width: 600px;
height: 600px;
position: absolute;
top: calc(50% - 300px);
left: calc(50% - 300px);
background-color: black;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script src="./matrix.js"></script>
<script>
// 通过元素获取二维图形的绘图上下文
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
// 定义顶点着色器
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
gl_Position = u_xformMatrix * a_Position; // 坐标相加
}
`;
// 定义片段着色器
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
}
`;
// 编译着色器函数
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
// 创建和链接着色器程序
const vertexShader = createShader(
gl,
gl.VERTEX_SHADER,
vertexShaderSource
);
const fragmentShader = createShader(
gl,
gl.FRAGMENT_SHADER,
fragmentShaderSource
);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 设置顶点数据
const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 连接顶点着色器的a_Position变量
// 获取a_Position变量存储位置
const a_Position = gl.getAttribLocation(program, "a_Position");
// 2代表每个顶点的分量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 设置背景颜色并清空
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 定义旋转矩阵
// 旋转90°
const angle = 90;
// 获取一个4x4的单位矩阵
const modelMatrix = new Matrix4();
// 设置旋转角度
modelMatrix.setRotate(angle, 0, 0, 1);
// 设置平移距离
modelMatrix.translate(0.5, 0, 0);
// 将旋转矩阵传递给顶点着色器
const u_xformMatrix = gl.getUniformLocation(program, "u_xformMatrix");
// 将至之传递给uniform属性
// uniform4f接受齐次坐标，且是vec4类型，这样就能与顶点a_Position相加，GLSL ES只允许相同类型相加
gl.uniformMatrix4fv(u_xformMatrix, false, modelMatrix.elements);
// 绘制三角形，3代表三个顶点
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
效果图
2 动画
动画原理就是不断擦除和重绘三角形，并且每次重绘时轻微地改变其角度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#canvas {
width: 600px;
height: 600px;
position: absolute;
top: calc(50% - 300px);
left: calc(50% - 300px);
background-color: black;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script src="./matrix.js"></script>
<script>
// 通过元素获取二维图形的绘图上下文
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
// 定义顶点着色器
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
gl_Position = u_xformMatrix * a_Position; // 坐标相乘
}
`;
// 定义片段着色器
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
}
`;
// 编译着色器函数
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
// 创建和链接着色器程序
const vertexShader = createShader(
gl,
gl.VERTEX_SHADER,
vertexShaderSource
);
const fragmentShader = createShader(
gl,
gl.FRAGMENT_SHADER,
fragmentShaderSource
);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 设置顶点数据
const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 连接顶点着色器的a_Position变量
// 获取a_Position变量存储位置
const a_Position = gl.getAttribLocation(program, "a_Position");
// 2代表每个顶点的分量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 设置背景颜色并清空
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 定义旋转矩阵
// 旋转90°
let currentAngle = 0.0;
const ANGLE_STEP = 45;
// 获取一个4x4的单位矩阵
const modelMatrix = new Matrix4();
let g_last = Date.now();
// 获取下一个tick的旋转角度
function animate(angle) {
const now = Date.now();
const elapsed = now - g_last;
g_last = now;
const newAngle = angle + (ANGLE_STEP + elapsed) / 1000;
return newAngle % 360;
}
const tick = () => {
currentAngle = animate(currentAngle);
// 设置旋转角度
modelMatrix.setRotate(currentAngle, 0, 0, 1);
const u_xformMatrix = gl.getUniformLocation(program, "u_xformMatrix");
// 将旋转矩阵传递给顶点着色器
// 将至之传递给uniform属性
// uniform4f接受齐次坐标，且是vec4类型，这样就能与顶点a_Position相加，GLSL ES只允许相同类型相加
gl.uniformMatrix4fv(u_xformMatrix, false, modelMatrix.elements);
// 清除canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形，3代表三个顶点
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(tick);
};
tick();
</script>
</body>
</html>
window.requestAnimationFrame() 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。
对回调函数的调用频率通常与显示器的刷新率相匹配。虽然 75hz、120hz 和 144hz 也被广泛使用，但是最常见的刷新率还是 60hz（每秒 60 个周期/帧）。
这个方法也常用于大量数据的渲染优化
效果
