Composer render not rendering the same as WebGLRenderer render

Questions
1

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!

composer render:

composer
composer1913×973 522 KB

webgl render (desired)

WebGLRenderer
WebGLRenderer1919×972 378 KB

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!

the code:
// 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 = [];

the object:
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?

2

Does it also happen without FXAA?

This line is not necessary anymore. The last pass in the pass chain is always rendered to screen.

There is no documentation so you have to study the code.

3

Yes, it happens also without FXAA.
I was using r112 before and I was having no issues with the composer render (although I was running both the renderer.render() and composer.render() in the animation function), but things messed up after updating the r120 (now am only running composer.render() as the documentation says)!

4

Any chances to share your code as an editable live example? Or maybe by sharing a GitHub repository?

Would be good to have a debug possibility to better investigate this issue.

5

Yea sure!
here we go:

toggle between the composer render and renderer render in the animate function to see the difference, edges appear black!

6

Strange, I don’t see the mentioned black artifacts from your first screenshot on my computer.

I’m using Chrome 85.0.4183.102 on macOS 10.15.6 with an AMD GPU. Can you please provide some information about your system?

Notice that since R118, three.js uses a WebGL 2 rendering context by default. This might cause problems on certain devices. However, you can use WebGL1Renderer to force a WebGL 1 context. I’ve updated the fiddle to use this renderer. Do you still see the artifacts?

7

Oh! that is really strange!
I have dual OS (Ubuntu and Windows 10), on Ubuntu that artifacts appear even with WebGL1Renderer!
but when windows 10 it looks good on both webgl1 and webgl2!
for both of OS am using chrome as a browser, could that be because of the graphic card?
I have NVIDIA GeForce GTX 1050Ti graphic card.

putting my full ubutnu details on next reply

8

Ubuntu 20.04.1 LTS, Google Chrome Version 85.0.4183.83 (Official Build) (64-bit)
Graphic card GeForce GTX 1050 Ti/PCIe/SSE2
Gnome version: 3.36.3

9

I’ve tried it on firefox and it works!
I am shocked!

Thanks for the help.