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

[Feature request] Ellipse / line / rect stroke thickness #999

Open
01271 opened this issue May 27, 2020 · 2 comments
Open

[Feature request] Ellipse / line / rect stroke thickness #999

01271 opened this issue May 27, 2020 · 2 comments
Labels

Comments

@01271
Copy link

01271 commented May 27, 2020

When drawing the stroke of an ellipse (and strokeRect, StrokeLine, etc.) it would be nice to be able to add a thickness to the stroke.
On rectangles and ellipses an option to have the stroke be either within the bounds or on the bounds would be great as well.
This option would ideally act like the CSS property box-sizing: border-box; and would make it so that your shape would automatically be made smaller so that the thicker line could fit inside the originally specified width and height.

I imagine it as an option on the renderable which is what I illustrated here.

circle

@obiot
Copy link
Member

obiot commented May 27, 2020

👍 related to #994, should somehow work for now at least in the fitStrokeToBoundingBox style when false, and if you have friendly GPU implementing a lineWidth > 1.

@obiot
Copy link
Member

obiot commented Dec 15, 2022

I was toying with chatGPT this morning, and asked him/her to write me a fragment shader that draws a line, including with a thickness parameter, here it is:

#version 100

uniform vec2 u_resolution;
uniform vec2 u_start;
uniform vec2 u_end;
uniform float u_thickness;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    float y = smoothstep(u_start.x, u_end.x, st.x);
    float d = abs(st.y - y);
    if (d < u_thickness/2.0) {
        gl_FragColor = vec4(1.0);
    } else {
        gl_FragColor = vec4(0.0);
    }
}

Pretty awesome !

It initially gave me a WebGL 2.0 version, and without any variable, but as I explained what I needed, we came to this one after a couple of iterations, Is it not amazing ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants