Merge pull request #1004 from 3DStreet/polygon-offset

mvp polygon offset

index.html

@@ -65,7 +65,7 @@
   </div> -->
 
   <a-scene
-    renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;"
+    renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: false;"
     loading-screen="enabled: false" notify metadata
     reflection device-orientation-permission-ui="enabled: false"
     webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" xr-mode-ui="XRMode: ar">

src/components/polygon-offset.js

@@ -0,0 +1,80 @@
+// Component to fix z-fighting by adding polygon offset to meshes
+AFRAME.registerComponent('polygon-offset', {
+  schema: {
+    // Negative values move fragments closer to camera
+    factor: { type: 'number', default: -2 },
+    units: { type: 'number', default: -2 }
+  },
+
+  init: function () {
+    // Initial update when mesh is loaded
+    const mesh = this.el.getObject3D('mesh');
+    if (mesh) {
+      this.applyPolygonOffsetToObject(mesh);
+    }
+
+    // Listen for model-loaded event
+    this.el.addEventListener('model-loaded', (evt) => {
+      const mesh = this.el.getObject3D('mesh');
+      this.applyPolygonOffsetToObject(mesh);
+    });
+  },
+
+  applyPolygonOffsetToObject: function (object3D) {
+    if (!object3D) return;
+
+    object3D.traverse((obj) => {
+      if (obj.type === 'Mesh') {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach((material) => {
+            this.updateMaterial(material);
+          });
+        } else {
+          this.updateMaterial(obj.material);
+        }
+      }
+    });
+  },
+
+  updateMaterial: function (material) {
+    if (!material) return;
+
+    material.polygonOffset = true;
+    material.polygonOffsetFactor = this.data.factor;
+    material.polygonOffsetUnits = this.data.units;
+
+    // Ensure material updates
+    material.needsUpdate = true;
+  },
+
+  update: function (oldData) {
+    // Handle property updates
+    const mesh = this.el.getObject3D('mesh');
+    if (mesh) {
+      this.applyPolygonOffsetToObject(mesh);
+    }
+  },
+
+  remove: function () {
+    const mesh = this.el.getObject3D('mesh');
+    if (mesh) {
+      mesh.traverse((obj) => {
+        if (obj.type === 'Mesh') {
+          if (Array.isArray(obj.material)) {
+            obj.material.forEach((material) => {
+              material.polygonOffset = false;
+              material.polygonOffsetFactor = 0;
+              material.polygonOffsetUnits = 0;
+              material.needsUpdate = true;
+            });
+          } else if (obj.material) {
+            obj.material.polygonOffset = false;
+            obj.material.polygonOffsetFactor = 0;
+            obj.material.polygonOffsetUnits = 0;
+            obj.material.needsUpdate = true;
+          }
+        }
+      });
+    }
+  }
+});

src/components/street-generated-stencil.js

@@ -202,6 +202,16 @@ AFRAME.registerComponent('street-generated-stencil', {
 
         this.el.appendChild(clone);
         this.createdEntities.push(clone);
+        // Fix z fighting issue
+        // clone.addEventListener('loaded', () => {
+        //   const mesh = clone.getObject3D('mesh');
+        //   if (mesh) {
+        //     const material = mesh.material;
+        //     material.polygonOffset = true;
+        //     material.polygonOffsetFactor = -2;
+        //     material.polygonOffsetUnits = -2;
+        //   }
+        // });
       });
     }
   }

src/components/street-generated-striping.js

@@ -85,8 +85,20 @@ AFRAME.registerComponent('street-generated-striping', {
       'data-layer-name',
       'Cloned Striping • ' + stripingTextureId
     );
+    clone.setAttribute('polygon-offset', { factor: -2, units: -2 });
+
     this.el.appendChild(clone);
     this.createdEntities.push(clone);
+    // // Fix z fighting issue
+    // clone.addEventListener('loaded', () => {
+    //   const mesh = clone.getObject3D('mesh');
+    //   if (mesh) {
+    //     const material = mesh.material;
+    //     material.polygonOffset = true;
+    //     material.polygonOffsetFactor = -2;
+    //     material.polygonOffsetUnits = -2;
+    //   }
+    // });
   },
   calculateStripingMaterial: function (stripingName, length) {
     // calculate the repeatCount for the material

src/components/street-ground.js

@@ -39,6 +39,10 @@ AFRAME.registerComponent('street-ground', {
       this.dirtbox.setAttribute('data-layer-name', 'Underground');
       this.dirtbox.setAttribute('data-no-transform', '');
       this.dirtbox.setAttribute('data-ignore-raycaster', '');
+      this.dirtbox.setAttribute('polygon-offset', {
+        factor: 4,
+        units: 4
+      });
     }
 
     // Get all segments

src/index.js

@@ -28,6 +28,7 @@ require('./components/street-generated-striping.js');
 require('./components/street-generated-pedestrians.js');
 require('./components/street-generated-rail.js');
 require('./components/street-generated-clones.js');
+require('./components/polygon-offset.js');
 require('./components/street-align.js');
 require('./components/street-ground.js');
 require('./editor/index.js');