From fc2d0db9aadc2e144c6f5912efb7dcbdf5f3eb55 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Sun, 29 Sep 2024 13:22:01 -0700
Subject: [PATCH 01/15] barely working

enable by using console-log

document.querySelector('#clipping-box').setAttribute('obb-collider2', "clipPlaneFunction: obb;")
document.querySelector('#clipping-box').play()
---
 index.html                     |   3 +-
 src/components/obb-clipping.js | 624 +++++++++++++++++++++++++++++++++
 src/components/street-geo.js   |   1 +
 src/index.js                   |   1 +
 4 files changed, 628 insertions(+), 1 deletion(-)
 create mode 100644 src/components/obb-clipping.js

diff --git a/index.html b/index.html
index f42248e1..5e972177 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,8 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
     </a-entity>
-
+    <a-box data-no-pause="" position="1 -1 -1" rotation="0 30 0" id="clipping-box" depth="5" width="5" height="5"
+      material="wireframe: true" obb-collider3="clipPlaneFunction: obb;" class="autocreated" ;></a-box>
   </a-scene>
 </body>
 <script>
diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
new file mode 100644
index 00000000..52638c0d
--- /dev/null
+++ b/src/components/obb-clipping.js
@@ -0,0 +1,624 @@
+/* global AFRAME */
+
+AFRAME.registerSystem('obb-collider2', {
+  schema: {
+    showColliders: { default: false }
+  },
+
+  init: function () {
+    this.collisions = [];
+    this.colliderEls = [];
+  },
+
+  addCollider: function (colliderEl) {
+    this.colliderEls.push(colliderEl);
+    if (this.data.showColliders) {
+      colliderEl.components['obb-collider2'].showCollider();
+    } else {
+      colliderEl.components['obb-collider2'].hideCollider();
+    }
+    this.tick = this.detectCollisions;
+  },
+
+  removeCollider: function (colliderEl) {
+    var colliderEls = this.colliderEls;
+    var elIndex = colliderEls.indexOf(colliderEl);
+    colliderEl.components['obb-collider2'].hideCollider();
+    if (elIndex > -1) {
+      colliderEls.splice(elIndex, 1);
+    }
+    if (colliderEls.length === 0) {
+      this.tick = undefined;
+    }
+  },
+
+  registerCollision: function (componentA, componentB) {
+    var collisions = this.collisions;
+    var existingCollision = false;
+    var boundingBoxA = componentA.obb;
+    var boundingBoxB = componentB.obb;
+    var collisionMeshA = componentA.renderColliderMesh;
+    var collisionMeshB = componentB.renderColliderMesh;
+    if (collisionMeshA) {
+      collisionMeshA.material.color.set(0xff0000);
+    }
+    if (collisionMeshB) {
+      collisionMeshB.material.color.set(0xff0000);
+    }
+    for (var i = 0; i < collisions.length; i++) {
+      if (
+        (collisions[i].componentA.obb === boundingBoxA &&
+          collisions[i].componentB.obb === boundingBoxB) ||
+        (collisions[i].componentA.obb === boundingBoxB &&
+          collisions[i].componentB.obb === boundingBoxA)
+      ) {
+        existingCollision = true;
+        collisions[i].detected = true;
+        break;
+      }
+    }
+    if (!existingCollision) {
+      collisions.push({
+        componentA: componentA,
+        componentB: componentB,
+        detected: true
+      });
+      componentA.el.emit('obbcollisionstarted', {
+        trackedObject3D: componentA.trackedObject3D,
+        withEl: componentB.el
+      });
+      componentB.el.emit('obbcollisionstarted', {
+        trackedObject3D: componentB.trackedObject3D,
+        withEl: componentA.el
+      });
+    }
+  },
+
+  resetCollisions: function () {
+    var collisions = this.collisions;
+    for (var i = 0; i < collisions.length; i++) {
+      collisions[i].detected = false;
+    }
+  },
+
+  clearCollisions: function () {
+    var collisions = this.collisions;
+    var detectedCollisions = [];
+    var componentA;
+    var componentB;
+    var collisionMeshA;
+    var collisionMeshB;
+    for (var i = 0; i < collisions.length; i++) {
+      if (!collisions[i].detected) {
+        componentA = collisions[i].componentA;
+        componentB = collisions[i].componentB;
+        collisionMeshA = componentA.renderColliderMesh;
+        collisionMeshB = componentB.renderColliderMesh;
+
+        if (collisionMeshA) {
+          collisionMeshA.material.color.set(0x00ff00);
+        }
+        componentA.el.emit('obbcollisionended', {
+          trackedObject3D: this.trackedObject3D,
+          withEl: componentB.el
+        });
+
+        if (collisionMeshB) {
+          collisionMeshB.material.color.set(0x00ff00);
+        }
+        componentB.el.emit('obbcollisionended', {
+          trackedObject3D: this.trackedObject3D,
+          withEl: componentA.el
+        });
+      } else {
+        detectedCollisions.push(collisions[i]);
+      }
+    }
+    this.collisions = detectedCollisions;
+  },
+
+  detectCollisions: function () {
+    var boxA;
+    var boxB;
+    var componentA;
+    var componentB;
+    var colliderEls = this.colliderEls;
+    if (colliderEls.length < 2) {
+      return;
+    }
+    this.resetCollisions();
+    for (var i = 0; i < colliderEls.length; i++) {
+      componentA = colliderEls[i].components['obb-collider2'];
+      boxA = colliderEls[i].components['obb-collider2'].obb;
+      // ignore bounding box with 0 volume.
+      if (
+        boxA.halfSize.x === 0 ||
+        boxA.halfSize.y === 0 ||
+        boxA.halfSize.z === 0
+      ) {
+        continue;
+      }
+      for (var j = i + 1; j < colliderEls.length; j++) {
+        componentB = colliderEls[j].components['obb-collider2'];
+        boxB = componentB.obb;
+        // ignore bounding box with 0 volume.
+        if (
+          boxB.halfSize.x === 0 ||
+          boxB.halfSize.y === 0 ||
+          boxB.halfSize.z === 0
+        ) {
+          continue;
+        }
+        if (boxA.intersectsOBB(boxB)) {
+          this.registerCollision(componentA, componentB);
+        }
+      }
+    }
+    this.clearCollisions();
+  }
+});
+
+AFRAME.registerComponent('obb-collider2', {
+  schema: {
+    size: { default: 0 },
+    trackedObject3D: { default: '' },
+    minimumColliderDimension: { default: 0.02 },
+    clipPlaneFunction: { default: 'obb' } // also try aabb
+  },
+
+  init: function () {
+    this.previousScale = new THREE.Vector3().copy(this.el.object3D.scale);
+    this.auxEuler = new THREE.Euler();
+
+    this.boundingBox = new THREE.Box3();
+    this.boundingBoxSize = new THREE.Vector3();
+    this.updateCollider = this.updateCollider.bind(this);
+
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.updateBoundingBox = this.updateBoundingBox.bind(this);
+
+    this.el.addEventListener('model-loaded', this.onModelLoaded);
+    this.updateCollider();
+
+    this.system.addCollider(this.el);
+    this.elementToClip = document.querySelector('#google3d');
+
+    // function findElementWithRetry(that) {
+    //     const elementToClip = document.querySelector("#google3d");
+    //     if (elementToClip) {
+    //         console.log('[obb-clipping] elementToClip found', elementToClip);
+    //         that.elementToClip = elementToClip;
+    //         // return elementToClip;
+    //     } else {
+    //         console.log('[obb-clipping] elementToClip not found, retrying in 1 second');
+    //         setTimeout(findElementWithRetry, 1000);
+    //     }
+    // }
+    // findElementWithRetry(this)
+
+    // Enable local clipping in the renderer
+    this.el.sceneEl.renderer.localClippingEnabled = true;
+  },
+
+  createPlanesFromOBB: (function () {
+    var planeMeshes = [];
+    var planeMatrix4 = new THREE.Matrix4();
+    // var planeColors = [
+    //     0x009B48,
+    //     0xB90000,
+    //     0x0045AD,
+    //     0xFF5900,
+    //     0xffffff,
+    //     0xFFD500,
+    // ];
+
+    var planeNormals = [
+      new THREE.Vector3(1, 0, 0),
+      new THREE.Vector3(-1, 0, 0),
+      new THREE.Vector3(0, 1, 0), // top
+      new THREE.Vector3(0, -1, 0),
+      new THREE.Vector3(0, 0, 1),
+      new THREE.Vector3(0, 0, -1)
+    ];
+
+    const planePositions = [
+      new THREE.Vector3(),
+      new THREE.Vector3(),
+      new THREE.Vector3(),
+      new THREE.Vector3(),
+      new THREE.Vector3(),
+      new THREE.Vector3()
+    ];
+
+    return function (obb) {
+      // Get the OBB's center, halfSize, and rotation matrix
+      const obbCenter = obb.center;
+      const obbHalfSize = obb.halfSize;
+      const obbRotation = obb.rotation;
+
+      var clipPlanes = [];
+      // Initialize planes
+      for (let i = 0; i < 6; i++) {
+        clipPlanes.push(new THREE.Plane());
+      }
+
+      // Remove rendered planes if any. For testing purposes.
+      for (var i = 0; i < planeMeshes.length; i++) {
+        this.el.sceneEl.object3D.remove(planeMeshes[i]);
+      }
+
+      planePositions[0].set(obbHalfSize.x, 0, 0);
+      planePositions[1].set(-obbHalfSize.x, 0, 0);
+      planePositions[2].set(0, obbHalfSize.y, 0);
+      planePositions[3].set(0, -obbHalfSize.y, 0);
+      planePositions[4].set(0, 0, obbHalfSize.z);
+      planePositions[5].set(0, 0, -obbHalfSize.z);
+
+      for (let i = 0; i < planeNormals.length; i++) {
+        // Rotate the direction vector
+        const planeNormal = planeNormals[i];
+        const planePosition = planePositions[i];
+        clipPlanes[i].setFromNormalAndCoplanarPoint(planeNormal, planePosition);
+
+        // Apply position and rotation of the bounding box to the plane.
+        planeMatrix4.identity();
+
+        // Copy the elements of Matrix3 into the upper-left 3x3 part of Matrix4
+        planeMatrix4.elements[0] = obbRotation.elements[0];
+        planeMatrix4.elements[1] = obbRotation.elements[1];
+        planeMatrix4.elements[2] = obbRotation.elements[2];
+
+        planeMatrix4.elements[4] = obbRotation.elements[3];
+        planeMatrix4.elements[5] = obbRotation.elements[4];
+        planeMatrix4.elements[6] = obbRotation.elements[5];
+
+        planeMatrix4.elements[8] = obbRotation.elements[6];
+        planeMatrix4.elements[9] = obbRotation.elements[7];
+        planeMatrix4.elements[10] = obbRotation.elements[8];
+
+        planeMatrix4.setPosition(obbCenter);
+        clipPlanes[i].applyMatrix4(planeMatrix4);
+
+        // Render planes. For testing purposes.
+        // Align the geometry to the plane
+        //         var coplanarPoint = new THREE.Vector3();
+        //         clipPlanes[i].coplanarPoint(coplanarPoint);
+        //         var focalPoint = new THREE.Vector3().copy(coplanarPoint).add(clipPlanes[i].normal);
+        //         // Create a basic rectangle geometry
+        //         var planeGeometry = new THREE.PlaneGeometry(5, 5);
+        //         planeGeometry.lookAt(focalPoint);
+        //         planeGeometry.translate(coplanarPoint.x, coplanarPoint.y, coplanarPoint.z);
+
+        //         // Create mesh with the geometry
+        //         var planeMaterial = new THREE.MeshBasicMaterial({side: THREE.DoubleSide, color: planeColors[i]});
+        //         var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
+        //         planeMeshes.push(dispPlane);
+        //         this.el.sceneEl.object3D.add(dispPlane);
+      }
+      return clipPlanes;
+    };
+  })(),
+
+  createPlanesFromTargetObject: function () {
+    const targetElement = document.querySelector('#clipping-box');
+    var clipPlanes = [];
+    var targetBox = new THREE.Box3();
+    var targetCenter = new THREE.Vector3();
+    var targetSize = new THREE.Vector3();
+
+    // Create planes
+    for (let i = 0; i < 6; i++) {
+      clipPlanes.push(new THREE.Plane());
+    }
+
+    targetBox.setFromObject(targetElement.object3D);
+    targetBox.getCenter(targetCenter);
+    targetBox.getSize(targetSize);
+
+    // Update plane positions
+    const normals = [
+      new THREE.Vector3(1, 0, 0),
+      new THREE.Vector3(-1, 0, 0),
+      new THREE.Vector3(0, 1, 0), // top
+      new THREE.Vector3(0, -1, 0),
+      new THREE.Vector3(0, 0, 1),
+      new THREE.Vector3(0, 0, -1)
+    ];
+
+    for (let i = 0; i < normals.length; i++) {
+      const normal = normals[i];
+      let point = targetCenter
+        .clone()
+        .add(
+          normal
+            .clone()
+            .multiply(
+              targetSize.clone().multiply(new THREE.Vector3(0.5, 0.5, 0.5))
+            )
+        );
+
+      clipPlanes[i].setFromNormalAndCoplanarPoint(normal, point);
+
+      // Align the geometry to the plane
+      var coplanarPoint = new THREE.Vector3();
+      clipPlanes[i].coplanarPoint(coplanarPoint);
+      var focalPoint = new THREE.Vector3()
+        .copy(coplanarPoint)
+        .add(clipPlanes[i].normal);
+      // Create a basic rectangle geometry
+      var planeGeometry = new THREE.PlaneGeometry(5, 5);
+      planeGeometry.lookAt(focalPoint);
+      planeGeometry.translate(
+        coplanarPoint.x,
+        coplanarPoint.y,
+        coplanarPoint.z
+      );
+
+      // Create mesh with the geometry
+      var planeMaterial = new THREE.MeshBasicMaterial({
+        side: THREE.DoubleSide,
+        color: Math.random() * 0xffffff
+      });
+      var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
+      this.el.sceneEl.object3D.add(dispPlane);
+    }
+
+    return clipPlanes;
+  },
+
+  applyClippingPlanes: function (clipPlanes) {
+    console.log('applyclipping', this.elementToClip);
+    console.log('applyclipping', this);
+    if (this.elementToClip) {
+      this.elementToClip.object3D.traverse((obj) => {
+        if (obj.type === 'Mesh') {
+          if (Array.isArray(obj.material)) {
+            obj.material.forEach((material) => {
+              material.clippingPlanes = clipPlanes;
+              material.clipIntersection = true;
+            });
+          } else {
+            obj.material.clippingPlanes = clipPlanes;
+            obj.material.clipIntersection = true;
+          }
+        }
+      });
+    }
+  },
+
+  remove: function () {
+    this.system.removeCollider(this.el);
+  },
+
+  update: function () {
+    if (this.data.trackedObject3D) {
+      this.trackedObject3DPath = this.data.trackedObject3D.split('.');
+    }
+  },
+
+  onModelLoaded: function () {
+    this.updateCollider();
+  },
+
+  updateCollider: function () {
+    var el = this.el;
+    var boundingBoxSize = this.boundingBoxSize;
+    var aabb = (this.aabb = this.aabb || new THREE.OBB());
+    this.obb = this.obb || new THREE.OBB();
+
+    // Defer if entity has not yet loaded.
+    if (!el.hasLoaded) {
+      el.addEventListener('loaded', this.updateCollider);
+      return;
+    }
+
+    this.updateBoundingBox();
+    aabb.halfSize.copy(boundingBoxSize).multiplyScalar(0.5);
+
+    if (this.el.sceneEl.systems['obb-collider2'].data.showColliders) {
+      this.showCollider();
+    }
+  },
+
+  showCollider: function () {
+    this.updateColliderMesh();
+    this.renderColliderMesh.visible = true;
+  },
+
+  updateColliderMesh: function () {
+    var renderColliderMesh = this.renderColliderMesh;
+    var boundingBoxSize = this.boundingBoxSize;
+    if (!renderColliderMesh) {
+      this.initColliderMesh();
+      return;
+    }
+
+    // Destroy current geometry.
+    renderColliderMesh.geometry.dispose();
+    renderColliderMesh.geometry = new THREE.BoxGeometry(
+      boundingBoxSize.x,
+      boundingBoxSize.y,
+      boundingBoxSize.z
+    );
+  },
+
+  hideCollider: function () {
+    if (!this.renderColliderMesh) {
+      return;
+    }
+    this.renderColliderMesh.visible = false;
+  },
+
+  initColliderMesh: function () {
+    var boundingBoxSize;
+    var renderColliderGeometry;
+    var renderColliderMesh;
+
+    boundingBoxSize = this.boundingBoxSize;
+    renderColliderGeometry = this.renderColliderGeometry =
+      new THREE.BoxGeometry(
+        boundingBoxSize.x,
+        boundingBoxSize.y,
+        boundingBoxSize.z
+      );
+    renderColliderMesh = this.renderColliderMesh = new THREE.Mesh(
+      renderColliderGeometry,
+      new THREE.MeshLambertMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
+    );
+    renderColliderMesh.matrixAutoUpdate = false;
+    renderColliderMesh.matrixWorldAutoUpdate = false;
+    // THREE scene forces matrix world update even if matrixWorldAutoUpdate set to false.
+    renderColliderMesh.updateMatrixWorld = function () {
+      /* no op */
+    };
+    this.el.sceneEl.object3D.add(renderColliderMesh);
+  },
+
+  updateBoundingBox: (function () {
+    var auxPosition = new THREE.Vector3();
+    var auxScale = new THREE.Vector3();
+    var auxQuaternion = new THREE.Quaternion();
+    var identityQuaternion = new THREE.Quaternion();
+    var auxMatrix = new THREE.Matrix4();
+
+    return function () {
+      var auxEuler = this.auxEuler;
+      var boundingBox = this.boundingBox;
+      var size = this.data.size;
+      var trackedObject3D = this.trackedObject3D || this.el.object3D;
+      var boundingBoxSize = this.boundingBoxSize;
+      var minimumColliderDimension = this.data.minimumColliderDimension;
+
+      // user defined size takes precedence.
+      if (size) {
+        this.boundingBoxSize.x = size;
+        this.boundingBoxSize.y = size;
+        this.boundingBoxSize.z = size;
+        return;
+      }
+
+      // Bounding box is created axis-aligned AABB.
+      // If there's any rotation the box will have the wrong size.
+      // It undoes the local entity rotation and then restores so box has the expected size.
+      // We also undo the parent world rotation.
+      auxEuler.copy(trackedObject3D.rotation);
+      trackedObject3D.rotation.set(0, 0, 0);
+
+      trackedObject3D.parent.matrixWorld.decompose(
+        auxPosition,
+        auxQuaternion,
+        auxScale
+      );
+      auxMatrix.compose(auxPosition, identityQuaternion, auxScale);
+      trackedObject3D.parent.matrixWorld.copy(auxMatrix);
+
+      // Calculate bounding box size.
+      boundingBox.setFromObject(trackedObject3D, true);
+      boundingBox.getSize(boundingBoxSize);
+
+      // Enforce minimum dimensions.
+      boundingBoxSize.x =
+        boundingBoxSize.x < minimumColliderDimension
+          ? minimumColliderDimension
+          : boundingBoxSize.x;
+      boundingBoxSize.y =
+        boundingBoxSize.y < minimumColliderDimension
+          ? minimumColliderDimension
+          : boundingBoxSize.y;
+      boundingBoxSize.z =
+        boundingBoxSize.z < minimumColliderDimension
+          ? minimumColliderDimension
+          : boundingBoxSize.z;
+
+      // Restore rotations.
+      trackedObject3D.parent.matrixWorld.compose(
+        auxPosition,
+        auxQuaternion,
+        auxScale
+      );
+      this.el.object3D.rotation.copy(auxEuler);
+    };
+  })(),
+
+  checkTrackedObject: function () {
+    var trackedObject3DPath = this.trackedObject3DPath;
+    var trackedObject3D;
+
+    if (
+      trackedObject3DPath &&
+      trackedObject3DPath.length &&
+      !this.trackedObject3D
+    ) {
+      trackedObject3D = this.el;
+      for (var i = 0; i < trackedObject3DPath.length; i++) {
+        trackedObject3D = trackedObject3D[trackedObject3DPath[i]];
+        if (!trackedObject3D) {
+          break;
+        }
+      }
+      if (trackedObject3D) {
+        this.trackedObject3D = trackedObject3D;
+        this.updateCollider();
+      }
+    }
+    return this.trackedObject3D;
+  },
+
+  tick: (function () {
+    var auxPosition = new THREE.Vector3();
+    var auxScale = new THREE.Vector3();
+    var auxQuaternion = new THREE.Quaternion();
+    var auxMatrix = new THREE.Matrix4();
+
+    return function () {
+      console.log('tick');
+      var obb = this.obb;
+      var renderColliderMesh = this.renderColliderMesh;
+      var trackedObject3D = this.checkTrackedObject() || this.el.object3D;
+
+      if (!trackedObject3D) {
+        return;
+      }
+
+      trackedObject3D.updateMatrix();
+      trackedObject3D.updateMatrixWorld(true);
+      trackedObject3D.matrixWorld.decompose(
+        auxPosition,
+        auxQuaternion,
+        auxScale
+      );
+
+      // Recalculate collider if scale has changed.
+      if (
+        Math.abs(auxScale.x - this.previousScale.x) > 0.0001 ||
+        Math.abs(auxScale.y - this.previousScale.y) > 0.0001 ||
+        Math.abs(auxScale.z - this.previousScale.z) > 0.0001
+      ) {
+        this.updateCollider();
+      }
+
+      this.previousScale.copy(auxScale);
+
+      // reset scale, keep position and rotation
+      auxScale.set(1, 1, 1);
+      auxMatrix.compose(auxPosition, auxQuaternion, auxScale);
+      // Update OBB visual representation.
+      if (renderColliderMesh) {
+        renderColliderMesh.matrixWorld.copy(auxMatrix);
+      }
+
+      // Reset OBB with AABB and apply entity matrix. applyMatrix4 changes OBB internal state.
+      obb.copy(this.aabb);
+      obb.applyMatrix4(auxMatrix);
+
+      let clipPlanes;
+      if (this.data.clipPlaneFunction === 'obb') {
+        clipPlanes = this.createPlanesFromOBB(obb);
+      } else if (this.data.clipPlaneFunction === 'aabb') {
+        clipPlanes = this.createPlanesFromTargetObject();
+      }
+      // console.log(clipPlanes);
+      this.applyClippingPlanes(clipPlanes);
+    };
+  })()
+});
diff --git a/src/components/street-geo.js b/src/components/street-geo.js
index 71f44d11..4726b6e1 100644
--- a/src/components/street-geo.js
+++ b/src/components/street-geo.js
@@ -113,6 +113,7 @@ AFRAME.registerComponent('street-geo', {
     const create3DtilesElement = () => {
       const google3dElement = document.createElement('a-entity');
       google3dElement.setAttribute('data-no-pause', '');
+      google3dElement.id = 'google3d';
       google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles');
       google3dElement.setAttribute('loader-3dtiles', {
         url: 'https://tile.googleapis.com/v1/3dtiles/root.json',
diff --git a/src/index.js b/src/index.js
index 0b3960b8..de43a4a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,6 +19,7 @@ require('./components/streetplan-loader');
 require('./components/street-geo.js');
 require('./components/street-environment.js');
 require('./components/intersection.js');
+require('./components/obb-clipping.js');
 
 if (typeof VERSION !== 'undefined') {
   console.log(`3DStreet Version: ${VERSION}`);

From ed425e7f41cbfa7ea2fd3d4a32174ba5abfd6dc8 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 11:35:26 -0700
Subject: [PATCH 02/15] barely working with caveats

this barely works:
- you need to start a new scene
- add google 3d tiles by specifying location
- then drag and drop a new street from the add panel
- then enter viewer mode
---
 index.html                      | 10 +++++++++-
 src/aframe-streetmix-parsers.js |  2 ++
 src/components/obb-clipping.js  | 13 ++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5e972177..030a8a4a 100644
--- a/index.html
+++ b/index.html
@@ -114,8 +114,16 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
     </a-entity>
+    <!-- <a-entity position="1 -1 -1" rotation="0 30 0">
     <a-box data-no-pause="" position="1 -1 -1" rotation="0 30 0" id="clipping-box" depth="5" width="5" height="5"
-      material="wireframe: true" obb-collider3="clipPlaneFunction: obb;" class="autocreated" ;></a-box>
+      material="wireframe: true" obb-collider3="clipPlaneFunction: obb;" class="autocreated"></a-box>
+    </a-entity> -->
+    <!-- 
+    
+    document.querySelector('#clipping-box').setAttribute('obb-collider2', "clipPlaneFunction: obb;"); 
+    document.querySelector('#clipping-box').play();
+    
+    -->
   </a-scene>
 </body>
 <script>
diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index 28160122..e41eb6bf 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -1716,6 +1716,8 @@ function processSegments(
   dirtBox.setAttribute('depth', length - 0.2); // depth is length - 0.1 on each side
   dirtBox.setAttribute('material', 'color: #664B00;');
   dirtBox.setAttribute('data-layer-name', 'Underground');
+  dirtBox.setAttribute('obb-collider2', 'clipPlaneFunction: obb;');
+  dirtBox.setAttribute('data-no-pause', '');
   streetParentEl.append(dirtBox);
   return streetParentEl;
 }
diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 52638c0d..b095a343 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -181,7 +181,8 @@ AFRAME.registerComponent('obb-collider2', {
     this.updateCollider();
 
     this.system.addCollider(this.el);
-    this.elementToClip = document.querySelector('#google3d');
+    //    this.elementToClip = document.querySelector('#google3d');
+    this.fetchElementToClip();
 
     // function findElementWithRetry(that) {
     //     const elementToClip = document.querySelector("#google3d");
@@ -366,9 +367,19 @@ AFRAME.registerComponent('obb-collider2', {
     return clipPlanes;
   },
 
+  fetchElementToClip: function () {
+    const elementToClip = document.querySelector('#google3d');
+    if (elementToClip) {
+      this.elementToClip = elementToClip;
+    }
+  },
+
   applyClippingPlanes: function (clipPlanes) {
     console.log('applyclipping', this.elementToClip);
     console.log('applyclipping', this);
+    if (!this.elementToClip) {
+      this.fetchElementToClip();
+    }
     if (this.elementToClip) {
       this.elementToClip.object3D.traverse((obj) => {
         if (obj.type === 'Mesh') {

From f0a36cbb84388295b518e37739f6fc198a86602d Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 11:46:38 -0700
Subject: [PATCH 03/15] remove unneeded obb-collider system elements

---
 src/aframe-streetmix-parsers.js |   3 +-
 src/components/obb-clipping.js  | 169 +-------------------------------
 src/editor/index.js             |  12 ++-
 3 files changed, 13 insertions(+), 171 deletions(-)

diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index e41eb6bf..618fbba1 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -1717,7 +1717,8 @@ function processSegments(
   dirtBox.setAttribute('material', 'color: #664B00;');
   dirtBox.setAttribute('data-layer-name', 'Underground');
   dirtBox.setAttribute('obb-collider2', 'clipPlaneFunction: obb;');
-  dirtBox.setAttribute('data-no-pause', '');
+  dirtBox.setAttribute('data-no-pause', true);
+  dirtBox.classList.add('autocreated');
   streetParentEl.append(dirtBox);
   return streetParentEl;
 }
diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index b095a343..6e78ca85 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -1,163 +1,5 @@
 /* global AFRAME */
 
-AFRAME.registerSystem('obb-collider2', {
-  schema: {
-    showColliders: { default: false }
-  },
-
-  init: function () {
-    this.collisions = [];
-    this.colliderEls = [];
-  },
-
-  addCollider: function (colliderEl) {
-    this.colliderEls.push(colliderEl);
-    if (this.data.showColliders) {
-      colliderEl.components['obb-collider2'].showCollider();
-    } else {
-      colliderEl.components['obb-collider2'].hideCollider();
-    }
-    this.tick = this.detectCollisions;
-  },
-
-  removeCollider: function (colliderEl) {
-    var colliderEls = this.colliderEls;
-    var elIndex = colliderEls.indexOf(colliderEl);
-    colliderEl.components['obb-collider2'].hideCollider();
-    if (elIndex > -1) {
-      colliderEls.splice(elIndex, 1);
-    }
-    if (colliderEls.length === 0) {
-      this.tick = undefined;
-    }
-  },
-
-  registerCollision: function (componentA, componentB) {
-    var collisions = this.collisions;
-    var existingCollision = false;
-    var boundingBoxA = componentA.obb;
-    var boundingBoxB = componentB.obb;
-    var collisionMeshA = componentA.renderColliderMesh;
-    var collisionMeshB = componentB.renderColliderMesh;
-    if (collisionMeshA) {
-      collisionMeshA.material.color.set(0xff0000);
-    }
-    if (collisionMeshB) {
-      collisionMeshB.material.color.set(0xff0000);
-    }
-    for (var i = 0; i < collisions.length; i++) {
-      if (
-        (collisions[i].componentA.obb === boundingBoxA &&
-          collisions[i].componentB.obb === boundingBoxB) ||
-        (collisions[i].componentA.obb === boundingBoxB &&
-          collisions[i].componentB.obb === boundingBoxA)
-      ) {
-        existingCollision = true;
-        collisions[i].detected = true;
-        break;
-      }
-    }
-    if (!existingCollision) {
-      collisions.push({
-        componentA: componentA,
-        componentB: componentB,
-        detected: true
-      });
-      componentA.el.emit('obbcollisionstarted', {
-        trackedObject3D: componentA.trackedObject3D,
-        withEl: componentB.el
-      });
-      componentB.el.emit('obbcollisionstarted', {
-        trackedObject3D: componentB.trackedObject3D,
-        withEl: componentA.el
-      });
-    }
-  },
-
-  resetCollisions: function () {
-    var collisions = this.collisions;
-    for (var i = 0; i < collisions.length; i++) {
-      collisions[i].detected = false;
-    }
-  },
-
-  clearCollisions: function () {
-    var collisions = this.collisions;
-    var detectedCollisions = [];
-    var componentA;
-    var componentB;
-    var collisionMeshA;
-    var collisionMeshB;
-    for (var i = 0; i < collisions.length; i++) {
-      if (!collisions[i].detected) {
-        componentA = collisions[i].componentA;
-        componentB = collisions[i].componentB;
-        collisionMeshA = componentA.renderColliderMesh;
-        collisionMeshB = componentB.renderColliderMesh;
-
-        if (collisionMeshA) {
-          collisionMeshA.material.color.set(0x00ff00);
-        }
-        componentA.el.emit('obbcollisionended', {
-          trackedObject3D: this.trackedObject3D,
-          withEl: componentB.el
-        });
-
-        if (collisionMeshB) {
-          collisionMeshB.material.color.set(0x00ff00);
-        }
-        componentB.el.emit('obbcollisionended', {
-          trackedObject3D: this.trackedObject3D,
-          withEl: componentA.el
-        });
-      } else {
-        detectedCollisions.push(collisions[i]);
-      }
-    }
-    this.collisions = detectedCollisions;
-  },
-
-  detectCollisions: function () {
-    var boxA;
-    var boxB;
-    var componentA;
-    var componentB;
-    var colliderEls = this.colliderEls;
-    if (colliderEls.length < 2) {
-      return;
-    }
-    this.resetCollisions();
-    for (var i = 0; i < colliderEls.length; i++) {
-      componentA = colliderEls[i].components['obb-collider2'];
-      boxA = colliderEls[i].components['obb-collider2'].obb;
-      // ignore bounding box with 0 volume.
-      if (
-        boxA.halfSize.x === 0 ||
-        boxA.halfSize.y === 0 ||
-        boxA.halfSize.z === 0
-      ) {
-        continue;
-      }
-      for (var j = i + 1; j < colliderEls.length; j++) {
-        componentB = colliderEls[j].components['obb-collider2'];
-        boxB = componentB.obb;
-        // ignore bounding box with 0 volume.
-        if (
-          boxB.halfSize.x === 0 ||
-          boxB.halfSize.y === 0 ||
-          boxB.halfSize.z === 0
-        ) {
-          continue;
-        }
-        if (boxA.intersectsOBB(boxB)) {
-          this.registerCollision(componentA, componentB);
-        }
-      }
-    }
-    this.clearCollisions();
-  }
-});
-
 AFRAME.registerComponent('obb-collider2', {
   schema: {
     size: { default: 0 },
@@ -180,7 +22,6 @@ AFRAME.registerComponent('obb-collider2', {
     this.el.addEventListener('model-loaded', this.onModelLoaded);
     this.updateCollider();
 
-    this.system.addCollider(this.el);
     //    this.elementToClip = document.querySelector('#google3d');
     this.fetchElementToClip();
 
@@ -397,10 +238,6 @@ AFRAME.registerComponent('obb-collider2', {
     }
   },
 
-  remove: function () {
-    this.system.removeCollider(this.el);
-  },
-
   update: function () {
     if (this.data.trackedObject3D) {
       this.trackedObject3DPath = this.data.trackedObject3D.split('.');
@@ -426,9 +263,9 @@ AFRAME.registerComponent('obb-collider2', {
     this.updateBoundingBox();
     aabb.halfSize.copy(boundingBoxSize).multiplyScalar(0.5);
 
-    if (this.el.sceneEl.systems['obb-collider2'].data.showColliders) {
-      this.showCollider();
-    }
+    // if (this.el.sceneEl.systems['obb-collider2'].data.showColliders) { // TODO: Make this a component property instead
+    //   this.showCollider();
+    // }
   },
 
   showCollider: function () {
diff --git a/src/editor/index.js b/src/editor/index.js
index 97347067..ce84df22 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -275,11 +275,15 @@ Inspector.prototype = {
    * Prevent pause elements with data-no-pause attribute while open inspector
    */
   playNoPauseElements: function () {
-    const noPauseElements = document.querySelectorAll(
-      'a-entity[data-no-pause]'
-    );
+    const noPauseElements = document.querySelectorAll('[data-no-pause]');
+    console.log(noPauseElements);
     noPauseElements.forEach((elem) => {
-      elem.play();
+      if (
+        elem.tagName.toLowerCase().startsWith('a-') &&
+        typeof elem.play === 'function'
+      ) {
+        elem.play();
+      }
     });
   },
   /**

From dc1427c2a26ac0008387026f935f7a043f86e153 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 11:55:43 -0700
Subject: [PATCH 04/15] super hacks

---
 index.html                      | 10 ----------
 src/aframe-streetmix-parsers.js |  2 +-
 src/editor/index.js             |  4 ++++
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 030a8a4a..e66ec533 100644
--- a/index.html
+++ b/index.html
@@ -114,16 +114,6 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
     </a-entity>
-    <!-- <a-entity position="1 -1 -1" rotation="0 30 0">
-    <a-box data-no-pause="" position="1 -1 -1" rotation="0 30 0" id="clipping-box" depth="5" width="5" height="5"
-      material="wireframe: true" obb-collider3="clipPlaneFunction: obb;" class="autocreated"></a-box>
-    </a-entity> -->
-    <!-- 
-    
-    document.querySelector('#clipping-box').setAttribute('obb-collider2', "clipPlaneFunction: obb;"); 
-    document.querySelector('#clipping-box').play();
-    
-    -->
   </a-scene>
 </body>
 <script>
diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index 618fbba1..af15b8f4 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -1718,7 +1718,7 @@ function processSegments(
   dirtBox.setAttribute('data-layer-name', 'Underground');
   dirtBox.setAttribute('obb-collider2', 'clipPlaneFunction: obb;');
   dirtBox.setAttribute('data-no-pause', true);
-  dirtBox.classList.add('autocreated');
+  dirtBox.id = 'dirt-box';
   streetParentEl.append(dirtBox);
   return streetParentEl;
 }
diff --git a/src/editor/index.js b/src/editor/index.js
index ce84df22..2b8fce8b 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -285,6 +285,10 @@ Inspector.prototype = {
         elem.play();
       }
     });
+    const dirtBox = document.getElementById('dirt-box');
+    if (dirtBox) {
+      dirtBox.play(); // TODO: This is a hack, fix this
+    }
   },
   /**
    * Open the editor UI

From 840e524cf21b513bba18b3870bc777faeaa40380 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 14:21:43 -0700
Subject: [PATCH 05/15] rename and delete unused code

---
 src/aframe-streetmix-parsers.js |  2 +-
 src/components/obb-clipping.js  | 76 +--------------------------------
 2 files changed, 3 insertions(+), 75 deletions(-)

diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index af15b8f4..e51e5e11 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -1716,7 +1716,7 @@ function processSegments(
   dirtBox.setAttribute('depth', length - 0.2); // depth is length - 0.1 on each side
   dirtBox.setAttribute('material', 'color: #664B00;');
   dirtBox.setAttribute('data-layer-name', 'Underground');
-  dirtBox.setAttribute('obb-collider2', 'clipPlaneFunction: obb;');
+  dirtBox.setAttribute('obb-clipping', 'clipPlaneFunction: obb;');
   dirtBox.setAttribute('data-no-pause', true);
   dirtBox.id = 'dirt-box';
   streetParentEl.append(dirtBox);
diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 6e78ca85..12763c51 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -1,6 +1,6 @@
 /* global AFRAME */
 
-AFRAME.registerComponent('obb-collider2', {
+AFRAME.registerComponent('obb-clipping', {
   schema: {
     size: { default: 0 },
     trackedObject3D: { default: '' },
@@ -141,73 +141,6 @@ AFRAME.registerComponent('obb-collider2', {
     };
   })(),
 
-  createPlanesFromTargetObject: function () {
-    const targetElement = document.querySelector('#clipping-box');
-    var clipPlanes = [];
-    var targetBox = new THREE.Box3();
-    var targetCenter = new THREE.Vector3();
-    var targetSize = new THREE.Vector3();
-
-    // Create planes
-    for (let i = 0; i < 6; i++) {
-      clipPlanes.push(new THREE.Plane());
-    }
-
-    targetBox.setFromObject(targetElement.object3D);
-    targetBox.getCenter(targetCenter);
-    targetBox.getSize(targetSize);
-
-    // Update plane positions
-    const normals = [
-      new THREE.Vector3(1, 0, 0),
-      new THREE.Vector3(-1, 0, 0),
-      new THREE.Vector3(0, 1, 0), // top
-      new THREE.Vector3(0, -1, 0),
-      new THREE.Vector3(0, 0, 1),
-      new THREE.Vector3(0, 0, -1)
-    ];
-
-    for (let i = 0; i < normals.length; i++) {
-      const normal = normals[i];
-      let point = targetCenter
-        .clone()
-        .add(
-          normal
-            .clone()
-            .multiply(
-              targetSize.clone().multiply(new THREE.Vector3(0.5, 0.5, 0.5))
-            )
-        );
-
-      clipPlanes[i].setFromNormalAndCoplanarPoint(normal, point);
-
-      // Align the geometry to the plane
-      var coplanarPoint = new THREE.Vector3();
-      clipPlanes[i].coplanarPoint(coplanarPoint);
-      var focalPoint = new THREE.Vector3()
-        .copy(coplanarPoint)
-        .add(clipPlanes[i].normal);
-      // Create a basic rectangle geometry
-      var planeGeometry = new THREE.PlaneGeometry(5, 5);
-      planeGeometry.lookAt(focalPoint);
-      planeGeometry.translate(
-        coplanarPoint.x,
-        coplanarPoint.y,
-        coplanarPoint.z
-      );
-
-      // Create mesh with the geometry
-      var planeMaterial = new THREE.MeshBasicMaterial({
-        side: THREE.DoubleSide,
-        color: Math.random() * 0xffffff
-      });
-      var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
-      this.el.sceneEl.object3D.add(dispPlane);
-    }
-
-    return clipPlanes;
-  },
-
   fetchElementToClip: function () {
     const elementToClip = document.querySelector('#google3d');
     if (elementToClip) {
@@ -459,12 +392,7 @@ AFRAME.registerComponent('obb-collider2', {
       obb.copy(this.aabb);
       obb.applyMatrix4(auxMatrix);
 
-      let clipPlanes;
-      if (this.data.clipPlaneFunction === 'obb') {
-        clipPlanes = this.createPlanesFromOBB(obb);
-      } else if (this.data.clipPlaneFunction === 'aabb') {
-        clipPlanes = this.createPlanesFromTargetObject();
-      }
+      const clipPlanes = this.createPlanesFromOBB(obb);
       // console.log(clipPlanes);
       this.applyClippingPlanes(clipPlanes);
     };

From adb04e7302ce0c5bb64f7424d39a3f01fe37e449 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 14:32:11 -0700
Subject: [PATCH 06/15] allow specifying target

old behavior is still working
---
 src/components/obb-clipping.js | 66 ++++++++++++++++------------------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 12763c51..36d829eb 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -4,6 +4,7 @@ AFRAME.registerComponent('obb-clipping', {
   schema: {
     size: { default: 0 },
     trackedObject3D: { default: '' },
+    clippingSourceSelectorString: { default: '#dirt-box' },
     minimumColliderDimension: { default: 0.02 },
     clipPlaneFunction: { default: 'obb' } // also try aabb
   },
@@ -25,19 +26,6 @@ AFRAME.registerComponent('obb-clipping', {
     //    this.elementToClip = document.querySelector('#google3d');
     this.fetchElementToClip();
 
-    // function findElementWithRetry(that) {
-    //     const elementToClip = document.querySelector("#google3d");
-    //     if (elementToClip) {
-    //         console.log('[obb-clipping] elementToClip found', elementToClip);
-    //         that.elementToClip = elementToClip;
-    //         // return elementToClip;
-    //     } else {
-    //         console.log('[obb-clipping] elementToClip not found, retrying in 1 second');
-    //         setTimeout(findElementWithRetry, 1000);
-    //     }
-    // }
-    // findElementWithRetry(this)
-
     // Enable local clipping in the renderer
     this.el.sceneEl.renderer.localClippingEnabled = true;
   },
@@ -172,9 +160,9 @@ AFRAME.registerComponent('obb-clipping', {
   },
 
   update: function () {
-    if (this.data.trackedObject3D) {
-      this.trackedObject3DPath = this.data.trackedObject3D.split('.');
-    }
+    // if (this.data.trackedObject3D) {
+    //   this.trackedObject3DPath = this.data.trackedObject3D.split('.');
+    // }
   },
 
   onModelLoaded: function () {
@@ -322,26 +310,34 @@ AFRAME.registerComponent('obb-clipping', {
   })(),
 
   checkTrackedObject: function () {
-    var trackedObject3DPath = this.trackedObject3DPath;
-    var trackedObject3D;
-
-    if (
-      trackedObject3DPath &&
-      trackedObject3DPath.length &&
-      !this.trackedObject3D
-    ) {
-      trackedObject3D = this.el;
-      for (var i = 0; i < trackedObject3DPath.length; i++) {
-        trackedObject3D = trackedObject3D[trackedObject3DPath[i]];
-        if (!trackedObject3D) {
-          break;
-        }
-      }
-      if (trackedObject3D) {
-        this.trackedObject3D = trackedObject3D;
-        this.updateCollider();
-      }
+    var trackedElement = document.querySelector(
+      this.data.clippingSourceSelectorString
+    );
+    if (trackedElement) {
+      this.trackedObject3D = trackedElement.object3D;
+      this.updateCollider();
+      console.log('trackedElement', this.trackedObject3D);
     }
+    // var trackedObject3DPath = this.trackedObject3DPath;
+    // var trackedObject3D;
+
+    // if (
+    //   trackedObject3DPath &&
+    //   trackedObject3DPath.length &&
+    //   !this.trackedObject3D
+    // ) {
+    //   trackedObject3D = this.el;
+    //   for (var i = 0; i < trackedObject3DPath.length; i++) {
+    //     trackedObject3D = trackedObject3D[trackedObject3DPath[i]];
+    //     if (!trackedObject3D) {
+    //       break;
+    //     }
+    //   }
+    //   if (trackedObject3D) {
+    //     this.trackedObject3D = trackedObject3D;
+    //     this.updateCollider();
+    //   }
+    // }
     return this.trackedObject3D;
   },
 

From a730154e21c81ab73915f8fee72b5aa5709c689d Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 15:04:31 -0700
Subject: [PATCH 07/15] revert data-no-pause behavior

---
 src/editor/index.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/editor/index.js b/src/editor/index.js
index 2b8fce8b..97347067 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -275,20 +275,12 @@ Inspector.prototype = {
    * Prevent pause elements with data-no-pause attribute while open inspector
    */
   playNoPauseElements: function () {
-    const noPauseElements = document.querySelectorAll('[data-no-pause]');
-    console.log(noPauseElements);
+    const noPauseElements = document.querySelectorAll(
+      'a-entity[data-no-pause]'
+    );
     noPauseElements.forEach((elem) => {
-      if (
-        elem.tagName.toLowerCase().startsWith('a-') &&
-        typeof elem.play === 'function'
-      ) {
-        elem.play();
-      }
+      elem.play();
     });
-    const dirtBox = document.getElementById('dirt-box');
-    if (dirtBox) {
-      dirtBox.play(); // TODO: This is a hack, fix this
-    }
   },
   /**
    * Open the editor UI

From 0b043ecb597108c895deecff09bead95dc07cf4f Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 15:06:20 -0700
Subject: [PATCH 08/15] revert

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index e66ec533..6b79acb9 100644
--- a/index.html
+++ b/index.html
@@ -114,6 +114,7 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
     </a-entity>
+    
   </a-scene>
 </body>
 <script>

From 1b548d5efe9e18b6b32b68a2d7e87e4fc56fc0e1 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 15:06:38 -0700
Subject: [PATCH 09/15] use obb-clipping on 3dtiles instead of target box

---
 src/aframe-streetmix-parsers.js |  3 --
 src/components/obb-clipping.js  | 49 ++++++++++-----------------------
 src/components/street-geo.js    |  1 +
 3 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index e51e5e11..28160122 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -1716,9 +1716,6 @@ function processSegments(
   dirtBox.setAttribute('depth', length - 0.2); // depth is length - 0.1 on each side
   dirtBox.setAttribute('material', 'color: #664B00;');
   dirtBox.setAttribute('data-layer-name', 'Underground');
-  dirtBox.setAttribute('obb-clipping', 'clipPlaneFunction: obb;');
-  dirtBox.setAttribute('data-no-pause', true);
-  dirtBox.id = 'dirt-box';
   streetParentEl.append(dirtBox);
   return streetParentEl;
 }
diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 36d829eb..a0bbcae1 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -3,14 +3,14 @@
 AFRAME.registerComponent('obb-clipping', {
   schema: {
     size: { default: 0 },
-    trackedObject3D: { default: '' },
-    clippingSourceSelectorString: { default: '#dirt-box' },
-    minimumColliderDimension: { default: 0.02 },
-    clipPlaneFunction: { default: 'obb' } // also try aabb
+    clippingSourceSelectorString: {
+      default: '[data-layer-name="Underground"]'
+    },
+    minimumColliderDimension: { default: 0.02 }
   },
 
   init: function () {
-    this.previousScale = new THREE.Vector3().copy(this.el.object3D.scale);
+    this.previousScale = new THREE.Vector3();
     this.auxEuler = new THREE.Euler();
 
     this.boundingBox = new THREE.Box3();
@@ -21,6 +21,7 @@ AFRAME.registerComponent('obb-clipping', {
     this.updateBoundingBox = this.updateBoundingBox.bind(this);
 
     this.el.addEventListener('model-loaded', this.onModelLoaded);
+    this.checkTrackedObject();
     this.updateCollider();
 
     //    this.elementToClip = document.querySelector('#google3d');
@@ -130,6 +131,7 @@ AFRAME.registerComponent('obb-clipping', {
   })(),
 
   fetchElementToClip: function () {
+    // TODO: Instead this should use SELF unless it
     const elementToClip = document.querySelector('#google3d');
     if (elementToClip) {
       this.elementToClip = elementToClip;
@@ -159,12 +161,6 @@ AFRAME.registerComponent('obb-clipping', {
     }
   },
 
-  update: function () {
-    // if (this.data.trackedObject3D) {
-    //   this.trackedObject3DPath = this.data.trackedObject3D.split('.');
-    // }
-  },
-
   onModelLoaded: function () {
     this.updateCollider();
   },
@@ -254,7 +250,10 @@ AFRAME.registerComponent('obb-clipping', {
       var auxEuler = this.auxEuler;
       var boundingBox = this.boundingBox;
       var size = this.data.size;
-      var trackedObject3D = this.trackedObject3D || this.el.object3D;
+      var trackedObject3D = this.trackedObject3D;
+      if (!trackedObject3D) {
+        return;
+      }
       var boundingBoxSize = this.boundingBoxSize;
       var minimumColliderDimension = this.data.minimumColliderDimension;
 
@@ -305,7 +304,7 @@ AFRAME.registerComponent('obb-clipping', {
         auxQuaternion,
         auxScale
       );
-      this.el.object3D.rotation.copy(auxEuler);
+      this.trackedObject3D.rotation.copy(auxEuler);
     };
   })(),
 
@@ -316,28 +315,8 @@ AFRAME.registerComponent('obb-clipping', {
     if (trackedElement) {
       this.trackedObject3D = trackedElement.object3D;
       this.updateCollider();
-      console.log('trackedElement', this.trackedObject3D);
     }
-    // var trackedObject3DPath = this.trackedObject3DPath;
-    // var trackedObject3D;
-
-    // if (
-    //   trackedObject3DPath &&
-    //   trackedObject3DPath.length &&
-    //   !this.trackedObject3D
-    // ) {
-    //   trackedObject3D = this.el;
-    //   for (var i = 0; i < trackedObject3DPath.length; i++) {
-    //     trackedObject3D = trackedObject3D[trackedObject3DPath[i]];
-    //     if (!trackedObject3D) {
-    //       break;
-    //     }
-    //   }
-    //   if (trackedObject3D) {
-    //     this.trackedObject3D = trackedObject3D;
-    //     this.updateCollider();
-    //   }
-    // }
+    console.log('trackedElement', this.trackedObject3D);
     return this.trackedObject3D;
   },
 
@@ -351,7 +330,7 @@ AFRAME.registerComponent('obb-clipping', {
       console.log('tick');
       var obb = this.obb;
       var renderColliderMesh = this.renderColliderMesh;
-      var trackedObject3D = this.checkTrackedObject() || this.el.object3D;
+      var trackedObject3D = this.checkTrackedObject();
 
       if (!trackedObject3D) {
         return;
diff --git a/src/components/street-geo.js b/src/components/street-geo.js
index 4726b6e1..65e85b6a 100644
--- a/src/components/street-geo.js
+++ b/src/components/street-geo.js
@@ -114,6 +114,7 @@ AFRAME.registerComponent('street-geo', {
       const google3dElement = document.createElement('a-entity');
       google3dElement.setAttribute('data-no-pause', '');
       google3dElement.id = 'google3d';
+      google3dElement.setAttribute('obb-clipping', '');
       google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles');
       google3dElement.setAttribute('loader-3dtiles', {
         url: 'https://tile.googleapis.com/v1/3dtiles/root.json',

From 9d5d232b504c1f5511bad20eb734bbe869fa9205 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 15:07:18 -0700
Subject: [PATCH 10/15] revert2

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6b79acb9..f42248e1 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,7 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
     </a-entity>
-    
+
   </a-scene>
 </body>
 <script>

From 99642057b73e0b50d5faf65228d8c532a4d0f3d8 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 22:51:35 -0700
Subject: [PATCH 11/15] add enableClipping boolean to street-geo

can turn from false to true during session, but then setting from true to false the user must reload to see tiles without clipping.

I tried using a reduntant 'enabled' boolean on obb-clipping. that didn't work but i kept it in to test a bit more.
---
 src/components/obb-clipping.js | 61 +++++++++++++++++++++++++---------
 src/components/street-geo.js   | 17 ++++++++--
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index a0bbcae1..38617e6f 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -4,9 +4,14 @@ AFRAME.registerComponent('obb-clipping', {
   schema: {
     size: { default: 0 },
     clippingSourceSelectorString: {
-      default: '[data-layer-name="Underground"]'
+      default: '[data-layer-name="Underground"]' // we use string instead of selector as the built-in a-frame selector doesn't support this syntax
     },
-    minimumColliderDimension: { default: 0.02 }
+    clippingDestinationSelectorString: {
+      // empty string means use the same element as the source
+      type: 'string'
+    },
+    minimumColliderDimension: { default: 0.02 },
+    enabled: { type: 'boolean', default: true }
   },
 
   init: function () {
@@ -24,7 +29,6 @@ AFRAME.registerComponent('obb-clipping', {
     this.checkTrackedObject();
     this.updateCollider();
 
-    //    this.elementToClip = document.querySelector('#google3d');
     this.fetchElementToClip();
 
     // Enable local clipping in the renderer
@@ -34,14 +38,6 @@ AFRAME.registerComponent('obb-clipping', {
   createPlanesFromOBB: (function () {
     var planeMeshes = [];
     var planeMatrix4 = new THREE.Matrix4();
-    // var planeColors = [
-    //     0x009B48,
-    //     0xB90000,
-    //     0x0045AD,
-    //     0xFF5900,
-    //     0xffffff,
-    //     0xFFD500,
-    // ];
 
     var planeNormals = [
       new THREE.Vector3(1, 0, 0),
@@ -111,6 +107,14 @@ AFRAME.registerComponent('obb-clipping', {
         clipPlanes[i].applyMatrix4(planeMatrix4);
 
         // Render planes. For testing purposes.
+        // var planeColors = [
+        //     0x009B48,
+        //     0xB90000,
+        //     0x0045AD,
+        //     0xFF5900,
+        //     0xffffff,
+        //     0xFFD500,
+        // ];
         // Align the geometry to the plane
         //         var coplanarPoint = new THREE.Vector3();
         //         clipPlanes[i].coplanarPoint(coplanarPoint);
@@ -131,10 +135,13 @@ AFRAME.registerComponent('obb-clipping', {
   })(),
 
   fetchElementToClip: function () {
-    // TODO: Instead this should use SELF unless it
-    const elementToClip = document.querySelector('#google3d');
-    if (elementToClip) {
-      this.elementToClip = elementToClip;
+    if (this.data.clippingDestinationSelectorString) {
+      // TODO: this route not tested
+      this.elementToClip = document.querySelector(
+        this.data.clippingDestinationSelectorString
+      );
+    } else {
+      this.elementToClip = this.el;
     }
   },
 
@@ -161,6 +168,27 @@ AFRAME.registerComponent('obb-clipping', {
     }
   },
 
+  removeClippingPlanes: function () {
+    this.elementToClip.object3D.traverse((obj) => {
+      if (obj.type === 'Mesh') {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach((material) => {
+            material.clippingPlanes = null;
+            material.clipIntersection = false;
+          });
+        } else {
+          obj.material.clippingPlanes = null;
+          obj.material.clipIntersection = false;
+        }
+      }
+    });
+  },
+
+  remove: function () {
+    this.data.enabled = false;
+    this.removeClippingPlanes();
+  },
+
   onModelLoaded: function () {
     this.updateCollider();
   },
@@ -328,6 +356,9 @@ AFRAME.registerComponent('obb-clipping', {
 
     return function () {
       console.log('tick');
+      if (!this.data.enabled) {
+        return;
+      }
       var obb = this.obb;
       var renderColliderMesh = this.renderColliderMesh;
       var trackedObject3D = this.checkTrackedObject();
diff --git a/src/components/street-geo.js b/src/components/street-geo.js
index 65e85b6a..a4cd9a06 100644
--- a/src/components/street-geo.js
+++ b/src/components/street-geo.js
@@ -17,7 +17,8 @@ AFRAME.registerComponent('street-geo', {
       type: 'string',
       default: 'google3d',
       oneOf: ['google3d', 'mapbox2d', 'osm3d']
-    }
+    },
+    enableClipping: { type: 'boolean', default: false }
   },
   init: function () {
     /*
@@ -58,7 +59,8 @@ AFRAME.registerComponent('street-geo', {
         data.maps === mapType &&
         (updatedData.longitude ||
           updatedData.latitude ||
-          updatedData.ellipsoidalHeight)
+          updatedData.ellipsoidalHeight ||
+          updatedData.enableClipping)
       ) {
         // call update map function with name: <mapType>Update
         this[mapType + 'Update']();
@@ -114,7 +116,9 @@ AFRAME.registerComponent('street-geo', {
       const google3dElement = document.createElement('a-entity');
       google3dElement.setAttribute('data-no-pause', '');
       google3dElement.id = 'google3d';
-      google3dElement.setAttribute('obb-clipping', '');
+      if (data.enableClipping) {
+        google3dElement.setAttribute('obb-clipping', '');
+      }
       google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles');
       google3dElement.setAttribute('loader-3dtiles', {
         url: 'https://tile.googleapis.com/v1/3dtiles/root.json',
@@ -171,6 +175,13 @@ AFRAME.registerComponent('street-geo', {
       long: data.longitude,
       height: height
     });
+
+    // if previous state was clipping, then disable it
+    if (data.enableClipping) {
+      this.google3d.setAttribute('obb-clipping', 'enabled: true');
+    } else {
+      this.google3d.removeAttribute('obb-clipping');
+    }
   },
   mapbox2dUpdate: function () {
     const data = this.data;

From 5d186ce351874a1d48cbc81ea5cedfa16650de8f Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 23:19:03 -0700
Subject: [PATCH 12/15] fix streetmix id collisions with drag-n-drop tool

---
 .../components/AddLayerPanel/createLayerFunctions.js           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js
index a08a40a9..f9d58b0a 100644
--- a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js
+++ b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js
@@ -1,4 +1,5 @@
 import { loadScript, roundCoord } from '../../../../../src/utils.js';
+import { createUniqueId } from '../../../lib/entity.js';
 
 export function createSvgExtrudedEntity(position) {
   // This component accepts a svgString and creates a new entity with geometry extruded
@@ -61,7 +62,7 @@ export function createStreetmixStreet(position, streetmixURL, hideBuildings) {
   // position the street further from the current one so as not to overlap each other
   if (streetmixURL && streetmixURL !== '') {
     const definition = {
-      id: streetmixURL,
+      id: createUniqueId(),
       components: {
         position: position ?? '0 0 -20',
         'streetmix-loader': {

From 07496be07f21f66e701d2de5ea9e74cb3f228325 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Mon, 30 Sep 2024 23:21:58 -0700
Subject: [PATCH 13/15] this works mind blown!

still might be better to have an explicit box some day -- i think there will be many case where a user will wish to have a box like this -- but this might be good enough to ship
---
 src/components/obb-clipping.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 38617e6f..7df4d45f 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -4,7 +4,7 @@ AFRAME.registerComponent('obb-clipping', {
   schema: {
     size: { default: 0 },
     clippingSourceSelectorString: {
-      default: '[data-layer-name="Underground"]' // we use string instead of selector as the built-in a-frame selector doesn't support this syntax
+      default: '[street]' // we use string instead of selector as the built-in a-frame selector doesn't support this syntax
     },
     clippingDestinationSelectorString: {
       // empty string means use the same element as the source

From 80cca151adde8898a4cb13f8e1329380ba249389 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Tue, 1 Oct 2024 09:51:16 -0700
Subject: [PATCH 14/15] fix toggle on/off during session

---
 src/components/obb-clipping.js | 14 ++++----------
 src/components/street-geo.js   | 16 +++++++++-------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 7df4d45f..5caf2265 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -10,8 +10,7 @@ AFRAME.registerComponent('obb-clipping', {
       // empty string means use the same element as the source
       type: 'string'
     },
-    minimumColliderDimension: { default: 0.02 },
-    enabled: { type: 'boolean', default: true }
+    minimumColliderDimension: { default: 0.02 }
   },
 
   init: function () {
@@ -146,8 +145,8 @@ AFRAME.registerComponent('obb-clipping', {
   },
 
   applyClippingPlanes: function (clipPlanes) {
-    console.log('applyclipping', this.elementToClip);
-    console.log('applyclipping', this);
+    // console.log('applyclipping', this.elementToClip);
+    // console.log('applyclipping', this);
     if (!this.elementToClip) {
       this.fetchElementToClip();
     }
@@ -185,7 +184,6 @@ AFRAME.registerComponent('obb-clipping', {
   },
 
   remove: function () {
-    this.data.enabled = false;
     this.removeClippingPlanes();
   },
 
@@ -344,7 +342,7 @@ AFRAME.registerComponent('obb-clipping', {
       this.trackedObject3D = trackedElement.object3D;
       this.updateCollider();
     }
-    console.log('trackedElement', this.trackedObject3D);
+    // console.log('trackedElement', this.trackedObject3D);
     return this.trackedObject3D;
   },
 
@@ -355,10 +353,6 @@ AFRAME.registerComponent('obb-clipping', {
     var auxMatrix = new THREE.Matrix4();
 
     return function () {
-      console.log('tick');
-      if (!this.data.enabled) {
-        return;
-      }
       var obb = this.obb;
       var renderColliderMesh = this.renderColliderMesh;
       var trackedObject3D = this.checkTrackedObject();
diff --git a/src/components/street-geo.js b/src/components/street-geo.js
index a4cd9a06..cb60442c 100644
--- a/src/components/street-geo.js
+++ b/src/components/street-geo.js
@@ -73,6 +73,15 @@ AFRAME.registerComponent('street-geo', {
         }
       }
     }
+
+    // if state is not clipping, then disable it
+    if (this.google3d) {
+      if (data.enableClipping) {
+        this.google3d.setAttribute('obb-clipping', '');
+      } else {
+        this.google3d.removeAttribute('obb-clipping');
+      }
+    }
   },
   mapbox2dCreate: function () {
     const data = this.data;
@@ -175,13 +184,6 @@ AFRAME.registerComponent('street-geo', {
       long: data.longitude,
       height: height
     });
-
-    // if previous state was clipping, then disable it
-    if (data.enableClipping) {
-      this.google3d.setAttribute('obb-clipping', 'enabled: true');
-    } else {
-      this.google3d.removeAttribute('obb-clipping');
-    }
   },
   mapbox2dUpdate: function () {
     const data = this.data;

From 819233c20cbd881c566a3524761df1f60f1a7dfb Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Tue, 1 Oct 2024 09:59:33 -0700
Subject: [PATCH 15/15] throttle tick for naive performance improvements

better solution is to monitor for pose changes on target object AND monitor for tiles loaded events from 3dtiles runtime object via threejs-loader-tiles library
---
 src/components/obb-clipping.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/obb-clipping.js b/src/components/obb-clipping.js
index 5caf2265..4c8c2f9d 100644
--- a/src/components/obb-clipping.js
+++ b/src/components/obb-clipping.js
@@ -14,6 +14,8 @@ AFRAME.registerComponent('obb-clipping', {
   },
 
   init: function () {
+    this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
+
     this.previousScale = new THREE.Vector3();
     this.auxEuler = new THREE.Euler();