Merge branch 'main' of https://github.com/ThatOpen/engine_components

Author: Pablo

examples/assets/postproductionRenderer.js

@@ -1,24 +1,24 @@
-import{a as f,u as x,M as w,B as O,j as k,V as h,f as g}from"./index-BVinSk0X.js";import{C as M,W as S,S as L,O as y,d as C,F as E}from"./graphic-vertex-picker-DIM7gQA5.js";import{P as I,a as u}from"./index-BLwIRjEQ.js";import{O as D}from"./index-CW0y8L7f.js";import"./index-DTBV6yJD.js";import"./index-uVKS97J8.js";const s=new M,R=s.get(S),a=R.create();a.scene=new L(s);a.scene.setup();a.scene.three.background=null;const G=document.getElementById("container");a.renderer=new I(s,G);a.camera=new y(s);await a.camera.controls.setLookAt(68,23,-8.5,21.5,-5.5,23);s.init();const A=s.get(C),F=A.create(a);F.config.color.set(6710886);a.scene.three.background=null;const W="/node_modules/@thatopen/fragments/dist/Worker/worker.mjs",l=s.get(E);l.init(W);a.camera.controls.addEventListener("rest",()=>l.core.update(!0));a.onCameraChanged.add(e=>{for(const[,r]of l.list)r.useCamera(e.three);l.core.update(!0)});l.list.onItemSet.add(({value:e})=>{e.useCamera(a.camera.three),a.scene.three.add(e.object),l.core.update(!0)});l.core.models.materials.list.onItemSet.add(({value:e})=>{"isLodMaterial"in e&&e.isLodMaterial||(e.polygonOffset=!0,e.polygonOffsetUnits=1,e.polygonOffsetFactor=Math.random())});const _=["https://thatopen.github.io/engine_components/resources/frags/school_arq.frag"];await Promise.all(_.map(async e=>{var p;const r=(p=e.split("/").pop())==null?void 0:p.split(".").shift();if(!r)return null;const P=await(await fetch(e)).arrayBuffer();return l.core.load(P,{modelId:r})}));a.renderer.postproduction.enabled=!0;a.dynamicAnchor=!1;l.core.models.materials.list.onItemSet.add(({value:e})=>{"isLodMaterial"in e&&e.isLodMaterial&&a.renderer.postproduction.basePass.isolatedMaterials.push(e)});const v=l.list.values().next().value,$=s.get(D);$.world=a;const j=await v.getItemsOfCategories([/IFCWALL/]),B=j.IFCWALL,[H,N]=B;$.addItems({[v.modelId]:new Set([H,N])});const d=new f;d.showPanel(2);document.body.append(d.dom);d.dom.style.left="0px";d.dom.style.zIndex="unset";a.renderer.onBeforeUpdate.add(()=>d.begin());a.renderer.onAfterUpdate.add(()=>d.end());x.init();const{aoPass:i,outlinePass:o,edgesPass:b}=a.renderer.postproduction,n={radius:.25,distanceExponent:1,thickness:1,scale:1,samples:16,distanceFallOff:1,screenSpaceRadius:!0},t={lumaPhi:10,depthPhi:2,normalPhi:3,radius:4,radiusExponent:1,rings:2,samples:16};i.updateGtaoMaterial(n);i.updatePdMaterial(t);const m=new w(new O(1,1,1),new k({color:65280}));m.position.set(10,0,0);a.scene.three.add(m);a.renderer.postproduction.excludedObjectsPass.addExcludedMaterial(m.material);const c=h.create(()=>g`
+import{a as f,u as x,M as w,B as k,j as O,V as h,f as g}from"./index-BVinSk0X.js";import{C as M,W as S,S as L,O as y,d as C,F as E}from"./graphic-vertex-picker-DIM7gQA5.js";import{P as R,a as u}from"./index-BLwIRjEQ.js";import{O as I}from"./index-CW0y8L7f.js";import"./index-DTBV6yJD.js";import"./index-uVKS97J8.js";const s=new M,D=s.get(S),t=D.create();t.scene=new L(s);t.scene.setup();t.scene.three.background=null;const F=document.getElementById("container");t.renderer=new R(s,F);t.camera=new y(s);await t.camera.controls.setLookAt(68,23,-8.5,21.5,-5.5,23);s.init();const G=s.get(C),j=G.create(t);j.config.color.set(6710886);t.scene.three.background=null;const A="https://thatopen.github.io/engine_fragment/resources/worker.mjs",B=await fetch(A),U=await B.blob(),W=new File([U],"worker.mjs",{type:"text/javascript"}),_=URL.createObjectURL(W),l=s.get(E);l.init(_);t.camera.controls.addEventListener("rest",()=>l.core.update(!0));t.onCameraChanged.add(e=>{for(const[,r]of l.list)r.useCamera(e.three);l.core.update(!0)});l.list.onItemSet.add(({value:e})=>{e.useCamera(t.camera.three),t.scene.three.add(e.object),l.core.update(!0)});l.core.models.materials.list.onItemSet.add(({value:e})=>{"isLodMaterial"in e&&e.isLodMaterial||(e.polygonOffset=!0,e.polygonOffsetUnits=1,e.polygonOffsetFactor=Math.random())});const H=["https://thatopen.github.io/engine_components/resources/frags/school_arq.frag"];await Promise.all(H.map(async e=>{var p;const r=(p=e.split("/").pop())==null?void 0:p.split(".").shift();if(!r)return null;const P=await(await fetch(e)).arrayBuffer();return l.core.load(P,{modelId:r})}));t.renderer.postproduction.enabled=!0;t.dynamicAnchor=!1;l.core.models.materials.list.onItemSet.add(({value:e})=>{"isLodMaterial"in e&&e.isLodMaterial&&t.renderer.postproduction.basePass.isolatedMaterials.push(e)});const v=l.list.values().next().value,$=s.get(I);$.world=t;const N=await v.getItemsOfCategories([/IFCWALL/]),q=N.IFCWALL,[T,V]=q;$.addItems({[v.modelId]:new Set([T,V])});const c=new f;c.showPanel(2);document.body.append(c.dom);c.dom.style.left="0px";c.dom.style.zIndex="unset";t.renderer.onBeforeUpdate.add(()=>c.begin());t.renderer.onAfterUpdate.add(()=>c.end());x.init();const{aoPass:i,outlinePass:o,edgesPass:b}=t.renderer.postproduction,a={radius:.25,distanceExponent:1,thickness:1,scale:1,samples:16,distanceFallOff:1,screenSpaceRadius:!0},n={lumaPhi:10,depthPhi:2,normalPhi:3,radius:4,radiusExponent:1,rings:2,samples:16};i.updateGtaoMaterial(a);i.updatePdMaterial(n);const m=new w(new k(1,1,1),new O({color:65280}));m.position.set(10,0,0);t.scene.three.add(m);t.renderer.postproduction.excludedObjectsPass.addExcludedMaterial(m.material);const d=h.create(()=>g`
   <bim-panel active label="Postproduction Tutorial" class="options-menu">
 
     <bim-panel-section label="General">
 
       <bim-checkbox checked label="Postproduction enabled"
-        @change="${({target:e})=>{a.renderer.postproduction.enabled=e.value}}">
+        @change="${({target:e})=>{t.renderer.postproduction.enabled=e.value}}">
       </bim-checkbox>
 
       <bim-checkbox checked label="Outlines enabled"
-        ?checked=${a.renderer.postproduction.outlinesEnabled}
-        @change="${({target:e})=>{a.renderer.postproduction.outlinesEnabled=e.value}}">
+        ?checked=${t.renderer.postproduction.outlinesEnabled}
+        @change="${({target:e})=>{t.renderer.postproduction.outlinesEnabled=e.value}}">
       </bim-checkbox>
 
       <bim-checkbox checked label="Excluded objects enabled"
-        ?checked=${a.renderer.postproduction.excludedObjectsEnabled}
-        @change="${({target:e})=>{a.renderer.postproduction.excludedObjectsEnabled=e.value}}">
+        ?checked=${t.renderer.postproduction.excludedObjectsEnabled}
+        @change="${({target:e})=>{t.renderer.postproduction.excludedObjectsEnabled=e.value}}">
       </bim-checkbox>
 
       <bim-dropdown required label="Postproduction style"
-        @change="${({target:e})=>{const r=e.value[0];a.renderer.postproduction.style=r}}">
+        @change="${({target:e})=>{const r=e.value[0];t.renderer.postproduction.style=r}}">
 
         <bim-option checked label="Basic" value="${u.COLOR}"></bim-option>
         <bim-option label="Pen" value="${u.PEN}"></bim-option>
@@ -34,8 +34,8 @@ import{a as f,u as x,M as w,B as O,j as k,V as h,f as g}from"./index-BVinSk0X.js
 
       <bim-number-input
           slider step="0.1" label="Width"
-          value="${a.renderer.postproduction.edgesPass.width}" min="1" max="3"
-          @change="${({target:e})=>{a.renderer.postproduction.edgesPass.width=e.value}}">
+          value="${t.renderer.postproduction.edgesPass.width}" min="1" max="3"
+          @change="${({target:e})=>{t.renderer.postproduction.edgesPass.width=e.value}}">
       </bim-number-input>
 
       <bim-color-input label="Edges color"
@@ -74,8 +74,8 @@ import{a as f,u as x,M as w,B as O,j as k,V as h,f as g}from"./index-BVinSk0X.js
     <bim-panel-section label="Ambient Occlusion">
 
         <bim-checkbox checked label="Screen Space Radius"
-          ?checked=${n.screenSpaceRadius}
-          @change="${({target:e})=>{n.screenSpaceRadius=e.value,i.updateGtaoMaterial(n)}}">
+          ?checked=${a.screenSpaceRadius}
+          @change="${({target:e})=>{a.screenSpaceRadius=e.value,i.updateGtaoMaterial(a)}}">
         </bim-checkbox>
 
         <bim-number-input
@@ -86,87 +86,87 @@ import{a as f,u as x,M as w,B as O,j as k,V as h,f as g}from"./index-BVinSk0X.js
 
         <bim-number-input
           slider step="0.01" label="Radius"
-          value="${n.radius}" min="0.01" max="1"
-          @change="${({target:e})=>{n.radius=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.radius}" min="0.01" max="1"
+          @change="${({target:e})=>{a.radius=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.01" label="Distance exponent"
-          value="${n.distanceExponent}" min="1" max="4"
-          @change="${({target:e})=>{n.distanceExponent=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.distanceExponent}" min="1" max="4"
+          @change="${({target:e})=>{a.distanceExponent=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.01" label="Thickness"
-          value="${n.thickness}" min="0.01" max="10"
-          @change="${({target:e})=>{n.thickness=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.thickness}" min="0.01" max="10"
+          @change="${({target:e})=>{a.thickness=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.01" label="Distance falloff"
-          value="${n.distanceFallOff}" min="0" max="1"
-          @change="${({target:e})=>{n.distanceFallOff=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.distanceFallOff}" min="0" max="1"
+          @change="${({target:e})=>{a.distanceFallOff=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.01" label="Scale"
-          value="${n.scale}" min="0.01" max="2"
-          @change="${({target:e})=>{n.scale=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.scale}" min="0.01" max="2"
+          @change="${({target:e})=>{a.scale=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="1" label="Samples"
-          value="${n.samples}" min="2" max="32"
-          @change="${({target:e})=>{n.samples=e.value,i.updateGtaoMaterial(n)}}">
+          value="${a.samples}" min="2" max="32"
+          @change="${({target:e})=>{a.samples=e.value,i.updateGtaoMaterial(a)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.1" label="PD Luma Phi"
-          value="${t.lumaPhi}" min="0" max="20"
-          @change="${({target:e})=>{t.lumaPhi=e.value,i.updatePdMaterial(t)}}">
+          value="${n.lumaPhi}" min="0" max="20"
+          @change="${({target:e})=>{n.lumaPhi=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.1" label="PD Depth Phi"
-          value="${t.depthPhi}" min="0.01" max="20"
-          @change="${({target:e})=>{t.depthPhi=e.value,i.updatePdMaterial(t)}}">
+          value="${n.depthPhi}" min="0.01" max="20"
+          @change="${({target:e})=>{n.depthPhi=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.1" label="PD Normal Phi"
-          value="${t.normalPhi}" min="0.01" max="20"
-          @change="${({target:e})=>{t.normalPhi=e.value,i.updatePdMaterial(t)}}">
+          value="${n.normalPhi}" min="0.01" max="20"
+          @change="${({target:e})=>{n.normalPhi=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="1" label="PD Radius"
-          value="${t.radius}" min="0" max="32"
-          @change="${({target:e})=>{t.radius=e.value,i.updatePdMaterial(t)}}">
+          value="${n.radius}" min="0" max="32"
+          @change="${({target:e})=>{n.radius=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.1" label="PD Radius Exponent"
-          value="${t.radiusExponent}" min="0.1" max="4"
-          @change="${({target:e})=>{t.radiusExponent=e.value,i.updatePdMaterial(t)}}">
+          value="${n.radiusExponent}" min="0.1" max="4"
+          @change="${({target:e})=>{n.radiusExponent=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="0.125" label="PD Rings"
-          value="${t.rings}" min="1" max="16"
-          @change="${({target:e})=>{t.rings=e.value,i.updatePdMaterial(t)}}">
+          value="${n.rings}" min="1" max="16"
+          @change="${({target:e})=>{n.rings=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
         <bim-number-input
           slider step="1" label="PD Samples"
-          value="${t.samples}" min="2" max="32"
-          @change="${({target:e})=>{t.samples=e.value,i.updatePdMaterial(t)}}">
+          value="${n.samples}" min="2" max="32"
+          @change="${({target:e})=>{n.samples=e.value,i.updatePdMaterial(n)}}">
         </bim-number-input>
 
       </bim-panel-section>
 
     </bim-panel>
-    `);document.body.append(c);const U=h.create(()=>g`
+    `);document.body.append(d);const z=h.create(()=>g`
       <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
-        @click="${()=>{c.classList.contains("options-menu-visible")?c.classList.remove("options-menu-visible"):c.classList.add("options-menu-visible")}}">
+        @click="${()=>{d.classList.contains("options-menu-visible")?d.classList.remove("options-menu-visible"):d.classList.add("options-menu-visible")}}">
       </bim-button>
-    `);document.body.append(U);
+    `);document.body.append(z);

