GLSL how to set transparency on a plane?

Question

maybe someone could give me a hint. I wrote a shader that draws a circle on a plane.The circle is colored in two colors mixed together. I would like to make only the circle visible and the plane transparent. I think I need an if statement in the fragment shader, but I can't write it properly to make it work. Below I am pasting my fragment shader. I will be grateful for any hint.

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);
   
  }
  `,

score 3 · Answer 1 · answered Oct 01 '22 at 05:02

On CPU side code you need:

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

And also make sure your rendering context has some alpha btis allocated. If not use different blending function (one that does not use alpha).

On GPU side you use alpha channel to set transparency (for the blend function above) so:

gl_FragColor = vec4(color, alpha_transparency);

Its also usual to pass vec4 color in RGBA form directly from CPU side code instead.

On top of all this you also need to render your stuff in correct order see:

OpenGL - How to create Order Independent transparency?

GLSL how to set transparency on a plane?

1 Answers1