Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent AR Behavior and Texture Quality on iOS #4984

Open
3 of 5 tasks
Comerick opened this issue Jan 22, 2025 · 0 comments
Open
3 of 5 tasks

Inconsistent AR Behavior and Texture Quality on iOS #4984

Comerick opened this issue Jan 22, 2025 · 0 comments

Comments

@Comerick
Copy link

Comerick commented Jan 22, 2025

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:
Image

IOS 18.x:
Image

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant