【ThreeJS】场景后处理增加圆形暗角效果

1.Shader脚本

var DarkMaskShader = {

	uniforms: {
		"tDiffuse": {
			value: null
		},
		"maskColor": {
			value: new THREE.Color(0x000000)
		},
		"maskAlpha": {
			value: 1.0
		},
		"markRadius": {
			value: 0.15
		},
		"smoothSize": {
			value: 0.5
		}
	},

	vertexShader: [

		"varying vec2 vUv;",

		"void main() {",

		"	vUv = uv;",
		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

		"}"

	].join("\n"),

	fragmentShader: [

		"uniform float maskAlpha;",
		"uniform vec3 maskColor;",
		"uniform float markRadius;",
		"uniform float smoothSize;",

		"uniform sampler2D tDiffuse;",

		"varying vec2 vUv;",

		"float sdfCircle(vec2 coord, vec2 center, float radius)",
		"{",
		"	vec2 offset = coord - center;",
		"	return sqrt((offset.x * offset.x) + (offset.y * offset.y)) - radius;",
		"}",

		"void main() {",

		"	vec4 texel = texture2D( tDiffuse, vUv );",
		"   float sdfValue = sdfCircle(vUv, vec2(0.5, 0.5), markRadius);",
		"	if (sdfValue < 0.0){",
		" 		gl_FragColor = texel;",
		"	}else{",
		"		float a = smoothstep(0.0, smoothSize, sdfValue);",
		"   	gl_FragColor = mix(texel, vec4(maskColor, maskAlpha), a);",
		"	}",
		"}"

	].join("\n")

};

2.后处理通道增加ShaderPass

let effectDarkMask = new THREE.ShaderPass( DarkMaskShader );
finalComposer.addPass(effectDarkMask);