WebGl 二维旋转及缩放

function printSineAndCosineForAnAngle(angleInDegrees) {
  var angleInRadians = angleInDegrees * Math.PI / 180;
  var s = Math.sin(angleInRadians);
  var c = Math.cos(angleInRadians);
  console.log("s = " + s + " c = " + c);
}

import vsSource from '~/index.vs';
import fsSource from '~/index.fs';

const t = arr => arr.map(x => x / 200);
const createSquare = (width, height, start) => {
  const [x, y] = start;
  // prettier-ignore
  return [
    x , y,
    x + width, y,
    x, y + height,
    x + width, y + height
  ];
};

const canvas = document.getElementById('webgl');
const gl = canvas.getContext('webgl');

// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 绑定资源
gl.shaderSource(vertexShader, vsSource);
// 编译着色器
gl.compileShader(vertexShader);

// 创建片段着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 绑定资源
gl.shaderSource(fragmentShader, fsSource);
// 编译着色器
gl.compileShader(fragmentShader);

// 创建一个着色器程序
const glProgram = gl.createProgram();

// 把前面创建的二个着色器对象添加到着色器程序中
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);

// 把着色器程序链接成一个完整的程序
gl.linkProgram(glProgram);

// 使用这个完整的程序
gl.useProgram(glProgram);

// 定位变量位置
const a_Position = gl.getAttribLocation(glProgram, 'a_Position');

// 定义角度
const a_Rotation = gl.getUniformLocation(glProgram, 'a_Rotation');

// prettier-ignore
const vtxData =  [
  createSquare(200,30, [-100,100]),
  createSquare(30,200, [-100,-100]),
];

const createRotation = angleInDegrees => {
  let angleInRadians = (angleInDegrees * Math.PI) / 180;
  return [Math.sin(angleInRadians), Math.cos(angleInRadians)];
};

let start = 180;

setInterval(() => {
  let rotation = createRotation(start);
  start += 1;

  gl.clear(gl.COLOR_BUFFER_BIT);

  for (let i = 0; i < vtxData.length; i++) {
    const arrVtx = new Float32Array(t(vtxData[i]));

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, arrVtx, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Position);

    gl.uniform2fv(a_Rotation, rotation);

    const a_PointSize = gl.getAttribLocation(glProgram, 'a_PointSize');
    gl.vertexAttrib1f(a_PointSize, 1.0);

    const u_FragColor = gl.getUniformLocation(glProgram, 'u_FragColor');
    gl.uniform4f(u_FragColor, 0.0, 0.6, 0.38, 1);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
}, 5);

// 获取变量
const a_Scale = gl.getUniformLocation(glProgram, 'u_scale');

// ...

let scale = [2,1];

// 赋予变量值
gl.uniform2fv(a_Scale, scale);