Distance to ofPolyline for Shader

I’m reading in contours from TSPS in real-time and want to render them using a shader. My current approach is to use an ofPolyline to house the points and then just ofBeginShape. This allows me to “mask” the shader with the contour, but provides no geometric information.

Ideally, I would want the distance to the contour as a varying parameter to the shader. I thought of writing a buffer with the information and then passing it in as a texture, but it’s way too slow for real-time.

Are there any better approaches to get this information to my shader?

Hi, have you tried using a signed distance field? or an unsigned distance field?
In simple it is essentially an image in in which each pixel’s value represents the distance to the closest “boundary” pixel. This is used a lot in CV stuff and definitely is fast enough to be done in real time.

On the other hand, you could pass to the shader the whole ofPolyline vertices information in a texture buffer and use that to figure out the distance within the shader. Look at examples/gl/textureBufferInstancedExample which shows how to use an ofBufferObject to easily pass arbitrary data to a shader. In your case just pass the polyline’s vertices.
Then in the shader, instead of accessing each element of the passed data, just acces all or some, depending on what you need to do.

1 Like

I guess my question is better stated as: how do I efficiently construct an SDF from an ofPolyline without explicitly constructing a texture pixel-by-pixel?

you can use opencv to make a distance image from a grayscale image. If I have the poly lines as vectors you could:

1 Like

ps: https://docs.opencv.org/3.4/d7/d1b/group__imgproc__misc.html#ga8a0b7fdfcb7a13dde018988ba3a43042

this is what it looks like – you may need to scale down depending on how large an image, etc


Maybe this is doing what you need?

A good reference could be:

In this article https://shaderbits.com/blog/various-distance-field-generation-techniques you can find a shader based approach.