GLSL如何设置平面的透明度？

Question

也许有人可以给我提示。我编写了一个在平面上绘制圆形的着色器。该圆形由混合在一起的两种颜色着色。我想让只有圆圈可见而平面透明。我想我需要在片段着色器中使用 if 语句，但我无法正确编写它以使其工作。下面我粘贴了我的片段着色器。我将不胜感激任何提示。

fragmentShader: `
  #define PI2 6.28318530718

  uniform vec3 u_color1;
  uniform vec3 u_color2;
  
  varying vec2 vUv;
  varying vec3 vPosition;
  varying vec2 p;
  varying float result;
  
  float circle(vec2 pt, vec2 center, float radius, float edge_thickness){
    vec2 p = pt - center;
    float len = length(p);
    float result = 1.0-smoothstep(radius-edge_thickness, radius, len);
  
    return result;
  }
  
  void main (void)
  {
    vec3 col = mix(u_color1, u_color2, vUv.y);
    vec3 color =  col * circle(vPosition.xy, vec2(0.0), 10.0, 0.002);

      gl_FragColor = vec4(color, 1.0);
   
  }
  `,

Answer 1

在 CPU 端您需要的代码:

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

并且还要确保您的渲染上下文分配了一些 alpha btis。如果不使用不同的混合函数(不使用 alpha 的混合函数)。

在 GPU 端，您使用 Alpha channel 来设置透明度(对于上面的混合函数)，因此:

gl_FragColor = vec4(color, alpha_transparency);

通常直接从 CPU 端代码传递 RGBA 形式的 vec4 颜色。

除此之外，您还需要以正确的顺序呈现您的内容，请参阅:

• OpenGL - How to create Order Independent transparency?