@itwin/core-frontend 3.2.0-dev.9 → 3.3.0-dev.2

package/lib/esm/render/webgl/SceneCompositor.js

@@ -11,7 +11,7 @@ import { RenderMode, SpatialClassifierInsideDisplay, SpatialClassifierOutsideDis
 import { DepthType, RenderType } from "@itwin/webgl-compatibility";
 import { Pixel } from "../Pixel";
 import { BranchState } from "./BranchState";
-import { AmbientOcclusionGeometry, BlurGeometry, BoundaryType, CompositeGeometry, CopyPickBufferGeometry, ScreenPointsGeometry, SingleTexturedViewportQuadGeometry, ViewportQuadGeometry, VolumeClassifierGeometry, } from "./CachedGeometry";
+import { AmbientOcclusionGeometry, BlurGeometry, BlurType, BoundaryType, CompositeGeometry, CopyPickBufferGeometry, ScreenPointsGeometry, SingleTexturedViewportQuadGeometry, ViewportQuadGeometry, VolumeClassifierGeometry, } from "./CachedGeometry";
 import { Debug } from "./Diagnostics";
 import { extractFlashedVolumeClassifierCommands, extractHilitedVolumeClassifierCommands } from "./DrawCommand";
 import { FloatRgba } from "./FloatRGBA";
@@ -42,13 +42,16 @@ class Textures {
             && undefined === this.color
             && undefined === this.featureId
             && undefined === this.depthAndOrder
+            && undefined === this.depthAndOrderHidden
             && undefined === this.hilite
             && undefined === this.occlusion
             && undefined === this.occlusionBlur
             && undefined === this.volClassBlend
             && undefined === this.colorMsBuff
             && undefined === this.featureIdMsBuff
+            && undefined === this.featureIdMsBuffHidden
             && undefined === this.depthAndOrderMsBuff
+            && undefined === this.depthAndOrderMsBuffHidden
             && undefined === this.hiliteMsBuff
             && undefined === this.volClassBlendMsBuff;
     }
@@ -58,12 +61,15 @@ class Textures {
         this.color = dispose(this.color);
         this.featureId = dispose(this.featureId);
         this.depthAndOrder = dispose(this.depthAndOrder);
+        this.depthAndOrderHidden = dispose(this.depthAndOrderHidden);
         this.hilite = dispose(this.hilite);
         this.occlusion = dispose(this.occlusion);
         this.occlusionBlur = dispose(this.occlusionBlur);
         this.colorMsBuff = dispose(this.colorMsBuff);
         this.featureIdMsBuff = dispose(this.featureIdMsBuff);
+        this.featureIdMsBuffHidden = dispose(this.featureIdMsBuffHidden);
         this.depthAndOrderMsBuff = dispose(this.depthAndOrderMsBuff);
+        this.depthAndOrderMsBuffHidden = dispose(this.depthAndOrderMsBuffHidden);
         this.hiliteMsBuff = dispose(this.hiliteMsBuff);
         this.volClassBlend = dispose(this.volClassBlend);
         this.volClassBlendMsBuff = dispose(this.volClassBlendMsBuff);
@@ -74,13 +80,16 @@ class Textures {
         collectTextureStatistics(this.color, stats);
         collectTextureStatistics(this.featureId, stats);
         collectTextureStatistics(this.depthAndOrder, stats);
+        collectTextureStatistics(this.depthAndOrderHidden, stats);
         collectTextureStatistics(this.hilite, stats);
         collectTextureStatistics(this.occlusion, stats);
         collectTextureStatistics(this.occlusionBlur, stats);
         collectTextureStatistics(this.volClassBlend, stats);
         collectMsBufferStatistics(this.colorMsBuff, stats);
         collectMsBufferStatistics(this.featureIdMsBuff, stats);
+        collectMsBufferStatistics(this.featureIdMsBuffHidden, stats);
         collectMsBufferStatistics(this.depthAndOrderMsBuff, stats);
+        collectMsBufferStatistics(this.depthAndOrderMsBuffHidden, stats);
         collectMsBufferStatistics(this.hiliteMsBuff, stats);
         collectMsBufferStatistics(this.volClassBlendMsBuff, stats);
     }
@@ -129,16 +138,23 @@ class Textures {
         }
         return rVal;
     }
-    enableOcclusion(width, height) {
+    enableOcclusion(width, height, numSamples) {
         assert(undefined === this.occlusion && undefined === this.occlusionBlur);
         this.occlusion = TextureHandle.createForAttachment(width, height, GL.Texture.Format.Rgba, GL.Texture.DataType.UnsignedByte);
         this.occlusionBlur = TextureHandle.createForAttachment(width, height, GL.Texture.Format.Rgba, GL.Texture.DataType.UnsignedByte);
-        return undefined !== this.occlusion && undefined !== this.occlusionBlur;
+        let rVal = undefined !== this.occlusion && undefined !== this.occlusionBlur;
+        if (numSamples > 1) {
+            // If multisampling then we need a texture for storing depth and order for hidden edges.
+            this.depthAndOrderHidden = TextureHandle.createForAttachment(width, height, GL.Texture.Format.Rgba, GL.Texture.DataType.UnsignedByte);
+            rVal = rVal && undefined !== this.depthAndOrderHidden;
+        }
+        return rVal;
     }
     disableOcclusion() {
         assert(undefined !== this.occlusion && undefined !== this.occlusionBlur);
         this.occlusion = dispose(this.occlusion);
         this.occlusionBlur = dispose(this.occlusionBlur);
+        this.depthAndOrderHidden = dispose(this.depthAndOrderHidden);
     }
     enableVolumeClassifier(width, height, numSamples) {
         assert(undefined === this.volClassBlend);
@@ -157,17 +173,23 @@ class Textures {
     enableMultiSampling(width, height, numSamples) {
         this.colorMsBuff = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
         this.featureIdMsBuff = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
+        this.featureIdMsBuffHidden = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
         this.depthAndOrderMsBuff = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
+        this.depthAndOrderMsBuffHidden = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
         this.hiliteMsBuff = RenderBufferMultiSample.create(width, height, WebGL2RenderingContext.RGBA8, numSamples);
         return undefined !== this.colorMsBuff
             && undefined !== this.featureIdMsBuff
+            && undefined !== this.featureIdMsBuffHidden
             && undefined !== this.depthAndOrderMsBuff
+            && undefined !== this.depthAndOrderMsBuffHidden
             && undefined !== this.hiliteMsBuff;
     }
     disableMultiSampling() {
         this.colorMsBuff = dispose(this.colorMsBuff);
         this.featureIdMsBuff = dispose(this.featureIdMsBuff);
+        this.featureIdMsBuffHidden = dispose(this.featureIdMsBuffHidden);
         this.depthAndOrderMsBuff = dispose(this.depthAndOrderMsBuff);
+        this.depthAndOrderMsBuffHidden = dispose(this.depthAndOrderMsBuffHidden);
         this.hiliteMsBuff = dispose(this.hiliteMsBuff);
         return true;
     }
@@ -199,14 +221,14 @@ class FrameBuffers {
         return undefined !== this.opaqueColor
             && undefined !== this.opaqueAndCompositeColor;
     }
-    toggleOcclusion(textures) {
-        if (undefined !== textures.occlusion) {
-            assert(undefined !== textures.occlusionBlur);
-            this.occlusion = FrameBuffer.create([textures.occlusion]);
-            this.occlusionBlur = FrameBuffer.create([textures.occlusionBlur]);
-        }
-        else {
-            assert(undefined === textures.occlusionBlur);
+    enableOcclusion(textures, _depth, _depthMs) {
+        assert(undefined !== textures.occlusion && undefined !== textures.occlusionBlur);
+        this.occlusion = FrameBuffer.create([textures.occlusion]);
+        this.occlusionBlur = FrameBuffer.create([textures.occlusionBlur]);
+        return undefined !== this.occlusion && undefined !== this.occlusionBlur;
+    }
+    disableOcclusion() {
+        if (undefined !== this.occlusion) {
             this.occlusion = dispose(this.occlusion);
             this.occlusionBlur = dispose(this.occlusionBlur);
         }
@@ -294,28 +316,27 @@ class Geometry {
         this.composite = CompositeGeometry.createGeometry(textures.color.getHandle(), textures.accumulation.getHandle(), textures.revealage.getHandle(), textures.hilite.getHandle());
         return undefined !== this.composite;
     }
-    toggleOcclusion(textures, depth) {
-        if (undefined !== textures.occlusion) {
-            assert(undefined !== textures.occlusionBlur);
-            this.composite.occlusion = textures.occlusion.getHandle();
-            this.occlusion = AmbientOcclusionGeometry.createGeometry(textures.depthAndOrder.getHandle(), depth.getHandle());
-            this.occlusionXBlur = BlurGeometry.createGeometry(textures.occlusion.getHandle(), textures.depthAndOrder.getHandle(), new Vector2d(1.0, 0.0));
-            this.occlusionYBlur = BlurGeometry.createGeometry(textures.occlusionBlur.getHandle(), textures.depthAndOrder.getHandle(), new Vector2d(0.0, 1.0));
-        }
-        else {
-            assert(undefined === textures.occlusionBlur);
-            this.composite.occlusion = undefined;
-            this.occlusion = dispose(this.occlusion);
-            this.occlusionXBlur = dispose(this.occlusionXBlur);
-            this.occlusionYBlur = dispose(this.occlusionYBlur);
-        }
+    enableOcclusion(textures, depth) {
+        var _a;
+        assert(undefined !== textures.occlusion && undefined !== textures.occlusionBlur && undefined !== textures.depthAndOrder && undefined !== textures.occlusionBlur);
+        this.composite.occlusion = textures.occlusion.getHandle();
+        this.occlusion = AmbientOcclusionGeometry.createGeometry(textures.depthAndOrder.getHandle(), depth.getHandle());
+        this.occlusionXBlur = BlurGeometry.createGeometry(textures.occlusion.getHandle(), textures.depthAndOrder.getHandle(), undefined, new Vector2d(1.0, 0.0), BlurType.NoTest);
+        const depthAndOrderHidden = (undefined === textures.depthAndOrderHidden ? (_a = textures.revealage) === null || _a === void 0 ? void 0 : _a.getHandle() : textures.depthAndOrderHidden.getHandle());
+        this.occlusionYBlur = BlurGeometry.createGeometry(textures.occlusionBlur.getHandle(), textures.depthAndOrder.getHandle(), depthAndOrderHidden, new Vector2d(0.0, 1.0), BlurType.TestOrder);
+    }
+    disableOcclusion() {
+        this.composite.occlusion = undefined;
+        this.occlusion = dispose(this.occlusion);
+        this.occlusionXBlur = dispose(this.occlusionXBlur);
+        this.occlusionYBlur = dispose(this.occlusionYBlur);
     }
     enableVolumeClassifier(textures, depth, width, height) {
         assert(undefined === this.volClassColorStencil && undefined === this.volClassCopyZ && undefined === this.volClassSetBlend && undefined === this.volClassBlend);
         this.volClassColorStencil = ViewportQuadGeometry.create(20 /* VolClassColorUsingStencil */);
-        this.volClassCopyZ = SingleTexturedViewportQuadGeometry.createGeometry(depth.getHandle(), 30 /* VolClassCopyZ */);
+        this.volClassCopyZ = SingleTexturedViewportQuadGeometry.createGeometry(depth.getHandle(), 31 /* VolClassCopyZ */);
         this.volClassSetBlend = VolumeClassifierGeometry.createVCGeometry(depth.getHandle());
-        this.volClassBlend = SingleTexturedViewportQuadGeometry.createGeometry(textures.volClassBlend.getHandle(), 32 /* VolClassBlend */);
+        this.volClassBlend = SingleTexturedViewportQuadGeometry.createGeometry(textures.volClassBlend.getHandle(), 33 /* VolClassBlend */);
         if (!System.instance.capabilities.supportsFragDepth)
             this.volClassCopyZWithPoints = ScreenPointsGeometry.createGeometry(width, height, depth.getHandle());
         return undefined !== this.volClassColorStencil && undefined !== this.volClassCopyZ && undefined !== this.volClassSetBlend && undefined !== this.volClassBlend
@@ -495,7 +516,9 @@ export class SceneCompositor {
     constructor(target) {
         this.target = target;
         this.solarShadowMap = new SolarShadowMap(target);
+        this._needHiddenEdges = false;
     }
+    get needHiddenEdges() { return this._needHiddenEdges; }
     static create(target) {
         return System.instance.capabilities.supportsDrawBuffers ? new MRTCompositor(target) : new MPCompositor(target);
     }
@@ -634,6 +657,14 @@ class Compositor extends SceneCompositor {
                 }
                 this._haveVolumeClassifier = false;
             }
+            if (includeOcclusion && this._includeOcclusion) {
+                // Multisampling and AO buffers are also somewhat co-dependent, so if AO is on
+                // and is staying on, just disable AO and let it get re-enabled later.
+                this._geom.disableOcclusion();
+                this._frameBuffers.disableOcclusion();
+                this._textures.disableOcclusion();
+                this._includeOcclusion = false;
+            }
             if (this._antialiasSamples > 1) {
                 if (!this.enableMultiSampling()) {
                     assert(false, "Failed to initialize multisampling buffers");
@@ -651,16 +682,21 @@ class Compositor extends SceneCompositor {
         if (includeOcclusion !== this._includeOcclusion) {
             this._includeOcclusion = includeOcclusion;
             if (includeOcclusion) {
-                if (!this._textures.enableOcclusion(width, height)) {
+                if (!this._textures.enableOcclusion(width, height, this._antialiasSamples)) {
                     assert(false, "Failed to initialize occlusion textures");
                     return false;
                 }
+                if (!this._frameBuffers.enableOcclusion(this._textures, this._depth, this._depthMS)) {
+                    assert(false, "Failed to initialize occlusion frame buffers");
+                    return false;
+                }
+                this._geom.enableOcclusion(this._textures, this._depth);
             }
             else {
+                this._geom.disableOcclusion();
+                this._frameBuffers.disableOcclusion();
                 this._textures.disableOcclusion();
             }
-            this._frameBuffers.toggleOcclusion(this._textures);
-            this._geom.toggleOcclusion(this._textures, this._depth);
         }
         // Allocate or free volume classifier-related resources if necessary.  Make sure that we have depth/stencil.
         if (wantVolumeClassifier !== this._haveVolumeClassifier) {
@@ -1514,7 +1550,7 @@ class MRTFrameBuffers extends FrameBuffers {
     }
     initPotentialMSMRTFbos(textures, depth, depthMs) {
         const boundColor = System.instance.frameBufferStack.currentColorBuffer;
-        assert(undefined !== boundColor && undefined !== textures.color && undefined !== textures.featureId && undefined !== textures.depthAndOrder);
+        assert(undefined !== boundColor && undefined !== textures.color && undefined !== textures.featureId && undefined !== textures.depthAndOrder && undefined !== textures.accumulation && undefined !== textures.revealage);
         const colorAndPick = [boundColor, textures.featureId, textures.depthAndOrder];
         if (undefined === depthMs) {
             this.opaqueAll = FrameBuffer.create(colorAndPick, depth);
@@ -1522,7 +1558,7 @@ class MRTFrameBuffers extends FrameBuffers {
             this.opaqueAndCompositeAll = FrameBuffer.create(colorAndPick, depth);
         }
         else {
-            assert(undefined !== textures.colorMsBuff && undefined !== textures.featureIdMsBuff && undefined !== textures.depthAndOrderMsBuff);
+            assert(undefined !== textures.colorMsBuff && undefined !== textures.featureIdMsBuff && undefined !== textures.featureIdMsBuffHidden && undefined !== textures.depthAndOrderMsBuff && undefined !== textures.depthAndOrderMsBuffHidden);
             const colorAndPickMsBuffs = [textures.colorMsBuff, textures.featureIdMsBuff, textures.depthAndOrderMsBuff];
             const colorAndPickFilters = [GL.MultiSampling.Filter.Linear, GL.MultiSampling.Filter.Nearest, GL.MultiSampling.Filter.Nearest];
             this.opaqueAll = FrameBuffer.create(colorAndPick, depth, colorAndPickMsBuffs, colorAndPickFilters, depthMs);
@@ -1532,6 +1568,39 @@ class MRTFrameBuffers extends FrameBuffers {
         return undefined !== this.opaqueAll
             && undefined !== this.opaqueAndCompositeAll;
     }
+    enableOcclusion(textures, depth, depthMs) {
+        let rVal = super.enableOcclusion(textures, depth, depthMs);
+        if (undefined === depthMs) {
+            // If not using multisampling then we can use the accumulation and revealage textures for the hidden pick buffers,
+            assert(undefined !== textures.color && undefined !== textures.accumulation && undefined !== textures.revealage);
+            const colorAndPick = [textures.color, textures.accumulation, textures.revealage];
+            this.opaqueAndCompositeAllHidden = FrameBuffer.create(colorAndPick, depth);
+            rVal = rVal && undefined !== this.opaqueAndCompositeAllHidden;
+        }
+        else {
+            // If multisampling then we cannot use the revealage texture for depthAndOrder for the hidden edges since it is of the wrong type for blitting,
+            // so instead use a special depthAndOrderHidden texture just for this purpose.
+            // The featureId texture is not needed for hidden edges, so the accumulation texture can be used for it if we don't blit from the multisample bufffer into it.
+            assert(undefined !== textures.color && undefined !== textures.accumulation && undefined !== textures.depthAndOrderHidden);
+            assert(undefined !== textures.colorMsBuff && undefined !== textures.featureIdMsBuffHidden && undefined !== textures.depthAndOrderMsBuffHidden);
+            const colorAndPick = [textures.color, textures.accumulation, textures.depthAndOrderHidden];
+            const colorAndPickMsBuffs = [textures.colorMsBuff, textures.featureIdMsBuffHidden, textures.depthAndOrderMsBuffHidden];
+            const colorAndPickFilters = [GL.MultiSampling.Filter.Linear, GL.MultiSampling.Filter.Nearest, GL.MultiSampling.Filter.Nearest];
+            this.opaqueAndCompositeAllHidden = FrameBuffer.create(colorAndPick, depth, colorAndPickMsBuffs, colorAndPickFilters, depthMs);
+            // We will also need a frame buffer for copying the real pick data buffers into these hidden edge pick data buffers.
+            const pingPong = [textures.accumulation, textures.depthAndOrderHidden];
+            const pingPongMSBuffs = [textures.featureIdMsBuffHidden, textures.depthAndOrderMsBuffHidden];
+            const pingPongFilters = [GL.MultiSampling.Filter.Nearest, GL.MultiSampling.Filter.Nearest];
+            this.pingPongMS = FrameBuffer.create(pingPong, depth, pingPongMSBuffs, pingPongFilters, depthMs);
+            rVal = rVal && undefined !== this.opaqueAndCompositeAllHidden && (undefined === depthMs || undefined !== this.pingPongMS);
+        }
+        return rVal;
+    }
+    disableOcclusion() {
+        super.disableOcclusion();
+        this.opaqueAndCompositeAllHidden = dispose(this.opaqueAndCompositeAllHidden);
+        this.pingPongMS = dispose(this.pingPongMS);
+    }
     enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
         const boundColor = System.instance.frameBufferStack.currentColorBuffer;
         if (undefined === boundColor)
@@ -1574,7 +1643,9 @@ class MRTFrameBuffers extends FrameBuffers {
         return super.isDisposed
             && undefined === this.opaqueAll
             && undefined === this.opaqueAndCompositeAll
+            && undefined === this.opaqueAndCompositeAllHidden
             && undefined === this.pingPong
+            && undefined === this.pingPongMS
             && undefined === this.translucent
             && undefined === this.clearTranslucent
             && undefined === this.idsAndZ
@@ -1586,7 +1657,9 @@ class MRTFrameBuffers extends FrameBuffers {
         super.dispose();
         this.opaqueAll = dispose(this.opaqueAll);
         this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAll);
+        this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAllHidden);
         this.pingPong = dispose(this.pingPong);
+        this.pingPongMS = dispose(this.pingPongMS);
         this.translucent = dispose(this.translucent);
         this.clearTranslucent = dispose(this.clearTranslucent);
         this.idsAndZ = dispose(this.idsAndZ);
@@ -1673,8 +1746,11 @@ class MRTCompositor extends Compositor {
         });
     }
     renderOpaque(commands, compositeFlags, renderForReadPixels) {
+        if (0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */) && !renderForReadPixels) {
+            this.renderOpaqueAO(commands);
+            return;
+        }
         const needComposite = 0 /* None */ !== compositeFlags;
-        const needAO = 0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */);
         const fbStack = System.instance.frameBufferStack;
         // Output the first 2 passes to color and pick data buffers. (All 3 in the case of rendering for readPixels() or ambient occlusion).
         let fbo = (needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll);
@@ -1683,11 +1759,8 @@ class MRTCompositor extends Compositor {
         fbStack.execute(fbo, true, useMsBuffers, () => {
             this.drawPass(commands, 2 /* OpaqueLinear */);
             this.drawPass(commands, 3 /* OpaquePlanar */, true);
-            if (needAO || renderForReadPixels) {
-                if (needAO)
-                    this._primitiveDrawState = PrimitiveDrawState.Pickable;
+            if (renderForReadPixels) {
                 this.drawPass(commands, 4 /* OpaqueGeneral */, true);
-                this._primitiveDrawState = PrimitiveDrawState.Both;
                 if (useMsBuffers)
                     fbo.blitMsBuffersToTextures(true);
             }
@@ -1697,17 +1770,73 @@ class MRTCompositor extends Compositor {
         if (!renderForReadPixels) {
             fbo = (needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor);
             fbStack.execute(fbo, true, useMsBuffers, () => {
-                if (needAO)
-                    this._primitiveDrawState = PrimitiveDrawState.NonPickable;
                 this.drawPass(commands, 4 /* OpaqueGeneral */, false);
-                this._primitiveDrawState = PrimitiveDrawState.Both;
                 this.drawPass(commands, 8 /* HiddenEdge */, false);
             });
             if (useMsBuffers)
                 fbo.blitMsBuffersToTextures(needComposite);
         }
-        if (needAO)
-            this.renderAmbientOcclusion();
+    }
+    renderOpaqueAO(commands) {
+        const fbStack = System.instance.frameBufferStack;
+        const haveHiddenEdges = 0 !== commands.getCommands(8 /* HiddenEdge */).length;
+        // Output the linear, planar, and pickable surfaces to color and pick data buffers.
+        let fbo = this._fbos.opaqueAndCompositeAll;
+        const useMsBuffers = fbo.isMultisampled && this.useMsBuffers;
+        this._readPickDataFromPingPong = !useMsBuffers; // if multisampling then can read pick textures directly.
+        fbStack.execute(fbo, true, useMsBuffers, () => {
+            this.drawPass(commands, 2 /* OpaqueLinear */);
+            this.drawPass(commands, 3 /* OpaquePlanar */, true);
+            this._primitiveDrawState = PrimitiveDrawState.Pickable;
+            this.drawPass(commands, 4 /* OpaqueGeneral */, true);
+            this._primitiveDrawState = PrimitiveDrawState.Both;
+            if (useMsBuffers)
+                fbo.blitMsBuffersToTextures(true);
+        });
+        this._readPickDataFromPingPong = false;
+        // Output the non-pickable surfaces and hidden edges to just the color buffer.
+        fbo = this._fbos.opaqueAndCompositeColor;
+        fbStack.execute(fbo, true, useMsBuffers, () => {
+            this._primitiveDrawState = PrimitiveDrawState.NonPickable;
+            this.drawPass(commands, 4 /* OpaqueGeneral */, false);
+            if (haveHiddenEdges)
+                this.drawPass(commands, 8 /* HiddenEdge */, false);
+            this._primitiveDrawState = PrimitiveDrawState.Both;
+        });
+        if (useMsBuffers)
+            fbo.blitMsBuffersToTextures(true);
+        // If there are no hidden edges, then we're done & can run the AO passes using the normal depthAndOrder texture.
+        if (haveHiddenEdges) {
+            // AO needs the pick data (orderAndDepth) for the hidden edges.  We don't want it in with the other pick data though since they are not pickable, so we will use other textures.
+            // If not multisampling we will re-use the ping-pong/transparency textures since we are done with ping-ponging at this point and transparency happens later.
+            // If multisampling then we will use the accumulation texture for featureIDs and a special texture for depthAndOrder since the revealage texture is not the right type for multisampling.
+            // First we will need to copy what's in the pick buffers so far into the hidden pick buffers.
+            System.instance.applyRenderState(this._noDepthMaskRenderState);
+            fbo = (useMsBuffers ? this._fbos.pingPongMS : this._fbos.pingPong);
+            fbStack.execute(fbo, true, useMsBuffers, () => {
+                const params = getDrawParams(this.target, this._geometry.copyPickBuffers);
+                this.target.techniques.draw(params);
+            });
+            if (useMsBuffers)
+                fbo.blitMsBuffersToTextures(false, 1); // only want to blit the depth/order target
+            // Now draw the hidden edges, using an fbo which places their depth/order into the hidden pick buffers.
+            // Since we are not writing to the actual pick buffers we let this._readPickDataFromPingPong remain false.
+            fbo = this._fbos.opaqueAndCompositeAllHidden;
+            this._primitiveDrawState = PrimitiveDrawState.Pickable;
+            fbStack.execute(fbo, true, useMsBuffers, () => {
+                this.drawPass(commands, 8 /* HiddenEdge */, false);
+            });
+            this._primitiveDrawState = PrimitiveDrawState.Both;
+            if (useMsBuffers) {
+                // Only want to blit the color and depth/order targets as the featureId target is not blit-able and will generate a GL error.
+                fbo.blitMsBuffersToTextures(false, 0);
+                fbo.blitMsBuffersToTextures(false, 2);
+            }
+            this._needHiddenEdges = false;
+        }
+        this._needHiddenEdges = haveHiddenEdges; // this will cause the alternate renderAndOrder texture with the hidden edges to be read for the 2nd AO blur pass.
+        this.renderAmbientOcclusion();
+        this._needHiddenEdges = false;
     }
     renderLayers(commands, needComposite, pass) {
         const fbo = (needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll);
@@ -1873,7 +2002,13 @@ class MPCompositor extends Compositor {
         this.clearFbo(this._fbos.depthAndOrder, 0, 0, 0, 0, false);
         this.clearFbo(this._fbos.featureId, 0, 0, 0, 0, false);
     }
+    clearHiddenPick() {
+    }
     renderOpaque(commands, compositeFlags, renderForReadPixels) {
+        if (0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */) && !renderForReadPixels) {
+            this.renderOpaqueAO(commands);
+            return;
+        }
         // Output the first 2 passes to color and pick data buffers. (All 3 in the case of rendering for readPixels()).
         this._readPickDataFromPingPong = true;
         const needComposite = 0 /* None */ !== compositeFlags;
@@ -1881,26 +2016,58 @@ class MPCompositor extends Compositor {
         const colorFbo = needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor;
         this.drawOpaquePass(colorFbo, commands, 2 /* OpaqueLinear */, false);
         this.drawOpaquePass(colorFbo, commands, 3 /* OpaquePlanar */, true);
-        if (renderForReadPixels || needAO) {
-            if (needAO)
-                this._primitiveDrawState = PrimitiveDrawState.Pickable;
+        if (renderForReadPixels || needAO)
             this.drawOpaquePass(colorFbo, commands, 4 /* OpaqueGeneral */, true);
-            this._primitiveDrawState = PrimitiveDrawState.Both;
-        }
         this._readPickDataFromPingPong = false;
         // The general pass (and following) will not bother to write to pick buffers and so can read from the actual pick buffers.
         if (!renderForReadPixels) {
             System.instance.frameBufferStack.execute(colorFbo, true, false, () => {
                 this._drawMultiPassDepth = true; // for OpaqueGeneral
-                if (needAO)
-                    this._primitiveDrawState = PrimitiveDrawState.NonPickable;
                 this.drawPass(commands, 4 /* OpaqueGeneral */, false);
-                this._primitiveDrawState = PrimitiveDrawState.Both;
                 this.drawPass(commands, 8 /* HiddenEdge */, false);
             });
         }
-        if (needAO)
-            this.renderAmbientOcclusion();
+    }
+    renderOpaqueAO(commands) {
+        const fbStack = System.instance.frameBufferStack;
+        const haveHiddenEdges = 0 !== commands.getCommands(8 /* HiddenEdge */).length;
+        // Output the linear, planar, and pickable surfaces to color and pick data buffers.
+        this._readPickDataFromPingPong = true;
+        const colorFbo = this._fbos.opaqueAndCompositeColor;
+        this.drawOpaquePass(colorFbo, commands, 2 /* OpaqueLinear */, false);
+        this.drawOpaquePass(colorFbo, commands, 3 /* OpaquePlanar */, true);
+        this._primitiveDrawState = PrimitiveDrawState.Pickable;
+        this.drawOpaquePass(colorFbo, commands, 4 /* OpaqueGeneral */, true);
+        this._primitiveDrawState = PrimitiveDrawState.Both;
+        this._readPickDataFromPingPong = false;
+        // Output the non-pickable surfaces and hidden edges to just the color buffer.
+        fbStack.execute(colorFbo, true, false, () => {
+            this._drawMultiPassDepth = true; // for OpaqueGeneral
+            this._primitiveDrawState = PrimitiveDrawState.NonPickable;
+            this.drawPass(commands, 4 /* OpaqueGeneral */, false);
+            if (haveHiddenEdges)
+                this.drawPass(commands, 8 /* HiddenEdge */, false);
+            this._primitiveDrawState = PrimitiveDrawState.Both;
+        });
+        if (haveHiddenEdges) {
+            // First copy the depthAndOrder texture to the revealage texture which we will use for the hidden edge pick data (don't need full pick with featureIds).
+            System.instance.applyRenderState(this._noDepthMaskRenderState);
+            this.copyFbo(this._textures.depthAndOrder, this._fbos.revealage);
+            // So far only the non-pickable hidden edges have been drawn for AO, so we need to draw the pickable ones to the hidden depthAndOrder (revealage).
+            this._primitiveDrawState = PrimitiveDrawState.Pickable;
+            // Since we only need to draw color and depthAndOrder instead of calling drawOpaquePass just do what we need here.
+            this._drawMultiPassDepth = true;
+            fbStack.execute(colorFbo, true, false, () => this.drawPass(commands, 8 /* HiddenEdge */, false));
+            this._drawMultiPassDepth = false;
+            this._currentRenderTargetIndex = 2;
+            fbStack.execute(this._fbos.revealage, true, false, () => this.drawPass(commands, 8 /* HiddenEdge */, false));
+            this._currentRenderTargetIndex = 0;
+            this._readPickDataFromPingPong = false;
+            this._primitiveDrawState = PrimitiveDrawState.Both;
+        }
+        this._needHiddenEdges = haveHiddenEdges; // this will cause the alternate renderAndOrder texture to be read for the 2nd AO blur pass.
+        this.renderAmbientOcclusion();
+        this._needHiddenEdges = false;
     }
     renderLayers(commands, needComposite, pass) {
         this._readPickDataFromPingPong = true;