有什么方法可以在 Three.js 中在 SSAO 之上渲染雾吗？

Question

我在我的项目中使用雾和 SSAO，SSAO 强调需要淡化的东西，例如地平线和建筑物。
有没有办法在 SSAO 效果之上渲染雾？
谢谢。

我尝试编写一个着色器，但它不起作用......

( function () {

var FogShader = {
    uniforms: {
        'tDiffuse': { value: null },
        'fogColor': {  value: new THREE.Vector3( 1.0, 0, 0 ) },
        'fogNear': {  value: 1.0 },
        'fogFar': {  value: 10.0 }
    },
    vertexShader:
    
    varying vec2 vUv;
    varying float fogDepth;
    
    void main() {

        vUv = uv;
        
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
        
        fogDepth = - mvPosition.z;
        

    }`,
    fragmentShader:
      `

    uniform vec3 fogColor;
    uniform float fogNear;
    uniform float fogFar;
    varying float fogDepth;
    
    uniform sampler2D tDiffuse;
    varying vec2 vUv;

    void main() {

        vec4 texel = texture2D( tDiffuse, vUv );
        gl_FragColor = texel ;
        
        float fogFactor = smoothstep( fogNear, fogFar, fogDepth );
        gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );

    }`
};

THREE.FogShader = FogShader;

} )();

我像这样使用它：

var fogpass = new THREE.ShaderPass( THREE.FogShader );
composer.addPass( fogpass );

如果我手动将fogFactor更改为1 - 所有输出都是红色的，所以我认为我有问题这雾深度…

Answer 1

您可以在 SSAO 着色器中复制雾公式。然后将 AO 与雾混合：

float final = fog * multiplier * AO;
vec3 result = mix(scene, fognearcol * (1-fog), final);