Postprocessing and Antialiassing

[Dirk-27]

We use this postprocessing for Bloom, GodRays and Dof within aframe.

We can see that the antialising of the graphics card has no effect on our scene if we integrate this postprocessing into aframe, as described in the wiki (https://github.com/pmndrs/postprocessing/wiki/A%E2%80%90Frame).

We therefore use SMAA with 4 samples for our scene (100,000 triangles, 145 draw calls). With SMAA we get a fps value of ~42 and without AA the scene is rendered with max. 60 fps.

Questions:

1. is it possible to use postprocessing with the default GPU antialiasing and will this avoid the fps drop?
2. if not, is it normal to have this fps drop or is there something we can do to improve the performance?

[vanruesc]

We therefore use SMAA with 4 samples

Did you mean MSAA? SMAA is usually configured with quality presets, not samples.

MSAA is the default antialiasing that's available via the antialias renderer option. However, that option should be disabled when using postprocessing since it only applies to the canvas. For postprocessing workflows, the multisampling option of the EffectComposer should be used to enable MSAA for the internal frame buffers.

The cost of MSAA depends on the amount of triangles in the scene and the sample count. If performance is an issue, try using FXAA or SMAA instead. Both should be faster than MSAA. SMAA is a bit trickier to configure. I recommend checking the SMAA presets in v7 for some better defaults.

[Dirk-27]

Thanks for your help!

Yes of course the sampling parameter was for the multisampling feature and not for smaa. We use an initialization for smaa like this:

    initializeEffects() {
      if (!this.data.enabled) {
        return;
      }

      this.loadScript().then(()=> {
        let {
          EffectComposer,
          RenderPass,
          EffectPass,
          SMAAEffect,
          SMAAPreset,
          EdgeDetectionMode,
          PredicationMode,
          SMAAImageLoader
        } = POSTPROCESSING;

        let loadingManager = new THREE.LoadingManager();
        let smaaImageLoader = new SMAAImageLoader(loadingManager);
        smaaImageLoader.load(([search, area]) => {
          let composer = new EffectComposer(this.renderer);

          this.composer = composer;
          this.originalRenderMethod = this.render;

          let effects = [];
          let smaaEffect = new SMAAEffect(
            search,
            area,
            SMAAPreset.HIGH,
            EdgeDetectionMode.COLOR
          );

          smaaEffect.edgeDetectionMaterial.setEdgeDetectionThreshold(this.data.smaaEdgeDetectionThreshold);
          smaaEffect.edgeDetectionMaterial.setPredicationMode(PredicationMode.DEPTH);
          smaaEffect.edgeDetectionMaterial.setPredicationThreshold(this.data.smaaPredicationThreshold);
          smaaEffect.edgeDetectionMaterial.setPredicationScale(this.data.smaaPredicationScale);
          smaaEffect.edgeDetectionMaterial.setPredicationStrength(this.data.smaaPredicationStrength);
          effects.push(smaaEffect);

         // push other effects to effects

          let renderPass = new RenderPass(this.scene, this.camera);
          let effectPass = new EffectPass(
            this.camera,
            ...effects
          );

          effectPass.renderToScreen = true;

          composer.addPass(renderPass);
          composer.addPass(effectPass);

          composer.multisampling = this.data.multisampling;

          // Hijack the render method.
          let calledByComposer = false;

          let { render, renderer } = this;
          this.renderer.render = function() {
            if (calledByComposer) {
              render.apply(renderer, arguments);
            } else {
              calledByComposer = true;
              composer.render();
              calledByComposer = false;
            }
          };

          this.initialized = true;

          this.updateEffects();
        });
      });
    },

The code was inspired by mozilla hubs https://hubs.mozilla.com/ (which isn't supported any longer since the end of march).

Perhaps we miss here something?

[vanruesc]

composer.multisampling = this.data.multisampling;

I'm not sure if this is intentional and what this.data.multisampling is, but it's usually not necessary to use MSAA and SMAA together.

You can also remove the SMAAImageLoader code since it's obsolete. Try configuring SMAA like this:

postprocessing/manual/assets/js/src/demos/smaa.js

Lines 101 to 111 in 0653ce4

	const effect = new SMAAEffect({
	blendFunction: BlendFunction.NORMAL,
	preset: SMAAPreset.MEDIUM,
	edgeDetectionMode: EdgeDetectionMode.COLOR,
	predicationMode: PredicationMode.DEPTH
	});
	const edgeDetectionMaterial = effect.edgeDetectionMaterial;
	edgeDetectionMaterial.edgeDetectionThreshold = 0.02;
	edgeDetectionMaterial.predicationThreshold = 0.002;
	edgeDetectionMaterial.predicationScale = 1;