@sequent-org/ifc-viewer 1.2.4-ci.42.0 → 1.2.4-ci.44.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.2.4-ci.42.0",
+  "version": "1.2.4-ci.44.0",
   "type": "module",
   "description": "IFC 3D model viewer component for web applications - fully self-contained with local IFCLoader",
   "main": "src/index.js",

package/src/viewer/SectionCapsPass.js

@@ -0,0 +1,53 @@
+import { Pass } from "three/examples/jsm/postprocessing/Pass.js";
+
+/**
+ * Pass для EffectComposer: рисует "cap" сечения поверх текущего буфера,
+ * используя depth+stencil текущего renderTarget.
+ */
+export class SectionCapsPass extends Pass {
+  /**
+   * @param {{
+   *  capsRenderer: { render(args: any): void },
+   *  getScene: () => any,
+   *  getCamera: () => any,
+   *  getSubject: () => any,
+   *  getActivePlanes: () => any[],
+   * }} args
+   */
+  constructor({ capsRenderer, getScene, getCamera, getSubject, getActivePlanes }) {
+    super();
+    this._caps = capsRenderer;
+    this._getScene = getScene;
+    this._getCamera = getCamera;
+    this._getSubject = getSubject;
+    this._getActivePlanes = getActivePlanes;
+
+    // Рисуем поверх readBuffer, swap не нужен
+    this.needsSwap = false;
+    this.clear = false;
+    this.enabled = true;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  render(renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */) {
+    if (!this.enabled) return;
+    const scene = this._getScene?.();
+    const camera = this._getCamera?.();
+    const subject = this._getSubject?.();
+    const planes = this._getActivePlanes?.() || [];
+    const activePlanes = planes.filter((p) => p && isFinite(p.constant));
+    if (!scene || !camera || !subject || activePlanes.length === 0) return;
+
+    // Важно: рисуем в readBuffer (текущий буфер композера)
+    renderer.setRenderTarget(this.renderToScreen ? null : readBuffer);
+    this._caps.render({
+      renderer,
+      scene,
+      camera,
+      subject,
+      activePlanes,
+    });
+  }
+}
+
+

package/src/viewer/SectionCapsRenderer.js

@@ -0,0 +1,224 @@
+import * as THREE from "three";
+
+/**
+ * Рисует "заглушку" (cap) для секущих плоскостей через stencil buffer.
+ *
+ * Идея: для каждой активной плоскости
+ * 1) два прохода по модели (BackSide/FrontSide) с инкрементом/декрементом stencil
+ * 2) рисуем большую плоскость на месте сечения с stencilFunc != 0
+ *
+ * Это закрывает "пустоту" в двухслойных стенах и убирает мерцание внутри.
+ */
+export class SectionCapsRenderer {
+  /**
+   * @param {{ color?: number }} options
+   */
+  constructor(options = {}) {
+    this.color = options.color ?? 0x212121;
+
+    /** @type {THREE.Scene} */
+    this._capScene = new THREE.Scene();
+
+    /** @type {THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>} */
+    this._capMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 1, 1), this._createCapMaterial());
+    this._capMesh.frustumCulled = false;
+    this._capScene.add(this._capMesh);
+
+    this._stencilBack = this._createStencilMaterial({
+      side: THREE.BackSide,
+      zOp: THREE.IncrementWrapStencilOp,
+    });
+    this._stencilFront = this._createStencilMaterial({
+      side: THREE.FrontSide,
+      zOp: THREE.DecrementWrapStencilOp,
+    });
+
+    this._tmp = {
+      v0: new THREE.Vector3(),
+      v1: new THREE.Vector3(),
+      box: new THREE.Box3(),
+      size: new THREE.Vector3(),
+      center: new THREE.Vector3(),
+    };
+
+    this._warnedNoStencil = false;
+  }
+
+  /** @param {THREE.WebGLRenderer} renderer */
+  _hasStencil(renderer) {
+    try {
+      const gl = renderer.getContext();
+      const attrs = gl?.getContextAttributes?.();
+      // В WebGL2/рендер-таргетах stencil может быть и при attrs.stencil=false,
+      // но если attrs явно false — предупредим один раз, а дальше попытаемся всё равно.
+      if (attrs && attrs.stencil === false && !this._warnedNoStencil) {
+        this._warnedNoStencil = true;
+        // eslint-disable-next-line no-console
+        console.warn("[SectionCaps] WebGL context reports stencil=false; caps may not render. Consider enabling stencil in WebGLRenderer.");
+      }
+    } catch (_) {}
+    return true;
+  }
+
+  _createStencilMaterial({ side, zOp }) {
+    const m = new THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      side,
+      // ничего в цвет не пишем — только stencil
+      colorWrite: false,
+      depthWrite: false,
+      depthTest: true,
+    });
+    m.stencilWrite = true;
+    m.stencilRef = 0;
+    m.stencilFunc = THREE.AlwaysStencilFunc;
+    m.stencilFail = THREE.KeepStencilOp;
+    m.stencilZFail = zOp;
+    m.stencilZPass = zOp;
+    // локальный клиппинг на материале
+    m.clippingPlanes = null;
+    m.clipIntersection = false;
+    m.clipShadows = false;
+    return m;
+  }
+
+  _createCapMaterial() {
+    const m = new THREE.MeshBasicMaterial({
+      color: this.color,
+      side: THREE.DoubleSide,
+      depthTest: true,
+      depthWrite: false,
+      transparent: false,
+      polygonOffset: true,
+      polygonOffsetFactor: -1,
+      polygonOffsetUnits: -1,
+    });
+    m.stencilWrite = true;
+    m.stencilRef = 0;
+    m.stencilFunc = THREE.NotEqualStencilFunc;
+    m.stencilFail = THREE.KeepStencilOp;
+    m.stencilZFail = THREE.KeepStencilOp;
+    m.stencilZPass = THREE.KeepStencilOp;
+    m.stencilMask = 0xff;
+    m.clippingPlanes = null; // задаём на кадр
+    m.clipIntersection = false;
+    m.clipShadows = false;
+    return m;
+  }
+
+  /**
+   * @param {{ obj: THREE.Object3D, root: THREE.Object3D }} args
+   */
+  _isInSubtree({ obj, root }) {
+    let n = obj;
+    while (n) {
+      if (n === root) return true;
+      n = n.parent;
+    }
+    return false;
+  }
+
+  /**
+   * Обновляет положение/ориентацию "большой" плоскости cap.
+   * @param {THREE.Plane} plane
+   * @param {THREE.Object3D} subject
+   */
+  _updateCapMeshTransform(plane, subject) {
+    const { box, size, v0, v1 } = this._tmp;
+    box.setFromObject(subject);
+    box.getSize(size);
+    const maxDim = Math.max(size.x, size.y, size.z);
+    const extent = Math.max(1e-3, maxDim * 2.2); // запас, stencil ограничит до контура среза
+
+    // PlaneGeometry лежит в XY и смотрит в +Z
+    v0.set(0, 0, 1);
+    v1.copy(plane.normal).normalize();
+    this._capMesh.quaternion.setFromUnitVectors(v0, v1);
+
+    // точка на плоскости: p0 = -constant * normal
+    this._capMesh.position.copy(plane.normal).multiplyScalar(-plane.constant);
+    this._capMesh.scale.set(extent, extent, 1);
+    this._capMesh.updateMatrixWorld(true);
+  }
+
+  /**
+   * Рисует cap'ы в текущий render target (screen или буфер композера).
+   *
+   * @param {{
+   *   renderer: THREE.WebGLRenderer,
+   *   scene: THREE.Scene,
+   *   camera: THREE.Camera,
+   *   subject: THREE.Object3D | null,
+   *   activePlanes: THREE.Plane[],
+   * }} args
+   */
+  render({ renderer, scene, camera, subject, activePlanes }) {
+    if (!renderer || !scene || !camera) return;
+    if (!subject) return;
+    if (!activePlanes || activePlanes.length === 0) return;
+    this._hasStencil(renderer);
+
+    // Спрячем все меши вне модели, чтобы stencil не "цеплял" землю/тень и прочее
+    const hidden = [];
+    try {
+      scene.traverse((node) => {
+        if (!node?.isMesh) return;
+        if (this._isInSubtree({ obj: node, root: subject })) return;
+        if (node.visible) {
+          node.visible = false;
+          hidden.push(node);
+        }
+      });
+    } catch (_) {}
+
+    const prevOverride = scene.overrideMaterial;
+    const prevLocal = renderer.localClippingEnabled;
+    const prevGlobalPlanes = renderer.clippingPlanes;
+
+    // Важно: для материалов с local clipping нужно localClippingEnabled=true,
+    // а глобальные renderer.clippingPlanes отключаем, чтобы cap не резало "самой собой".
+    renderer.localClippingEnabled = true;
+    renderer.clippingPlanes = [];
+
+    const gl = renderer.getContext();
+    const prevAutoClear = renderer.autoClear;
+    renderer.autoClear = false;
+
+    try {
+      for (const p of activePlanes) {
+        if (!p || !isFinite(p.constant)) continue;
+
+        // Чистим stencil перед обработкой каждой плоскости
+        try {
+          gl.clearStencil(0);
+          gl.clear(gl.STENCIL_BUFFER_BIT);
+        } catch (_) {}
+
+        // Stencil pass: back faces (+1)
+        this._stencilBack.clippingPlanes = activePlanes;
+        scene.overrideMaterial = this._stencilBack;
+        renderer.render(scene, camera);
+
+        // Stencil pass: front faces (-1)
+        this._stencilFront.clippingPlanes = activePlanes;
+        scene.overrideMaterial = this._stencilFront;
+        renderer.render(scene, camera);
+
+        // Cap plane: stencil != 0, и клиппинг только другими плоскостями (без текущей)
+        const capMat = this._capMesh.material;
+        capMat.color.setHex(this.color);
+        capMat.clippingPlanes = activePlanes.filter((q) => q !== p);
+        this._updateCapMeshTransform(p, subject);
+        renderer.render(this._capScene, camera);
+      }
+    } finally {
+      scene.overrideMaterial = prevOverride;
+      renderer.localClippingEnabled = prevLocal;
+      renderer.clippingPlanes = prevGlobalPlanes;
+      renderer.autoClear = prevAutoClear;
+      for (const n of hidden) n.visible = true;
+    }
+  }
+}
+
+

