Prevent canvas graining

Questions
1

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?

2

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

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.

3

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

4

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?

5

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.

1 Like
6

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!

1 Like