Prevent canvas graining

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


which is 1. I can set


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?

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

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.

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

Get no better result like from…

renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true

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


is better?

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

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