二维缩放

缩放和平移一样简单。

让我们将位置乘以期望的缩放值

attribute vec2 a_position;

uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
uniform vec2 u_scale;

void main() {
   // 缩放
  vec2 scaledPosition = a_position * u_scale;
  // 旋转位置
  vec2 rotatedPosition = vec2(
     scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
     scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
  // 加上平移
  vec2 position = rotatedPosition + u_translation;
  // convert the position from pixels to 0.0 to 1.0
  vec2 zeroToOne = position / u_resolution;
  // convert from 0->1 to 0->2
  vec2 zeroToTwo = zeroToOne * 2.0;
  // convert from 0->2 to -1->+1 (clipspace)
  vec2 clipSpace = zeroToTwo - 1.0;
  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
}

// ...
const scaleLocation = gl.getUniformLocation(program, "u_scale"); 
// ...
const setScale = () => {
  // const scale = [1, 1];
  const scale = this.scale
  gl.uniform2fv(scaleLocation, scale);
};

渲染结果

值得一提的是，缩放值为负数的时候会翻转几何体。