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.