@itwin/core-frontend 4.0.0-dev.2 → 4.0.0-dev.22

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

@@ -8,13 +8,12 @@
 import { assert, dispose } from "@itwin/core-bentley";
 import { Transform, Vector2d, Vector3d } from "@itwin/core-geometry";
 import { RenderMode, SpatialClassifierInsideDisplay, SpatialClassifierOutsideDisplay, } from "@itwin/core-common";
-import { DepthType, RenderType } from "@itwin/webgl-compatibility";
+import { RenderType } from "@itwin/webgl-compatibility";
 import { Pixel } from "../Pixel";
 import { BranchState } from "./BranchState";
-import { AmbientOcclusionGeometry, BlurGeometry, BlurType, BoundaryType, CompositeGeometry, CopyPickBufferGeometry, ScreenPointsGeometry, SingleTexturedViewportQuadGeometry, ViewportQuadGeometry, VolumeClassifierGeometry, } from "./CachedGeometry";
+import { AmbientOcclusionGeometry, BlurGeometry, BlurType, BoundaryType, CompositeGeometry, CopyPickBufferGeometry, SingleTexturedViewportQuadGeometry, ViewportQuadGeometry, VolumeClassifierGeometry, } from "./CachedGeometry";
 import { Debug } from "./Diagnostics";
 import { extractFlashedVolumeClassifierCommands, extractHilitedVolumeClassifierCommands } from "./DrawCommand";
-import { FloatRgba } from "./FloatRGBA";
 import { FrameBuffer } from "./FrameBuffer";
 import { GL } from "./GL";
 import { IModelFrameLifecycle } from "./IModelFrameLifecycle";
