WebGL基础教程(十三) :玩转矩阵，从 0 到 1 玩转 3D 动画（新手也能秒懂矩阵变换）

优质文章学习记录

— 16 min read
WebGL基础教程(十三) :玩转矩阵，从 0 到 1 玩转 3D 动画（新手也能秒懂矩阵变换）

还在被 WebGL 的矩阵搞得头大？想不通平移、旋转、缩放的矩阵怎么写，更不懂复合变换的顺序？

今天这篇教程，全程围绕标准矩阵乘法展开，从基础矩阵原理到实战动画，手把手教你用纯矩阵写法实现 WebGL 平移、旋转、缩放，甚至用 gl-matrix 库实现炫酷的复合动画，新手也能跟着敲出效果，彻底搞懂矩阵在 WebGL 中的核心作用。

1.先搞懂：WebGL + 矩阵 = 3D 图形的灵魂

WebGL（Web Graphics Library）是浏览器原生的 3D/2D 渲染 API，无需插件、直接调用 GPU 加速 —— 但想要玩转 WebGL 动画，矩阵乘法是绕不开的核心！

 核心优势（标准矩阵版）

  • 矩阵统一变换逻辑：平移、旋转、缩放都通过「矩阵 × 顶点坐标」实现，完全符合 GPU 渲染规范
  • GPU 友好：矩阵运算可被 GPU 高效并行处理，动画更丝滑
  • 复合变换超灵活：多个矩阵相乘就能实现「平移 + 旋转 + 缩放」组合效果，扩展无压力

 2.WebGL + 矩阵工作原理

WebGL 基于 OpenGL ES，核心是着色器；而矩阵是连接「JavaScript 逻辑」和「GPU 渲染」的桥梁：

  1. 开发者在 CPU 端构建变换矩阵（平移 / 旋转 / 缩放 / 复合）
  2. 将 4x4 矩阵传入顶点着色器的 uniform 变量
  3. GPU 通过「矩阵 × 顶点坐标」的乘法运算，计算顶点最终位置并完成渲染
关键：WebGL 中所有变换的标准写法是 gl_Position = 变换矩阵 * 顶点坐标，而非直接修改顶点 x/y 分量！

2.1 平移变换

平移是最基础的仿射变换，用 4x4 矩阵表示后，能和其他变换无缝组合！

  平移矩阵原理（新手秒懂）

在计算机图形学中，平移的数学原理通过齐次坐标 + 4x4 矩阵实现：

  • 三维点表示为齐次坐标 (x,y,z,1)
  • 三维平移矩阵（WebGL 标准 4x4 形式）：

text

[ 1 0 0 tx ] [ 0 1 0 ty ] [ 0 0 1 tz ] [ 0 0 0 1 ]

矩阵乘法计算过程：

对三维点 (x,y,z,1) 执行矩阵乘法：

plaintext

x' = 1*x + 0*y + 0*z + tx*1 = x + tx y' = 0*x + 1*y + 0*z + ty*1 = y + ty z' = 0*x + 0*y + 1*z + tz*1 = z + tz w' = 0*x + 0*y + 0*z + 1*1 = 1
注：WebGL 中即使处理 2D 图形，也统一使用 4x4 矩阵（z/tz 设为 0），这是 GPU 原生支持的标准格式。

 实战：纯矩阵实现平移动画（代码可直接跑）

html

预览

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>🔥WebGL矩阵实战：平移的红色三角形</title> <style> canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; } </style> </head> <body> <canvas></canvas> <script> // 1. 获取Canvas和WebGL上下文 const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert('😭您的浏览器不支持WebGL！换Chrome/Firefox试试'); throw new Error('WebGL not supported'); } // 2. 设置黑色背景 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 3. 着色器（核心：纯矩阵乘法实现平移） const vertexShaderSource = ` attribute vec4 a_Position; uniform mat4 u_TranslateMatrix; // 4x4平移矩阵 void main() { // WebGL标准写法：矩阵 × 顶点坐标 gl_Position = u_TranslateMatrix * a_Position; } `; const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 4. 封装着色器创建函数 function createShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('❌着色器编译错误:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // 5. 创建并链接程序 const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 6. 顶点数据（三角形） const vertices = new Float32Array([ -0.2, -0.2, 0.0, 0.2, -0.2, 0.0, 0.0, 0.2, 0.0 ]); // 7. 绑定顶点数据到GPU const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(program, 'a_Position'); gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); // 8. 矩阵平移核心：构建4x4平移矩阵 const u_TranslateMatrix = gl.getUniformLocation(program, 'u_TranslateMatrix'); const translateMatrix = new Float32Array(16); // WebGL矩阵格式（16个元素的Float32Array） let tx = 0.0; // 平移量x const step = 0.02; // 构建4x4平移矩阵的函数（WebGL列主序） function setTranslateMatrix(matrix, tx, ty, tz) { matrix.set([ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1 ]); } // 9. 动画循环 function animate() { // 更新平移量 tx += step; if (tx > 1.0) tx = -1.0; // 构建4x4平移矩阵 setTranslateMatrix(translateMatrix, tx, 0.0, 0.0); // 传递矩阵给着色器（false=不转置，WebGL默认列主序） gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix); // 清屏+绘制 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animate); } animate(); </script> </body> </html>

 效果

