# Prevent canvas graining

**URL:** <https://discourse.threejs.org/t/prevent-canvas-graining/11621>\
**Category:** Questions\
**Tags:** webgl-renderer\
**Created:** [December 18, 2019, 10:07am UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621 "2019-12-18T10:07:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BulliM](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@BulliM](https://discourse.threejs.org/u/BulliM)\
**Post date:** [December 18, 2019, 10:07am UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/1 "2019-12-18T10:07:32Z")

</div>

I work at a scene and the render result is quite grainy. The renderer setting (antialias: true) is…

```
renderer.setPixelRatio(window.devicePixelRatio);

```

which is 1. I can set

```
renderer.setPixelRatio(2);

```

which gives a pretty nice result. But can I do that, without creating errors or device damages?

A way to smooth the whole canvas is by using a render pass.

```
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera)); 

```

But this makes me crazy to get it run. Perhaps that’s the wrong way anyway?

---

<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:** [December 18, 2019, 10:43am UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/2 "2019-12-18T10:43:09Z")

</div>

> [@BulliM](#):
>
> A way to smooth the whole canvas is by using a render pass.

Using a `RenderPass` does not automatically perform anti-aliasing. You would have to use `FXAA` in  
order to do so:

[https://threejs.org/examples/webgl\_postprocessing\_fxaa](https://threejs.org/examples/webgl_postprocessing_fxaa)

In any event, enabling MSAA (by passing `antialias: true` to the renderer) and setting `renderer.setPixelRatio( window.devicePixelRatio );` should be a proper configuration for all platforms. Using a higher pixel ratio than `window.devicePixelRatio` is not recommended since the final resolution could be too high for a device. Don’t worry, you can’t damage it. The worst thing that can happen is a browser crash.

---

<div class="post-metadata">

**Author:** ![BulliM](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@BulliM](https://discourse.threejs.org/u/BulliM)\
**Post date:** [December 18, 2019, 11:47am UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/3 "2019-12-18T11:47:18Z")

</div>

Thank you @Mugen87 , I’ll try then fxaa. Hopefully I can get it run. 😉

---

<div class="post-metadata">

**Author:** ![BulliM](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@BulliM](https://discourse.threejs.org/u/BulliM)\
**Post date:** [December 18, 2019, 11:59am UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/4 "2019-12-18T11:59:11Z")

</div>

Get no better result like from…

```
renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
});

```

May this is, because WebGL cannot produce better results? Why

`renderer.setPixelRatio(2);`

is better?

---

<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:** [December 18, 2019, 12:37pm UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/5 "2019-12-18T12:37:23Z")

</div>

Because you render at a higher resolution when doing so.

BTW: If you use post-processing only for anti-aliasing, it’s probably better to just the default MSAA. Keep in mind that in WebGL 1, MSAA only works when rendering to the default framebuffer (meaning directly to screen). When doing post-processing or any kind of RTT, you need FXAA or a similar post-processing AA technique.

---

<div class="post-metadata">

**Author:** ![BulliM](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@BulliM](https://discourse.threejs.org/u/BulliM)\
**Post date:** [December 18, 2019, 12:52pm UTC](https://discourse.threejs.org/t/prevent-canvas-graining/11621/6 "2019-12-18T12:52:32Z")

</div>

Okay. Frame rate is going down then, what is not ideal. May I’ll give FXAA another chance later. At the moment I am deeply stressed and need a rest. I thank you very much for your help so far!