Merge pull request #10052 from CesiumGS/manager-msaa

Add MSAA option for Webgl2
CesiumGS · Feb 18, 2022 · 6f4e480 · 6f4e480
2 parents 34b0a1a + ca82c10
commit 6f4e480
Show file tree

Hide file tree

Showing 24 changed files with 1,223 additions and 102 deletions.
diff --git a/Apps/Sandcastle/gallery/MSAA.html b/Apps/Sandcastle/gallery/MSAA.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
+    />
+    <meta name="description" content="Add MSAA to the scene." />
+    <meta name="cesium-sandcastle-labels" content="Showcases" />
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script
+      type="text/javascript"
+      src="../../../Build/CesiumUnminified/Cesium.js"
+      nomodule
+    ></script>
+    <script type="module" src="../load-cesium-es6.js"></script>
+  </head>
+  <body
+    class="sandcastle-loading"
+    data-sandcastle-bucket="bucket-requirejs.html"
+  >
+    <style>
+      @import url(../templates/bucket.css);
+    </style>
+    <div id="cesiumContainer" class="fullSize"></div>
+    <div id="loadingOverlay"><h1>Loading...</h1></div>
+    <div id="toolbar"></div>
+    <script id="cesium_sandcastle_script">
+      function startup(Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer", {
+          terrainProvider: Cesium.createWorldTerrain(),
+          contextOptions: {
+            requestWebgl2: true,
+          },
+        });
+
+        const scene = viewer.scene;
+        if (!scene.msaaSupported) {
+          window.alert("This browser does not support MSAA.");
+        }
+
+        function createModel(url, height) {
+          const position = Cesium.Cartesian3.fromDegrees(
+            -123.0744619,
+            44.0503706,
+            height
+          );
+          const heading = Cesium.Math.toRadians(135);
+          const pitch = 0;
+          const roll = 0;
+          const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+          const orientation = Cesium.Transforms.headingPitchRollQuaternion(
+            position,
+            hpr
+          );
+
+          const entity = viewer.entities.add({
+            name: url,
+            position: position,
+            orientation: orientation,
+            model: {
+              uri: url,
+              minimumPixelSize: 128,
+              maximumScale: 20000,
+            },
+          });
+          const target = Cesium.Cartesian3.fromDegrees(
+            -123.0744619,
+            44.0503706,
+            height + 7.5
+          );
+          const offset = new Cesium.Cartesian3(50.0, -15.0, 0.0);
+          viewer.scene.camera.lookAt(target, offset);
+        }
+
+        const options = [
+          {
+            text: "Statue of Liberty",
+            onselect: function () {
+              viewer.entities.removeAll();
+              scene.primitives.removeAll();
+              scene.camera.setView({
+                destination: new Cesium.Cartesian3(
+                  1331419.302230775,
+                  -4656681.5022043325,
+                  4136232.6465900405
+                ),
+                orientation: new Cesium.HeadingPitchRoll(
+                  6.032455545102689,
+                  -0.056832496140112765,
+                  6.282360923090216
+                ),
+                endTransform: Cesium.Matrix4.IDENTITY,
+              });
+
+              scene.primitives.add(
+                new Cesium.Cesium3DTileset({
+                  url: Cesium.IonResource.fromAssetId(75343),
+                })
+              );
+            },
+          },
+          {
+            text: "3D Tiles BIM",
+            onselect: function () {
+              viewer.entities.removeAll();
+              scene.primitives.removeAll();
+              const tileset = scene.primitives.add(
+                new Cesium.Cesium3DTileset({
+                  url: Cesium.IonResource.fromAssetId(8564),
+                })
+              );
+              viewer.camera.setView({
+                destination: new Cesium.Cartesian3(
+                  1234138.7804841248,
+                  -5086063.633843134,
+                  3633284.606361642
+                ),
+                orientation: {
+                  heading: 0.4304630387656614,
+                  pitch: -0.16969316864215878,
+                  roll: 6.283184816241989,
+                },
+              });
+            },
+          },
+          {
+            text: "Hot Air Balloon",
+            onselect: function () {
+              viewer.entities.removeAll();
+              scene.primitives.removeAll();
+              createModel(
+                "../../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
+                1000.0
+              );
+            },
+          },
+        ];
+
+        const samplingOptions = [
+          {
+            text: "MSAA off",
+            onselect: function () {
+              scene.msaaSamples = 1;
+            },
+          },
+          {
+            text: "MSAA 2x",
+            onselect: function () {
+              scene.msaaSamples = 2;
+            },
+          },
+          {
+            text: "MSAA 4x",
+            onselect: function () {
+              scene.msaaSamples = 4;
+            },
+          },
+          {
+            text: "MSAA 8x",
+            onselect: function () {
+              scene.msaaSamples = 8;
+            },
+          },
+        ];
+
+        Sandcastle.addToolbarMenu(options);
+        Sandcastle.addToolbarMenu(samplingOptions);
+        //Sandcastle_End
+        Sandcastle.finishedLoading();
+      }
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        startup(Cesium);
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/MSAA.jpg b/Apps/Sandcastle/gallery/MSAA.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -4,6 +4,7 @@
 
 ##### Additions :tada:
 