packages/front/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",
@@ -50,4 +50,4 @@
   "dependencies": {
     "@thatopen/components": "~3.2.0"
   }
-}
+}

packages/front/src/core/ClipStyler/src/clip-edges.ts

@@ -80,7 +80,7 @@ export class ClipEdges implements OBC.Disposable {
     });
   }
 
-  private getStyleMeshes(modelId: string, styleName: string) {
+  private async getStyleMeshes(modelId: string, styleName: string) {
     const clipStyler = this._components.get(ClipStyler);
     const style = clipStyler.styles.get(styleName);
     if (!style) {
@@ -107,14 +107,18 @@ export class ClipEdges implements OBC.Disposable {
       if (linesMaterial) {
         edges = new LineSegments2(new LineSegmentsGeometry(), linesMaterial);
         edges.frustumCulled = false;
-        if (model) edges.applyMatrix4(model.object.matrixWorld);
+        if (model) {
+          fragments.applyBaseCoordinateSystem(edges, await model.getCoordinationMatrix())
+        }
         this.three.add(edges);
       }
-
+      
       let fills: THREE.Mesh | undefined;
       if (fillsMaterial) {
         fills = new THREE.Mesh(new THREE.BufferGeometry(), fillsMaterial);
-        if (model) fills.applyMatrix4(model.object.matrixWorld);
+        if (model) {
+          fragments.applyBaseCoordinateSystem(fills, await model.getCoordinationMatrix())
+        }
         this.three.add(fills);
       }
 
@@ -137,12 +141,19 @@ export class ClipEdges implements OBC.Disposable {
     const disposer = this._components.get(OBC.Disposer);
 
     const plane = this.plane.clone();
-    plane.constant -= 0.01;
+
+    const planeTransform = (await model.getCoordinationMatrix())
+      .clone()
+      .multiply(fragments.baseCoordinationMatrix.clone().invert());
+    
+    plane.applyMatrix4(planeTransform)
+
+    plane.constant -= 0.01; // little offset to avoid z-fighting
 
     const section = await model.getSection(plane, localIds);
     const { buffer, index, fillsIndices } = section;
 
-    const meshes = this.getStyleMeshes(modelId, styleName);
+    const meshes = await this.getStyleMeshes(modelId, styleName);
     const { edges, fills } = meshes;
 
     const posAttr = new THREE.BufferAttribute(buffer, 3, false);
@@ -157,7 +168,7 @@ export class ClipEdges implements OBC.Disposable {
       edges.geometry.fromLineSegments(temp);
       disposer.destroy(temp);
     }
-
+    
     // Update fills
     if (fills) {
       fills.geometry.attributes.position = posAttr;

packages/front/src/core/PostproductionRenderer/example.ts

@@ -75,8 +75,14 @@ world.scene.three.background = null;
   Now, let's configure the FragmentsManager. This will allow us to load models effortlessly and start manipulating them with ease:
 */
 
-const workerUrl =
-  "/node_modules/@thatopen/fragments/dist/Worker/worker.mjs";
+const githubUrl =
+  "https://thatopen.github.io/engine_fragment/resources/worker.mjs";
+const fetchedUrl = await fetch(githubUrl);
+const workerBlob = await fetchedUrl.blob();
+const workerFile = new File([workerBlob], "worker.mjs", {
+  type: "text/javascript",
+});
+const workerUrl = URL.createObjectURL(workerFile);
 const fragments = components.get(OBC.FragmentsManager);
 fragments.init(workerUrl);