Drawing inner shadow for Bezier curves in OpenGL / GLSL

Question

I'm trying to draw an inner glow/shadow for an object consisting of four cubic Bezier curves. To draw a single Bezier curve I'm splitting it into segments and then calculating distances from current pixel to each line segment and finally I'm blending it with min:

// No GL_MAX blending mode in OpenGL ES 2.0 d_min = min(d_min, d)

where d is a distance for every segment. Zoomed in example of blending two line segments:

It works reasonably well when you have ~25 segments representing a short Bezier curve

except for "gutters" in the places where Bezier curves and their respective gradients combine.

Q: How can I avoid these artifacts? Is there a better method for drawing inner glow/shadow?

this [Draw Quadratic Curve on GPU](http://stackoverflow.com/a/31423105/2521214) might help a bit — Spektre, Jan 26 '16 at 16:31

score 1 · Answer 1 · answered Jan 27 '16 at 16:18

1

What about doing a blur on your curves and then masking the result to the inside area?

answered Jan 27 '16 at 16:18

Dickson

211
1
11

Yep, this is how Photoshop does it. I'm not sure why the OP gets the artifacts he gets though. – Stefan Monov Nov 02 '16 at 13:32

score 0 · Answer 2 · answered Feb 10 '20 at 16:04

see:

GLSL rendering 2D cubic BEZIER curves

It basically convert inputted 4-vertex geometry chunks into BEZIER cubics with defined curve width d.

In fragment you got information about distance to curve ll so you can use it directly to shade your stuff. For your case using white background and black color and these points:

double pnt[]=                   // cubic curve control points
    {
    +0.9,-0.8,0.0,
    +0.5,+0.8,0.0,
    -0.5,+0.8,0.0,
    -0.9,-0.8,0.0,
    };

I got this output (d=0.05):

I just change the final coloring line in vertex shader to:

l=ll/d; // distance from center of curve 0..1
col=vec4(l,l,l,1.0);

You can un-linearize the l by sqrt or pow to enhance the shading effect...

Drawing inner shadow for Bezier curves in OpenGL / GLSL

2 Answers2