TheGraph1csMan Posted September 10 Share Posted September 10 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.