Street Artifacts - 3d scanned and geotagged streetArt using ModelViewer

[minigorille]

Hi there,
A project Im working on about to launch, StreetArtifacts.xyz
A project to capture ephemeral street artifacts using 4k color textured 3D scan and augmented reality to replace memory collected into a timeless augmented world.

Idea came during the pandemic as beautiful ephemeral murals were being painted and are slowly disappearing as shops re-open.

Build on top of Leaflet/MapBox using ModelViewer to display the artifacts and then load in AR.
Best experience on Iphone/Safari or Dekstop+Iphone

Murals are scanned on Iphone 12 PRO with Lidar + GPSCoordinates.
https://streetartifacts.xyz/

Love to hear your feedbacks! , finalizing a few bugs here and there.
The most annoying being the AR quick Look missing a loading experience on Google Chrome (Ive seen the post about that) so Safari offer a much nicer experience as it open AR quick Look right away and then load the model for AR.

Thanks for developing this amazing ModelViewer!
Best

[ghost]

Wow, this is super cool. I tried loading on iPad (13.6), Desktop, and Pixel-4. The experience was great on all of them, I thought, but I might be missing some details. What do you think is lacking on the Android experience? Model placement is certainly a bit different between quicklook and SceneViewer/WebXR, is this the main issue you see?

[minigorille]

Hi!
Glad you like it, it's been a fun project!
On the desktop experience, I display a QR Code for user to scan and launch the AR, as of today this only work on ios as I have this little piece of script on the QR linked page :

`
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const product = urlParams.get('model')
  console.log(product);
 
  function launchIOSQuickLookAR(usdzSrc) {
  const anchor = document.createElement("a");
  anchor.setAttribute("rel", "ar");
  anchor.appendChild(document.createElement("img"));
  anchor.setAttribute("href", usdzSrc);
  anchor.click();
  }
   
  function detectiOSARQuickLook() {
  const testAnchor = document.createElement("a");
  return testAnchor.relList.supports("ar");
  }

  launchIOSQuickLookAR(product);
   

`
and I just pass dynamically the model name to load with URL Params... tricks work super well on ios but Im not sure how I would go about displaying a QR code that can be scanned by an Android phone and trigger SceneViewer? Love some pointers as I could detect on my page if the mobile is ios or android and trigger different behavior.

Best

[felipe-chamas]

Very cool idea!!! A nice way to get out of the house safely 😅
If I can suggest a small fix. When I pan/drag the model with the right mouse button the Context Menu opens. According to the examples you can disable it by setting:

modelViewer.addEventListener('contextmenu', event => event.preventDefault());

[minigorille]

Oh thanks ! 🙌 updated it !