package/src/viewer/Viewer.js

@@ -13,6 +13,8 @@ import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 import { NavCube } from "./NavCube.js";
 import { SectionManipulator } from "./SectionManipulator.js";
+import { SectionCapsRenderer } from "./SectionCapsRenderer.js";
+import { SectionCapsPass } from "./SectionCapsPass.js";
 import { ZoomToCursorController } from "./ZoomToCursorController.js";
 import { MiddleMousePanController } from "./MiddleMousePanController.js";
 import { RightMouseModelMoveController } from "./RightMouseModelMoveController.js";
@@ -126,6 +128,9 @@ export class Viewer {
     // Шаг 4: финальная постобработка (контраст/насыщенность) — должна быть последним pass'ом
     this._step4Pass = null;
     this._step4 = { enabled: false, saturation: 1.0, contrast: 1.0 };
+    // Сечение: заливка "внутренностей" (cap) через stencil buffer
+    this._sectionCaps = new SectionCapsRenderer({ color: 0x212121 });
+    this._sectionCapsPass = null;
     this.clipping = {
       enabled: false,
       planes: [
@@ -148,10 +153,10 @@ export class Viewer {
     this._sectionClippingActive = false;
     /** @type {WeakMap<THREE.Mesh, any>} */
     this._sectionOriginalMaterial = new WeakMap();
-    // +50% яркости при активном сечении (комнаты светлее)
-    this._sectionLightBoost = { mul: 1.5, snapshot: null };
-    // При активном сечении: AO выключаем (убирает "сетку"), а контраст возвращаем лёгкой цветокоррекцией
-    this._sectionPostBoost = { snapshot: null, brightness: 0.03, contrast: 0.15 };
+    // Локальная подсветка "внутри": без теней, с малой дальностью (чтобы не пересвечивать фасад/внешнюю тень)
+    this._interiorAssist = { light: null, box: null, enabled: false, lastBoxAt: 0 };
+    // Пост-эффекты только "внутри": AO OFF (убирает "сетку"), чуть контраста (без глобального пересвета)
+    this._interiorPost = { snapshot: null, contrast: 0.12 };
 
     // Snapshot начального состояния для Home
     this._home = {
@@ -449,7 +454,8 @@ export class Viewer {
     // Рендерер
     // logarithmicDepthBuffer: уменьшает z-fighting на почти копланарных поверхностях (часто в IFC).
     // Это заметно снижает "мигание" тонких накладных деталей на фасадах.
-    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true });
+    // stencil: нужен для отрисовки "cap" по контуру сечения
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true, stencil: true });
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
     this.renderer.autoClear = false; // управляем очисткой вручную для мульти-проходов
     // Тени по умолчанию выключены (включаются только через setShadowsEnabled)
@@ -628,6 +634,9 @@ export class Viewer {
     this.setSunHeight(5.9);
     this.setShadowsEnabled(this.shadowsEnabled);
 
+    // Локальная подсветка "внутри" (по умолчанию скрыта)
+    this.#ensureInteriorAssistLight();
+
     // Демонстрационный куб отключён для чистого прелоадера
     // Оставим сцену пустой до загрузки модели
     // Добавим метод фокусировки объекта
@@ -755,6 +764,8 @@ export class Viewer {
     }
 
     if (this.controls) this.controls.update();
+    // "Внутренняя" подсветка/пост-эффекты: включаются только когда камера внутри модели
+    this.#updateInteriorAssist();
     this._notifyZoomIfChanged();
     if (this.renderer && this.camera && this.scene) {
       // Применим ТОЛЬКО активные (конечные) плоскости отсечения
@@ -770,6 +781,17 @@ export class Viewer {
         this._composer.render();
       } else {
         this.renderer.render(this.scene, this.camera);
+        // Cap (закрытие среза) в режиме без композера
+        try {
+          const subject = this.activeModel || this.demoCube;
+          this._sectionCaps?.render?.({
+            renderer: this.renderer,
+            scene: this.scene,
+            camera: this.camera,
+            subject,
+            activePlanes,
+          });
+        } catch (_) {}
       }
       // Рендер оверлея манипуляторов без глобального клиппинга поверх
       const prevLocal = this.renderer.localClippingEnabled;
@@ -1960,69 +1982,9 @@ export class Viewer {
     if (next === this._sectionClippingActive) return;
     this._sectionClippingActive = next;
 
-    // 0) Светлее при сечении (+50%)
-    try {
-      if (this._sectionClippingActive) {
-        if (!this._sectionLightBoost.snapshot) {
-          this._sectionLightBoost.snapshot = {
-            sunIntensity: this.sunLight?.intensity ?? null,
-            ambientIntensity: this.ambientLight?.intensity ?? null,
-          };
-        }
-        if (this.sunLight && Number.isFinite(this._sectionLightBoost.snapshot.sunIntensity)) {
-          this.sunLight.intensity = this._sectionLightBoost.snapshot.sunIntensity * this._sectionLightBoost.mul;
-        }
-        if (this.ambientLight && Number.isFinite(this._sectionLightBoost.snapshot.ambientIntensity)) {
-          this.ambientLight.intensity = this._sectionLightBoost.snapshot.ambientIntensity * this._sectionLightBoost.mul;
-        }
-      } else {
-        const snap = this._sectionLightBoost.snapshot;
-        if (snap) {
-          if (this.sunLight && Number.isFinite(snap.sunIntensity)) this.sunLight.intensity = snap.sunIntensity;
-          if (this.ambientLight && Number.isFinite(snap.ambientIntensity)) this.ambientLight.intensity = snap.ambientIntensity;
-        }
-        this._sectionLightBoost.snapshot = null;
-      }
-    } catch (_) {}
-
-    // 0.5) Пост-эффекты: AO OFF + лёгкий контраст (только при сечении)
-    try {
-      if (this._sectionClippingActive) {
-        if (!this._sectionPostBoost.snapshot) {
-          this._sectionPostBoost.snapshot = {
-            ao: { ...this.visual.ao },
-            color: { ...this.visual.color },
-          };
-        }
-        // AO OFF
-        this.setAOEnabled(false);
-        // Color correction ON (без изменения hue/saturation)
-        this.setColorCorrectionEnabled(true);
-        this.setColorBrightness(this._sectionPostBoost.brightness);
-        this.setColorContrast(this._sectionPostBoost.contrast);
-      } else {
-        const snap = this._sectionPostBoost.snapshot;
-        if (snap) {
-          // Restore AO
-          this.setAOEnabled(!!snap.ao?.enabled);
-          if (typeof snap.ao?.intensity === 'number') this.setAOIntensity(snap.ao.intensity);
-          if (typeof snap.ao?.radius === 'number') this.setAORadius(snap.ao.radius);
-          if (typeof snap.ao?.minDistance === 'number') this.visual.ao.minDistance = snap.ao.minDistance;
-          if (typeof snap.ao?.maxDistance === 'number') this.visual.ao.maxDistance = snap.ao.maxDistance;
-          if (this._ssaoPass) {
-            this._ssaoPass.minDistance = this.visual.ao.minDistance;
-            this._ssaoPass.maxDistance = this.visual.ao.maxDistance;
-          }
-          // Restore color correction
-          this.setColorCorrectionEnabled(!!snap.color?.enabled);
-          if (typeof snap.color?.hue === 'number') this.setColorHue(snap.color.hue);
-          if (typeof snap.color?.saturation === 'number') this.setColorSaturation(snap.color.saturation);
-          if (typeof snap.color?.brightness === 'number') this.setColorBrightness(snap.color.brightness);
-          if (typeof snap.color?.contrast === 'number') this.setColorContrast(snap.color.contrast);
-        }
-        this._sectionPostBoost.snapshot = null;
-      }
-    } catch (_) {}
+    // Важно: никаких глобальных усилений света/яркости на само включение сечения.
+    // Подсветка делается локально и только когда камера "внутри".
+    try { this.#updateInteriorAssist(true); } catch (_) {}
 
     // 1) self-shadowing (комнаты/стены)
     if (this.activeModel) {
@@ -2043,6 +2005,110 @@ export class Viewer {
     try { if (this.renderer?.shadowMap) this.renderer.shadowMap.needsUpdate = true; } catch (_) {}
   }
 
+  #ensureInteriorAssistLight() {
+    if (!this.scene) return;
+    if (this._interiorAssist.light) return;
+    try {
+      // Небольшой "fill light" около камеры. Без теней, чтобы не ломать внешнюю тень.
+      const light = new THREE.PointLight(0xffffff, 0.9, 6.5, 2.0);
+      light.castShadow = false;
+      light.visible = false;
+      light.name = 'interior-assist-light';
+      this.scene.add(light);
+      this._interiorAssist.light = light;
+    } catch (_) {
+      this._interiorAssist.light = null;
+    }
+  }
+
+  #isCameraInsideModelBox() {
+    const model = this.activeModel;
+    if (!model || !this.camera) return false;
+    const now = performance?.now?.() ?? Date.now();
+    // Обновляем bbox не чаще ~4 раза/сек (достаточно; модель обычно статична)
+    if (!this._interiorAssist.box || (now - (this._interiorAssist.lastBoxAt || 0)) > 250) {
+      try {
+        this._interiorAssist.box = new THREE.Box3().setFromObject(model);
+        this._interiorAssist.lastBoxAt = now;
+      } catch (_) {
+        this._interiorAssist.box = null;
+      }
+    }
+    const box = this._interiorAssist.box;
+    if (!box) return false;
+    const p = this.camera.position;
+    const eps = 0.05;
+    return (
+      p.x > (box.min.x + eps) && p.x < (box.max.x - eps) &&
+      p.y > (box.min.y + eps) && p.y < (box.max.y - eps) &&
+      p.z > (box.min.z + eps) && p.z < (box.max.z - eps)
+    );
+  }
+
+  #updateInteriorAssist(force = false) {
+    if (!this._sectionClippingActive) {
+      if (this._interiorAssist.enabled || force) {
+        this._interiorAssist.enabled = false;
+        if (this._interiorAssist.light) this._interiorAssist.light.visible = false;
+        this.#restoreInteriorPost();
+      }
+      return;
+    }
+
+    this.#ensureInteriorAssistLight();
+    const inside = this.#isCameraInsideModelBox();
+    if (inside !== this._interiorAssist.enabled || force) {
+      this._interiorAssist.enabled = inside;
+      if (this._interiorAssist.light) this._interiorAssist.light.visible = inside;
+      if (inside) this.#applyInteriorPost();
+      else this.#restoreInteriorPost();
+    }
+    // Следуем за камерой, если активны
+    if (inside && this._interiorAssist.light) {
+      try { this._interiorAssist.light.position.copy(this.camera.position); } catch (_) {}
+    }
+  }
+
+  #applyInteriorPost() {
+    // AO OFF + лёгкий контраст только "внутри"
+    if (!this._interiorPost.snapshot) {
+      this._interiorPost.snapshot = {
+        ao: { ...this.visual.ao },
+        color: { ...this.visual.color },
+      };
+    }
+    try { this.setAOEnabled(false); } catch (_) {}
+    try {
+      this.setColorCorrectionEnabled(true);
+      this.setColorContrast(this._interiorPost.contrast);
+      // brightness не трогаем, чтобы не пересвечивать
+    } catch (_) {}
+  }
+
+  #restoreInteriorPost() {
+    const snap = this._interiorPost.snapshot;
+    if (!snap) return;
+    try {
+      this.setAOEnabled(!!snap.ao?.enabled);
+      if (typeof snap.ao?.intensity === 'number') this.setAOIntensity(snap.ao.intensity);
+      if (typeof snap.ao?.radius === 'number') this.setAORadius(snap.ao.radius);
+      if (typeof snap.ao?.minDistance === 'number') this.visual.ao.minDistance = snap.ao.minDistance;
+      if (typeof snap.ao?.maxDistance === 'number') this.visual.ao.maxDistance = snap.ao.maxDistance;
+      if (this._ssaoPass) {
+        this._ssaoPass.minDistance = this.visual.ao.minDistance;
+        this._ssaoPass.maxDistance = this.visual.ao.maxDistance;
+      }
+    } catch (_) {}
+    try {
+      this.setColorCorrectionEnabled(!!snap.color?.enabled);
+      if (typeof snap.color?.hue === 'number') this.setColorHue(snap.color.hue);
+      if (typeof snap.color?.saturation === 'number') this.setColorSaturation(snap.color.saturation);
+      if (typeof snap.color?.brightness === 'number') this.setColorBrightness(snap.color.brightness);
+      if (typeof snap.color?.contrast === 'number') this.setColorContrast(snap.color.contrast);
+    } catch (_) {}
+    this._interiorPost.snapshot = null;
+  }
+
   /**
    * Дамп текущих параметров тест-пресета в консоль.
    */
@@ -2835,7 +2901,9 @@ export class Viewer {
     const { width, height } = this._getContainerSize();
     const w = Math.max(1, Math.floor(width));
     const h = Math.max(1, Math.floor(height));
-    this._composer = new EffectComposer(this.renderer);
+    // Нужен stencil buffer в render targets композера для "cap" сечения
+    const rt = new THREE.WebGLRenderTarget(w, h, { depthBuffer: true, stencilBuffer: true });
+    this._composer = new EffectComposer(this.renderer, rt);
     this._renderPass = new RenderPass(this.scene, this.camera);
     this._composer.addPass(this._renderPass);
     this._ssaoPass = new SSAOPass(this.scene, this.camera, w, h);
@@ -2914,6 +2982,16 @@ export class Viewer {
     this._composer.addPass(this._step4Pass);
     this.#applyStep4Uniforms();
     
+    // Cap (закрытие сечения) — перед FXAA, чтобы сгладить край заливки
+    this._sectionCapsPass = new SectionCapsPass({
+      capsRenderer: this._sectionCaps,
+      getScene: () => this.scene,
+      getCamera: () => this.camera,
+      getSubject: () => (this.activeModel || this.demoCube),
+      getActivePlanes: () => (this.clipping?.planes || []),
+    });
+    this._composer.addPass(this._sectionCapsPass);
+
     // FXAA pass для устранения "лесенки" на кривых линиях (aliasing)
     this._fxaaPass = new ShaderPass(FXAAShader);
     this._fxaaPass.material.uniforms['resolution'].value.x = 1 / w;