Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Anyone have a glossy button shader?

edited April 2013 in Questions Posts: 666

Seems like a simple thing to either make or find, but I can't seem to quite get the time to hack it out...does anyone have one already? I'd embed it into Cider2.

Tagged:

Comments

  • edited April 2013 Posts: 666

    Well, it's not a shader, but it's glossy...Added a gist of a simple glossy button maker with parameters.

    https://gist.github.com/AntonioCiolino/5367189

    image here: (zoomed)

  • Posts: 502

    Looks nice. I've written some code for a nine-patch, dividing an image into nine meshes, so that it can stretch a button image without messing up the round corners.

  • Posts: 666

    yeah, I'm trying to figure out how to hack a "masking" feature...I don't see offhand how to do that yet.

    I did see something like that in the blendmodes, but I haven't figured out how to do it exactly right yet.

  • edited April 2013 Posts: 132

    I am not sure what you are looking for but adding something like
    col.rgb*=1.0*(vTexCoord.y-(vTexCoord.x-0.5)*(vTexCoord.x-0.5));
    In the codea generated new shader will provide the lighter top of a picture. I guess you can also generate a rounded button from a mesh by making the corner things transparent

  • Posts: 666

    @corneliuhoffman, it's getting the top ellipse to be lighter only that I'm struggling with. I got the POC in the gist code, but I can't quite firgure out how to make an ellipse in a shader, which is much preferred (and doesn't mess with setContext())

  • Mine makes a little lighter parabola.

  • edited April 2013 Posts: 666

    Is that going in the fragment shader? Seems to not work there.

    I get the idea you've put together - have the coords control how far down the "lighter" area is. Nice idea.

    Supposed to be "col.rgb = col.rgb * (vTexCoord..."?

  • edited April 2013 Posts: 132

    Yes that's right, you might also consider + instead of times

  • Posts: 666

    I went ahead and made a mask as a bitmap with a thick, rounded line and apply that to a shader that checks for alpha values and gasp discards pixels with an alpha of 0.0 to resolve the rounded corners issue.

  • Posts: 2,161

    Wouldn't it be better to make a mesh with rounded corners?

  • edited April 2013 Posts: 666

    I amusing a mesh now to do the pixel manipulation and discard. Not sure how bad performace is with it, but it was easier to draw a line with a rounded cap and use that as a mask that it was to write code to generate a triangle fan...

    On another note, I'm finding out that setContext is really really not happy with me (nor I with it)

    If I attempt to setContext inside of a draw() that was called from another draw(), I basically get a cascading failure of epic proportions.

    It looks like setContext(img), even when closed with a proper setContext() before being reassigned to a new image, doesn't play nicely in the draw() loop.

  • Posts: 2,161

    I meant that you should do the whole thing with a mesh, rounded corners and all. Then you don't have to worry about discard (which is slooooow) or about alphas.

Sign In or Register to comment.