红色三角形沿 x 轴平移，本质是不断更新 4x4 平移矩阵的 tx 分量，GPU 通过「矩阵 × 顶点」计算新位置！

2.2 旋转变换

旋转的核心是「4x4 旋转矩阵」，纯矩阵乘法写法更易和其他变换组合！

旋转矩阵原理（重点！）

二维点绕原点逆时针旋转 θ 角的 4x4 矩阵（WebGL 标准格式）：

text

[ cosθ -sinθ 0 0 ] [ sinθ cosθ 0 0 ] [ 0 0 1 0 ] [ 0 0 0 1 ]

矩阵乘法计算过程：

对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：

plaintext

x' = cosθ * x + (-sinθ) * y + 0 * 0 + 0 * 1 = x*cosθ - y*sinθ y' = sinθ * x + cosθ * y + 0 * 0 + 0 * 1 = x*sinθ + y*cosθ z' = 0 * x + 0 * y + 1 * 0 + 0 * 1 = 0 w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1

矩阵乘法结果等价于：

plaintext

x' = x*cosθ - y*sinθ y' = x*sinθ + y*cosθ
关键：矩阵形式无需在着色器中写三角函数，只需传递完整矩阵，更符合 GPU 渲染规范！

实战：纯矩阵实现旋转动画

html

预览

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>🔥WebGL矩阵实战：旋转的红色三角形</title> <style> canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; } </style> </head> <body> <canvas></canvas> <script> // 1. 获取上下文 const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert('😭换Chrome/Firefox试试！'); throw new Error('WebGL not supported'); } gl.clearColor(0.0, 0.0, 0.0, 1.0); // 2. 着色器（核心：纯矩阵乘法实现旋转） const vertexShaderSource = ` attribute vec4 a_Position; uniform mat4 u_RotateMatrix; // 4x4旋转矩阵 void main() { // WebGL标准写法：旋转矩阵 × 顶点坐标 gl_Position = u_RotateMatrix * a_Position; } `; const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 3. 创建着色器+程序（复用） function createShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('❌编译错误:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 4. 顶点数据 const vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]); const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(program, 'a_Position'); gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); // 5. 旋转矩阵核心：构建4x4绕Z轴旋转矩阵 const u_RotateMatrix = gl.getUniformLocation(program, 'u_RotateMatrix'); const rotateMatrix = new Float32Array(16); let angle = 0.0; // 旋转角度θ（弧度） // 构建4x4绕Z轴旋转矩阵的函数 function setRotateZMatrix(matrix, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); matrix.set([ cos, -sin, 0, 0, sin, cos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]); } // 6. 动画循环 function animateRotate() { angle += 0.02; // 构建4x4旋转矩阵 setRotateZMatrix(rotateMatrix, angle); // 传递旋转矩阵给着色器 gl.uniformMatrix4fv(u_RotateMatrix, false, rotateMatrix); // 绘制 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animateRotate); } animateRotate(); </script> </body> </html>

效果

三角形绕原点旋转，本质是不断更新 4x4 旋转矩阵的 cosθ/sinθ 分量，GPU 自动完成「矩阵 × 顶点」运算！

2.3 缩放变换

缩放是改变图形大小的核心变换，同样通过 4x4 矩阵乘法实现，是复合变换的重要组成部分！

缩放矩阵原理（核心！）

二维点沿 x/y 轴缩放的 4x4 矩阵（WebGL 标准格式）：

text

[ sx 0 0 0 ] [ 0 sy 0 0 ] [ 0 0 sz 0 ] [ 0 0 0 1 ]
  • sx：x 轴缩放因子（>1 放大，<1 缩小，负数翻转）
  • sy：y 轴缩放因子
  • sz：z 轴缩放因子（2D 场景设为 1）

矩阵乘法计算过程：

对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：

plaintext

x' = sx * x + 0 * y + 0 * 0 + 0 * 1 = x * sx y' = 0 * x + sy * y + 0 * 0 + 0 * 1 = y * sy z' = 0 * x + 0 * y + sz * 0 + 0 * 1 = 0 （2D场景sz=1） w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1

矩阵乘法结果等价于：

plaintext

x' = x * sx y' = y * sy
关键：缩放矩阵的核心是对角线上的缩放因子，非对角线元素均为 0，保证仅改变大小不改变位置（绕原点缩放）。

实战：纯矩阵实现缩放动画

html

预览

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>🔥WebGL矩阵实战：缩放的红色三角形</title> <style> canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; } </style> </head> <body> <canvas></canvas> <script> // 1. 获取上下文 const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert('😭您的浏览器不支持WebGL！换Chrome/Firefox试试'); throw new Error('WebGL not supported'); } gl.clearColor(0.0, 0.0, 0.0, 1.0); // 2. 着色器（核心：纯矩阵乘法实现缩放） const vertexShaderSource = ` attribute vec4 a_Position; uniform mat4 u_ScaleMatrix; // 4x4缩放矩阵 void main() { // WebGL标准写法：缩放矩阵 × 顶点坐标 gl_Position = u_ScaleMatrix * a_Position; } `; const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 3. 创建着色器+程序（复用） function createShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('❌编译错误:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 4. 顶点数据 const vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]); const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(program, 'a_Position'); gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); // 5. 缩放矩阵核心：构建4x4缩放矩阵 const u_ScaleMatrix = gl.getUniformLocation(program, 'u_ScaleMatrix'); const scaleMatrix = new Float32Array(16); let scaleFactor = 1.0; // 缩放因子 const step = 0.01; // 缩放步长 let isEnlarging = true; // 放大/缩小标记 // 构建4x4缩放矩阵的函数 function setScaleMatrix(matrix, sx, sy, sz) { matrix.set([ sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1 ]); } // 6. 动画循环 function animateScale() { // 更新缩放因子（来回缩放） if (isEnlarging) { scaleFactor += step; if (scaleFactor >= 2.0) isEnlarging = false; } else { scaleFactor -= step; if (scaleFactor <= 0.5) isEnlarging = true; } // 构建4x4缩放矩阵（x/y轴等比缩放） setScaleMatrix(scaleMatrix, scaleFactor, scaleFactor, 1.0); // 传递缩放矩阵给着色器 gl.uniformMatrix4fv(u_ScaleMatrix, false, scaleMatrix); // 清屏+绘制 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animateScale); } animateScale(); </script> </body> </html>

效果

三角形绕原点在 0.5 倍～2 倍之间来回缩放，本质是不断更新 4x4 缩放矩阵的 sx/sy 分量，GPU 自动完成「矩阵 × 顶点」运算！

2.4 矩阵进阶：平移 + 旋转 + 缩放复合变换

手动组合多个矩阵容易出错？gl-matrix 库可一键完成「平移 + 旋转 + 缩放」的矩阵乘法，是工业级开发的首选方案！

gl-matrix 库的核心优势

  • 封装所有 4x4 矩阵运算：mat4.translate()/mat4.rotateZ()/mat4.scale() 直接生成变换矩阵
  • 自动处理矩阵乘法：复合变换只需按顺序调用 API，无需手动计算矩阵相乘
  • 性能优化：针对 WebGL 做了 GPU 适配，动画更丝滑

💻 实战：平移 + 旋转 + 缩放复合动画

html

