Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

render borders using shader #93

Closed
wants to merge 5 commits into from
Closed

Conversation

debris
Copy link
Contributor

@debris debris commented Nov 30, 2019

This pr enables quad shader to render borders. This enables iced to easily add border param to all elements (e.g. Button) and makes the border more smooth than 2 quads rendered on top of each other.

e.g.

before:

Screenshot 2019-11-30 at 11 07 39

now:

Screenshot 2019-11-30 at 11 07 13

@hecrj hecrj added feature New feature or request improvement An internal improvement labels Nov 30, 2019
@hecrj hecrj added this to the 0.1.0 milestone Nov 30, 2019
@hecrj
Copy link
Member

hecrj commented Nov 30, 2019

This is great, @debris. Besides improving quality, it should reduce the amount of primitives too. Thank you!

I have noticed the border color was affecting the background color when the border width was 0. I have been able to fix it, but I am not sure it's the best way to do it. I know GPUs do not like branching.

Please, take a look and let me know!

@debris
Copy link
Contributor Author

debris commented Dec 1, 2019

I have noticed the border color was affecting the background color when the border width was 0. I have been able to fix it, but I am not sure it's the best way to do it. I know GPUs do not like branching.

good catch! but it's easily solvable even without branching :)

@debris
Copy link
Contributor Author

debris commented Dec 1, 2019

I forced push to this branch, I hope you don't mind.

changes overwritten by the push

    vec4 c = bg_color;
    float alpha = d > 0 ? clamp(radius + s - d, 0, 1) : 1;

    if(frame_width > 0) {
        float inner_radius = radius - frame_width;
        float mix_factor = smoothstep(inner_radius - s, inner_radius + s, d);
        c = mix(c, frame_color, mix_factor);
    }

    return vec4(c.xyz, c.w * alpha);

now

    float inner_radius = radius - frame_width;
    float alpha = 1.0 - smoothstep(radius - s, radius + s, d);
    float mix_factor = smoothstep(inner_radius - s, inner_radius + s, d);
    vec4 c = mix(bg_color, frame_color, min(frame_width, mix_factor));
    return vec4(c.xyz, c.w * alpha);

@debris
Copy link
Contributor Author

debris commented Dec 1, 2019

Ah, I just realised that border_radius affects the rendering in a similar way. Fix on the way :)

@hecrj
Copy link
Member

hecrj commented Dec 1, 2019

Oh, I see. I thought min and max also performed branching, but I guess they are way easier to optimize by the compiler.

Ah, I just realised that border_radius affects the rendering in a similar way. Fix on the way :)

Yeah, I think this is currently a bug present in master 😅

@debris
Copy link
Contributor Author

debris commented Dec 2, 2019

I think it should be fine now

@hecrj hecrj mentioned this pull request Jan 7, 2020
2 tasks
@hecrj hecrj closed this in #146 Jan 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request improvement An internal improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants