原文链接: regl vao 三角形交替
下一篇: 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);
};