Add MSAA option for Webgl2

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;
 };

Source/Renderer/FramebufferManager.js

@@ -1,4 +1,5 @@
 import Framebuffer from "./Framebuffer.js";
+import MultisampleFramebuffer from "./MultisampleFramebuffer.js";
 import PixelDatatype from "./PixelDatatype.js";
 import Renderbuffer from "./Renderbuffer.js";
 import RenderbufferFormat from "./RenderbufferFormat.js";
@@ -31,6 +32,7 @@ import PixelFormat from "../Core/PixelFormat.js";
  */
 function FramebufferManager(options) {
   options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+  this._numSamples = 1;
   this._colorAttachmentsLength = defaultValue(
     options.colorAttachmentsLength,
     1
@@ -72,10 +74,13 @@ function FramebufferManager(options) {
   this._height = undefined;
 
   this._framebuffer = undefined;
+  this._multisampleFramebuffer = undefined;
   this._colorTextures = undefined;
   if (this._color) {
     this._colorTextures = new Array(this._colorAttachmentsLength);
+    this._colorRenderbuffers = new Array(this._colorAttachmentsLength);
   }
+  this._colorRenderbuffer = undefined;
   this._depthStencilRenderbuffer = undefined;
   this._depthStencilTexture = undefined;
   this._depthRenderbuffer = undefined;
@@ -87,32 +92,43 @@ function FramebufferManager(options) {
 Object.defineProperties(FramebufferManager.prototype, {
   framebuffer: {
     get: function () {
+      if (this._numSamples > 1) {
+        return this._multisampleFramebuffer.getRenderFramebuffer();
+      }
       return this._framebuffer;
     },
   },
   status: {
     get: function () {
-      return this._framebuffer.status;
+      return this.framebuffer.status;
     },
   },
 });
 
 FramebufferManager.prototype.isDirty = function (
   width,
   height,
+  numSamples,
   pixelDatatype,
   pixelFormat
 ) {
+  numSamples = defaultValue(numSamples, 1);
   const dimensionChanged = this._width !== width || this._height !== height;
+  const samplesChanged = this._numSamples !== numSamples;
   const pixelChanged =
     (defined(pixelDatatype) && this._pixelDatatype !== pixelDatatype) ||
     (defined(pixelFormat) && this._pixelFormat !== pixelFormat);
+  const framebufferDefined =
+    numSamples === 1
+      ? defined(this._framebuffer)
+      : defined(this._multisampleFramebuffer);
 
   return (
     this._attachmentsDirty ||
     dimensionChanged ||
+    samplesChanged ||
     pixelChanged ||
-    !defined(this._framebuffer) ||
+    !framebufferDefined ||
     (this._color && !defined(this._colorTextures[0]))
   );
 };
@@ -121,6 +137,7 @@ FramebufferManager.prototype.update = function (
   context,
   width,
   height,
+  numSamples,
   pixelDatatype,
   pixelFormat
 ) {
@@ -129,6 +146,7 @@ FramebufferManager.prototype.update = function (
     throw new DeveloperError("width and height must be defined.");
   }
   //>>includeEnd('debug');
+  numSamples = defaultValue(numSamples, 1);
   pixelDatatype = defaultValue(
     pixelDatatype,
     this._color
@@ -140,10 +158,11 @@ FramebufferManager.prototype.update = function (
     this._color ? defaultValue(this._pixelFormat, PixelFormat.RGBA) : undefined
   );
 
-  if (this.isDirty(width, height, pixelDatatype, pixelFormat)) {
+  if (this.isDirty(width, height, numSamples, pixelDatatype, pixelFormat)) {
     this.destroy();
     this._width = width;
     this._height = height;
+    this._numSamples = numSamples;
     this._pixelDatatype = pixelDatatype;
     this._pixelFormat = pixelFormat;
     this._attachmentsDirty = false;
@@ -159,6 +178,15 @@ FramebufferManager.prototype.update = function (
           pixelDatatype: pixelDatatype,
           sampler: Sampler.NEAREST,
         });
+        if (this._numSamples > 1) {
+          this._colorRenderbuffers[i] = new Renderbuffer({
+            context: context,
+            width: width,
+            height: height,
+            format: RenderbufferFormat.RGBA8,
+            numSamples: this._numSamples,
+          });
+        }
       }
     }
 
@@ -173,6 +201,15 @@ FramebufferManager.prototype.update = function (
           pixelDatatype: PixelDatatype.UNSIGNED_INT_24_8,
           sampler: Sampler.NEAREST,
         });
+        if (this._numSamples > 1) {
+          this._depthStencilRenderbuffer = new Renderbuffer({
+            context: context,
+            width: width,
+            height: height,
+            format: RenderbufferFormat.DEPTH24_STENCIL8,
+            numSamples: this._numSamples,
+          });
+        }
       } else {
         this._depthStencilRenderbuffer = new Renderbuffer({
           context: context,
@@ -204,15 +241,28 @@ FramebufferManager.prototype.update = function (
       }
     }
 
-    this._framebuffer = new Framebuffer({
-      context: context,
-      colorTextures: this._colorTextures,
-      depthTexture: this._depthTexture,
-      depthRenderbuffer: this._depthRenderbuffer,
-      depthStencilTexture: this._depthStencilTexture,
-      depthStencilRenderbuffer: this._depthStencilRenderbuffer,
-      destroyAttachments: false,
-    });
+    if (this._numSamples > 1) {
+      this._multisampleFramebuffer = new MultisampleFramebuffer({
+        context: context,
+        width: this._width,
+        height: this._height,
+        colorTextures: this._colorTextures,
+        colorRenderbuffers: this._colorRenderbuffers,
+        depthStencilTexture: this._depthStencilTexture,
+        depthStencilRenderbuffer: this._depthStencilRenderbuffer,
+        destroyAttachments: false,
+      });
+    } else {
+      this._framebuffer = new Framebuffer({
+        context: context,
+        colorTextures: this._colorTextures,
+        depthTexture: this._depthTexture,
+        depthRenderbuffer: this._depthRenderbuffer,
+        depthStencilTexture: this._depthStencilTexture,
+        depthStencilRenderbuffer: this._depthStencilRenderbuffer,
+        destroyAttachments: false,
+      });
+    }
   }
 };
 
@@ -246,6 +296,39 @@ FramebufferManager.prototype.setColorTexture = function (texture, index) {
   this._colorTextures[index] = texture;
 };
 
+FramebufferManager.prototype.getColorRenderbuffer = function (index) {
+  index = defaultValue(index, 0);
+  //>>includeStart('debug', pragmas.debug);
+  if (index >= this._colorAttachmentsLength) {
+    throw new DeveloperError(
+      "index must be smaller than total number of color attachments."
+    );
+  }
+  //>>includeEnd('debug');
+  return this._colorRenderbuffers[index];
+};
+
+FramebufferManager.prototype.setColorRenderbuffer = function (
+  renderbuffer,
+  index
+) {
+  index = defaultValue(index, 0);
+  //>>includeStart('debug', pragmas.debug);
+  if (this._createColorAttachments) {
+    throw new DeveloperError(
+      "createColorAttachments must be false if setColorRenderbuffer is called."
+    );
+  }
+  if (index >= this._colorAttachmentsLength) {
+    throw new DeveloperError(
+      "index must be smaller than total number of color attachments."
+    );
+  }
+  //>>includeEnd('debug');
+  this._attachmentsDirty = renderbuffer !== this._colorRenderbuffers[index];
+  this._colorRenderbuffers[index] = renderbuffer;
+};
+
 FramebufferManager.prototype.getDepthRenderbuffer = function () {
   return this._depthRenderbuffer;
 };
@@ -312,47 +395,104 @@ FramebufferManager.prototype.setDepthStencilTexture = function (texture) {
   this._depthStencilTexture = texture;
 };
 
+FramebufferManager.prototype.prepareTextures = function (context) {
+  if (this._numSamples > 1) {
+    this._multisampleFramebuffer.blitFramebuffers(context);
+  }
+};
+
 FramebufferManager.prototype.clear = function (
   context,
   clearCommand,
   passState
 ) {
   const framebuffer = clearCommand.framebuffer;
 
-  clearCommand.framebuffer = this._framebuffer;
-  clearCommand.execute(context, passState);
+  if (this._numSamples > 1) {
+    clearCommand.framebuffer = this._multisampleFramebuffer.getRenderFramebuffer();
+    clearCommand.execute(context, passState);
+
+    clearCommand.framebuffer = this._multisampleFramebuffer.getColorFramebuffer();
+    clearCommand.execute(context, passState);
+  } else {
+    clearCommand.framebuffer = this._framebuffer;
+    clearCommand.execute(context, passState);
+  }
 
   clearCommand.framebuffer = framebuffer;
 };
 
 FramebufferManager.prototype.destroyFramebuffer = function () {
   this._framebuffer = this._framebuffer && this._framebuffer.destroy();
+  this._multisampleFramebuffer =
+    this._multisampleFramebuffer && this._multisampleFramebuffer.destroy();
 };
 
 FramebufferManager.prototype.destroy = function () {
-  if (this._color && this._createColorAttachments) {
+  if (this._color) {
+    let i;
     const length = this._colorTextures.length;
-    for (let i = 0; i < length; ++i) {
+    for (i = 0; i < length; ++i) {
       const texture = this._colorTextures[i];
-      if (defined(texture) && !texture.isDestroyed()) {
-        this._colorTextures[i].destroy();
+      if (this._createColorAttachments) {
+        if (defined(texture) && !texture.isDestroyed()) {
+          this._colorTextures[i].destroy();
+          this._colorTextures[i] = undefined;
+        }
+      }
+      if (defined(texture) && texture.isDestroyed()) {
         this._colorTextures[i] = undefined;
       }
+      const renderbuffer = this._colorRenderbuffers[i];
+      if (this._createColorAttachments) {
+        if (defined(renderbuffer) && !renderbuffer.isDestroyed()) {
+          this._colorRenderbuffers[i].destroy();
+          this._colorRenderbuffers[i] = undefined;
+        }
+      }
+      if (defined(renderbuffer) && renderbuffer.isDestroyed()) {
+        this._colorRenderbuffers[i] = undefined;
+      }
     }
   }
 
-  if (this._depthStencil && this._createDepthAttachments) {
-    this._depthStencilTexture =
-      this._depthStencilTexture && this._depthStencilTexture.destroy();
-    this._depthStencilRenderbuffer =
-      this._depthStencilRenderbuffer &&
-      this._depthStencilRenderbuffer.destroy();
+  if (this._depthStencil) {
+    if (this._createDepthAttachments) {
+      this._depthStencilTexture =
+        this._depthStencilTexture && this._depthStencilTexture.destroy();
+      this._depthStencilRenderbuffer =
+        this._depthStencilRenderbuffer &&
+        this._depthStencilRenderbuffer.destroy();
+    }
+    if (
+      defined(this._depthStencilTexture) &&
+      this._depthStencilTexture.isDestroyed()
+    ) {
+      this._depthStencilTexture = undefined;
+    }
+    if (
+      defined(this._depthStencilRenderbuffer) &&
+      this._depthStencilRenderbuffer.isDestroyed()
+    ) {
+      this._depthStencilRenderbuffer = undefined;
+    }
   }
 
-  if (this._depth && this._createDepthAttachments) {
-    this._depthTexture = this._depthTexture && this._depthTexture.destroy();
-    this._depthRenderbuffer =
-      this._depthRenderbuffer && this._depthRenderbuffer.destroy();
+  if (this._depth) {
+    if (this._createDepthAttachments) {
+      this._depthTexture = this._depthTexture && this._depthTexture.destroy();
+      this._depthRenderbuffer =
+        this._depthRenderbuffer && this._depthRenderbuffer.destroy();
+    }
+    if (defined(this._depthTexture) && this._depthTexture.isDestroyed()) {
+      this._depthTexture = undefined;
+    }
+    if (
+      defined(this._depthRenderbuffer) &&
+      this._depthRenderbuffer.isDestroyed()
+    ) {
+      this._depthRenderbuffer = undefined;
+    }
   }
 
   this.destroyFramebuffer();