Jump to content

Is a distance based approach better than a Barycentric based approach to outlining a polygon with many vertices in pixi.js?


TheGraph1csMan
 Share

Recommended Posts

I'm trying to apply a fragment shader to a Mesh within pixi.js. The calculation of the geometry of the shape is correct and the application of a shader to change the color of the entire shape works however the creation of a border is not working as intended.

Only bits and pieces of the border are present on the shape. As each shape is irregular, it's a pretty major issue. This is my fragment shader:

#version 300 es
precision mediump float;
uniform vec3 iResolution;
uniform float iTime;
in vec2 vUV; // Receive UV coordinates from vertex shader
out vec4 fragColor;
void main() {
    vec2 st = vUV;
    st.x *= iResolution.x / iResolution.y;
    vec3 col1 = vec3(0.280, 0.280, 0.700);
    vec3 col2 = vec3(0.262, 0.000, 0.470);
    vec3 color = mix(col2, col1, st.y);
    // Create a border around the entire shape
    float borderSize = 0.05; // Adjust the border size as needed
    float border = step(borderSize, st.x - 0.2) * step(borderSize, st.y) * step(st.x, 1.0 - borderSize + 0.25) * step(st.y, 1.0 - borderSize);
    color = mix(vec3(0.0), color, border);
    fragColor = vec4(color, 1.0);
}

I'm trying to do a distance based approach here with the edges but I have seen that a wireframe approach using Barycentric coordinates would work here. I have tried overlaying a smaller shape onto the other one but the issue I ran into there is that it was very difficult to align the shapes together.

The shape itself is created through triangulation via earcut.

I'm trying to do a distance based approach here with the edges but I have seen that a wireframe approach using Barycentric coordinates would work here. I have tried overlaying a smaller shape onto the other one but the issue I ran into there is that it was very difficult to align the shapes together.

What is the best approach to achieve what I'm trying to do? I was hoping to use a geometry shader but I saw that that wasn't available/supported.

Thanks!
 

 



 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...