预览

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>🔥WebGL矩阵进阶：平移+旋转+缩放复合动画</title> <style> canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; } </style> <!-- 引入gl-matrix库（直接用CDN） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> </head> <body> <canvas></canvas> <script> // 1. 获取上下文 const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert('😭您的浏览器不支持WebGL！换Chrome/Firefox试试'); throw new Error('WebGL not supported'); } gl.clearColor(0.0, 0.0, 0.0, 1.0); // 2. 着色器（核心：接收4x4复合变换矩阵） const vertexShaderSource = ` attribute vec4 a_Position; uniform mat4 u_ModelMatrix; // 复合变换矩阵（平移+旋转+缩放） void main() { // 标准写法：复合矩阵 × 顶点坐标 gl_Position = u_ModelMatrix * a_Position; } `; const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 3. 创建着色器+程序（复用） function createShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('❌编译错误:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 4. 顶点数据 const vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]); const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(program, 'a_Position'); gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); // 5. 复合矩阵核心（重点！） const u_ModelMatrix = gl.getUniformLocation(program, 'u_ModelMatrix'); const modelMatrix = mat4.create(); // 创建单位矩阵（初始无变换） let tx = 0.0; // 平移量x let angle = 0.0; // 旋转角度θ let scaleFactor = 1.0;// 缩放因子 let isEnlarging = true; function animateWithMatrix() { // 1. 重置为单位矩阵（每次循环清空变换） mat4.identity(modelMatrix); // 2. 按顺序执行复合变换（⚠️ 顺序决定最终效果！） // 第一步：缩放（先缩放，保证旋转/平移基于原始大小） mat4.scale(modelMatrix, modelMatrix, [scaleFactor, scaleFactor, 1.0]); // 第二步：旋转（再旋转，保证平移基于旋转后的方向） mat4.rotateZ(modelMatrix, modelMatrix, angle); // 第三步：平移（最后平移，保证整体位置移动） mat4.translate(modelMatrix, modelMatrix, [tx, 0.0, 0.0]); // 3. 更新参数 tx += 0.015; if (tx > 1.0) tx = -1.0; angle += 0.02; // 缩放参数更新 if (isEnlarging) { scaleFactor += 0.005; if (scaleFactor >= 1.5) isEnlarging = false; } else { scaleFactor -= 0.005; if (scaleFactor <= 0.7) isEnlarging = true; } // 4. 传递复合矩阵给GPU gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); // 5. 绘制 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animateWithMatrix); } animateWithMatrix(); </script> </body> </html>

效果

三角形同时完成「沿 x 轴平移 + 绕原点旋转 + 0.7~1.5 倍缩放」的复合动画，gl-matrix 自动完成所有矩阵乘法运算，代码简洁且高效！

矩阵核心知识点（必记！）

  1. 变换顺序≠乘法交换律：矩阵乘法不满足交换律，变换顺序直接决定最终效果（推荐顺序：缩放 → 旋转 → 平移）：
    • 缩放→旋转→平移：图形先调整大小，再旋转方向，最后移动位置（最符合直觉）
    • 平移→旋转→缩放：图形先移动，再旋转，最后缩放（会导致平移距离也被缩放）
  2. 单位矩阵是基础：mat4.identity() 生成单位矩阵（无变换），是所有矩阵变换的起点
  3. 矩阵格式要正确：WebGL 中矩阵必须是 Float32Array 类型的 16 个元素（列主序），传递时 gl.uniformMatrix4fv 的第二个参数必须为 false

🎁 新手矩阵避坑指南

  1. 先跑通代码，再理解矩阵：不用一开始死磕矩阵乘法，先改 tx/angle/scaleFactor 数值，看动画变化，直观理解矩阵作用
  2. 拒绝手动改顶点坐标：WebGL 标准写法是「矩阵 × 顶点」，直接修改 x/y 分量会丧失 GPU 并行计算优势
  3. 优先用 gl-matrix 库：实际开发中避免手动拼矩阵，减少 90% 错误，专注业务逻辑
  4. 注意缩放中心：默认缩放绕原点进行，若需绕自定义点缩放，需先平移到原点→缩放→平移回原位置

3.矩阵核心总结

  1. WebGL 动画的本质：CPU 端构建 4x4 变换矩阵 → 传递给着色器 → GPU 执行「矩阵 × 顶点坐标」计算新位置
  2. 三大基础变换矩阵：
    • 平移：第四列前三个元素为平移量（tx/ty/tz）
    • 旋转：左上角 2x2 矩阵为 cosθ/sinθ 组合（绕 Z 轴）
    • 缩放：对角线上的元素为缩放因子（sx/sy/sz）
  3. 实战技巧：用 gl-matrix 库简化矩阵操作，严格遵守「缩放→旋转→平移」的复合变换顺序，注意矩阵乘法无交换律

💡 下期预告

掌握矩阵后，我们解锁更炫酷的矩阵玩法：✅ 透视矩阵（实现 3D 景深效果）✅ 视图矩阵（模拟相机移动）✅ 模型视图投影矩阵（MVP 矩阵）：工业级 3D 渲染核心

关注我，下期手把手教你用矩阵打造真正的 3D 场景，新手也能轻松拿捏🎊！

Read more

