【threejs】修正 threejs 后期效果合成EffectComposer 导致场景变暗淡修正_three后处理导致背景图片颜色变浅

1 ShaderPass修正scene异常
2 GammaCorrectionShader修正明暗色域
3 smaaPass解决后期render无法开启抗锯齿的问题 （还有一种fxaa修正 效果依实际情况选择）

.........
import * as THREE from "three";
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';
import {FXAAShader} from 'three/examples/jsm/shaders/FXAAShader.js'
import {SMAAPass} from 'three/examples/jsm/postprocessing/SMAAPass.js';
........
//后期代码片段
 var bloomComposer = new EffectComposer(renderer);
        bloomComposer.renderToScreen = false;
        bloomComposer.addPass(renderScene);
        bloomComposer.addPass(bloomPass);
       
        var finalPass = new ShaderPass(
            new THREE.ShaderMaterial({
                uniforms: {
                    baseTexture: { value: null },
                    bloomTexture: { value: bloomComposer.renderTarget2.texture }
                },
                vertexShader: `
        varying vec2 vUv;
  
        void main() {
  
          vUv = uv;
  
          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  
        }
        `,
                fragmentShader:  `uniform sampler2D baseTexture;
                uniform sampler2D bloomTexture;
                varying vec2 vUv;
                void main() {
                vec4 base_color = texture2D(baseTexture, vUv);
                vec4 bloom_color = texture2D(bloomTexture, vUv);
            
                float lum = 0.21 * bloom_color.r + 0.71 * bloom_color.g + 0.07 * bloom_color.b;
                gl_FragColor = vec4(base_color.rgb + bloom_color.rgb, max(base_color.a, lum));
                // gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
                }`,
                defines: {}
            }), "baseTexture"
        );
        finalPass.needsSwap = true;
        const effectColorSpaceConversion = new ShaderPass(GammaCorrectionShader);
        const effectFXAAfix = new ShaderPass(FXAAShader);
        const smaaPass = new SMAAPass();

        var finalComposer = new EffectComposer(renderer);
        finalComposer.addPass(renderScene);
        finalComposer.addPass(finalPass);
        finalComposer.addPass(effectColorSpaceConversion);
        finalComposer.addPass(smaaPass);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59