# Composer render not rendering the same as WebGLRenderer render

**URL:** <https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769>\
**Category:** Questions\
**Tags:** effect-composer\
**Created:** [September 16, 2020, 5:17pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769 "2020-09-16T17:17:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 5:17pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/1 "2020-09-16T17:17:24Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/34b18e9575f0516696ca4932eed3bde8090b625c.jpeg)

webgl render (desired)

 ![WebGLRenderer](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/43450c9eb7dea195f7a30e12d85ef48be17a39d0.jpeg)

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](https://discourse.threejs.org/uploads/short-url/9DS3UWCpqOAd7AyuQGaKNwcm8Yk.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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 16, 2020, 6:01pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/2 "2020-09-16T18:01:11Z")

</div>

Does it also happen without FXAA?

> [@shamaseen](#):
>
> ` this.effectFXAA.renderToScreen = true;`

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

> [@shamaseen](#):
>
> is there any way to understand what each shader in the shaders folder do?

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

---

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 6:20pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/3 "2020-09-16T18:20:12Z")

</div>

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)!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 16, 2020, 6:50pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/4 "2020-09-16T18:50:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 7:24pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/5 "2020-09-16T19:24:41Z")

</div>

Yea sure!  
here we go:

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/2twqs56d/1/)**

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 16, 2020, 7:53pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/6 "2020-09-16T19:53:00Z")

</div>

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?

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/L0bde6xn/)**

---

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 9:48pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/7 "2020-09-16T21:48:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 9:52pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/8 "2020-09-16T21:52:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shamaseen](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@shamaseen](https://discourse.threejs.org/u/shamaseen)\
**Post date:** [September 16, 2020, 9:55pm UTC](https://discourse.threejs.org/t/composer-render-not-rendering-the-same-as-webglrenderer-render/18769/9 "2020-09-16T21:55:21Z")

</div>

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

Thanks for the help.