Custom Shaders for draw shape with borders

[AdarkSt]

I want to create shaders which can draw my materials with borders and want to use it for every type of shape and ShapeGeometry. Can you help me how to write shaders which can draw every color with borders and can work for every shape because my shapes are generates from SVG paths dynamically and I want to have Shaders which can draw borders for every shape Also want to say that I don’t use SegmentGeometries because in my case I have a lot of shapes and has issues with optimisations because there are generated a lot of objects with that solution

This is my existing shaders but it is works only for rectangular shapes

const borderShader = {
        uniforms: {
          color: { value: new THREE.Color(0xffffff) },
          borderWidth: { value: -0.7 },
          borderColor: { value: new THREE.Color(0x000000) },
          shapeSize: { value: new THREE.Vector2(0.1, 0.1) },
          shapeType: { value: 0 }
        },
        vertexShader: `
          varying vec2 vUv;
          void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
          }
        `,
        fragmentShader: `
          uniform vec3 color;
          uniform float borderWidth;
          uniform vec3 borderColor;
          uniform vec2 shapeSize;
          uniform int shapeType;
          varying vec2 vUv;

          void main() {
            vec2 p = vUv * shapeSize;
            float border = 0.0;
            if (shapeType == 0) {
              if (p.x < borderWidth / 2.0 || p.x > shapeSize.x - borderWidth / 2.0 ||
                  p.y < borderWidth / 2.0 || p.y > shapeSize.y - borderWidth / 2.0) {
                border = 1.0;
              }
            } else if (shapeType == 1) {
              if (abs(p.x + p.y) >= shapeSize.x / 2.0 - borderWidth / 2.0 || abs(p.x - p.y) >= shapeSize.y / 2.0 - borderWidth / 2.0) {
                border = 1.0;
              }
            }
            gl_FragColor = vec4(mix(color, borderColor, border), 1.0);
          }
        `
      }

This is result which I want to have with shaders
In this picture every facet is one shape (ShapeGeometry)

This is result which I have with this shaders

And this is result which I have in sandbox when use that shader in basic rectangular shape

[PavelBoytchev]

@AdarkSt

want to use it for every type of shape and ShapeGeometry

This is one very ambitious goal. Every shape? Even shapes with holes? I would be curious how simple such a shader can get.

Meanwhile, you can explore two alternatives that do not require shader modification:

1. Create custom canvas-based textures with borders. Canvas2D and Three.js have the same set of shape definition methods. The trianagular plates in the next snapshot use canvas-drawn texture:
   

   

2. Draw borderless models, but add borders as separate line objects. The edges of the chess figures in the next snapshots are lines imposed over borderless 3D models:
   

   

[tfoller]

If you manage to give each triangle’s vertex a unique red, green, blue color attribute (I’m not sure it’s always possible for any mesh), then you can use a simple custom shader to paint borders, like so:

Also you might want to remove triangle sides which are not edges, i.e. sit on a flat surface, like a quad, like so:

You would need to combine the two to achieve what you want.

[AdarkSt]

@PavelBoytchev Thanks for response but I can’t use EdgesGeometries because I have many objects and create for each separate edges geometries are kills performance