I changed from WebGLRenderer render to composer render because I want to achieve an outline effect on some objects, but was shocked by how the scene is changed!
webgl render (desired)
as you can see the sharp edges of the mountains turned black in the composer render, why is that and how can this be solved?
and the transparent black “war fog” become so weird!
// outline object related
this.composer = new EffectComposer(this.world.renderer);
this.renderPass = new RenderPass( this.world.scene, this.world.camera );
this.composer.addPass( this.renderPass ); const effectColorSpaceConversion = new ShaderPass( GammaCorrectionShader ); this.composer.addPass( effectColorSpaceConversion ); this.outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.world.scene, this.world.camera ); this.composer.addPass( this.outlinePass ); this.effectFXAA = new ShaderPass( FXAAShader ); this.effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); this.effectFXAA.renderToScreen = true; this.composer.addPass( this.effectFXAA ); this.outlinePass.selectedObjects = ;
ground.glb (1.9 MB)
and I’ve been searching for a while now for any documentation for the shaders in the threejs, but can’t find any documentation about the shaders, is there any way to understand what each shader in the shaders folder do?