webgl变换：深入图形平移

在以前的文章里，不管是绘制图形，绘制点亦或者是改变色值，所有的内容都是静态的。

在 webgl 里，图形的运动分为 平移、旋转、缩放 三种类型。

接下来，我们会从零基础开始，一点一点来深入了解图形如何进行运动。

首先来从零开始了解下图形的平移

1. 图形平移

首先我们来看如何实现图形的平移操作。

平移的操作就是将图形的原始坐标加上对应的移动距离。首先来看下平移的实现

const vertexShaderSource = "" +
      "attribute vec4 apos;" + // 定义一个坐标
      "uniform float x;" + // 处理 x 轴移动
      "uniform float y;" + // 处理 y 轴移动
      "void main(){" +
      " gl_Position.x = apos.x + x;" +
      " gl_Position.y = apos.y + y;" +
      " gl_Position.z = 0.0;" + // z轴固定
      " gl_Position.w = 1.0;" +
      "}";
const fragmentShaderSource = "" +
      "void main(){" +
      " gl_FragColor = vec4(1.0,0.0,0.0,1.0);" +
      "}";

// initShader已经实现了很多次，本次就不再赘述了
const program = initShader(gl,vertexShaderSource,fragmentShaderSource);

const buffer = gl.createBuffer();
const data = new Float32Array([
  0.0,0.0,
  -0.5,-0.5,
  0.5,-0.5,
]);

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

const aposlocation = gl.getAttribLocation(program,'apos');
const xlocation = gl.getUniformLocation(program,'x');
const ylocation = gl.getUniformLocation(program,'y');

gl.vertexAttribPointer(aposlocation,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aposlocation);

let x = 0.0;
let y = 0.0;
function run () {
  gl.uniform1f(xlocation,x += 0.01);
  gl.uniform1f(ylocation,y += 0.01);

  gl.drawArrays(gl.TRIANGLES,0,3);
  // 使用此方法实现一个动画
  requestAnimationFrame(run)
}
run()

解释：

• 首先声明一个变量 x 和变量 y ，用来处理 x轴 和 y轴 的坐标。这里使用的是 uniform 变量，因为平移的操作对于图形上的所有顶点都有影响。
• 通过