+- Added MSAA support for WebGL2. Enabled on viewer creation with the multisampling rate as the `msaaSamples` option and can be controlled through `Scene.msaaSamples`.
 - glTF contents now use `ModelExperimental` by default. [#10055](https://github.com/CesiumGS/cesium/pull/10055)
 - Added the ability to toggle back-face culling in `ModelExperimental`. [#10070](https://github.com/CesiumGS/cesium/pull/10070)
 - Added `depthPlaneEllipsoidOffset` to Viewer and Scene constructors to address rendering artefacts below ellipsoid zero elevation. [#9200](https://github.com/CesiumGS/cesium/pull/9200)

diff --git a/Source/Renderer/Context.js b/Source/Renderer/Context.js
@@ -256,6 +256,8 @@ function Context(canvas, options) {
     gl.MAX_VERTEX_UNIFORM_VECTORS
   ); // min: 128
 
+  ContextLimits._maximumSamples = gl.getParameter(gl.MAX_SAMPLES);
+
   const aliasedLineWidthRange = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE); // must include 1
   ContextLimits._minimumAliasedLineWidth = aliasedLineWidthRange[0];
   ContextLimits._maximumAliasedLineWidth = aliasedLineWidthRange[1];
@@ -598,6 +600,18 @@ Object.defineProperties(Context.prototype, {
     },
   },
 
+  /**
+   * <code>true</code> if the WebGL context supports multisample antialiasing. Requires
+   * WebGL2.
+   * @memberof Context.prototype
+   * @type {Boolean}
+   */
+  msaa: {
+    get: function () {
+      return this._webgl2;
+    },
+  },
+
   /**
    * <code>true</code> if the OES_standard_derivatives extension is supported.  This
    * extension provides access to <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>

diff --git a/Source/Renderer/ContextLimits.js b/Source/Renderer/ContextLimits.js
@@ -21,6 +21,7 @@ const ContextLimits = {
   _maximumTextureFilterAnisotropy: 0,
   _maximumDrawBuffers: 0,
   _maximumColorAttachments: 0,
+  _maximumSamples: 0,
   _highpFloatSupported: false,
   _highpIntSupported: false,
 };
@@ -260,6 +261,17 @@ Object.defineProperties(ContextLimits, {
     },
   },
 
+  /**
+   * The maximum number of samples supported for multisampling.
+   * @memberof ContextLimits
+   * @type {Number}
+   */
+  maximumSamples: {
+    get: function () {
+      return ContextLimits._maximumSamples;
+    },
+  },
+
   /**
    * High precision float supported (<code>highp</code>) in fragment shaders.
    * @memberof ContextLimits

diff --git a/Source/Renderer/Framebuffer.js b/Source/Renderer/Framebuffer.js
@@ -33,7 +33,7 @@ function attachRenderbuffer(framebuffer, attachment, renderbuffer) {
  * Framebuffers are used for render-to-texture effects; they allow us to render to
  * textures in one pass, and read from it in a later pass.
  *
- * @param {Object} options The initial framebuffer attachments as shown in the example below. <code>context</code> is required. The possible properties are <code>colorTextures</code>, <code>colorRenderbuffers</code>, <code>depthTexture</code>, <code>depthRenderbuffer</code>, <code>stencilRenderbuffer</code>, <code>depthStencilTexture</code>, and <code>depthStencilRenderbuffer</code>.
+ * @param {Object} options The initial framebuffer attachments as shown in the example below. <code>context</code> is required. The possible properties are <code>colorTextures</code>, <code>colorRenderbuffers</code>, <code>depthTexture</code>, <code>depthRenderbuffer</code>, <code>stencilRenderbuffer</code>, <code>depthStencilTexture</code>, <code>depthStencilRenderbuffer</code>, and <code>destroyAttachments</code>.
  *
  * @exception {DeveloperError} Cannot have both color texture and color renderbuffer attachments.
  * @exception {DeveloperError} Cannot have both a depth texture and depth renderbuffer attachment.
@@ -362,6 +362,16 @@ Framebuffer.prototype._unBind = function () {
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 };
 
+Framebuffer.prototype.bindDraw = function () {
+  const gl = this._gl;
+  gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this._framebuffer);
+};
+
+Framebuffer.prototype.bindRead = function () {
+  const gl = this._gl;
+  gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._framebuffer);
+};
+
 Framebuffer.prototype._getActiveColorAttachments = function () {
   return this._activeColorAttachments;
 };