原文链接: regl 用直线画五角星
官方例子稍微改了下
这个库封装后对于一些场景还是简单不少的
import createREGL from "regl";
import { randomColor } from "../../utils";
export default () => {
const regl = createREGL();
regl.clear({
color: [0, 0, 0, 1],
depth: 1,
});
// windows上大多数情况下, 线宽都是1
const lineWidth = Math.min(3, regl.limits.lineWidthDims[1]);
console.log("lineWidth", lineWidth, regl.limits);
regl({
frag: `
precision mediump float;
uniform vec4 color;
varying vec4 outVsColor;
void main() {
gl_FragColor = outVsColor;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec4 aVsColor;
varying vec4 outVsColor;
void main() {
gl_Position = vec4(position, 0, 1);
outVsColor = aVsColor;
}`,
attributes: {
position: new Array(5).fill().map((x, i) => {
const theta = (2.0 * Math.PI * i) / 5;
return [Math.sin(theta), Math.cos(theta)];
}),
// 颜色值需要归一化[0,1]
aVsColor: new Array(5).fill(0).map(() => randomColor(true)),
},
uniforms: {
color: [1, 0, 0, 1],
},
elements: [
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 2],
[1, 3],
[1, 4],
[2, 3],
[2, 4],
[3, 4],
],
lineWidth: lineWidth,
})();
};