@xeokit/xeokit-sdk 2.6.6 → 2.6.8

package/dist/xeokit-sdk.cjs.js

@@ -28405,6 +28405,206 @@ class SAO extends Component {
     }
 }
 
+/**
+ * @desc Configures cross-section slices for a {@link Scene}.
+ *
+ * ## Overview
+ *
+ * Cross-sections allow to create an additional colored slice for used clipping planes. It is only a visual effect
+ * calculated by shaders. It makes it easier to see the intersection between the model and the clipping plane this way.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll configure CrossSections to manipulate the slice representation.
+ *
+ * ````javascript
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Import the modules we need for this example
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * import {PhongMaterial, Viewer, math, SectionPlanesPlugin, XKTLoaderPlugin, Mesh, ReadableGeometry, buildPolylineGeometryFromCurve, SplineCurve} from "../../dist/xeokit-sdk.es.js";
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a Viewer and arrange the camera
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * const viewer = new Viewer({
+ *   canvasId: "myCanvas",
+ *   transparent: true
+ * });
+ *
+ * viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
+ * viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
+ * viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];
+ *
+ * const cameraControl = viewer.cameraControl;
+ * cameraControl.navMode = "orbit";
+ * cameraControl.followPointer = true;
+ *
+ * //----------------------------------------------------------------------------------------------------------------------
+ * // Create a xeokit loader plugin, load a model, fit to view
+ * //----------------------------------------------------------------------------------------------------------------------
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * var t0 = performance.now();
+ *
+ * document.getElementById("time").innerHTML = "Loading model...";
+ *
+ * const sceneModel = xktLoader.load({
+ *   id: "myModel",
+ *   src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+ *   edges: true
+ * });
+ *
+ * sceneModel.on("loaded", () => {
+ *   var t1 = performance.now();
+ *   document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+ *
+ *   let path = new SplineCurve(viewer.scene, {
+ *     points: [
+ *       [0, 0, -10],
+ *       [0, 0, -3],
+ *       [10, 0, 10],
+ *       [10, 0, 30],
+ *     ],
+ *   });
+ *
+ *   new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
+ *       id: "SplineCurve",
+ *       curve: path,
+ *       divisions: 50,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *       emissive: [1, 0, 0]
+ *     })
+ *   });
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Create a moving SectionPlane, that moves through the table models
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   const sectionPlanes = new SectionPlanesPlugin(viewer, {
+ *     overviewCanvasId: "mySectionPlanesOverviewCanvas",
+ *     overviewVisible: true
+ *   });
+ *
+ *   let currentPoint = path.getPoint(0);
+ *   let currentDirection = path.getTangent(0);
+ *
+ *   const sectionPlane = sectionPlanes.createSectionPlane({
+ *     id: "mySectionPlane",
+ *     pos: currentPoint,
+ *     dir: currentDirection
+ *   });
+ *
+ *   sectionPlanes.showControl(sectionPlane.id);
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Controlling SectionPlane position and direction
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   let currentT = 0.0;
+ *   document.getElementById("section_path").oninput = function() {
+ *     currentT = Number(document.getElementById("section_path").value);
+ *     currentPoint = path.getPoint(currentT);
+ *     currentDirection = path.getTangent(currentT);
+ *     sectionPlane.pos = currentPoint;
+ *     sectionPlane.dir = currentDirection;
+ *   };
+ *
+ *   window.viewer = viewer;
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Controlling CrossSections settings
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   viewer.scene.crossSections.sliceThickness = 0.05;
+ *   viewer.scene.crossSections.sliceColor = [0.0, 0.0, 0.0, 1.0];
+ * });
+ * ````
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/slicing/#SectionPlanesPlugin_Duplex_SectionPath_CrossSections)]
+ *
+ */
+class CrossSections extends Component {
+
+    /** @private */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this.sliceColor = cfg.sliceColor;
+        this.sliceThickness  = cfg.sliceThickness;
+    }
+
+    /**
+     * Sets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    set sliceThickness(value) {
+        if (value === undefined || value === null) {
+            value = 0.0;
+        }
+        if (this._sliceThickness === value) {
+            return;
+        }
+        this._sliceThickness = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    get sliceThickness() {
+        return this._sliceThickness;
+    }
+
+    /**
+     * Sets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    set sliceColor(value) {
+        if (value === undefined || value === null) {
+            value = [0.0, 0.0, 0.0, 1.0];
+        }
+        if (this._sliceColor === value) {
+            return;
+        }
+        this._sliceColor = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    get sliceColor() {
+        return this._sliceColor;
+    }
+
+    /**
+     * Destroys this component.
+     */
+    destroy() {
+        super.destroy();
+    }
+}
+
 const PRESETS$1 = {
     "default": {
         pointSize: 4,
@@ -29791,6 +29991,14 @@ class Scene extends Component {
             enabled: cfg.saoEnabled
         });
 
+        /** Configures Cross Sections for this Scene.
+         * @type {CrossSections}
+         * @final
+         */
+        this.crossSections = new CrossSections(this, {
+
+        });
+
         this.ticksPerRender = cfg.ticksPerRender;
         this.ticksPerOcclusionTest = cfg.ticksPerOcclusionTest;
         this.passes = cfg.passes;
@@ -50053,6 +50261,10 @@ class VBORenderer {
             const sectionPlanes = scene._sectionPlanesState.sectionPlanes;
             const baseIndex = layerIndex * numSectionPlanes;
             const renderFlags = model.renderFlags;
+            if (scene.crossSections) {
+                gl.uniform4fv(this._uSliceColor, scene.crossSections.sliceColor);
+                gl.uniform1f(this._uSliceThickness, scene.crossSections.sliceThickness);
+            }
             for (let sectionPlaneIndex = 0; sectionPlaneIndex < numAllocatedSectionPlanes; sectionPlaneIndex++) {
                 const sectionPlaneUniforms = this._uSectionPlanes[sectionPlaneIndex];
                 if (sectionPlaneUniforms) {
@@ -50214,6 +50426,11 @@ class VBORenderer {
 
         this._uPointSize = program.getLocation("pointSize");
         this._uNearPlaneHeight = program.getLocation("nearPlaneHeight");
+
+        if (scene.crossSections) {
+            this._uSliceColor = program.getLocation("sliceColor");
+            this._uSliceThickness = program.getLocation("sliceThickness");
+        }
     }
 
     _bindProgram(frameCtx) {
@@ -50753,7 +50970,7 @@ class TrianglesColorRenderer$1 extends TrianglesBatchingRenderer {
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
         if (clipping) {
@@ -50808,11 +51025,14 @@ class TrianglesColorRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -50822,9 +51042,12 @@ class TrianglesColorRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-                src.push("  if (dist > 0.0) { ");
-                src.push("      discard;");
-                src.push("  }");
+            src.push("  if (dist > sliceThickness) { ");
+            src.push("      discard;");
+            src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -50841,9 +51064,9 @@ class TrianglesColorRenderer$1 extends TrianglesBatchingRenderer {
             src.push("   float blendFactor       = uSAOParams[3];");
             src.push("   vec2 uv                 = vec2(gl_FragCoord.x / viewportWidth, gl_FragCoord.y / viewportHeight);");
             src.push("   float ambient           = smoothstep(blendCutoff, 1.0, unpackRGBToFloat(texture(uOcclusionTexture, uv))) * blendFactor;");
-            src.push("   outColor            = vec4(vColor.rgb * ambient, 1.0);");
+            src.push("   outColor            = vec4(newColor.rgb * ambient, 1.0);");
         } else {
-            src.push("   outColor            = vColor;");
+            src.push("   outColor            = newColor;");
         }
 
         src.push("}");
@@ -50976,6 +51199,8 @@ class TrianglesFlatColorRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
 
         this._addMatricesUniformBlockLines(src);
@@ -51004,7 +51229,8 @@ class TrianglesFlatColorRenderer$1 extends TrianglesBatchingRenderer {
         src.push("out vec4 outColor;");
 
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -51014,9 +51240,12 @@ class TrianglesFlatColorRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;");
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -51060,7 +51289,7 @@ class TrianglesFlatColorRenderer$1 extends TrianglesBatchingRenderer {
             src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
         }
 
-        src.push("vec4 fragColor =  vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 fragColor =  vec4((lightAmbient.rgb * lightAmbient.a * newColor.rgb) + (reflectedColor * newColor.rgb), newColor.a);");
 
         if (this._withSAO) {
             // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
@@ -51103,7 +51332,7 @@ class TrianglesSilhouetteRenderer$1 extends TrianglesBatchingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Triangles batching silhouette vertex shader");
-        
+
         src.push("uniform int renderPass;");
 
         src.push("in vec3 position;");
@@ -51155,7 +51384,7 @@ class TrianglesSilhouetteRenderer$1 extends TrianglesBatchingRenderer {
         src.push("vColor = vec4(silhouetteColor.r, silhouetteColor.g, silhouetteColor.b, min(silhouetteColor.a, color.a ));");
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
         src.push("gl_Position = clipPos;");
@@ -51173,7 +51402,7 @@ class TrianglesSilhouetteRenderer$1 extends TrianglesBatchingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Triangles batching silhouette fragment shader");
-        
+
         src.push("#ifdef GL_FRAGMENT_PRECISION_HIGH");
         src.push("precision highp float;");
         src.push("precision highp int;");
@@ -51194,26 +51423,35 @@ class TrianglesSilhouetteRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
             src.push("  float dist = 0.0;");
-            for (i = 0, len = sectionPlanesState.getNumAllocatedSectionPlanes(); i < len; i++) {
+            for (let i = 0, len = sectionPlanesState.getNumAllocatedSectionPlanes(); i < len; i++) {
                 src.push("if (sectionPlaneActive" + i + ") {");
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { discard; }");
+            src.push("  if (dist > sliceThickness) { ");
+            src.push("      discard;");
+            src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
         }
-        src.push("outColor = vColor;");
+        src.push("outColor = newColor;");
         src.push("}");
         return src;
     }
@@ -51299,7 +51537,7 @@ class EdgesEmphasisRenderer$1 extends EdgesRenderer$1 {
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
         src.push("gl_Position = clipPos;");
@@ -51316,7 +51554,7 @@ class EdgesEmphasisRenderer$1 extends EdgesRenderer$1 {
         const src = [];
         src.push("#version 300 es");
         src.push("// EdgesEmphasisRenderer fragment shader");
-        
+
         src.push("#ifdef GL_FRAGMENT_PRECISION_HIGH");
         src.push("precision highp float;");
         src.push("precision highp int;");
@@ -51429,7 +51667,7 @@ class EdgesColorRenderer$1 extends EdgesRenderer$1 {
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
         src.push("gl_Position = clipPos;");
@@ -53182,6 +53420,8 @@ class TrianglesColorTextureRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         this._addMatricesUniformBlockLines(src);
         src.push("uniform vec4 lightAmbient;");
@@ -53209,7 +53449,8 @@ class TrianglesColorTextureRenderer$1 extends TrianglesBatchingRenderer {
         src.push("out vec4 outColor;");
 
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -53219,9 +53460,12 @@ class TrianglesColorTextureRenderer$1 extends TrianglesBatchingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;");
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -53265,7 +53509,7 @@ class TrianglesColorTextureRenderer$1 extends TrianglesBatchingRenderer {
             src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
         }
 
-        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * newColor.rgb) + (reflectedColor * newColor.rgb), newColor.a);");
         if (gammaOutput) {
             src.push("vec4 colorTexel = color * sRGBToLinear(texture(uColorMap, vUV));");
         } else {
@@ -56046,11 +56290,14 @@ class TrianglesColorRenderer extends TrianglesInstancingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -56060,9 +56307,12 @@ class TrianglesColorRenderer extends TrianglesInstancingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;");
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -56080,9 +56330,9 @@ class TrianglesColorRenderer extends TrianglesInstancingRenderer {
             src.push("   float blendFactor       = uSAOParams[3];");
             src.push("   vec2 uv                 = vec2(gl_FragCoord.x / viewportWidth, gl_FragCoord.y / viewportHeight);");
             src.push("   float ambient           = smoothstep(blendCutoff, 1.0, unpackRGBToFloat(texture(uOcclusionTexture, uv))) * blendFactor;");
-            src.push("   outColor                = vec4(vColor.rgb * ambient, 1.0);");
+            src.push("   outColor                = vec4(newColor.rgb * ambient, 1.0);");
         } else {
-            src.push("    outColor           = vColor;");
+            src.push("    outColor           = newColor;");
         }
         src.push("}");
         return src;
@@ -56107,7 +56357,7 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Instancing geometry flat-shading drawing vertex shader");
-        
+
         src.push("uniform int renderPass;");
 
         src.push("in vec3 position;");
@@ -56132,7 +56382,7 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
             src.push("}");
             src.push("out float isPerspective;");
         }
-        
+
         if (clipping) {
             src.push("out vec4 vWorldPosition;");
             src.push("out float vFlags;");
@@ -56164,7 +56414,7 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
 
@@ -56189,7 +56439,7 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Instancing geometry flat-shading drawing fragment shader");
-        
+
         src.push("#ifdef GL_FRAGMENT_PRECISION_HIGH");
         src.push("precision highp float;");
         src.push("precision highp int;");
@@ -56198,9 +56448,9 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
         src.push("precision mediump int;");
         src.push("#endif");
         if (scene.logarithmicDepthBufferEnabled) {
-                src.push("in float isPerspective;");
-                src.push("uniform float logDepthBufFC;");
-                src.push("in float vFragDepth;");
+            src.push("in float isPerspective;");
+            src.push("uniform float logDepthBufFC;");
+            src.push("in float vFragDepth;");
         }
         if (this._withSAO) {
             src.push("uniform sampler2D uOcclusionTexture;");
@@ -56223,6 +56473,8 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
 
         this._addMatricesUniformBlockLines(src);
@@ -56252,7 +56504,8 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
         src.push("out vec4 outColor;");
 
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -56262,9 +56515,12 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;");
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -56307,7 +56563,7 @@ class TrianglesFlatColorRenderer extends TrianglesInstancingRenderer {
             src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
         }
 
-        src.push("vec4 fragColor = vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 fragColor = vec4((lightAmbient.rgb * lightAmbient.a * newColor.rgb) + (reflectedColor * newColor.rgb), newColor.a);");
 
         if (this._withSAO) {
             // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
@@ -56349,7 +56605,7 @@ class TrianglesSilhouetteRenderer extends TrianglesInstancingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Instancing silhouette vertex shader");
-        
+
         src.push("uniform int renderPass;");
 
         src.push("in vec3 position;");
@@ -56408,7 +56664,7 @@ class TrianglesSilhouetteRenderer extends TrianglesInstancingRenderer {
         src.push("vColor = vec4(silhouetteColor.r, silhouetteColor.g, silhouetteColor.b, min(silhouetteColor.a, float(color.a) / 255.0));");
         src.push("vec4 clipPos = projMatrix * viewPosition;");
         if (scene.logarithmicDepthBufferEnabled) {
-           src.push("vFragDepth = 1.0 + clipPos.w;");
+            src.push("vFragDepth = 1.0 + clipPos.w;");
             src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
         }
         src.push("gl_Position = clipPos;");
@@ -56424,7 +56680,7 @@ class TrianglesSilhouetteRenderer extends TrianglesInstancingRenderer {
         const src = [];
         src.push("#version 300 es");
         src.push("// Instancing fill fragment shader");
-        
+
         src.push("#ifdef GL_FRAGMENT_PRECISION_HIGH");
         src.push("precision highp float;");
         src.push("precision highp int;");
@@ -56445,10 +56701,14 @@ class TrianglesSilhouetteRenderer extends TrianglesInstancingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -56458,13 +56718,18 @@ class TrianglesSilhouetteRenderer extends TrianglesInstancingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("if (dist > 0.0) { discard; }");
+            src.push("  if (dist > sliceThickness) { ");
+            src.push("      discard;");
+            src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
         }
-        src.push("outColor = vColor;");
+        src.push("outColor = newColor;");
         src.push("}");
         return src;
     }
@@ -58494,6 +58759,8 @@ class TrianglesColorTextureRenderer extends TrianglesInstancingRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         this._addMatricesUniformBlockLines(src);
 
@@ -58522,7 +58789,8 @@ class TrianglesColorTextureRenderer extends TrianglesInstancingRenderer {
         src.push("out vec4 outColor;");
 
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = (int(vFlags) >> 16 & 0xF) == 1;");
             src.push("  if (clippable) {");
@@ -58532,9 +58800,12 @@ class TrianglesColorTextureRenderer extends TrianglesInstancingRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;");
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -58577,7 +58848,7 @@ class TrianglesColorTextureRenderer extends TrianglesInstancingRenderer {
             src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
         }
 
-        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * newColor.rgb) + (reflectedColor * newColor.rgb), newColor.a);");
         if (gammaOutput) {
             src.push("vec4 colorTexel = color * sRGBToLinear(texture(uColorMap, vUV));");
         } else {
@@ -58594,9 +58865,9 @@ class TrianglesColorTextureRenderer extends TrianglesInstancingRenderer {
             src.push("   float blendFactor       = uSAOParams[3];");
             src.push("   vec2 uv                 = vec2(gl_FragCoord.x / viewportWidth, gl_FragCoord.y / viewportHeight);");
             src.push("   float ambient           = smoothstep(blendCutoff, 1.0, unpackRGBToFloat(texture(uOcclusionTexture, uv))) * blendFactor;");
-            src.push("   outColor                = vec4(vColor.rgb * colorTexel.rgb * ambient, opacity);");
+            src.push("   outColor                = vec4(newColor.rgb * colorTexel.rgb * ambient, opacity);");
         } else {
-            src.push("   outColor                = vec4(vColor.rgb * colorTexel.rgb, opacity);");
+            src.push("   outColor                = vec4(newColor.rgb * colorTexel.rgb, opacity);");
         }
 
         if (gammaOutput) {