fix(postproduction): keep MSAA when postproduction is enabled

packages/front/src/core/PostproductionRenderer/example.ts

@@ -266,6 +266,15 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
         }}">
       </bim-checkbox>
 
+      <bim-number-input
+        slider step="1" label="MSAA samples"
+        value="${world.renderer!.postproduction.samples}" min="0" max="8"
+        @change="${({ target }: { target: BUI.NumberInput }) => {
+          world.renderer!.postproduction.samples = target.value;
+          updateIfManualMode();
+        }}">
+      </bim-number-input>
+
       <bim-dropdown required label="Postproduction style"
         @change="${({ target }: { target: BUI.Dropdown }) => {
           const result = target.value[0] as OBF.PostproductionAspect;

packages/front/src/core/PostproductionRenderer/src/index.ts

@@ -48,6 +48,7 @@ export class Postproduction {
   private _glossEnabled = false;
   private _smaaEnabled = false;
   private _excludedObjectsEnabled = false;
+  private _samples = 4;
   private _components: OBC.Components;
   private _renderer: PostproductionRenderer;
   private _clearColor = new THREE.Color();
@@ -156,6 +157,16 @@ export class Postproduction {
     this.style = this._style;
   }
 
+  /** MSAA sample count of the composer render targets; 0 renders them without multisampling. */
+  get samples() {
+    return this._samples;
+  }
+
+  set samples(value: number) {
+    this._samples = value;
+    this.applySamples();
+  }
+
   get style() {
     return this._style;
   }
@@ -370,6 +381,19 @@ export class Postproduction {
     this._renderer.three.setRenderTarget(null);
   }
 
+  private applySamples() {
+    if (!this.composer) return;
+    const max = this._renderer.three.capabilities.maxSamples;
+    const samples = Math.max(0, Math.min(Math.floor(this._samples), max));
+    const targets = [this.composer.renderTarget1, this.composer.renderTarget2];
+    for (const target of targets) {
+      if (target.samples === samples) continue;
+      target.samples = samples;
+      // the framebuffer is re-created with the new sample count on next use
+      target.dispose();
+    }
+  }
+
   private initialize() {
     this._initialized = true;
 
@@ -380,6 +404,9 @@ export class Postproduction {
     this._renderer.three.setClearColor(0x000000, 0);
 
     this.composer = new EffectComposer(this._renderer.three);
+    // EffectComposer allocates its ping-pong targets with samples = 0, which
+    // would drop the MSAA of the default framebuffer as soon as postproduction is on
+    this.applySamples();
 
     const basePass = new BasePass(scene, camera);
     this._basePass = basePass;