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);

?

總結

以上是生活随笔為你收集整理的【ThreeJS】场景后处理增加圆形暗角效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。