如何在着色器中设置 p5.js Alpha 通道透明度？

Question

在

p5.js (v1.9.0)

中，我尝试设置一个非常基本的着色器，设置某些形状的 Alpha 通道以查看透明度（重叠的形状应该显得更亮）。整个代码在这里可见：

https://editor.p5js.org/evimandarine/sketches/WdqoaeEr7

这使用了版本

1.9.0

并且完全没有透明度。看起来 alpha 通道在版本

1.4.1

中默认设置为 false。在此示例中，使用版本

1.4.0

alpha 通道可以工作，但是最后绘制的形状位于第一个形状之上；我希望看到一些底部形状，因为有一定程度的透明度：

https://editor.p5js.org/Kumu-Paul/sketches/9RMzCJwMX

我有一种感觉，我正在混淆

p5

画布 alpha/混合模式与 WebGL/着色器混合模式。

问题是如何在版本

1.9.0

中启用透明度以及如何设置混合模式？
在我的示例中，如何显示与此类似但使用着色器的结果？

https://editor.p5js.org/evimandarine/sketches/QjHsWotHV

Answer 1

Alpha 通道与 p5.js 1.9.0 一样工作。这是一个例子：

let shdr;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  shdr = createShader(vert, frag);
  noStroke();
}

function draw() {  
  background(255);
  
  orbitControl(2, 1, 0.1);
  
  shader(shdr);
  shdr.setUniform("uColor", [1, 0, 0]);
  push();
  translate(-100, 0, 0)
  cylinder(30, 50);
  pop();
  
  shdr.setUniform("uColor", [0, 0, 1]);
  push()
  translate(100, 0, 0)
  cylinder(30, 50);
  pop()
}

const vert = `
// Transformation matrices
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

attribute vec3 aPosition;
// P5 provides us with texture coordinates for most shapes
attribute vec2 aTexCoord;

// This is a varying variable, which in shader terms means that it will be passed from the vertex shader to the fragment shader
varying vec2 vTexCoord;

void main() {
  // Copy the texcoord attributes into the varying variable
  vTexCoord = aTexCoord;
  
        
  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
  gl_Position = uProjectionMatrix * viewModelPosition;
}
`;

const frag = `
precision mediump float;

uniform vec3 uColor;


void main()
{
  gl_FragColor = vec4(uColor, 0.33);
}
`;

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

这里有一些微妙的行为：

1. 事物绘制的顺序有很大的不同。这是因为 GPU 正在对每个片段（像素）进行深度测试，并跳过那些已经在该位置绘制的任何内容后面的片段（无论 alpha 级别如何）。
2. 没有隐式的背面剔除，并且相同的规则适用于重要的绘制顺序（在先前绘制的三角形后面绘制的三角形没有效果，但是在位于它们后面的绘制三角形之上绘制的三角形则有效果）。

这个故事的寓意是，如果你想在 p5.js WebGL 中使用 alpha，那么你需要管理自己的三角形并控制它们的绘制顺序（从距离相机最远到最近，可能会跳过背向的三角形）来自相机）。