0
\$\begingroup\$

I made a shader which turns all the colours of the texture to black but I also want it to be blurred at the edges where the opaque sprite turns transparent.

Original texture with desired output.

enter image description here

#ifdef GL_ES
    precision mediump float;
#endif

varying vec4 v_color;
varying vec2 v_texCoords;

uniform sampler2D u_texture;

void main() {
  vec4 c = v_color * texture2D(u_texture, v_texCoords);
  gl_FragColor = vec4(0,0,0, c.a);
}

A simple gaussian blur with good performance is what I want.

This shadertoy shader looks ideal: https://www.shadertoy.com/view/Xltfzj

I managed to convert the above mentioned shadertoy to GLSL which works fine, but I don't know how to make it first turn the texture black before blurring.

#ifdef GL_ES
    #define PRECISION mediump
    precision PRECISION float;
    precision PRECISION int;
#endif

varying vec4 v_color;
varying vec2 v_texCoords;

uniform sampler2D u_texture;
uniform vec2 resolution;

void main() {
    float Pi = 6.28318530718; // Pi*2
    
    // GAUSSIAN BLUR SETTINGS {{{
    float Directions = 16.0; // BLUR DIRECTIONS (Default 16.0 - More is better but slower)
    float Quality = 4.0; // BLUR QUALITY (Default 4.0 - More is better but slower)
    float Size = 8.0; // BLUR SIZE (Radius)
    // GAUSSIAN BLUR SETTINGS }}}
   
    vec2 Radius = Size / resolution.xy;
    
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = v_texCoords;
    // Pixel colour
    vec4 Color = texture2D(u_texture, uv);
    
    // Blur calculations
    for( float d=0.0; d<Pi; d+=Pi/Directions) {
        for(float i=1.0/Quality; i<=1.0; i+=1.0/Quality) {
            Color += texture2D( u_texture, uv+vec2(cos(d),sin(d))*Radius*i);        
        }
    }
    
    // Output to screen
    Color /= Quality * Directions - 15.0;
    gl_FragColor =  Color;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.