原文链接: regl blend 颜色混合
上一篇: regl batch 批量绘制三角形
下一篇: regl depth 深度缓冲
https://en.wikipedia.org/wiki/Blend_modes
http://www.jiazhengblog.com/blog/2017/01/04/2989/
混合有很多种, 每种合成方式对应一种两个颜色的合成算法
import createRegl from "regl";
export default (canvas: HTMLCanvasElement) => {
const regl = createRegl({ canvas });
regl.clear({
color: [0, 0, 0, 1],
depth: 1,
});
const draw = regl({
blend: {
enable: true,
func: {
src: 1,
dst: 1,
},
equation: "add",
},
// blend: {
// enable: true,
// func: {
// src: "src alpha",
// dst: "one minus src alpha",
// },
// },
// 只需要关掉mask好像就行了, 但是这种最好还是两个都干掉吧
depth: { enable: true, mask: false },
// depth: { enable: false, mask: false },
frag: `
precision mediump float;
varying vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec4 inColor;
varying vec4 color;
void main() {
color=inColor;
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: [
[0, 1],
[-1, -1],
[1, -1],
[0, -1],
[-1, 1],
[1, 1],
].map((i) => i.map((j) => j / 2)),
inColor: [
[1, 0, 0, 0.5],
[1, 0, 0, 0.5],
[1, 0, 0, 0.5],
[0, 0, 1, 0.5],
[0, 0, 1, 0.5],
[0, 0, 1, 0.5],
],
},
elements: [
[0, 1, 2],
[3, 4, 5],
],
});
draw();
};