#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