Inconsistent AR Behavior and Texture Quality on iOS

[Comerick]

Problem/Question 1: Texture Resolution Reduction on IOS AR
High-resolution textures (e.g., 4K) are automatically reduced to 1K. This is related to the maxTextureSize parameter in the three.js parseAsync options, which defaults to 1K. I want to keep them at 4k or at least 2k.

async parseAsync( scene, options = {} ) {

	options = Object.assign( {
		ar: {
			anchoring: { type: 'plane' },
			planeAnchoring: { alignment: 'horizontal' }
		},
		includeAnchoringProperties: true,
		quickLookCompatible: false,
		maxTextureSize: 1024,
	}, options );
    ...

Question: Can this parameter (maxTextureSize) be set from the model-viewer side, or would a custom exporter be required to handle higher texture sizes?

Example model:
https://cdn.holostep.io/1/034944a5-3d70-4ee0-b93a-14d85ef66092-model.glb

Custom USDZExporter solution:
Hosted workaround version

My workaround code:

activateAR() {
    if (this.canActivateAR()) {
      this.controls.resetQua();
      this.sizeIndicator.hideAll();
      this.controls.tick();
      const iosSrc = this.instance.getAttribute('ios-src');

      if (IS_AR_QUICKLOOK_CANDIDATE && !iosSrc) {
        const { model, shadow, target } = this._scene as any;
        let visible = false;

        try {
          // Temporarily hide the shadow for exporting
          if (shadow != null) {
            visible = shadow.visible;
            shadow.visible = false;
          }
          // Exported from three.js lib
          const exporter = new USDZExporter();
          target.remove(model);
          model.position.copy(target.position);
          model.updateWorldMatrix(false, true);

          exporter.parseAsync(model, { maxTextureSize: 2048 }).then((arraybuffer) => {
            model.position.set(0, 0, 0);
            target.add(model);

            const blob = new Blob([arraybuffer], { type: 'model/vnd.usdz+zip' });
            const url = URL.createObjectURL(blob);

            if (shadow != null) {
              shadow.visible = visible;
            }

            this.instance.setAttribute('ios-src', url);
            setTimeout(() => {
              this.instance.activateAR();
            }, 30);
          });
        } catch (error) {
          console.error('Error during AR Quick Look setup:', error);
        }
      } else {
        setTimeout(() => {
          this.instance.activateAR();
        }, 30);
      }
    }
  }

Question 2: Model Rendering Differences Between iOS 17.x and iOS 18.x
The same model appears differently when viewed in AR Quick Look on iOS 17.x vs. iOS 18.x.

Question: Is there any guidance on how to address or debug the rendering differences between these iOS versions?
Example usdz:
https://cdn.holostep.io/1/2k-threejs-exported.usdz

Footages (Same usdz file on different IOS versions):
IOS 17.x:

IOS 18.x:

Model viewer version: 4.0.0
Three.js version: 0.170.0

IOS version:

• IOS 17.x

• IOS 18.x

AR

• WebXR

• SceneViewer

• QuickLook

Thank you for the help!

[mohammadbaghaei]

Hey there! Regarding your first question, this feature isn’t currently available in model-viewer, but I’ve added it in PR #4979. If it gets approved and merged, we’ll have it in the next release of model-viewer 😊

Thanks for pointing this out, by the way!

[mohammadbaghaei]

I currently don’t have the ability to test on iOS. Does the ar-placement feature in Quick Look work correctly for both wall and floor modes?

[Comerick]

Hey there! Regarding your first question, this feature isn’t currently available in model-viewer, but I’ve added it in PR #4979. If it gets approved and merged, we’ll have it in the next release of model-viewer 😊

Thanks for pointing this out, by the way!

Ohh wow, that's good news!

[Comerick]

I currently don’t have the ability to test on iOS. Does the ar-placement feature in Quick Look work correctly for both wall and floor modes?

Yeah, I wasn't exactly clear on that. The 'ar-placement' works great. The sofa color is darker on IOS 18.x.
I recently found a similar issue on a forum.
The support suggests that the visionOS2 release changed the Quick Look behavior.
https://developer.apple.com/documentation/visionos-release-notes/visionos-2-release-notes

look for id: 118210191

As far as I can tell this is the three.js side, so I may open an issue there to figure it out or write a custom exporter myself.