Transparent background doesn't work in ar in iphone and ipad

[lmomimi]

Description

Transparent background doesn't work in ar in iphone and ipad,

Live Demo

https://modelviewer.dev/examples/augmentedreality/#transparentBackground

open in iphone or ipad click ar button, all transparent part are black

if you upload a glb model contain transparent material to https://spase.io/playground
convert to usdz model,then use html code
<a href="./your.usdz" rel="ar"> <img src="your.png" alt="" width="250" height="250"> </a>
ar transparent will work fine in iphone

Version

• model-viewer: v1.7.2

Browser Affected

• Safari

OS

• iOS 14.6

AR

• WebXR

[milesgreen]

Ah... Are you talking abut the actual model itself, which contains transparent materials? And when you go into AR on iOS (which looks to be auto generating a USDZ) those transparent materials are no longer transparent?

I guess this is more of a question of USDZ export from three.js - and whether USDZ even supports the same kind of transparent material definitions.

Viewed on iOS QuickLook:

[elalish]

@mrdoob Is there a three.js issue on USDZ transparency yet?

[lmomimi]

scene view

ios AR view

3d model

cube.zip

[milesgreen]

I thought there was a related fix in r129 mrdoob/three.js#21747

[milesgreen]

Looks like r129 works for some (PBR?) transparent materials:

[mrdoob]

I've tried changing the jpg that the USDZExporter produces with the original png:

And this is what I get:

[elalish]

Did you check in iOS too? I've seen different bugs in that version of QuickLook compared to the MacOS one.

[mrdoob]

Hmm, actually... That was the internal model.usda.

The usdz looks like this:

[mrdoob]

Do we know if usdz support alpha/opacity maps?

[base-krchome]

Do we know if usdz support alpha/opacity maps?

yes we know, it supports

[mrdoob]

@base-krchome can you share a usdz file that uses them?

[ZacKenny]

Hi, I've been watching this thread just to see what develops. It seems to me that in terms of using the PNG as-is, we're just waiting for iOS to fix the display issue?

Has anyone tried a different way of using the images as materials? I wonder if there's a way to run the PNG files through some sort of node-based filter right in Blender to actually remove the blank areas in the image from the plane's geometry?

I did try using a PSD file instead of PNG but had the same result.

[sercandemirtas]

@mrdoob @Karpulza @lmomimi I hope this will help!

Live link--
https://www.basebros.com/usdz-test.html

Usdz file link---
https://www.basebros.com/assets/test.usdz

Glb file link---
https://www.basebros.com/assets/test.glb

I created this cube via Blender and converted glb to usdz with macos terminal. You can download glb or usdz file and review shading parts for it.

[mrdoob]

@sercandemirtas That file doesn't seem to be transparent in MacOS 🤔