如何在p5.js v1.9.0着色器中设置Alpha通道透明度及混合模式？

1. 启用WebGL画布Alpha通道 #

自v1.4.1起，p5.js的WebGL渲染器默认关闭Alpha通道，需显式开启：

function setup() {
  createCanvas(600, 600, {
    renderer: WEBGL,
    alpha: true
  });
}

也可通过直接操作WebGL上下文开启：

function setup() {
  createCanvas(600, 600, WEBGL);
  const gl = this._renderer.GL;
  gl.enable(gl.BLEND);
}

2. 设置叠加提亮的混合模式 #

要实现重叠区域更亮的效果，需使用加法混合模式，直接调用p5.js的blendMode方法：

function draw() {
  background(0);
  // 切换为加法混合，让重叠区域颜色叠加提亮
  blendMode(ADD);
  shader(yourShader);
  // 后续绘制着色器图形的逻辑
}

3. 着色器代码适配 #

确保片段着色器正确输出带Alpha的颜色值：

precision mediump float;

void main() {
  // 示例：输出半透明红色，Alpha值可按需调整
  gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}

关键说明 #

• 避免混淆2D与WebGL混合模式：blendMode(ADD)在WebGL环境下会映射为加法混合逻辑，正好解决v1.4.0中后绘制图形覆盖底层的问题
• 必须先启用画布Alpha通道，否则着色器的Alpha参数不会生效

内容的提问来源于stack exchange，提问作者evilmandarine