RoboMaster SDK 终极指南：从零开始掌握机器人编程

RoboMaster SDK 终极指南：从零开始掌握机器人编程 【免费下载链接】RoboMaster-SDKDJI RoboMaster Python SDK and Sample Code for RoboMaster EP. 项目地址: https://gitcode.com/gh_mirrors/ro/RoboMaster-SDK 想要轻松控制DJI RoboMaster EP教育机器人吗？RoboMaster SDK就是你的完美选择！这是一个基于Python语言的开发工具包，让你用简单的代码就能实现复杂的机器人控制功能。无论你是编程新手还是资深开发者，都能快速上手这个强大的机器人开发平台。 🎯 快速上手：5分钟开启你的第一个机器人程序 核心概念速览 RoboMaster SDK采用了"模块化"设计理念，将机器人的各种功能封装成独立的模块。你可以像搭积木一样组合这些模块，创建出各种有趣的机器人应用。 环境配置三步走 第一步：安装Python环境 确保你的电脑上安装了Python 3.6.

论文阅读：Attention is all you need

Vaswani A, Shazeer N, Parmar N, et al. Attention is all you need[J]. Advances in neural information processing systems, 2017, 30. 引言 文章首先引入循环模型存在一个根本性的计算瓶颈，即循环模型通常沿输入和输出序列的符号位置进行计算，在计算时刻t，模型会根据前一时刻的隐藏状态ht-1和当前位置的输入生成新的隐藏状态ht，这种固有的顺序性导致无法在训练样本内部进行并行化计算，当序列长度增加时，由于内存限制限制了批处理（batching）的大小，这一问题变得尤为严重。 文章提出了Transformer模型架构，完全摒弃了循环和卷积，并通过完全依赖注意力机制来建立输入和输出之间的全局依赖关系，具有高度并行化和训练速度极快的特点。 模型架构 Transformer 模型摒弃了传统的循环或卷积结构，采用了基于注意力机制的编码器-解码器（Encoder-Decoder）架构。其中编码器由6个相同的层堆叠而成，每层包含两个子层：一个是多头自注意力机制，另一个是简单
知识库问答机器人：基于SpringAI+RAG的完整实现

知识库问答机器人：基于SpringAI+RAG的完整实现

一、引言 随着大语言模型的快速发展，RAG（Retrieval-Augmented Generation）技术已成为构建知识库问答系统的核心技术之一。本文将带领大家从零开始，使用Spring AI框架构建一个支持文档上传的知识库问答机器人，帮助大家深入理解RAG技术的核心原理和实践应用。 1.1 什么是RAG？ RAG（检索增强生成）是一种结合了信息检索和文本生成的技术。它的基本工作流程是： 用户提出问题 系统从知识库中检索相关信息 大语言模型基于检索到的信息生成答案 从系统设计角度触发，RAG 的核心作用可以被描述为： 在LLM调用生成响应之前，由系统动态构造一个“最小且相关的知识上下文”。 请注意两个关键词： 动态 ：每次问题都不同，检索的知识也不同（比如用户问 A 产品时找 A 的文档，问 B 产品时找 B 的文档） 最小 ：只注入必要信息（比如用户问 “A 产品的定价”，就只塞定价相关的片段，而非整份产品手册） RAG可以有效的弥补上下文窗口的先天不足：不再需要把所有知识塞进窗口，
Clawdbot(Moltbot) 飞书机器人配置，体验老板和助手沟通的感觉

Clawdbot(Moltbot) 飞书机器人配置，体验老板和助手沟通的感觉

一、背景说明 Clawdbot可以24小时待命（参考配置方式：Clawdbot(Moltbot) windows安装配置教程(含各种问题处理)），但是网页端使用起来比毕竟没那么方便，然而clawdbot支持多种渠道交互，这也正是这个AI助理的魅力所在，想想飞书发送一个消息，一个任务就完成了，这不就是老板指挥我做事的方式吗，来赶紧体验一波老板的感觉~ 二、飞书机器人创建 飞书开放平台构建机器人：https://open.feishu.cn/ 记录App ID 和 App Secret，一会要用： 三、自动安装插件 项目地址：https://github.com/m1heng/Clawdbot-feishu 这时候，就可以发挥clawdbot的能力了，直接让clawdbot给我安装： 我要安装飞书机器人，帮我按照这个命令安装：Clawdbot plugins install @m1heng-clawd/feishu 到这个过程有点慢，安装了好一会没反应，我开始问了： 又过了好一会没反应，