@sequent-org/ifc-viewer 1.2.4-ci.43.0 → 1.2.4-ci.45.0

package/package.json

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

package/src/IfcViewer.js

@@ -301,7 +301,7 @@ export class IfcViewer {
   _createInterface() {
     // Основная разметка просмотрщика
     const html = `
-      <div class="ifc-viewer-container" style="width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; border:0px red solid;">
+      <div class="ifc-viewer-container" style="width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; background: #ffffff; border:0px red solid;">
        <!-- Прелоадер -->
         <div id="ifcPreloader" class="absolute inset-0 bg-base-100 flex items-center justify-center z-50">
           <div class="text-center">
@@ -352,7 +352,7 @@ export class IfcViewer {
         </div>              
 
         <!-- Основной контейнер просмотрщика -->
-        <div id="ifcViewerMain" class="w-full flex-1 relative"></div>
+        <div id="ifcViewerMain" class="w-full flex-1 relative bg-base-100" style="background: #ffffff;"></div>
 
         <!-- Боковая панель (временно скрыта) -->
         <div id="ifcSidebar" class="absolute left-0 top-0 h-full w-80 bg-base-200 shadow-lg transform -translate-x-full transition-transform duration-300 pointer-events-none z-40" style="display: none;">

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: [
@@ -449,9 +454,15 @@ export class Viewer {
     // Рендерер
     // logarithmicDepthBuffer: уменьшает z-fighting на почти копланарных поверхностях (часто в IFC).
     // Это заметно снижает "мигание" тонких накладных деталей на фасадах.
-    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true });
+    // stencil: нужен для отрисовки "cap" по контуру сечения
+    // ВАЖНО: фон всегда должен быть чисто белым и не зависеть от CSS-окружения (модалки/страницы).
+    // Поэтому делаем рендер НЕпрозрачным (alpha: false) и задаём белый clearColor.
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, logarithmicDepthBuffer: true, stencil: true });
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
     this.renderer.autoClear = false; // управляем очисткой вручную для мульти-проходов
+    try {
+      this.renderer.setClearColor(0xffffff, 1);
+    } catch (_) {}
     // Тени по умолчанию выключены (включаются только через setShadowsEnabled)
     this.renderer.shadowMap.enabled = false;
     this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -474,6 +485,8 @@ export class Viewer {
 
     // Сцена
     this.scene = new THREE.Scene();
+    // Гарантируем белый фон сцены (в том числе для composer/pass-ов).
+    try { this.scene.background = new THREE.Color(0xffffff); } catch (_) {}
     // Оверлей-сцена для секущих манипуляторов (без клиппинга)
     this.sectionOverlayScene = new THREE.Scene();
 
@@ -775,6 +788,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;
@@ -2650,24 +2674,12 @@ export class Viewer {
    * @param {boolean} enabled
    */
   setStep3BackgroundEnabled(enabled) {
-    const next = !!enabled;
-    if (next === this._step3Background.enabled) return;
+    // По требованиям: фон ВСЕГДА чисто белый, и шаг 3 не должен менять фон сцены.
+    // Поэтому игнорируем "включение" и принудительно удерживаем белый фон.
     if (!this.scene) return;
-
-    if (next) {
-      // Снимем, что было до (Color|Texture|null)
-      const prev = this.scene.background ?? null;
-      this._step3Background.snapshot = { background: prev };
-      try { this.scene.background = new THREE.Color(this._step3Background.colorHex); } catch (_) {}
-      this._step3Background.enabled = true;
-      return;
-    }
-
-    const snap = this._step3Background.snapshot;
     this._step3Background.enabled = false;
     this._step3Background.snapshot = null;
-    if (!snap) return;
-    try { this.scene.background = snap.background ?? null; } catch (_) {}
+    try { this.scene.background = new THREE.Color(0xffffff); } catch (_) {}
   }
 
   setAOEnabled(enabled) {
@@ -2884,7 +2896,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);
@@ -2963,6 +2977,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;