regl vao 三角形交替

原文链接: regl vao 三角形交替

上一篇: chrome 查看图片内存占用和GPU内存占用

下一篇: regl 多实例绘制ANGLE_instanced_arrays 和 instances

http://www.jiazhengblog.com/blog/2017/04/17/3127/

画两个相互交替的三角形, 主要目的是使用vao保存状态, 这样再次绘制时不需要重新创建数据和顶点状态, 使用vao索引来找数据

然后发现api文档有些小问题, 蹭了个pr...

import createREGL from "regl";
export default (canvas: HTMLCanvasElement) => {
  const regl = createREGL(canvas);
  // First we create the VAO object
  const vao1 = regl.vao([
    // first attribute is a triangle
    [
      [-1, 1],
      [1, -1],
      [-1, -1],
    ],
    // second attribute is a color
    { x: 1, y: 0, z: 1 },
  ]);

  const vao2 = regl.vao([
    // first attribute is a triangle
    [
      [1, 1],
      [-1, 1],
      [1, -1],
    ],
    // second attribute is a color
    { x: 0, y: 1, z: 1 },
  ]);
  const vaoList = [vao1, vao2];

  // then we create the command
  const draw = regl({
    frag: `
    precision highp float;
    varying vec3 fragColor;
    void main () {
      gl_FragColor = vec4(fragColor, 1.);
    }`,
    vert: `
    precision highp float;
    attribute vec2 position;
    attribute vec3 color;
    varying vec3 fragColor;
    void main () {
      fragColor = color;
      gl_Position = vec4(position, 0, 1);
    }`,
    // specify the vertex array object for this command
    vao: regl.prop("vao"),
    // when using a VAO object we give numerical ids for each attribute binding location
    attributes: {
      position: 0,
      color: 1,
    },
    count: 3,
  });

  let i = 0;
  setInterval(() => {
    draw({ vao: vaoList[i++ % 2] });
  }, 1000);
};