KITASENJU DESIGN BLOG

memo, html, javascript, unity

Customize fog on threejs

How to customize fog in threejs. 👉 use "onBeforeCompile" !!!!!

public static getMaterial(m:THREE.MeshStandardMaterial):THREE.MeshStandardMaterial{

        let mm=new MeshStandardMaterial();
        mm.onBeforeCompile = (shader)=>{

            const alphaFog =
                `
                #ifdef USE_FOG
                    #ifdef FOG_EXP2
                    float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth );
                    #else
                    float fogFactor = smoothstep( fogNear, fogFar, vFogDepth );
                    #endif
                    gl_FragColor.a = saturate(1.0 - fogFactor);
                #endif
            `;
            
            shader.fragmentShader = shader.fragmentShader.replace(
                '#include <fog_fragment>', alphaFog
            );
            
            mm.userData.shader = shader;

        };

        mm.transparent = true;
        mm.copy(m);

        return mm;

    }
"FOOTER"