MSAA in CesiumJS!

CesiumJS
1

Hi all,

We’ve been working on adding an option for MSAA in CesiumJS with WebGL2 contexts - there’s a pull request open and we’d be happy to hear feedback from anyone interested in trying it out :slight_smile:

The instructions are in the main pull request post, but the gist is to request a WebGL2 context in the Viewer constructor:

var viewer = new Cesium.Viewer("cesiumContainer", {
  contextOptions: {
    requestWebgl2: true,
  },
  msaaSamples: 4
});

Once a WebGL2 context is available the multisampling rate can be controlled with Scene.msaaSamples, which defaults to 1 (MSAA off).

This change is exciting to us because it’ll add another option for dealing with aliasing artifacts that are hard to fix with post-process anti-aliasing like FXAA. In particular, 3D geometry with small details or thin polylines and other edges should look a lot better with MSAA turned on. There are some limitations - MSAA does not affect effects that are applied in post-processing (i.e. outlines) - in these cases MSAA can be used with FXAA if needed. We are aware of a couple other issues that are listed in the pull request description. If you’re interested, please let us know if you notice any other bugs or have other comments about the changes, thanks!

4 Likes
2

Hi! This is great, we have waited this feature for many years! :slight_smile:

I tested the latest commit from this branch: manager-msaa (https://github.com/CesiumGS/cesium/tree/manager-msaa)

:exclamation: I experience a bad performance bug still: on a machine with Nvidia RTX 3090 GPU even the empty sandcastle fullscreen runs about 25 fps. With scene.msaaSamples=1 fps is way above 60fps all the time. From my understanding this cannot be just normal performance penalty of MSAA, it has to be some error somewhere…

1 Like
3

@v12424124_34 Thanks for testing it out and posting those details. I was able to reproduce the low frames on another 30 series machine, but not on other computers. We’re still looking into this and I’ll post updates here if we resolve it.

1 Like
4

Oh, that is quite interesting… Thanks for the update! Heh, “ironic” that the most efficient GPU in the market fails on this :wink:

5

I did some more tests on 3090 (on Windows 10):

  • I updated to the newest Studio drivers fist to make sure its not outdated driver issue
  • I tried with Chrome and Firefox => Both behave the same, MSAA is about 30fps only
  • I tried this Threejs demo on Chrome:three.js WebGL 2 - Multisampled Renderbuffers => It runs smoothly, I did not notice any FPS drop on that demo.
6

@Eli Hi! This change fixes the framerate on 3090. So it seems that blitting the stencil is the cause?

MultisampleFramebuffer.prototype.blitFramebuffers = function (context) {
  this._renderFramebuffer.bindRead();
  this._colorFramebuffer.bindDraw();
  const gl = context._gl;
  let mask = 0;
  if (this._colorFramebuffer._colorTextures.length > 0) {
    mask |= gl.COLOR_BUFFER_BIT;
  }
  if (defined(this._colorFramebuffer.depthStencilTexture)) {
    //mask |= gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT;
    mask |= gl.DEPTH_BUFFER_BIT;
  }
7

@v12424124_34 Interesting. We believe it’s an issue on Windows rather than the NVIDIA cards because we’ve been able to reproduce the frame drops on machines that dual boot Linux and Windows only on the latter. I’ve posted in the WebGL mailing list to see if anyone’s run into this before. Unfortunately with the CesiumJS engine it’s not easy to decouple the framebuffers’ depth-stencil and color attachments so I don’t know if there’s a quick fix for this.

8

I tried the blit without the stencil mask bit and it worked very well for me… I am now wondering what are the implications of leaving the stencil out? Does it affect only the classification etc. advanced stuff but not really the globe rendering?

9

New test: NVIDIA GeForce GTX 1080: Same bug occurs there, with 4x msaa framerate drops to 20fps and disabling depth blit mask helps.

10

Yeah, this looks like an issue with the stencil blitting on Windows. I posted a small example to isolate the bug here - https://groups.google.com/g/webgl-dev-list/c/iwIYWPPJwoQ.

The depth-stencil textures are important in a few places in CesiumJS, like classification and OIT to name a couple.

11

Thanks! Good to understand… I think in our use case we might event disable the stencil blit for now…

12

Performance problem is fixed on the main version now! :slight_smile: Many thanks for the MSAA improvement!

13

@v12424124_34 You were quick to test the changes :grin: Glad the performance is better now!

1 Like
14

image

Great update! :slight_smile:

1 Like
15

Is there any way of using MSAA in the postprocess shaders?

16

There isn’t, but MSAA can be combined with FXAA for anti-aliasing on post-process effects.

17

Hi @Eli!

On iOS 15.4 the MSAA got broken. It worked fine before the iOS update, but now it seems that depth buffer does not get cleared or something. Video in the zip:
ios.zip (949.1 KB)

18

@v12424124_34 Ah bummer… Would you be able to open an issue on the CesiumJS repo with steps to reproduce? Attaching the ios.zip file would be helpful, as well as a screenshot of WebGL Report results on your device. Thanks!

19

iOS 15.5 fixes this. :+1:

1 Like
20

Hi! Coming back to this again as we found yet another “blitStencil” bug. It goes to slow framerate-mode if you use it without terrain and with 3d tiles model in this example sandcastle. So the combination Msaa + 3dtiles bim + no terrain is slow still and it is caused by the blitStencil.