Give a border blur effect with GLSL?

Questions
1

To give it the feel of a real beam project, I created a shader using a RawShaderMaterial that shows the blur coming in from the edges.

However, I’m getting diagonal lines in each corner, and I’m having trouble getting it to work.

Can anyone help me modify my code to make it work correctly? Or if you have any other ideas to implement the blur shader naturally, please let me know.

Thanks for your help.

2

This is a result of the Mach effect. It is an optical illusion – i.e. there is no such line, but the human brain works in a way that amplifies areas where continuity is broken.

My suggestion is to round the blur, so that it is more continuous:

void main(){
      float edgeMin = edge;
      float edgeMax = 1.0 - edge;

      gl_FragColor = texture2D( map, vUv );

      float xp = smoothstep( 0.0, edgeMin, vUv.x );
      float xn = smoothstep( 1.0, edgeMax, vUv.x );
      float yp = smoothstep( 0.0, edgeMin, vUv.y );
      float yn = smoothstep( 1.0, edgeMax, vUv.y );

      gl_FragColor.a = (xp*xn*yp*yn) * opacity;
}

image
image963×409 32 KB

1 Like
3

/cc

4

This code does exactly what I want it to do.
Thank you so much!!!

ps) how can (xp * xn * yp * yn) this code get correct results?
Please explain if you don’t mind

1 Like
5

Both tables have horizontal and vertical headers from 0 to 1. Each internal cell combines the corresponding values from both headers.

The left table combines with the function MIN and it is prone to the Mach effect. The right table uses multiplication, so it is a standard multiplication table.

image
image1333×487 44.3 KB

The same concept is used for spline surfaces, you have one spline curve along one dimension, and another spline curve along another dimension, they their multiplication defines a spline surface in both dimensions.

2 Likes