• #Feather / Fade to transparency or color in three.js

    Fade to transparency from a point (center).

    export function modAppendFade(shader, background) {
      // assumes: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshbasic.glsl.js
      shader.vertexShader = shader.vertexShader.replace(
        /* glsl */`void main() {`,
        /* glsl */`
          varying vec4 v_position;
          void main() {
            v_position = modelMatrix * vec4(position.xyz, 1.0);
        `
      )
      shader.fragmentShader = /* glsl */`
        varying vec4 v_position;
        ${shader.fragmentShader}
      `.replace(
        /* glsl */`#include <dithering_fragment>`,
        /* glsl */`
            #include <dithering_fragment>
    
            vec3 center = vec3(0.0, 0.0, 0.0);
            vec4 background = vec4(${background || '0.93, 0.93, 0.93, 1.0'});
            float diameter = 800.0;
            float falloff = 0.006;
    
            float vDistance = distance(v_position.xyz, center);
            float factor = clamp((vDistance - diameter) * falloff, 0.0, 1.0);
            gl_FragColor = mix(gl_FragColor, background, factor);
          `
      )
    }
    
    node.material.onBeforeCompile = shader => modAppendFade(shader)
    node.material.transparent = true
    node.material.needsUpdate = true