Sign in to follow this  

How to implement GLSL marching ant shader

This topic is 685 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm making a PC 2D point and click adventure and I would like to have a UI where if the user hovers their mouse cursor over an object (that can be interacted with) the object would be rendered with a highlight selection around it... Something like marching ants.

I'm thinking this could be implemented like this:

* start render frame
* Render all objects appearing behind the selected item using the "normal" shader.
* switch to selection shader and render the item
* switch back to "normal" shader and render all items that appear in front of the selected object

All my graphic assets are 2D hand drawn textures.

Any ideas on how to implement the selection shader in GLSL?

Share this post


Link to post
Share on other sites

there are lots of possible solutions - a fast one could be to use a graphics-tool (ie gimp) to add a border to each graphical asset that may be selected using a marker-color, like 255 0 255. then in glsl you can do something like this:

if(selected && color.r == 255 && color.g == 0 && color.b == 255) color = mySelectionColor;
else if(!selected && color.r == 255 && color.g == 0 && color.b == 255) color.a = 0.0;
to render that border in some runtime-defined color, maybe even change the color over time for a nice effect. (ie pulsating glow)

 

 

ofc calculating a border on the fly is also possible, and if it's supposed to be just 1 or 2 pixels wide it's reasonably fast. for that you'd do something like:

if(color.a == 0 && color.a of neighbouring pixels != 0) color = mySelectionColor;

that would give a 1px wide border around whatever by checking each transparent pixel if it is neighbouring any opaque pixels, and if so render it with border-color.

i'd probably prefer the first method, cause it's faster. you can add the 1px wide border to the textures/sprites using a batch-cli tool like the ones from imagemagick (http://www.imagemagick.org/script/binary-releases.php) - so it isnt much work, just 1 command for all textures/sprites.

Edited by ninnghazad

Share this post


Link to post
Share on other sites
if(color.a == 0 && color.a of neighbouring pixels != 0) color = mySelectionColor;

 

Do you have any information on how you'd go about accessing data from neighbouring pixels? This would be part of the fragment shader right?

Share this post


Link to post
Share on other sites
Yes. "Texels" in this case. It's called multi-sampling (though most people asociate that term with antialiasing). There's no trick to it, you just take more than one sample. Be aware that sampling is expensive though.

Share this post


Link to post
Share on other sites

This topic is 685 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this