@@ -97,23 +96,14 @@ class Textures {
     init(width, height, numSamples) {
         assert(undefined === this.accumulation);
         let pixelDataType = GL.Texture.DataType.UnsignedByte;
-        switch (System.instance.capabilities.maxRenderType) {
+        switch (System.instance.maxRenderType) {
             case RenderType.TextureFloat: {
                 pixelDataType = GL.Texture.DataType.Float;
                 break;
             }
             case RenderType.TextureHalfFloat: {
-                if (System.instance.capabilities.isWebGL2) {
-                    pixelDataType = System.instance.context.HALF_FLOAT;
-                    break;
-                }
-                else {
-                    const ext = System.instance.capabilities.queryExtensionObject("OES_texture_half_float");
-                    if (undefined !== ext) {
-                        pixelDataType = ext.HALF_FLOAT_OES;
-                        break;
-                    }
-                }
+                pixelDataType = System.instance.context.HALF_FLOAT;
+                break;
             }
             /* falls through */
             case RenderType.TextureUnsignedByte: {
@@ -203,9 +193,25 @@ class FrameBuffers {
         this.depthAndOrder = FrameBuffer.create([textures.depthAndOrder], depth);
         this.hilite = FrameBuffer.create([textures.hilite], depth);
         this.hiliteUsingStencil = FrameBuffer.create([textures.hilite], depth);
-        return undefined !== this.depthAndOrder
-            && undefined !== this.hilite
-            && undefined !== this.hiliteUsingStencil;
+        if (!this.depthAndOrder || !this.hilite || !this.hiliteUsingStencil)
+            return false;
+        assert(undefined === this.opaqueAll);
+        if (!this.initPotentialMSMRTFbos(textures, depth, depthMS))
+            return false;
+        assert(undefined !== textures.accumulation && undefined !== textures.revealage);
+        const colors = [textures.accumulation, textures.revealage];
+        this.translucent = FrameBuffer.create(colors, depth);
+        this.clearTranslucent = FrameBuffer.create(colors);
+        // We borrow the SceneCompositor's accum and revealage textures for the surface pass.
+        // First we render edges, writing to our textures.
+        // Then we copy our textures to borrowed textures.
+        // Finally we render surfaces, writing to our textures and reading from borrowed textures.
+        assert(undefined !== textures.accumulation && undefined !== textures.revealage);
+        const pingPong = [textures.accumulation, textures.revealage];
+        this.pingPong = FrameBuffer.create(pingPong);
+        return undefined !== this.translucent
+            && undefined !== this.clearTranslucent
+            && undefined !== this.pingPong;
     }
     initPotentialMSFbos(textures, depth, depthMS) {
         const boundColor = System.instance.frameBufferStack.currentColorBuffer;
@@ -222,19 +228,69 @@ class FrameBuffers {
         return undefined !== this.opaqueColor
             && undefined !== this.opaqueAndCompositeColor;
     }
-    enableOcclusion(textures, _depth, _depthMs) {
+    initPotentialMSMRTFbos(textures, depth, depthMs) {
+        const boundColor = System.instance.frameBufferStack.currentColorBuffer;
+        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);
+            colorAndPick[0] = textures.color;
+            this.opaqueAndCompositeAll = FrameBuffer.create(colorAndPick, depth);
+        }
+        else {
+            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);
+            colorAndPick[0] = textures.color;
+            this.opaqueAndCompositeAll = FrameBuffer.create(colorAndPick, depth, colorAndPickMsBuffs, colorAndPickFilters, depthMs);
+        }
+        return undefined !== this.opaqueAll
+            && undefined !== this.opaqueAndCompositeAll;
+    }
+    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;
+        let rVal = undefined !== this.occlusion && undefined !== this.occlusionBlur;
+        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() {
         if (undefined !== this.occlusion) {
             this.occlusion = dispose(this.occlusion);
             this.occlusionBlur = dispose(this.occlusionBlur);
         }
+        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)
+            return;
         if (undefined === this.stencilSet) {
             if (undefined !== depthMS) { // if multisampling use the multisampled depth everywhere
                 this.stencilSet = FrameBuffer.create([], depth, [], [], depthMS);
@@ -249,6 +305,16 @@ class FrameBuffers {
                 this.volClassCreateBlendAltZ = FrameBuffer.create([textures.volClassBlend], volClassDepth);
             }
         }
+        if (undefined !== this.opaqueAll && undefined !== this.opaqueAndCompositeAll) {
+            if (undefined !== volClassDepth) {
+                let ids = [this.opaqueAll.getColor(0), this.opaqueAll.getColor(1)];
+                this.idsAndZ = FrameBuffer.create(ids, depth);
+                this.idsAndAltZ = FrameBuffer.create(ids, volClassDepth);
+                ids = [this.opaqueAndCompositeAll.getColor(0), this.opaqueAndCompositeAll.getColor(1)];
+                this.idsAndZComposite = FrameBuffer.create(ids, depth);
+                this.idsAndAltZComposite = FrameBuffer.create(ids, volClassDepth);
+            }
+        }
     }
     disableVolumeClassifier() {
         if (undefined !== this.stencilSet) {
@@ -257,29 +323,40 @@ class FrameBuffers {
             this.volClassCreateBlend = dispose(this.volClassCreateBlend);
             this.volClassCreateBlendAltZ = dispose(this.volClassCreateBlendAltZ);
         }
+        if (undefined !== this.idsAndZ) {
+            this.idsAndZ = dispose(this.idsAndZ);
+            this.idsAndAltZ = dispose(this.idsAndAltZ);
+            this.idsAndZComposite = dispose(this.idsAndZComposite);
+            this.idsAndAltZComposite = dispose(this.idsAndAltZComposite);
+        }
     }
     enableMultiSampling(textures, depth, depthMS) {
         this.opaqueColor = dispose(this.opaqueColor);
         this.opaqueAndCompositeColor = dispose(this.opaqueAndCompositeColor);
-        return this.initPotentialMSFbos(textures, depth, depthMS);
+        let rVal = this.initPotentialMSFbos(textures, depth, depthMS);
+        this.opaqueAll = dispose(this.opaqueAll);
+        this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAll);
+        rVal = this.initPotentialMSMRTFbos(textures, depth, depthMS);
+        return rVal;
     }
     disableMultiSampling(textures, depth) {
+        this.opaqueAll = dispose(this.opaqueAll);
+        this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAll);
+        if (!this.initPotentialMSMRTFbos(textures, depth, undefined))
+            return false;
         this.opaqueColor = dispose(this.opaqueColor);
         this.opaqueAndCompositeColor = dispose(this.opaqueAndCompositeColor);
         return this.initPotentialMSFbos(textures, depth, undefined);
     }
     get isDisposed() {
-        return undefined === this.opaqueColor
-            && undefined === this.opaqueAndCompositeColor
-            && undefined === this.depthAndOrder
-            && undefined === this.hilite
-            && undefined === this.hiliteUsingStencil
-            && undefined === this.occlusion
-            && undefined === this.occlusionBlur
-            && undefined === this.stencilSet
-            && undefined === this.altZOnly
-            && undefined === this.volClassCreateBlend
-            && undefined === this.volClassCreateBlendAltZ;
+        return undefined === this.opaqueColor && undefined === this.opaqueAndCompositeColor && undefined === this.depthAndOrder
+            && undefined === this.hilite && undefined === this.hiliteUsingStencil && undefined === this.occlusion
+            && undefined === this.occlusionBlur && undefined === this.stencilSet && undefined === this.altZOnly
+            && undefined === this.volClassCreateBlend && undefined === this.volClassCreateBlendAltZ && undefined === this.opaqueAll
+            && undefined === this.opaqueAndCompositeAll && undefined === this.opaqueAndCompositeAllHidden && undefined === this.pingPong
+            && undefined === this.pingPongMS && undefined === this.translucent && undefined === this.clearTranslucent
+            && undefined === this.idsAndZ && undefined === this.idsAndAltZ && undefined === this.idsAndZComposite
+            && undefined === this.idsAndAltZComposite && undefined === this.edlDrawCol;
     }
     dispose() {
         this.opaqueColor = dispose(this.opaqueColor);
@@ -293,6 +370,18 @@ class FrameBuffers {
         this.altZOnly = dispose(this.altZOnly);
         this.volClassCreateBlend = dispose(this.volClassCreateBlend);
         this.volClassCreateBlendAltZ = dispose(this.volClassCreateBlendAltZ);
+        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);
+        this.idsAndAltZ = dispose(this.idsAndAltZ);
+        this.idsAndZComposite = dispose(this.idsAndZComposite);
+        this.idsAndAltZComposite = dispose(this.idsAndAltZComposite);
+        this.edlDrawCol = dispose(this.edlDrawCol);
     }
 }
 export function collectGeometryStatistics(geom, stats) {
@@ -305,17 +394,25 @@ class Geometry {
         collectGeometryStatistics(this.composite, stats);
         collectGeometryStatistics(this.volClassColorStencil, stats);
         collectGeometryStatistics(this.volClassCopyZ, stats);
-        collectGeometryStatistics(this.volClassCopyZWithPoints, stats);
         collectGeometryStatistics(this.volClassSetBlend, stats);
         collectGeometryStatistics(this.volClassBlend, stats);
         collectGeometryStatistics(this.occlusion, stats);
         collectGeometryStatistics(this.occlusionXBlur, stats);
         collectGeometryStatistics(this.occlusionYBlur, stats);
+        collectGeometryStatistics(this.copyPickBuffers, stats);
+        collectGeometryStatistics(this.clearTranslucent, stats);
+        collectGeometryStatistics(this.clearPickAndColor, stats);
     }
     init(textures) {
         assert(undefined === this.composite);
         this.composite = CompositeGeometry.createGeometry(textures.color.getHandle(), textures.accumulation.getHandle(), textures.revealage.getHandle(), textures.hilite.getHandle());
-        return undefined !== this.composite;
+        if (undefined === this.composite)
+            return false;
+        assert(undefined === this.copyPickBuffers);
+        this.copyPickBuffers = CopyPickBufferGeometry.createGeometry(textures.featureId.getHandle(), textures.depthAndOrder.getHandle());
+        this.clearTranslucent = ViewportQuadGeometry.create(16 /* OITClearTranslucent */);
+        this.clearPickAndColor = ViewportQuadGeometry.create(21 /* ClearPickAndColor */);
+        return undefined !== this.copyPickBuffers && undefined !== this.clearTranslucent && undefined !== this.clearPickAndColor;
     }
     enableOcclusion(textures, depth) {
         var _a;
@@ -332,16 +429,13 @@ class Geometry {
         this.occlusionXBlur = dispose(this.occlusionXBlur);
         this.occlusionYBlur = dispose(this.occlusionYBlur);
     }
-    enableVolumeClassifier(textures, depth, width, height) {
+    enableVolumeClassifier(textures, depth) {
         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(), 31 /* VolClassCopyZ */);
         this.volClassSetBlend = VolumeClassifierGeometry.createVCGeometry(depth.getHandle());
         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
-            && (System.instance.capabilities.supportsFragDepth || undefined !== this.volClassCopyZWithPoints);
+        return undefined !== this.volClassColorStencil && undefined !== this.volClassCopyZ && undefined !== this.volClassSetBlend && undefined !== this.volClassBlend;
     }
     disableVolumeClassifier() {
         if (undefined !== this.volClassColorStencil) {
@@ -349,20 +443,13 @@ class Geometry {
             this.volClassCopyZ = dispose(this.volClassCopyZ);
             this.volClassSetBlend = dispose(this.volClassSetBlend);
             this.volClassBlend = dispose(this.volClassBlend);
-            if (!System.instance.capabilities.supportsFragDepth)
-                this.volClassCopyZWithPoints = dispose(this.volClassCopyZWithPoints);
         }
     }
     get isDisposed() {
-        return undefined === this.composite
-            && undefined === this.occlusion
-            && undefined === this.occlusionXBlur
-            && undefined === this.occlusionYBlur
-            && undefined === this.volClassColorStencil
-            && undefined === this.volClassCopyZ
-            && undefined === this.volClassSetBlend
-            && undefined === this.volClassBlend
-            && undefined === this.volClassCopyZWithPoints;
+        return undefined === this.composite && undefined === this.occlusion && undefined === this.occlusionXBlur
+            && undefined === this.occlusionYBlur && undefined === this.volClassColorStencil && undefined === this.volClassCopyZ
+            && undefined === this.volClassSetBlend && undefined === this.volClassBlend && undefined === this.copyPickBuffers
+            && undefined === this.clearTranslucent && undefined === this.clearPickAndColor;
     }
     dispose() {
         this.composite = dispose(this.composite);
@@ -370,6 +457,9 @@ class Geometry {
         this.occlusionXBlur = dispose(this.occlusionXBlur);
         this.occlusionYBlur = dispose(this.occlusionYBlur);
         this.disableVolumeClassifier();
+        this.copyPickBuffers = dispose(this.copyPickBuffers);
+        this.clearTranslucent = dispose(this.clearTranslucent);
+        this.clearPickAndColor = dispose(this.clearPickAndColor);
     }
 }
 // Represents a view of data read from a region of the frame buffer.
@@ -522,7 +612,7 @@ export class SceneCompositor {
     }
     get needHiddenEdges() { return this._needHiddenEdges; }
     static create(target) {
-        return System.instance.capabilities.supportsDrawBuffers ? new MRTCompositor(target) : new MPCompositor(target);
+        return new Compositor(target);
     }
 }
 // This describes what types of primitives a compositor should draw. See the `drawPrimitive` method of Compositor.
@@ -534,7 +624,7 @@ var PrimitiveDrawState;
 })(PrimitiveDrawState || (PrimitiveDrawState = {}));
 // The actual base class. Specializations are provided based on whether or not multiple render targets are supported.
 class Compositor extends SceneCompositor {
-    constructor(target, fbos, geometry) {
+    constructor(target) {
         super(target);
         this._width = -1;
         this._height = -1;
@@ -553,8 +643,8 @@ class Compositor extends SceneCompositor {
         this._antialiasSamples = 1;
         this._viewProjectionMatrix = new Matrix4();
         this._primitiveDrawState = PrimitiveDrawState.Both; // used by drawPrimitive to decide whether a primitive needs to be drawn.
-        this._frameBuffers = fbos;
-        this._geom = geometry;
+        this._fbos = new FrameBuffers();
+        this._geom = new Geometry();
         this._opaqueRenderState.flags.depthTest = true;
         this._pointCloudRenderState.flags.depthTest = true;
         this._translucentRenderState.flags.depthMask = false;
@@ -574,232 +664,499 @@ class Compositor extends SceneCompositor {
         this._layerRenderState.depthFunc = GL.DepthFunc.Always;
         this._layerRenderState.blend.setBlendFunc(GL.BlendFactor.One, GL.BlendFactor.OneMinusSrcAlpha);
     }
+    get featureIds() { return this.getSamplerTexture(this._readPickDataFromPingPong ? 0 : 1); }
+    get depthAndOrder() { return this.getSamplerTexture(this._readPickDataFromPingPong ? 1 : 2); }
+    get _samplerFbo() { return this._readPickDataFromPingPong ? this._fbos.pingPong : this._fbos.opaqueAll; }
+    getSamplerTexture(index) { return this._samplerFbo.getColor(index); }
     drawPrimitive(primitive, exec, outputsToPick) {
         if ((outputsToPick && this._primitiveDrawState !== PrimitiveDrawState.NonPickable) ||
             (!outputsToPick && this._primitiveDrawState !== PrimitiveDrawState.Pickable))
             primitive.draw(exec);
     }
-    get antialiasSamples() { return this._antialiasSamples; }
-    get useMsBuffers() { return this._antialiasSamples > 1 && !this.target.isReadPixelsInProgress; }
-    enableVolumeClassifierFbos(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
-        this._frameBuffers.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
-    }
-    disableVolumeClassifierFbos() { this._frameBuffers.disableVolumeClassifier(); }
-    /** This function generates a texture that contains ambient occlusion information to be applied later. */
-    renderAmbientOcclusion() {
+    clearOpaque(needComposite) {
+        const fbo = needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll;
         const system = System.instance;
-        // Render unblurred ambient occlusion based on depth buffer
-        let fbo = this._frameBuffers.occlusion;
-        this.target.beginPerfMetricRecord("Compute AO");
-        system.frameBufferStack.execute(fbo, true, false, () => {
-            System.instance.applyRenderState(RenderState.defaults);
-            const params = getDrawParams(this.target, this._geom.occlusion);
-            this.target.techniques.draw(params);
-        });
-        this.target.endPerfMetricRecord();
-        // Render the X-blurred ambient occlusion based on unblurred ambient occlusion
-        fbo = this._frameBuffers.occlusionBlur;
-        this.target.beginPerfMetricRecord("Blur AO X");
-        system.frameBufferStack.execute(fbo, true, false, () => {
-            System.instance.applyRenderState(RenderState.defaults);
-            const params = getDrawParams(this.target, this._geom.occlusionXBlur);
-            this.target.techniques.draw(params);
-        });
-        this.target.endPerfMetricRecord();
-        // Render the Y-blurred ambient occlusion based on X-blurred ambient occlusion (render into original occlusion framebuffer)
-        fbo = this._frameBuffers.occlusion;
-        this.target.beginPerfMetricRecord("Blur AO Y");
-        system.frameBufferStack.execute(fbo, true, false, () => {
-            System.instance.applyRenderState(RenderState.defaults);
-            const params = getDrawParams(this.target, this._geom.occlusionYBlur);
+        system.frameBufferStack.execute(fbo, true, this.useMsBuffers, () => {
+            // Clear pick data buffers to 0's and color buffer to background color
+            // (0,0,0,0) in elementID0 and ElementID1 buffers indicates invalid element id
+            // (0,0,0,0) in DepthAndOrder buffer indicates render order 0 and encoded depth of 0 (= far plane)
+            system.applyRenderState(this._noDepthMaskRenderState);
+            const params = getDrawParams(this.target, this._geom.clearPickAndColor);
             this.target.techniques.draw(params);
+            // Clear depth buffer
+            system.applyRenderState(RenderState.defaults); // depthMask == true.
+            system.context.clearDepth(1.0);
+            system.context.clear(GL.BufferBit.Depth);
         });
-        this.target.endPerfMetricRecord();
     }
-    collectStatistics(stats) {
-        if (undefined !== this._depth)
-            stats.addTextureAttachment(this._depth.bytesUsed);
-        if (undefined !== this._depthMS)
-            stats.addTextureAttachment(this._depthMS.bytesUsed);
-        this._textures.collectStatistics(stats);
-        this._geom.collectStatistics(stats);
+    renderLayers(commands, needComposite, pass) {
+        const fbo = (needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll);
+        const useMsBuffers = 1 /* OpaqueLayers */ === pass && fbo.isMultisampled && this.useMsBuffers;
+        this._readPickDataFromPingPong = !useMsBuffers;
+        System.instance.frameBufferStack.execute(fbo, true, useMsBuffers, () => {
+            this.drawPass(commands, pass, true);
+        });
+        this._readPickDataFromPingPong = false;
     }
-    preDraw() {
-        const rect = this.target.viewRect;
-        const width = rect.width;
-        const height = rect.height;
-        const includeOcclusion = this.target.wantAmbientOcclusion;
-        const wantVolumeClassifier = (undefined !== this.target.activeVolumeClassifierProps);
-        let wantAntialiasSamples = this.target.antialiasSamples <= 1 || !System.instance.capabilities.supportsDrawBuffers ? 1 : this.target.antialiasSamples;
-        if (wantAntialiasSamples > System.instance.capabilities.maxAntialiasSamples)
-            wantAntialiasSamples = System.instance.capabilities.maxAntialiasSamples;
-        const changeAntialiasSamples = (this._antialiasSamples > 1 && wantAntialiasSamples > 1 && this._antialiasSamples !== wantAntialiasSamples);
-        // If not yet initialized, or dimensions changed, or antialiasing changed the number of samples, initialize.
-        if (undefined === this._textures.accumulation || width !== this._width || height !== this._height || changeAntialiasSamples) {
-            this._width = width;
-            this._height = height;
-            this._antialiasSamples = wantAntialiasSamples;
-            // init() first calls dispose(), which releases all of our fbos, textures, etc, and resets the _includeOcclusion flag.
-            if (!this.init()) {
-                assert(false, "Failed to initialize scene compositor");
-                return false;
-            }
+    renderOpaque(commands, compositeFlags, renderForReadPixels) {
+        if (0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */) && !renderForReadPixels) {
+            this.renderOpaqueAO(commands);
+            return;
         }
-        else if (this._antialiasSamples !== wantAntialiasSamples) {
-            // Turn on or off multisampling.  Rather than just re-initializing, we can save the
-            // non multisampled textures & FBOs and just try to add or delete the multisampled ones.
-            this._antialiasSamples = wantAntialiasSamples;
-            if (wantVolumeClassifier && this._haveVolumeClassifier) {
-                // Multisampling and volume classification buffers are somewhat co-dependent so if volume classification is on
-                // and is staying on, just disable volume classifiers and let them get re-enabled later.
-                this.disableVolumeClassifierFbos();
-                this._geom.disableVolumeClassifier();
-                this._textures.disableVolumeClassifier();
-                if (undefined !== this._vcAltDepthStencil) {
-                    this._vcAltDepthStencil.dispose();
-                    this._vcAltDepthStencil = undefined;
-                }
-                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");
-                    return false;
-                }
-            }
-            else {
-                if (!this.disableMultiSampling()) {
-                    assert(false, "Failed to initialize multisampling buffers");
-                    return false;
-                }
+        const needComposite = 0 /* None */ !== compositeFlags;
+        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);
+        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);
+            if (renderForReadPixels) {
+                this.drawPass(commands, 4 /* PointClouds */, true); // don't need EDL for this
+                this.drawPass(commands, 5 /* OpaqueGeneral */, true);
+                if (useMsBuffers)
+                    fbo.blitMsBuffersToTextures(true);
             }
+        });
+        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) {
+            fbo = (needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor);
+            fbStack.execute(fbo, true, useMsBuffers, () => {
+                this.drawPass(commands, 5 /* OpaqueGeneral */, false);
+                this.drawPass(commands, 9 /* HiddenEdge */, false);
+            });
+            // assume we are done with MS at this point, so update the non-MS buffers
+            if (useMsBuffers)
+                fbo.blitMsBuffersToTextures(needComposite);
         }
-        // Allocate or free ambient occlusion-related resources if necessary
-        if (includeOcclusion !== this._includeOcclusion) {
-            this._includeOcclusion = includeOcclusion;
-            if (includeOcclusion) {
-                if (!this._textures.enableOcclusion(width, height, this._antialiasSamples)) {
-                    assert(false, "Failed to initialize occlusion textures");
-                    return false;
+    }
+    renderOpaqueAO(commands) {
+        const fbStack = System.instance.frameBufferStack;
+        const haveHiddenEdges = 0 !== commands.getCommands(9 /* 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, 5 /* 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, 5 /* OpaqueGeneral */, false);
+            if (haveHiddenEdges)
+                this.drawPass(commands, 9 /* 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._geom.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, 9 /* 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;
+    }
+    renderPointClouds(commands, compositeFlags) {
+        var _a, _b;
+        const is3d = 2 /* Perspective */ === this.target.uniforms.frustum.type;
+        // separate individual point clouds and get their point cloud settings
+        const pointClouds = [];
+        let pcs;
+        const cmds = commands.getCommands(4 /* PointClouds */);
+        let curPC;
+        let pushDepth = 0;
+        for (const cmd of cmds) {
+            if ("pushBranch" === cmd.opcode) { // should be first command
+                ++pushDepth;
+                if (pushDepth === 1) {
+                    pcs = (_a = cmd.branch.branch.realityModelDisplaySettings) === null || _a === void 0 ? void 0 : _a.pointCloud;
+                    this.target.uniforms.realityModel.pointCloud.updateRange(cmd.branch.branch.realityModelRange, this.target, cmd.branch.localToWorldTransform, is3d);
+                    pointClouds.push(curPC = { pcs, cmds: [cmd] });
                 }
-                if (!this._frameBuffers.enableOcclusion(this._textures, this._depth, this._depthMS)) {
-                    assert(false, "Failed to initialize occlusion frame buffers");
-                    return false;
+                else {
+                    assert(undefined !== curPC);
+                    curPC.cmds.push(cmd);
                 }
-                this._geom.enableOcclusion(this._textures, this._depth);
             }
             else {
-                this._geom.disableOcclusion();
-                this._frameBuffers.disableOcclusion();
-                this._textures.disableOcclusion();
+                if ("popBranch" === cmd.opcode)
+                    --pushDepth;
+                assert(undefined !== curPC);
+                curPC.cmds.push(cmd);
             }
         }
-        // Allocate or free volume classifier-related resources if necessary.  Make sure that we have depth/stencil.
-        if (wantVolumeClassifier !== this._haveVolumeClassifier) {
-            if (wantVolumeClassifier && DepthType.TextureUnsignedInt24Stencil8 === System.instance.capabilities.maxDepthType) {
-                this._vcAltDepthStencil = System.instance.createDepthBuffer(width, height);
-                if (undefined !== this._depthMS)
-                    this._vcAltDepthStencilMS = System.instance.createDepthBuffer(width, height, this._antialiasSamples);
-                if (undefined === this._vcAltDepthStencil || (undefined !== this._depthMS && undefined === this._vcAltDepthStencilMS)) {
-                    assert(false, "Failed to initialize volume classifier depth buffer");
-                    return false;
-                }
-                if (!this._textures.enableVolumeClassifier(width, height, this._antialiasSamples)) {
-                    assert(false, "Failed to initialize volume classifier textures");
-                    return false;
-                }
-                if (!this._geom.enableVolumeClassifier(this._textures, this._depth, width, height)) {
-                    assert(false, "Failed to initialize volume classifier geometry");
-                    return false;
+        const needComposite = 0 /* None */ !== compositeFlags;
+        const fbo = (needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor);
+        const useMsBuffers = fbo.isMultisampled && this.useMsBuffers;
+        const system = System.instance;
+        const fbStack = system.frameBufferStack;
+        this._readPickDataFromPingPong = false;
+        for (const pc of pointClouds) {
+            pcs = pc.pcs;
+            let edlOn = (pcs === null || pcs === void 0 ? void 0 : pcs.edlMode) !== "off" && is3d;
+            if (edlOn) {
+                if (undefined === this._textures.hilite)
+                    edlOn = false;
+                else {
+                    // create fbo on fly if not present, or has changed (from MS)
+                    // ###TODO consider not drawing point clouds to MS buffers, at least if EDL, it isn't worth the overhead.
+                    //         would have to blit depth before draw, use depth for draw, then run shader to copy depth back to MSAA
+                    //         at end, wherever color buf changed (test alpha, else discard)
+                    //         this would also simplify this code considerably
+                    let drawColBufs;
+                    if (undefined !== this._fbos.edlDrawCol)
+                        drawColBufs = this._fbos.edlDrawCol.getColorTargets(useMsBuffers, 0);
+                    if (undefined === this._fbos.edlDrawCol || this._textures.hilite !== (drawColBufs === null || drawColBufs === void 0 ? void 0 : drawColBufs.tex) || this._textures.hiliteMsBuff !== drawColBufs.msBuf) {
+                        this._fbos.edlDrawCol = dispose(this._fbos.edlDrawCol);
+                        const filters = [GL.MultiSampling.Filter.Linear];
+                        if (useMsBuffers)
+                            this._fbos.edlDrawCol = FrameBuffer.create([this._textures.hilite], this._depth, useMsBuffers && this._textures.hiliteMsBuff ? [this._textures.hiliteMsBuff] : undefined, filters, this._depthMS);
+                        else
+                            this._fbos.edlDrawCol = FrameBuffer.create([this._textures.hilite], this._depth);
+                    }
+                    if (undefined === this._fbos.edlDrawCol)
+                        edlOn = false;
+                    else { // can draw EDL
+                        // first draw pointcloud to borrowed hilite texture(MS) and regular depth(MS) buffers
+                        fbStack.execute(this._fbos.edlDrawCol, true, useMsBuffers, () => {
+                            system.context.clearColor(0, 0, 0, 0);
+                            system.context.clear(GL.BufferBit.Color);
+                            system.applyRenderState(this.getRenderState(4 /* PointClouds */));
+                            this.target.techniques.execute(this.target, pc.cmds, 4 /* PointClouds */);
+                        });
+                        if (useMsBuffers)
+                            this._fbos.edlDrawCol.blitMsBuffersToTextures(true, 0); // need to read the non-MS depth and hilite buffers
+                        // next process buffers to generate EDL (depth buffer is passed during init)
+                        this.target.beginPerfMetricRecord("Calc EDL"); // ### todo keep? (probably)
+                        const sts = this.eyeDomeLighting.draw({
+                            edlMode: ((_b = pc.pcs) === null || _b === void 0 ? void 0 : _b.edlMode) === "full" ? EDLMode.Full : EDLMode.On,
+                            edlFilter: !!(pcs === null || pcs === void 0 ? void 0 : pcs.edlFilter),
+                            useMsBuffers,
+                            inputTex: this._textures.hilite,
+                            curFbo: fbo,
+                        });
+                        this.target.endPerfMetricRecord();
+                        if (!sts) {
+                            edlOn = false;
+                        }
+                    }
                 }
-                this.enableVolumeClassifierFbos(this._textures, this._depth, this._vcAltDepthStencil, this._depthMS, this._vcAltDepthStencilMS);
-                this._haveVolumeClassifier = true;
             }
-            else {
-                this.disableVolumeClassifierFbos();
-                this._geom.disableVolumeClassifier();
-                this._textures.disableVolumeClassifier();
-                if (undefined !== this._vcAltDepthStencil) {
-                    this._vcAltDepthStencil.dispose();
-                    this._vcAltDepthStencil = undefined;
-                }
-                this._haveVolumeClassifier = false;
+            if (!edlOn) {
+                // draw the regular way
+                fbStack.execute(fbo, true, useMsBuffers, () => {
+                    system.applyRenderState(this.getRenderState(4 /* PointClouds */));
+                    this.target.techniques.execute(this.target, pc.cmds, 4 /* PointClouds */);
+                });
             }
         }
-        return true;
     }
-    draw(commands) {
-        if (!this.preDraw()) {
-            assert(false);
-            return;
-        }
-        const compositeFlags = commands.compositeFlags;
+    renderForVolumeClassification(commands, compositeFlags, renderForReadPixels) {
         const needComposite = 0 /* None */ !== compositeFlags;
-        // Clear output targets
-        this.target.frameStatsCollector.beginTime("opaqueTime");
-        this.target.beginPerfMetricRecord("Clear Opaque");
-        this.clearOpaque(needComposite);
-        this.target.endPerfMetricRecord();
-        this.target.frameStatsCollector.endTime("opaqueTime");
-        this.target.frameStatsCollector.beginTime("backgroundTime"); // includes skybox
-        // Render the background
-        this.target.beginPerfMetricRecord("Render Background");
-        this.renderBackground(commands, needComposite);
-        this.target.endPerfMetricRecord();
-        // Render the sky box
-        this.target.beginPerfMetricRecord("Render Skybox");
-        this.renderSkyBox(commands, needComposite);
-        this.target.endPerfMetricRecord();
-        // Render the background map graphics
-        this.target.beginPerfMetricRecord("Render Background Map");
-        this.renderBackgroundMap(commands, needComposite);
-        this.target.endPerfMetricRecord();
-        this.target.frameStatsCollector.endTime("backgroundTime");
-        // Enable clipping
-        this.target.beginPerfMetricRecord("Enable Clipping");
-        this.target.pushViewClip();
-        this.target.endPerfMetricRecord();
-        // Render volume classification first so that we only classify the reality data
-        this.target.frameStatsCollector.beginTime("classifiersTime");
-        this.target.beginPerfMetricRecord("Render VolumeClassification");
-        this.renderVolumeClassification(commands, compositeFlags, false);
-        this.target.endPerfMetricRecord();
-        this.target.frameStatsCollector.endTime("classifiersTime");
-        this.target.frameStatsCollector.beginTime("opaqueTime");
-        // Render layers
-        this.target.beginPerfMetricRecord("Render Opaque Layers");
-        this.renderLayers(commands, needComposite, 1 /* OpaqueLayers */);
-        this.target.endPerfMetricRecord();
-        // Render opaque geometry
-        this.target.frameStatsCollector.beginTime("onRenderOpaqueTime");
-        IModelFrameLifecycle.onRenderOpaque.raiseEvent({
-            commands,
-            needComposite,
-            compositeFlags,
-            fbo: this.getBackgroundFbo(needComposite),
-            frameBufferStack: System.instance.frameBufferStack,
-        });
-        this.target.frameStatsCollector.endTime("onRenderOpaqueTime");
-        // Render point cloud geometry with possible EDL (WebGL2 only)
-        if (System.instance.capabilities.isWebGL2) {
-            this.target.beginPerfMetricRecord("Render PointClouds");
-            this.renderPointClouds(commands, compositeFlags);
-            this.target.endPerfMetricRecord();
+        const needAO = 0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */);
+        const fbStack = System.instance.frameBufferStack;
+        if (renderForReadPixels || needAO) {
+            this._readPickDataFromPingPong = true;
+            fbStack.execute(needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll, true, this.useMsBuffers, () => {
+                this.drawPass(commands, 5 /* OpaqueGeneral */, true, 20 /* VolumeClassifiedRealityData */);
+            });
         }
-        // Render opaque geometry
-        this.target.beginPerfMetricRecord("Render Opaque");
-        this.renderOpaque(commands, compositeFlags, false);
-        this.target.endPerfMetricRecord();
-        this.target.frameStatsCollector.endTime("opaqueTime");
-        this.target.frameStatsCollector.beginTime("translucentTime");
+        else {
+            this._readPickDataFromPingPong = false;
+            fbStack.execute(needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor, true, this.useMsBuffers, () => {
+                this.drawPass(commands, 5 /* OpaqueGeneral */, false, 20 /* VolumeClassifiedRealityData */);
+            });
+        }
+    }
+    renderIndexedClassifierForReadPixels(cmds, state, renderForIntersectingVolumes, needComposite) {
+        this._readPickDataFromPingPong = true;
+        const fbo = (renderForIntersectingVolumes ? (needComposite ? this._fbos.idsAndZComposite : this._fbos.idsAndZ)
+            : (needComposite ? this._fbos.idsAndAltZComposite : this._fbos.idsAndAltZ));
+        System.instance.frameBufferStack.execute(fbo, true, false, () => {
+            System.instance.applyRenderState(state);
+            this.target.techniques.execute(this.target, cmds, 5 /* OpaqueGeneral */);
+        });
+        this._readPickDataFromPingPong = false;
+    }
+    clearTranslucent() {
+        System.instance.applyRenderState(this._noDepthMaskRenderState);
+        System.instance.frameBufferStack.execute(this._fbos.clearTranslucent, true, false, () => {
+            const params = getDrawParams(this.target, this._geom.clearTranslucent);
+            this.target.techniques.draw(params);
+        });
+    }
+    renderTranslucent(commands) {
+        System.instance.frameBufferStack.execute(this._fbos.translucent, true, false, () => {
+            this.drawPass(commands, 8 /* Translucent */);
+        });
+    }
+    getBackgroundFbo(needComposite) {
+        return needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor;
+    }
+    pingPong() {
+        if (this._fbos.opaqueAll.isMultisampled && this.useMsBuffers) {
+            // If we are multisampling we can just blit the FeatureId and DepthAndOrder MS buffers to their textures.
+            this._fbos.opaqueAll.blitMsBuffersToTextures(false, 1);
+            this._fbos.opaqueAll.blitMsBuffersToTextures(false, 2);
+        }
+        else {
+            System.instance.applyRenderState(this._noDepthMaskRenderState);
+            System.instance.frameBufferStack.execute(this._fbos.pingPong, true, this.useMsBuffers, () => {
+                const params = getDrawParams(this.target, this._geom.copyPickBuffers);
+                this.target.techniques.draw(params);
+            });
+        }
+    }
+    get antialiasSamples() { return this._antialiasSamples; }
+    get useMsBuffers() { return this._antialiasSamples > 1 && !this.target.isReadPixelsInProgress; }
+    enableVolumeClassifierFbos(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
+        this._fbos.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
+    }
+    disableVolumeClassifierFbos() {
+        this._fbos.disableVolumeClassifier();
+    }
+    /** This function generates a texture that contains ambient occlusion information to be applied later. */
+    renderAmbientOcclusion() {
+        const system = System.instance;
+        // Render unblurred ambient occlusion based on depth buffer
+        let fbo = this._fbos.occlusion;
+        this.target.beginPerfMetricRecord("Compute AO");
+        system.frameBufferStack.execute(fbo, true, false, () => {
+            System.instance.applyRenderState(RenderState.defaults);
+            const params = getDrawParams(this.target, this._geom.occlusion);
+            this.target.techniques.draw(params);
+        });
+        this.target.endPerfMetricRecord();
+        // Render the X-blurred ambient occlusion based on unblurred ambient occlusion
+        fbo = this._fbos.occlusionBlur;
+        this.target.beginPerfMetricRecord("Blur AO X");
+        system.frameBufferStack.execute(fbo, true, false, () => {
+            System.instance.applyRenderState(RenderState.defaults);
+            const params = getDrawParams(this.target, this._geom.occlusionXBlur);
+            this.target.techniques.draw(params);
+        });
+        this.target.endPerfMetricRecord();
+        // Render the Y-blurred ambient occlusion based on X-blurred ambient occlusion (render into original occlusion framebuffer)
+        fbo = this._fbos.occlusion;
+        this.target.beginPerfMetricRecord("Blur AO Y");
+        system.frameBufferStack.execute(fbo, true, false, () => {
+            System.instance.applyRenderState(RenderState.defaults);
+            const params = getDrawParams(this.target, this._geom.occlusionYBlur);
+            this.target.techniques.draw(params);
+        });
+        this.target.endPerfMetricRecord();
+    }
+    collectStatistics(stats) {
+        if (undefined !== this._depth)
+            stats.addTextureAttachment(this._depth.bytesUsed);
+        if (undefined !== this._depthMS)
+            stats.addTextureAttachment(this._depthMS.bytesUsed);
+        this._textures.collectStatistics(stats);
+        this._geom.collectStatistics(stats);
+    }
+    preDraw() {
+        const rect = this.target.viewRect;
+        const width = rect.width;
+        const height = rect.height;
+        const includeOcclusion = this.target.wantAmbientOcclusion;
+        const wantVolumeClassifier = (undefined !== this.target.activeVolumeClassifierProps);
+        let wantAntialiasSamples = this.target.antialiasSamples <= 1 ? 1 : this.target.antialiasSamples;
+        if (wantAntialiasSamples > System.instance.maxAntialiasSamples)
+            wantAntialiasSamples = System.instance.maxAntialiasSamples;
+        const changeAntialiasSamples = (this._antialiasSamples > 1 && wantAntialiasSamples > 1 && this._antialiasSamples !== wantAntialiasSamples);
+        // If not yet initialized, or dimensions changed, or antialiasing changed the number of samples, initialize.
+        if (undefined === this._textures.accumulation || width !== this._width || height !== this._height || changeAntialiasSamples) {
+            this._width = width;
+            this._height = height;
+            this._antialiasSamples = wantAntialiasSamples;
+            // init() first calls dispose(), which releases all of our fbos, textures, etc, and resets the _includeOcclusion flag.
+            if (!this.init()) {
+                assert(false, "Failed to initialize scene compositor");
+                return false;
+            }
+        }
+        else if (this._antialiasSamples !== wantAntialiasSamples) {
+            // Turn on or off multisampling.  Rather than just re-initializing, we can save the
+            // non multisampled textures & FBOs and just try to add or delete the multisampled ones.
+            this._antialiasSamples = wantAntialiasSamples;
+            if (wantVolumeClassifier && this._haveVolumeClassifier) {
+                // Multisampling and volume classification buffers are somewhat co-dependent so if volume classification is on
+                // and is staying on, just disable volume classifiers and let them get re-enabled later.
+                this.disableVolumeClassifierFbos();
+                this._geom.disableVolumeClassifier();
+                this._textures.disableVolumeClassifier();
+                if (undefined !== this._vcAltDepthStencil) {
+                    this._vcAltDepthStencil.dispose();
+                    this._vcAltDepthStencil = undefined;
+                }
+                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._fbos.disableOcclusion();
+                this._textures.disableOcclusion();
+                this._includeOcclusion = false;
+            }
+            if (this._antialiasSamples > 1) {
+                if (!this.enableMultiSampling()) {
+                    assert(false, "Failed to initialize multisampling buffers");
+                    return false;
+                }
+            }
+            else {
+                if (!this.disableMultiSampling()) {
+                    assert(false, "Failed to initialize multisampling buffers");
+                    return false;
+                }
+            }
+        }
+        // Allocate or free ambient occlusion-related resources if necessary
+        if (includeOcclusion !== this._includeOcclusion) {
+            this._includeOcclusion = includeOcclusion;
+            if (includeOcclusion) {
+                if (!this._textures.enableOcclusion(width, height, this._antialiasSamples)) {
+                    assert(false, "Failed to initialize occlusion textures");
+                    return false;
+                }
+                if (!this._fbos.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._fbos.disableOcclusion();
+                this._textures.disableOcclusion();
+            }
+        }
+        // Allocate or free volume classifier-related resources if necessary.
+        if (wantVolumeClassifier !== this._haveVolumeClassifier) {
+            if (wantVolumeClassifier) {
+                this._vcAltDepthStencil = System.instance.createDepthBuffer(width, height);
+                if (undefined !== this._depthMS)
+                    this._vcAltDepthStencilMS = System.instance.createDepthBuffer(width, height, this._antialiasSamples);
+                if (undefined === this._vcAltDepthStencil || (undefined !== this._depthMS && undefined === this._vcAltDepthStencilMS))
+                    return false;
+                if (!this._textures.enableVolumeClassifier(width, height, this._antialiasSamples))
+                    return false;
+                if (!this._geom.enableVolumeClassifier(this._textures, this._depth))
+                    return false;
+                this.enableVolumeClassifierFbos(this._textures, this._depth, this._vcAltDepthStencil, this._depthMS, this._vcAltDepthStencilMS);
+                this._haveVolumeClassifier = true;
+            }
+            else {
+                this.disableVolumeClassifierFbos();
+                this._geom.disableVolumeClassifier();
+                this._textures.disableVolumeClassifier();
+                if (undefined !== this._vcAltDepthStencil) {
+                    this._vcAltDepthStencil.dispose();
+                    this._vcAltDepthStencil = undefined;
+                }
+                this._haveVolumeClassifier = false;
+            }
+        }
+        return true;
+    }
+    draw(commands) {
+        if (!this.preDraw())
+            return;
+        const compositeFlags = commands.compositeFlags;
+        const needComposite = 0 /* None */ !== compositeFlags;
+        // Clear output targets
+        this.target.frameStatsCollector.beginTime("opaqueTime");
+        this.target.beginPerfMetricRecord("Clear Opaque");
+        this.clearOpaque(needComposite);
+        this.target.endPerfMetricRecord();
+        this.target.frameStatsCollector.endTime("opaqueTime");
+        this.target.frameStatsCollector.beginTime("backgroundTime"); // includes skybox
+        // Render the background
+        this.target.beginPerfMetricRecord("Render Background");
+        this.renderBackground(commands, needComposite);
+        this.target.endPerfMetricRecord();
+        // Render the sky box
+        this.target.beginPerfMetricRecord("Render Skybox");
+        this.renderSkyBox(commands, needComposite);
+        this.target.endPerfMetricRecord();
+        // Render the background map graphics
+        this.target.beginPerfMetricRecord("Render Background Map");
+        this.renderBackgroundMap(commands, needComposite);
+        this.target.endPerfMetricRecord();
+        this.target.frameStatsCollector.endTime("backgroundTime");
+        // Enable clipping
+        this.target.beginPerfMetricRecord("Enable Clipping");
+        this.target.pushViewClip();
+        this.target.endPerfMetricRecord();
+        // Render volume classification first so that we only classify the reality data
+        this.target.frameStatsCollector.beginTime("classifiersTime");
+        this.target.beginPerfMetricRecord("Render VolumeClassification");
+        this.renderVolumeClassification(commands, compositeFlags, false);
+        this.target.endPerfMetricRecord();
+        this.target.frameStatsCollector.endTime("classifiersTime");
+        this.target.frameStatsCollector.beginTime("opaqueTime");
+        // Render layers
+        this.target.beginPerfMetricRecord("Render Opaque Layers");
+        this.renderLayers(commands, needComposite, 1 /* OpaqueLayers */);
+        this.target.endPerfMetricRecord();
+        // Render opaque geometry
+        this.target.frameStatsCollector.beginTime("onRenderOpaqueTime");
+        IModelFrameLifecycle.onRenderOpaque.raiseEvent({
+            commands,
+            needComposite,
+            compositeFlags,
+            fbo: this.getBackgroundFbo(needComposite),
+            frameBufferStack: System.instance.frameBufferStack,
+        });
+        this.target.frameStatsCollector.endTime("onRenderOpaqueTime");
+        // Render point cloud geometry with possible EDL
+        this.target.beginPerfMetricRecord("Render PointClouds");
+        this.renderPointClouds(commands, compositeFlags);
+        this.target.endPerfMetricRecord();
+        // Render opaque geometry
+        this.target.beginPerfMetricRecord("Render Opaque");
+        this.renderOpaque(commands, compositeFlags, false);
+        this.target.endPerfMetricRecord();
+        this.target.frameStatsCollector.endTime("opaqueTime");
+        this.target.frameStatsCollector.beginTime("translucentTime");
         // Render translucent layers
         this.target.beginPerfMetricRecord("Render Translucent Layers");
         this.renderLayers(commands, needComposite, 7 /* TranslucentLayers */);
@@ -883,7 +1240,7 @@ class Compositor extends SceneCompositor {
         // (If *only* overlays exist, then clearOpaque() above already took care of this).
         if (haveRenderCommands) {
             const system = System.instance;
-            system.frameBufferStack.execute(this._frameBuffers.opaqueColor, true, this.useMsBuffers, () => {
+            system.frameBufferStack.execute(this._fbos.opaqueColor, true, this.useMsBuffers, () => {
                 system.applyRenderState(RenderState.defaults);
                 system.context.clearDepth(1.0);
                 system.context.clear(GL.BufferBit.Depth);
@@ -901,7 +1258,7 @@ class Compositor extends SceneCompositor {
     readPixels(rect, selector) {
         return PixelBuffer.create(rect, selector, this);
     }
-    readDepthAndOrder(rect) { return this.readFrameBuffer(rect, this._frameBuffers.depthAndOrder); }
+    readDepthAndOrder(rect) { return this.readFrameBuffer(rect, this._fbos.depthAndOrder); }
     readFeatureIds(rect) {
         const tex = this._textures.featureId;
         if (undefined === tex)
@@ -915,8 +1272,8 @@ class Compositor extends SceneCompositor {
         this.solarShadowMap.update(context);
     }
     get screenSpaceEffectFbo() {
-        assert(undefined !== this._frameBuffers.hilite);
-        return this._frameBuffers.hilite;
+        assert(undefined !== this._fbos.hilite);
+        return this._fbos.hilite;
     }
     readFrameBuffer(rect, fbo) {
         if (undefined === fbo || !Debug.isValidFrameBuffer)
@@ -941,7 +1298,7 @@ class Compositor extends SceneCompositor {
             && undefined === this._vcAltDepthStencil
             && !this._includeOcclusion
             && this._textures.isDisposed
-            && this._frameBuffers.isDisposed
+            && this._fbos.isDisposed
             && this._geom.isDisposed
             && !this._haveVolumeClassifier
             && this.solarShadowMap.isDisposed
@@ -960,7 +1317,7 @@ class Compositor extends SceneCompositor {
         this._vcAltDepthStencil = dispose(this._vcAltDepthStencil);
         this._includeOcclusion = false;
         dispose(this._textures);
-        dispose(this._frameBuffers);
+        dispose(this._fbos);
         dispose(this._geom);
         this._haveVolumeClassifier = false;
         this.eyeDomeLighting.reset();
@@ -974,7 +1331,7 @@ class Compositor extends SceneCompositor {
             this._depthMS = undefined;
         if (this._depth !== undefined) {
             return this._textures.init(this._width, this._height, this._antialiasSamples)
-                && this._frameBuffers.init(this._textures, this._depth, this._depthMS)
+                && this._fbos.init(this._textures, this._depth, this._depthMS)
                 && this._geom.init(this._textures)
                 && this.eyeDomeLighting.init(this._width, this._height, this._depth);
         }
@@ -986,9 +1343,15 @@ class Compositor extends SceneCompositor {
         this._depthMS = System.instance.createDepthBuffer(this._width, this._height, this._antialiasSamples);
         if (undefined === this._depthMS)
             return false;
-        return this._textures.enableMultiSampling(this._width, this._height, this._antialiasSamples);
+        if (!this._textures.enableMultiSampling(this._width, this._height, this._antialiasSamples))
+            return false;
+        assert(undefined !== this._depth && undefined !== this._depthMS);
+        return this._fbos.enableMultiSampling(this._textures, this._depth, this._depthMS);
     }
     disableMultiSampling() {
+        assert(undefined !== this._depth);
+        if (!this._fbos.disableMultiSampling(this._textures, this._depth))
+            return false;
         // Want to disable multisampling without deleting & reallocating other stuff.
         this._depthMS = dispose(this._depthMS);
         assert(undefined !== this._depth);
@@ -1134,7 +1497,7 @@ class Compositor extends SceneCompositor {
     }
     renderIndexedVolumeClassifier(cmdsByIndex, needComposite) {
         // Set the stencil for the given classifier stencil volume.
-        System.instance.frameBufferStack.execute(this._frameBuffers.stencilSet, false, this.useMsBuffers, () => {
+        System.instance.frameBufferStack.execute(this._fbos.stencilSet, false, this.useMsBuffers, () => {
             this.target.pushState(this._vcBranchState);
             System.instance.applyRenderState(this._vcSetStencilRenderState);
             this.target.techniques.executeForIndexedClassifier(this.target, cmdsByIndex, 6 /* Classification */);
@@ -1187,16 +1550,16 @@ class Compositor extends SceneCompositor {
             });
             return;
         }
-        if (undefined === this._frameBuffers.altZOnly || undefined === this._frameBuffers.stencilSet)
+        if (undefined === this._fbos.altZOnly || undefined === this._fbos.stencilSet)
             return;
         if (renderForReadPixels && this.target.vcSupportIntersectingVolumes) {
             // Clear the stencil.
-            fbStack.execute(this._frameBuffers.stencilSet, false, this.useMsBuffers, () => {
+            fbStack.execute(this._fbos.stencilSet, false, this.useMsBuffers, () => {
                 System.instance.context.clearStencil(0);
                 System.instance.context.clear(GL.BufferBit.Stencil);
             });
             if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
-                this._frameBuffers.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
+                this._fbos.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
             for (let i = 0; i < cmdsByIndex.length; i += numCmdsPerClassifier)
                 this.renderIndexedVolumeClassifier(cmdsByIndex.slice(i, i + numCmdsPerClassifier), needComposite);
             return;
@@ -1206,10 +1569,10 @@ class Compositor extends SceneCompositor {
         const doColorByElement = SpatialClassifierInsideDisplay.ElementColor === insideFlags || renderForReadPixels;
         const doColorByElementForIntersectingVolumes = this.target.vcSupportIntersectingVolumes;
         const needAltZ = (doColorByElement && !doColorByElementForIntersectingVolumes) || needOutsideDraw;
-        let zOnlyFbo = this._frameBuffers.stencilSet;
-        let volClassBlendFbo = this._frameBuffers.volClassCreateBlend;
+        let zOnlyFbo = this._fbos.stencilSet;
+        let volClassBlendFbo = this._fbos.volClassCreateBlend;
         let volClassBlendReadZTexture = this._vcAltDepthStencil.getHandle();
-        let volClassBlendReadZTextureFbo = this._frameBuffers.altZOnly;
+        let volClassBlendReadZTextureFbo = this._fbos.altZOnly;
         if (!needAltZ) {
             // Initialize the blend texture and the stencil.
             assert(undefined !== volClassBlendFbo);
@@ -1222,28 +1585,25 @@ class Compositor extends SceneCompositor {
         else {
             // If we are doing color-by-element for the inside do not care about intersecting volumes or we need to color the outside
             // then we need to copy the Z buffer and set up a different zbuffer/stencil to render in.
-            zOnlyFbo = this._frameBuffers.altZOnly;
-            volClassBlendFbo = this._frameBuffers.volClassCreateBlendAltZ;
+            zOnlyFbo = this._fbos.altZOnly;
+            volClassBlendFbo = this._fbos.volClassCreateBlendAltZ;
             assert(undefined !== volClassBlendFbo);
             volClassBlendReadZTexture = this._depth.getHandle();
-            volClassBlendReadZTextureFbo = this._frameBuffers.stencilSet;
+            volClassBlendReadZTextureFbo = this._fbos.stencilSet;
             if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
                 volClassBlendReadZTextureFbo.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
             // Copy the current Z into the Alt-Z.  At the same time go ahead and clear the stencil and the blend texture.
             fbStack.execute(volClassBlendFbo, true, this.useMsBuffers, () => {
                 this.target.pushState(this.target.decorationsState);
                 System.instance.applyRenderState(this._vcCopyZRenderState);
-                if (System.instance.capabilities.supportsFragDepth)
-                    this.target.techniques.draw(getDrawParams(this.target, this._geom.volClassCopyZ)); // This method uses the EXT_frag_depth extension
-                else
-                    this.target.techniques.draw(getDrawParams(this.target, this._geom.volClassCopyZWithPoints)); // This method draws GL_POINTS (1 per pixel) to set Z in vertex shader
+                this.target.techniques.draw(getDrawParams(this.target, this._geom.volClassCopyZ)); // This method uses the EXT_frag_depth extension
                 System.instance.bindTexture2d(TextureUnit.Zero, undefined);
                 this.target.popBranch();
             });
         }
         if (renderForReadPixels) {
             // Set the stencil for all of the classifier volumes.
-            System.instance.frameBufferStack.execute(this._frameBuffers.altZOnly, false, this.useMsBuffers, () => {
+            System.instance.frameBufferStack.execute(this._fbos.altZOnly, false, this.useMsBuffers, () => {
                 this.target.pushState(this._vcBranchState);
                 System.instance.applyRenderState(this._vcSetStencilRenderState);
                 this.target.techniques.execute(this.target, cmds, 6 /* Classification */);
@@ -1265,7 +1625,7 @@ class Compositor extends SceneCompositor {
             this.setAllStencilOps(this._vcColorRenderState, GL.StencilOperation.Keep); // don't clear the stencil so that all classifiers behind reality mesh will still draw
             this.target.activeVolumeClassifierTexture = this._geom.volClassCopyZ.texture;
             if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
-                this._frameBuffers.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
+                this._fbos.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
             this.renderIndexedClassifierForReadPixels(cmds, this._vcColorRenderState, false, needComposite);
             this.target.activeVolumeClassifierTexture = undefined;
             this._vcColorRenderState.flags.depthTest = false;
@@ -1360,7 +1720,7 @@ class Compositor extends SceneCompositor {
             }
             else {
                 if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
-                    this._frameBuffers.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
+                    this._fbos.stencilSet.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
                 fbStack.execute(volClassBlendFbo, false, this.useMsBuffers, () => {
                     // For coloring the inside by element color we will draw the inside using the the classifiers themselves.
                     // To do this we need to first clear our Alt-Z.  The shader will then test and write Z and will discard
@@ -1400,888 +1760,147 @@ class Compositor extends SceneCompositor {
         // if (cmdsSelected.length > 0 && insideFlags !== this.target.activeVolumeClassifierProps!.flags.selected) {
         if (!doColorByElement && cmdsSelected.length > 0 && insideFlags !== SpatialClassifierInsideDisplay.Hilite) { // assume selected ones are always hilited
             // Set the stencil using just the hilited volume classifiers.
-            fbStack.execute(this._frameBuffers.stencilSet, false, this.useMsBuffers, () => {
+            fbStack.execute(this._fbos.stencilSet, false, this.useMsBuffers, () => {
                 this.target.pushState(this._vcBranchState);
-                System.instance.applyRenderState(this._vcSetStencilRenderState);
-                if (needAltZ) {
-                    // If we are using the alternate Z then the stencil that goes with the original Z has not been cleared yet, so clear it here.
-                    System.instance.context.clearStencil(0);
-                    System.instance.context.clear(GL.BufferBit.Stencil);
-                }
-                this.target.techniques.execute(this.target, cmdsSelected, 6 /* Classification */);
-                this.target.popBranch();
-            });
-            if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
-                this._frameBuffers.altZOnly.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
-            fbStack.execute(this._frameBuffers.volClassCreateBlend, false, this.useMsBuffers, () => {
-                this._geom.volClassSetBlend.boundaryType = BoundaryType.Selected;
-                this._geom.volClassSetBlend.texture = this._vcAltDepthStencil.getHandle(); // need to attach the alt depth instead of the real one since it is bound to the frame buffer
-                this.target.pushState(this.target.decorationsState);
-                this._vcColorRenderState.flags.blend = false;
-                System.instance.applyRenderState(this._vcColorRenderState);
-                const params = getDrawParams(this.target, this._geom.volClassSetBlend);
-                this.target.techniques.draw(params);
-                this._vcColorRenderState.flags.blend = true;
-                this.target.popBranch();
-                System.instance.bindTexture2d(TextureUnit.Zero, undefined);
-            });
-        }
-        // Now modify the color of the reality mesh by using the blend texture to blend with it.
-        if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers) {
-            volClassBlendFbo.blitMsBuffersToTextures(false); // make sure the volClassBlend texture that we are about to read has been blitted
-        }
-        fbStack.execute(fboColorAndZ, false, this.useMsBuffers, () => {
-            this.target.pushState(this.target.decorationsState);
-            this._vcBlendRenderState.blend.setBlendFuncSeparate(GL.BlendFactor.SrcAlpha, GL.BlendFactor.Zero, GL.BlendFactor.OneMinusSrcAlpha, GL.BlendFactor.One);
-            System.instance.applyRenderState(this._vcBlendRenderState);
-            const params = getDrawParams(this.target, this._geom.volClassBlend);
-            this.target.techniques.draw(params);
-            this.target.popBranch();
-            System.instance.bindTexture2d(TextureUnit.Zero, undefined);
-        });
-        // Process the flashed classifier if there is one.
-        // Like the selected volumes, we do not need to do this step if we used by-element-color since the flashing is included in the element color.
-        const flashedClassifierCmds = extractFlashedVolumeClassifierCommands(this.target.flashedId, cmdsByIndex, numCmdsPerClassifier);
-        if (undefined !== flashedClassifierCmds && !doColorByElement) {
-            // Set the stencil for this one classifier.
-            fbStack.execute(this._frameBuffers.stencilSet, false, this.useMsBuffers, () => {
-                this.target.pushState(this._vcBranchState);
-                System.instance.applyRenderState(this._vcSetStencilRenderState);
-                this.target.techniques.executeForIndexedClassifier(this.target, flashedClassifierCmds, 5 /* OpaqueGeneral */);
-                this.target.popBranch();
-            });
-            // Process the stencil to flash the contents.
-            fbStack.execute(fboColorAndZ, true, this.useMsBuffers, () => {
-                this.target.pushState(this.target.decorationsState);
-                this._vcColorRenderState.blend.color = [1.0, 1.0, 1.0, this.target.flashIntensity * 0.2];
-                this._vcColorRenderState.blend.setBlendFuncSeparate(GL.BlendFactor.ConstAlpha, GL.BlendFactor.Zero, GL.BlendFactor.One, GL.BlendFactor.One);
-                System.instance.applyRenderState(this._vcColorRenderState);
-                const params = getDrawParams(this.target, this._geom.volClassColorStencil);
-                this.target.techniques.draw(params);
-                this.target.popBranch();
-            });
-        }
-    }
-    renderHilite(commands) {
-        const system = System.instance;
-        system.frameBufferStack.execute(this._frameBuffers.hilite, true, false, () => {
-            // Clear the hilite buffer.
-            system.context.clearColor(0, 0, 0, 0);
-            system.context.clear(GL.BufferBit.Color);
-            // Draw the normal hilite geometry.
-            this.drawPass(commands, 10 /* Hilite */);
-        });
-        // Process planar classifiers
-        const planarClassifierCmds = commands.getCommands(18 /* HilitePlanarClassification */);
-        if (0 !== planarClassifierCmds.length) {
-            system.frameBufferStack.execute(this._frameBuffers.hiliteUsingStencil, true, false, () => {
-                system.applyRenderState(this._opaqueRenderState);
-                this.target.techniques.execute(this.target, planarClassifierCmds, 18 /* HilitePlanarClassification */);
-            });
-        }
-        // Process the volume classifiers.
-        const vcHiliteCmds = commands.getCommands(16 /* HiliteClassification */);
-        if (0 !== vcHiliteCmds.length && undefined !== this._vcBranchState) {
-            // Set the stencil for the given classifier stencil volume.
-            system.frameBufferStack.execute(this._frameBuffers.stencilSet, false, false, () => {
-                this.target.pushState(this._vcBranchState);
-                system.applyRenderState(this._vcSetStencilRenderState);
-                this.target.techniques.execute(this.target, vcHiliteCmds, 10 /* Hilite */);
-                this.target.popBranch();
-            });
-            // Process the stencil for the hilite data.
-            system.frameBufferStack.execute(this._frameBuffers.hiliteUsingStencil, true, false, () => {
-                system.applyRenderState(this._vcPickDataRenderState);
-                this.target.techniques.execute(this.target, vcHiliteCmds, 10 /* Hilite */);
-            });
-        }
-    }
-    composite() {
-        System.instance.applyRenderState(RenderState.defaults);
-        const params = getDrawParams(this.target, this._geom.composite);
-        this.target.techniques.draw(params);
-    }
-    getRenderState(pass) {
-        switch (pass) {
-            case 1 /* OpaqueLayers */:
-            case 7 /* TranslucentLayers */:
-            case 11 /* OverlayLayers */:
-                // NB: During pick, we don't want blending - it will mess up our pick buffer data and we don't care about the color data.
-                // During normal draw, we don't use the pick buffers for anything, and we want color blending.
-                // (We get away with this because surfaces always draw before their edges, and we're not depth-testing, so edges always draw atop surfaces without pick buffer testing).
-                this._layerRenderState.flags.blend = !this.target.isReadPixelsInProgress;
-                // Transparent non-overlay Layers are drawn between opaque and translucent passes. Test depth, don't write it, so that they blend with opaque.
-                this._layerRenderState.flags.depthMask = 7 /* TranslucentLayers */ !== pass;
-                this._layerRenderState.depthFunc = (7 /* TranslucentLayers */ === pass) ? GL.DepthFunc.Default : GL.DepthFunc.Always;
-                return this._layerRenderState;
-            case 2 /* OpaqueLinear */:
-            case 3 /* OpaquePlanar */:
-            case 5 /* OpaqueGeneral */:
-            case 18 /* HilitePlanarClassification */:
-                return this._opaqueRenderState;
-            case 8 /* Translucent */:
-                return this._translucentRenderState;
-            case 10 /* Hilite */:
-                return this._hiliteRenderState;
-            case 15 /* BackgroundMap */:
-                return this._backgroundMapRenderState;
-            case 4 /* PointClouds */:
-                return this._pointCloudRenderState;
-            default:
-                return this._noDepthMaskRenderState;
-        }
-    }
-    drawPass(commands, pass, pingPong = false, cmdPass = 255 /* None */) {
-        const cmds = commands.getCommands(255 /* None */ !== cmdPass ? cmdPass : pass);
-        if (0 === cmds.length) {
-            return;
-        }
-        else if (pingPong) {
-            this.pingPong();
-        }
-        System.instance.applyRenderState(this.getRenderState(pass));
-        this.target.techniques.execute(this.target, cmds, pass);
-    }
-}
-class MRTFrameBuffers extends FrameBuffers {
-    init(textures, depth, depthMs) {
-        if (!super.init(textures, depth, depthMs))
-            return false;
-        assert(undefined === this.opaqueAll);
-        if (!this.initPotentialMSMRTFbos(textures, depth, depthMs))
-            return false;
-        assert(undefined !== textures.accumulation && undefined !== textures.revealage);
-        const colors = [textures.accumulation, textures.revealage];
-        this.translucent = FrameBuffer.create(colors, depth);
-        this.clearTranslucent = FrameBuffer.create(colors);
-        // We borrow the SceneCompositor's accum and revealage textures for the surface pass.
-        // First we render edges, writing to our textures.
-        // Then we copy our textures to borrowed textures.
-        // Finally we render surfaces, writing to our textures and reading from borrowed textures.
-        assert(undefined !== textures.accumulation && undefined !== textures.revealage);
-        const pingPong = [textures.accumulation, textures.revealage];
-        this.pingPong = FrameBuffer.create(pingPong);
-        return undefined !== this.translucent
-            && undefined !== this.clearTranslucent
-            && undefined !== this.pingPong;
-    }
-    initPotentialMSMRTFbos(textures, depth, depthMs) {
-        const boundColor = System.instance.frameBufferStack.currentColorBuffer;
-        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);
-            colorAndPick[0] = textures.color;
-            this.opaqueAndCompositeAll = FrameBuffer.create(colorAndPick, depth);
-        }
-        else {
-            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);
-            colorAndPick[0] = textures.color;
-            this.opaqueAndCompositeAll = FrameBuffer.create(colorAndPick, depth, colorAndPickMsBuffs, colorAndPickFilters, depthMs);
-        }
-        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)
-            return;
-        super.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
-        if (undefined !== this.opaqueAll && undefined !== this.opaqueAndCompositeAll) {
-            if (undefined !== volClassDepth) {
-                let ids = [this.opaqueAll.getColor(0), this.opaqueAll.getColor(1)];
-                this.idsAndZ = FrameBuffer.create(ids, depth);
-                this.idsAndAltZ = FrameBuffer.create(ids, volClassDepth);
-                ids = [this.opaqueAndCompositeAll.getColor(0), this.opaqueAndCompositeAll.getColor(1)];
-                this.idsAndZComposite = FrameBuffer.create(ids, depth);
-                this.idsAndAltZComposite = FrameBuffer.create(ids, volClassDepth);
-            }
-        }
-    }
-    disableVolumeClassifier() {
-        super.disableVolumeClassifier();
-        if (undefined !== this.idsAndZ) {
-            this.idsAndZ = dispose(this.idsAndZ);
-            this.idsAndAltZ = dispose(this.idsAndAltZ);
-            this.idsAndZComposite = dispose(this.idsAndZComposite);
-            this.idsAndAltZComposite = dispose(this.idsAndAltZComposite);
-        }
-    }
-    enableMultiSampling(textures, depth, depthMS) {
-        super.enableMultiSampling(textures, depth, depthMS);
-        this.opaqueAll = dispose(this.opaqueAll);
-        this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAll);
-        return this.initPotentialMSMRTFbos(textures, depth, depthMS);
-    }
-    disableMultiSampling(textures, depth) {
-        this.opaqueAll = dispose(this.opaqueAll);
-        this.opaqueAndCompositeAll = dispose(this.opaqueAndCompositeAll);
-        if (!this.initPotentialMSMRTFbos(textures, depth, undefined))
-            return false;
-        return super.disableMultiSampling(textures, depth);
-    }
-    get isDisposed() {
-        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
-            && undefined === this.idsAndAltZ
-            && undefined === this.idsAndZComposite
-            && undefined === this.idsAndAltZComposite
-            && undefined === this.edlDrawCol;
-    }
-    dispose() {
-        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);
-        this.idsAndAltZ = dispose(this.idsAndAltZ);
-        this.idsAndZComposite = dispose(this.idsAndZComposite);
-        this.idsAndAltZComposite = dispose(this.idsAndAltZComposite);
-        this.edlDrawCol = dispose(this.edlDrawCol);
-    }
-}
-class MRTGeometry extends Geometry {
-    collectStatistics(stats) {
-        super.collectStatistics(stats);
-        collectGeometryStatistics(this.copyPickBuffers, stats);
-        collectGeometryStatistics(this.clearTranslucent, stats);
-        collectGeometryStatistics(this.clearPickAndColor, stats);
-    }
-    init(textures) {
-        if (!super.init(textures))
-            return false;
-        assert(undefined === this.copyPickBuffers);
-        this.copyPickBuffers = CopyPickBufferGeometry.createGeometry(textures.featureId.getHandle(), textures.depthAndOrder.getHandle());
-        this.clearTranslucent = ViewportQuadGeometry.create(16 /* OITClearTranslucent */);
-        this.clearPickAndColor = ViewportQuadGeometry.create(21 /* ClearPickAndColor */);
-        return undefined !== this.copyPickBuffers && undefined !== this.clearTranslucent && undefined !== this.clearPickAndColor;
-    }
-    get isDisposed() {
-        return super.isDisposed
-            && undefined === this.copyPickBuffers
-            && undefined === this.clearTranslucent
-            && undefined === this.clearPickAndColor;
-    }
-    dispose() {
-        super.dispose();
-        this.copyPickBuffers = dispose(this.copyPickBuffers);
-        this.clearTranslucent = dispose(this.clearTranslucent);
-        this.clearPickAndColor = dispose(this.clearPickAndColor);
-    }
-}
-// SceneCompositor used when multiple render targets are supported (WEBGL_draw_buffers exists and supports at least 4 color attachments).
-class MRTCompositor extends Compositor {
-    constructor(target) {
-        super(target, new MRTFrameBuffers(), new MRTGeometry());
-    }
-    get currentRenderTargetIndex() {
-        assert(false, "MRT is supported");
-        return 0;
-    }
-    set currentRenderTargetIndex(_index) {
-        assert(false, "MRT is supported");
-    }
-    get featureIds() { return this.getSamplerTexture(this._readPickDataFromPingPong ? 0 : 1); }
-    get depthAndOrder() { return this.getSamplerTexture(this._readPickDataFromPingPong ? 1 : 2); }
-    get _fbos() { return this._frameBuffers; }
-    get _geometry() { return this._geom; }
-    enableVolumeClassifierFbos(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
-        this._fbos.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
-    }
-    disableVolumeClassifierFbos() { this._fbos.disableVolumeClassifier(); }
-    enableMultiSampling() {
-        if (!super.enableMultiSampling())
-            return false;
-        assert(undefined !== this._depth && undefined !== this._depthMS);
-        return this._fbos.enableMultiSampling(this._textures, this._depth, this._depthMS);
-    }
-    disableMultiSampling() {
-        assert(undefined !== this._depth);
-        if (!this._fbos.disableMultiSampling(this._textures, this._depth))
-            return false;
-        return super.disableMultiSampling();
-    }
-    clearOpaque(needComposite) {
-        const fbo = needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll;
-        const system = System.instance;
-        system.frameBufferStack.execute(fbo, true, this.useMsBuffers, () => {
-            // Clear pick data buffers to 0's and color buffer to background color
-            // (0,0,0,0) in elementID0 and ElementID1 buffers indicates invalid element id
-            // (0,0,0,0) in DepthAndOrder buffer indicates render order 0 and encoded depth of 0 (= far plane)
-            system.applyRenderState(this._noDepthMaskRenderState);
-            const params = getDrawParams(this.target, this._geometry.clearPickAndColor);
-            this.target.techniques.draw(params);
-            // Clear depth buffer
-            system.applyRenderState(RenderState.defaults); // depthMask == true.
-            system.context.clearDepth(1.0);
-            system.context.clear(GL.BufferBit.Depth);
-        });
-    }
-    renderPointClouds(commands, compositeFlags) {
-        var _a, _b;
-        const is3d = 2 /* Perspective */ === this.target.uniforms.frustum.type;
-        // separate individual point clouds and get their point cloud settings
-        const pointClouds = [];
-        let pcs;
-        const cmds = commands.getCommands(4 /* PointClouds */);
-        let curPC;
-        let pushDepth = 0;
-        for (const cmd of cmds) {
-            if ("pushBranch" === cmd.opcode) { // should be first command
-                ++pushDepth;
-                if (pushDepth === 1) {
-                    pcs = (_a = cmd.branch.branch.realityModelDisplaySettings) === null || _a === void 0 ? void 0 : _a.pointCloud;
-                    this.target.uniforms.realityModel.pointCloud.updateRange(cmd.branch.branch.realityModelRange, this.target, cmd.branch.localToWorldTransform, is3d);
-                    pointClouds.push(curPC = { pcs, cmds: [cmd] });
-                }
-                else {
-                    assert(undefined !== curPC);
-                    curPC.cmds.push(cmd);
-                }
-            }
-            else {
-                if ("popBranch" === cmd.opcode)
-                    --pushDepth;
-                assert(undefined !== curPC);
-                curPC.cmds.push(cmd);
-            }
-        }
-        const needComposite = 0 /* None */ !== compositeFlags;
-        const fbo = (needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor);
-        const useMsBuffers = fbo.isMultisampled && this.useMsBuffers;
-        const system = System.instance;
-        const fbStack = system.frameBufferStack;
-        this._readPickDataFromPingPong = false;
-        for (const pc of pointClouds) {
-            pcs = pc.pcs;
-            let edlOn = (pcs === null || pcs === void 0 ? void 0 : pcs.edlMode) !== "off" && is3d;
-            if (edlOn) {
-                if (undefined === this._textures.hilite)
-                    edlOn = false;
-                else {
-                    // create fbo on fly if not present, or has changed (from MS)
-                    // ###TODO consider not drawing point clouds to MS buffers, at least if EDL, it isn't worth the overhead.
-                    //         would have to blit depth before draw, use depth for draw, then run shader to copy depth back to MSAA
-                    //         at end, wherever color buf changed (test alpha, else discard)
-                    //         this would also simplify this code considerably
-                    let drawColBufs;
-                    if (undefined !== this._fbos.edlDrawCol)
-                        drawColBufs = this._fbos.edlDrawCol.getColorTargets(useMsBuffers, 0);
-                    if (undefined === this._fbos.edlDrawCol || this._textures.hilite !== (drawColBufs === null || drawColBufs === void 0 ? void 0 : drawColBufs.tex) || this._textures.hiliteMsBuff !== drawColBufs.msBuf) {
-                        this._fbos.edlDrawCol = dispose(this._fbos.edlDrawCol);
-                        const filters = [GL.MultiSampling.Filter.Linear];
-                        if (useMsBuffers)
-                            this._fbos.edlDrawCol = FrameBuffer.create([this._textures.hilite], this._depth, useMsBuffers && this._textures.hiliteMsBuff ? [this._textures.hiliteMsBuff] : undefined, filters, this._depthMS);
-                        else
-                            this._fbos.edlDrawCol = FrameBuffer.create([this._textures.hilite], this._depth);
-                    }
-                    if (undefined === this._fbos.edlDrawCol)
-                        edlOn = false;
-                    else { // can draw EDL
-                        // first draw pointcloud to borrowed hilite texture(MS) and regular depth(MS) buffers
-                        fbStack.execute(this._fbos.edlDrawCol, true, useMsBuffers, () => {
-                            system.context.clearColor(0, 0, 0, 0);
-                            system.context.clear(GL.BufferBit.Color);
-                            system.applyRenderState(this.getRenderState(4 /* PointClouds */));
-                            this.target.techniques.execute(this.target, pc.cmds, 4 /* PointClouds */);
-                        });
-                        if (useMsBuffers)
-                            this._fbos.edlDrawCol.blitMsBuffersToTextures(true, 0); // need to read the non-MS depth and hilite buffers
-                        // next process buffers to generate EDL (depth buffer is passed during init)
-                        this.target.beginPerfMetricRecord("Calc EDL"); // ### todo keep? (probably)
-                        const sts = this.eyeDomeLighting.draw({
-                            edlMode: ((_b = pc.pcs) === null || _b === void 0 ? void 0 : _b.edlMode) === "full" ? EDLMode.Full : EDLMode.On,
-                            edlFilter: !!(pcs === null || pcs === void 0 ? void 0 : pcs.edlFilter),
-                            useMsBuffers,
-                            inputTex: this._textures.hilite,
-                            curFbo: fbo,
-                        });
-                        this.target.endPerfMetricRecord();
-                        if (!sts) {
-                            edlOn = false;
-                        }
-                    }
-                }
-            }
-            if (!edlOn) {
-                // draw the regular way
-                fbStack.execute(fbo, true, useMsBuffers, () => {
-                    system.applyRenderState(this.getRenderState(4 /* PointClouds */));
-                    this.target.techniques.execute(this.target, pc.cmds, 4 /* PointClouds */);
-                });
-            }
-        }
-    }
-    renderOpaque(commands, compositeFlags, renderForReadPixels) {
-        if (0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */) && !renderForReadPixels) {
-            this.renderOpaqueAO(commands);
-            return;
-        }
-        const needComposite = 0 /* None */ !== compositeFlags;
-        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);
-        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);
-            if (renderForReadPixels) {
-                this.drawPass(commands, 4 /* PointClouds */, true); // don't need EDL for this
-                this.drawPass(commands, 5 /* OpaqueGeneral */, true);
-                if (useMsBuffers)
-                    fbo.blitMsBuffersToTextures(true);
-            }
-        });
-        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) {
-            fbo = (needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor);
-            fbStack.execute(fbo, true, useMsBuffers, () => {
-                this.drawPass(commands, 5 /* OpaqueGeneral */, false);
-                this.drawPass(commands, 9 /* HiddenEdge */, false);
-            });
-            // assume we are done with MS at this point, so update the non-MS buffers
-            if (useMsBuffers)
-                fbo.blitMsBuffersToTextures(needComposite);
-        }
-    }
-    renderOpaqueAO(commands) {
-        const fbStack = System.instance.frameBufferStack;
-        const haveHiddenEdges = 0 !== commands.getCommands(9 /* 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, 5 /* 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, 5 /* OpaqueGeneral */, false);
-            if (haveHiddenEdges)
-                this.drawPass(commands, 9 /* 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, 9 /* 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);
-        const useMsBuffers = 1 /* OpaqueLayers */ === pass && fbo.isMultisampled && this.useMsBuffers;
-        this._readPickDataFromPingPong = !useMsBuffers;
-        System.instance.frameBufferStack.execute(fbo, true, useMsBuffers, () => {
-            this.drawPass(commands, pass, true);
-        });
-        this._readPickDataFromPingPong = false;
-    }
-    renderForVolumeClassification(commands, compositeFlags, renderForReadPixels) {
-        const needComposite = 0 /* None */ !== compositeFlags;
-        const needAO = 0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */);
-        const fbStack = System.instance.frameBufferStack;
-        if (renderForReadPixels || needAO) {
-            this._readPickDataFromPingPong = true;
-            fbStack.execute(needComposite ? this._fbos.opaqueAndCompositeAll : this._fbos.opaqueAll, true, this.useMsBuffers, () => {
-                this.drawPass(commands, 5 /* OpaqueGeneral */, true, 20 /* VolumeClassifiedRealityData */);
+                System.instance.applyRenderState(this._vcSetStencilRenderState);
+                if (needAltZ) {
+                    // If we are using the alternate Z then the stencil that goes with the original Z has not been cleared yet, so clear it here.
+                    System.instance.context.clearStencil(0);
+                    System.instance.context.clear(GL.BufferBit.Stencil);
+                }
+                this.target.techniques.execute(this.target, cmdsSelected, 6 /* Classification */);
+                this.target.popBranch();
             });
-        }
-        else {
-            this._readPickDataFromPingPong = false;
-            fbStack.execute(needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor, true, this.useMsBuffers, () => {
-                this.drawPass(commands, 5 /* OpaqueGeneral */, false, 20 /* VolumeClassifiedRealityData */);
+            if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers)
+                this._fbos.altZOnly.blitMsBuffersToTextures(true, -1); // make sure that the Z buffer that we are about to read has been blitted
+            fbStack.execute(this._fbos.volClassCreateBlend, false, this.useMsBuffers, () => {
+                this._geom.volClassSetBlend.boundaryType = BoundaryType.Selected;
+                this._geom.volClassSetBlend.texture = this._vcAltDepthStencil.getHandle(); // need to attach the alt depth instead of the real one since it is bound to the frame buffer
+                this.target.pushState(this.target.decorationsState);
+                this._vcColorRenderState.flags.blend = false;
+                System.instance.applyRenderState(this._vcColorRenderState);
+                const params = getDrawParams(this.target, this._geom.volClassSetBlend);
+                this.target.techniques.draw(params);
+                this._vcColorRenderState.flags.blend = true;
+                this.target.popBranch();
+                System.instance.bindTexture2d(TextureUnit.Zero, undefined);
             });
         }
-    }
-    renderIndexedClassifierForReadPixels(cmds, state, renderForIntersectingVolumes, needComposite) {
-        this._readPickDataFromPingPong = true;
-        const fbo = (renderForIntersectingVolumes ? (needComposite ? this._fbos.idsAndZComposite : this._fbos.idsAndZ)
-            : (needComposite ? this._fbos.idsAndAltZComposite : this._fbos.idsAndAltZ));
-        System.instance.frameBufferStack.execute(fbo, true, false, () => {
-            System.instance.applyRenderState(state);
-            this.target.techniques.execute(this.target, cmds, 5 /* OpaqueGeneral */);
-        });
-        this._readPickDataFromPingPong = false;
-    }
-    clearTranslucent() {
-        System.instance.applyRenderState(this._noDepthMaskRenderState);
-        System.instance.frameBufferStack.execute(this._fbos.clearTranslucent, true, false, () => {
-            const params = getDrawParams(this.target, this._geometry.clearTranslucent);
+        // Now modify the color of the reality mesh by using the blend texture to blend with it.
+        if (this._antialiasSamples > 1 && undefined !== this._depthMS && this.useMsBuffers) {
+            volClassBlendFbo.blitMsBuffersToTextures(false); // make sure the volClassBlend texture that we are about to read has been blitted
+        }
+        fbStack.execute(fboColorAndZ, false, this.useMsBuffers, () => {
+            this.target.pushState(this.target.decorationsState);
+            this._vcBlendRenderState.blend.setBlendFuncSeparate(GL.BlendFactor.SrcAlpha, GL.BlendFactor.Zero, GL.BlendFactor.OneMinusSrcAlpha, GL.BlendFactor.One);
+            System.instance.applyRenderState(this._vcBlendRenderState);
+            const params = getDrawParams(this.target, this._geom.volClassBlend);
             this.target.techniques.draw(params);
+            this.target.popBranch();
+            System.instance.bindTexture2d(TextureUnit.Zero, undefined);
         });
-    }
-    renderTranslucent(commands) {
-        System.instance.frameBufferStack.execute(this._fbos.translucent, true, false, () => {
-            this.drawPass(commands, 8 /* Translucent */);
-        });
-    }
-    pingPong() {
-        if (this._fbos.opaqueAll.isMultisampled && this.useMsBuffers) {
-            // If we are multisampling we can just blit the FeatureId and DepthAndOrder MS buffers to their textures.
-            this._fbos.opaqueAll.blitMsBuffersToTextures(false, 1);
-            this._fbos.opaqueAll.blitMsBuffersToTextures(false, 2);
-        }
-        else {
-            System.instance.applyRenderState(this._noDepthMaskRenderState);
-            System.instance.frameBufferStack.execute(this._fbos.pingPong, true, this.useMsBuffers, () => {
-                const params = getDrawParams(this.target, this._geometry.copyPickBuffers);
+        // Process the flashed classifier if there is one.
+        // Like the selected volumes, we do not need to do this step if we used by-element-color since the flashing is included in the element color.
+        const flashedClassifierCmds = extractFlashedVolumeClassifierCommands(this.target.flashedId, cmdsByIndex, numCmdsPerClassifier);
+        if (undefined !== flashedClassifierCmds && !doColorByElement) {
+            // Set the stencil for this one classifier.
+            fbStack.execute(this._fbos.stencilSet, false, this.useMsBuffers, () => {
+                this.target.pushState(this._vcBranchState);
+                System.instance.applyRenderState(this._vcSetStencilRenderState);
+                this.target.techniques.executeForIndexedClassifier(this.target, flashedClassifierCmds, 5 /* OpaqueGeneral */);
+                this.target.popBranch();
+            });
+            // Process the stencil to flash the contents.
+            fbStack.execute(fboColorAndZ, true, this.useMsBuffers, () => {
+                this.target.pushState(this.target.decorationsState);
+                this._vcColorRenderState.blend.color = [1.0, 1.0, 1.0, this.target.flashIntensity * 0.2];
+                this._vcColorRenderState.blend.setBlendFuncSeparate(GL.BlendFactor.ConstAlpha, GL.BlendFactor.Zero, GL.BlendFactor.One, GL.BlendFactor.One);
+                System.instance.applyRenderState(this._vcColorRenderState);
+                const params = getDrawParams(this.target, this._geom.volClassColorStencil);
                 this.target.techniques.draw(params);
+                this.target.popBranch();
             });
         }
     }
-    getBackgroundFbo(needComposite) { return needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor; }
-    get _samplerFbo() { return this._readPickDataFromPingPong ? this._fbos.pingPong : this._fbos.opaqueAll; }
-    getSamplerTexture(index) { return this._samplerFbo.getColor(index); }
-}
-class MPFrameBuffers extends FrameBuffers {
-    init(textures, depth) {
-        if (!super.init(textures, depth, undefined))
-            return false;
-        assert(undefined === this.accumulation);
-        this.accumulation = FrameBuffer.create([textures.accumulation], depth);
-        this.revealage = FrameBuffer.create([textures.revealage], depth);
-        this.featureId = FrameBuffer.create([textures.featureId], depth);
-        return undefined !== this.accumulation && undefined !== this.revealage && undefined !== this.featureId;
-    }
-    enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
-        super.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
-        if (undefined !== this.featureId) {
-            this.featureIdWithDepth = FrameBuffer.create([this.featureId.getColor(0)], depth);
-            this.featureIdWithDepthAltZ = FrameBuffer.create([this.featureId.getColor(0)], volClassDepth);
+    renderHilite(commands) {
+        const system = System.instance;
+        system.frameBufferStack.execute(this._fbos.hilite, true, false, () => {
+            // Clear the hilite buffer.
+            system.context.clearColor(0, 0, 0, 0);
+            system.context.clear(GL.BufferBit.Color);
+            // Draw the normal hilite geometry.
+            this.drawPass(commands, 10 /* Hilite */);
+        });
+        // Process planar classifiers
+        const planarClassifierCmds = commands.getCommands(18 /* HilitePlanarClassification */);
+        if (0 !== planarClassifierCmds.length) {
+            system.frameBufferStack.execute(this._fbos.hiliteUsingStencil, true, false, () => {
+                system.applyRenderState(this._opaqueRenderState);
+                this.target.techniques.execute(this.target, planarClassifierCmds, 18 /* HilitePlanarClassification */);
+            });
         }
-    }
-    disableVolumeClassifier() {
-        super.disableVolumeClassifier();
-        if (undefined !== this.featureIdWithDepth) {
-            this.featureIdWithDepth = dispose(this.featureIdWithDepth);
-            this.featureIdWithDepthAltZ = dispose(this.featureIdWithDepthAltZ);
+        // Process the volume classifiers.
+        const vcHiliteCmds = commands.getCommands(16 /* HiliteClassification */);
+        if (0 !== vcHiliteCmds.length && undefined !== this._vcBranchState) {
+            // Set the stencil for the given classifier stencil volume.
+            system.frameBufferStack.execute(this._fbos.stencilSet, false, false, () => {
+                this.target.pushState(this._vcBranchState);
+                system.applyRenderState(this._vcSetStencilRenderState);
+                this.target.techniques.execute(this.target, vcHiliteCmds, 10 /* Hilite */);
+                this.target.popBranch();
+            });
+            // Process the stencil for the hilite data.
+            system.frameBufferStack.execute(this._fbos.hiliteUsingStencil, true, false, () => {
+                system.applyRenderState(this._vcPickDataRenderState);
+                this.target.techniques.execute(this.target, vcHiliteCmds, 10 /* Hilite */);
+            });
         }
     }
-    get isDisposed() {
-        return super.isDisposed
-            && undefined === this.accumulation
-            && undefined === this.revealage
-            && undefined === this.featureId
-            && undefined === this.featureIdWithDepth
-            && undefined === this.featureIdWithDepthAltZ;
-    }
-    dispose() {
-        super.dispose();
-        this.accumulation = dispose(this.accumulation);
-        this.revealage = dispose(this.revealage);
-        this.featureId = dispose(this.featureId);
-        this.disableVolumeClassifier();
-    }
-}
-class MPGeometry extends Geometry {
-    collectStatistics(stats) {
-        super.collectStatistics(stats);
-        collectGeometryStatistics(this.copyColor, stats);
-    }
-    init(textures) {
-        if (!super.init(textures))
-            return false;
-        assert(undefined === this.copyColor);
-        this.copyColor = SingleTexturedViewportQuadGeometry.createGeometry(textures.featureId.getHandle(), 18 /* CopyColor */);
-        return undefined !== this.copyColor;
-    }
-    get isDisposed() { return super.isDisposed && undefined === this.copyColor; }
-    dispose() {
-        super.dispose();
-        this.copyColor = dispose(this.copyColor);
-    }
-}
-// Compositor used when multiple render targets are not supported (WEBGL_draw_buffers not available or fewer than 4 color attachments supported).
-// This falls back to multi-pass rendering in place of MRT rendering, which has obvious performance implications.
-// The chief use case is iOS.
-class MPCompositor extends Compositor {
-    constructor(target) {
-        super(target, new MPFrameBuffers(), new MPGeometry());
-        this._currentRenderTargetIndex = 0;
-        this._drawMultiPassDepth = true;
-        this._opaqueRenderStateNoZWt = new RenderState();
-        this._scratchBgColor = new FloatRgba();
-        this._opaqueRenderStateNoZWt.flags.depthTest = true;
-        this._opaqueRenderStateNoZWt.flags.depthMask = false;
+    composite() {
+        System.instance.applyRenderState(RenderState.defaults);
+        const params = getDrawParams(this.target, this._geom.composite);
+        this.target.techniques.draw(params);
     }
     getRenderState(pass) {
         switch (pass) {
+            case 1 /* OpaqueLayers */:
+            case 7 /* TranslucentLayers */:
+            case 11 /* OverlayLayers */:
+                // NB: During pick, we don't want blending - it will mess up our pick buffer data and we don't care about the color data.
+                // During normal draw, we don't use the pick buffers for anything, and we want color blending.
+                // (We get away with this because surfaces always draw before their edges, and we're not depth-testing, so edges always draw atop surfaces without pick buffer testing).
+                this._layerRenderState.flags.blend = !this.target.isReadPixelsInProgress;
+                // Transparent non-overlay Layers are drawn between opaque and translucent passes. Test depth, don't write it, so that they blend with opaque.
+                this._layerRenderState.flags.depthMask = 7 /* TranslucentLayers */ !== pass;
+                this._layerRenderState.depthFunc = (7 /* TranslucentLayers */ === pass) ? GL.DepthFunc.Default : GL.DepthFunc.Always;
+                return this._layerRenderState;
             case 2 /* OpaqueLinear */:
             case 3 /* OpaquePlanar */:
             case 5 /* OpaqueGeneral */:
-                return this._drawMultiPassDepth ? this._opaqueRenderState : this._opaqueRenderStateNoZWt;
+            case 18 /* HilitePlanarClassification */:
+                return this._opaqueRenderState;
+            case 8 /* Translucent */:
+                return this._translucentRenderState;
+            case 10 /* Hilite */:
+                return this._hiliteRenderState;
+            case 15 /* BackgroundMap */:
+                return this._backgroundMapRenderState;
+            case 4 /* PointClouds */:
+                return this._pointCloudRenderState;
+            default:
+                return this._noDepthMaskRenderState;
         }
-        return super.getRenderState(pass);
-    }
-    get _fbos() { return this._frameBuffers; }
-    get _geometry() { return this._geom; }
-    get currentRenderTargetIndex() { return this._currentRenderTargetIndex; }
-    set currentRenderTargetIndex(index) { this._currentRenderTargetIndex = index; }
-    get featureIds() { return this._readPickDataFromPingPong ? this._textures.accumulation : this._textures.featureId; }
-    get depthAndOrder() { return this._readPickDataFromPingPong ? this._textures.revealage : this._textures.depthAndOrder; }
-    getBackgroundFbo(needComposite) { return needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor; }
-    enableVolumeClassifierFbos(textures, depth, volClassDepth, depthMS, volClassDepthMS) {
-        this._fbos.enableVolumeClassifier(textures, depth, volClassDepth, depthMS, volClassDepthMS);
-    }
-    disableVolumeClassifierFbos() { this._fbos.disableVolumeClassifier(); }
-    clearOpaque(needComposite) {
-        const bg = this._scratchBgColor;
-        this.target.uniforms.style.cloneBackgroundRgba(bg);
-        this.clearFbo(needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor, bg.red, bg.green, bg.blue, bg.alpha, true);
-        this.clearFbo(this._fbos.depthAndOrder, 0, 0, 0, 0, false);
-        this.clearFbo(this._fbos.featureId, 0, 0, 0, 0, false);
-    }
-    clearHiddenPick() {
     }
-    renderPointClouds(_commands, _compositeFlags) { }
-    renderOpaque(commands, compositeFlags, renderForReadPixels) {
-        if (0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */) && !renderForReadPixels) {
-            this.renderOpaqueAO(commands);
+    drawPass(commands, pass, pingPong = false, cmdPass = 255 /* None */) {
+        const cmds = commands.getCommands(255 /* None */ !== cmdPass ? cmdPass : pass);
+        if (0 === cmds.length) {
             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;
-        const needAO = 0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */);
-        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)
-            this.drawOpaquePass(colorFbo, commands, 5 /* OpaqueGeneral */, true);
-        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
-                this.drawPass(commands, 5 /* OpaqueGeneral */, false);
-                this.drawPass(commands, 9 /* HiddenEdge */, false);
-            });
-        }
-    }
-    renderOpaqueAO(commands) {
-        const fbStack = System.instance.frameBufferStack;
-        const haveHiddenEdges = 0 !== commands.getCommands(9 /* 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, 5 /* 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, 5 /* OpaqueGeneral */, false);
-            if (haveHiddenEdges)
-                this.drawPass(commands, 9 /* 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, 9 /* HiddenEdge */, false));
-            this._drawMultiPassDepth = false;
-            this._currentRenderTargetIndex = 2;
-            fbStack.execute(this._fbos.revealage, true, false, () => this.drawPass(commands, 9 /* 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;
-        const colorFbo = needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor;
-        this.drawOpaquePass(colorFbo, commands, pass, true);
-        this._readPickDataFromPingPong = false;
-    }
-    renderForVolumeClassification(commands, compositeFlags, renderForReadPixels) {
-        const needComposite = 0 /* None */ !== compositeFlags;
-        const needAO = 0 /* None */ !== (compositeFlags & 4 /* AmbientOcclusion */);
-        const colorFbo = needComposite ? this._fbos.opaqueAndCompositeColor : this._fbos.opaqueColor;
-        if (renderForReadPixels || needAO) {
-            this._readPickDataFromPingPong = true;
-            this.drawOpaquePass(colorFbo, commands, 5 /* OpaqueGeneral */, true, 20 /* VolumeClassifiedRealityData */);
-            if (needAO)
-                this.renderAmbientOcclusion();
-        }
-        else {
-            this._readPickDataFromPingPong = false;
-            System.instance.frameBufferStack.execute(colorFbo, true, false, () => {
-                this._drawMultiPassDepth = true; // for OpaqueGeneral
-                this.drawPass(commands, 5 /* OpaqueGeneral */, false, 20 /* VolumeClassifiedRealityData */);
-            });
-        }
-    }
-    renderIndexedClassifierForReadPixels(cmds, state, renderForIntersectingVolumes, _needComposite) {
-        // Note that we only need to render to the Id textures here, no color, since the color buffer is not used in readPixels.
-        this._readPickDataFromPingPong = true;
-        this._currentRenderTargetIndex = 1;
-        const fbo = (renderForIntersectingVolumes ? this._fbos.featureIdWithDepth : this._fbos.featureIdWithDepthAltZ);
-        System.instance.frameBufferStack.execute(fbo, true, false, () => {
-            System.instance.applyRenderState(state);
-            this.target.techniques.execute(this.target, cmds, 5 /* OpaqueGeneral */);
-        });
-        this._currentRenderTargetIndex = 0;
-        this._readPickDataFromPingPong = false;
-    }
-    // ###TODO: For readPixels(), could skip rendering color...also could skip rendering depth and/or element ID depending upon selector...
-    drawOpaquePass(colorFbo, commands, pass, pingPong, cmdPass = 255 /* None */) {
-        const commandPass = 255 /* None */ === cmdPass ? pass : cmdPass;
-        const stack = System.instance.frameBufferStack;
-        this._drawMultiPassDepth = true;
-        if (!this.target.isReadPixelsInProgress) {
-            stack.execute(colorFbo, true, false, () => this.drawPass(commands, pass, pingPong, commandPass));
-            this._drawMultiPassDepth = false;
-        }
-        this._currentRenderTargetIndex++;
-        if (!this.target.isReadPixelsInProgress || Pixel.Selector.None !== (this.target.readPixelsSelector & Pixel.Selector.Feature)) {
-            stack.execute(this._fbos.featureId, true, false, () => this.drawPass(commands, pass, pingPong && this._drawMultiPassDepth, commandPass));
-            this._drawMultiPassDepth = false;
-        }
-        this._currentRenderTargetIndex++;
-        if (!this.target.isReadPixelsInProgress || Pixel.Selector.None !== (this.target.readPixelsSelector & Pixel.Selector.GeometryAndDistance)) {
-            stack.execute(this._fbos.depthAndOrder, true, false, () => this.drawPass(commands, pass, pingPong && this._drawMultiPassDepth, commandPass));
+        else if (pingPong) {
+            this.pingPong();
         }
-        this._currentRenderTargetIndex = 0;
-    }
-    clearTranslucent() {
-        this.clearFbo(this._fbos.accumulation, 0, 0, 0, 1, false);
-        this.clearFbo(this._fbos.revealage, 1, 0, 0, 1, false);
-    }
-    renderTranslucent(commands) {
-        System.instance.frameBufferStack.execute(this._fbos.accumulation, true, false, () => {
-            this.drawPass(commands, 8 /* Translucent */);
-        });
-        this._currentRenderTargetIndex = 1;
-        System.instance.frameBufferStack.execute(this._fbos.revealage, true, false, () => {
-            this.drawPass(commands, 8 /* Translucent */);
-        });
-        this._currentRenderTargetIndex = 0;
-    }
-    pingPong() {
-        System.instance.applyRenderState(this._noDepthMaskRenderState);
-        this.copyFbo(this._textures.featureId, this._fbos.accumulation);
-        this.copyFbo(this._textures.depthAndOrder, this._fbos.revealage);
-    }
-    copyFbo(src, dst) {
-        const geom = this._geometry.copyColor;
-        geom.texture = src.getHandle();
-        System.instance.frameBufferStack.execute(dst, true, false, () => {
-            const params = getDrawParams(this.target, geom);
-            this.target.techniques.draw(params);
-        });
-    }
-    clearFbo(fbo, red, green, blue, alpha, andDepth) {
-        const system = System.instance;
-        const gl = system.context;
-        system.frameBufferStack.execute(fbo, true, false, () => {
-            system.applyRenderState(andDepth ? RenderState.defaults : this._noDepthMaskRenderState);
-            gl.clearColor(red, green, blue, alpha);
-            let bit = GL.BufferBit.Color;
-            if (andDepth) {
-                gl.clearDepth(1.0);
-                bit |= GL.BufferBit.Depth;
-            }
-            gl.clear(bit);
-        });
+        System.instance.applyRenderState(this.getRenderState(pass));
+        this.target.techniques.execute(this.target, cmds, pass);
     }
 }
 //# sourceMappingURL=SceneCompositor.js.map