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>`

ar transparent will work fine in iphone

Version

• model-viewer: v1.7.2

Browser Affected

• [ ] Safari

OS

• [ ] iOS 14.6

AR

• [ ] WebXR

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 https://github.com/mrdoob/three.js/pull/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 🤔

[JanSob]

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

So I have the same issue. Oddly enough, it seem that the usdz-model works great on MacOS, it's only on IpadOS and IOS where

a. the transparency is black instead of cut-out/transparent and b. it seems there is some issues with lightning (the models are are considerably darker on IOS than MacOs).

The biggest issue is definitely a.

I have attached both the USDZ and the GLTF and a screenshot of the USDZ on MacOs (trans. working) and IpadOS (transp. not working).

Any kind of help is greatly appreciated @mrdoob , as this has become kind of a roadblock to my project 😓

gltf and usdz.zip

[elalish]

@JanSob How were these USDZ/glTF created? Do you get different results when the USDZ is auto-generated for quick look?

[JanSob]

@JanSob How were these USDZ/glTF created? Do you get different results when the USDZ is auto-generated for quick look?

These were created with the threejs GLTFexporter/USDZexporter, but the result is absolutely identical (black instead of transparent) in model-viewer if I don't use the [IOS-Source] and let model-viewer auto-generate.

[elalish]

@JanSob Got it, that makes sense since auto-generation also uses USDZExporter.

[sercandemirtas]

To summarize; when we use model-viewer auto-generate to usdz, png images cannot be fully converted. Transparent parts appear black. But when we convert glb to usdz via macos terminal and use ios-src on model-viewer there is so problem. Any planned update on this issue? @elalish

[sercandemirtas]

To summarize; when we use model-viewer auto-generate to usdz, png images cannot be fully converted. Transparent parts appear black. But when we convert glb to usdz via macos terminal and use ios-src on model-viewer there is so problem. Any planned update on this issue? @elalish

@elalish Hey! any news on this situation ?

[elalish]

You'll probably find better updates on the three.js github for this. USDZ is a strange beast, so there will always be some gaps. Hopefully this can be fixed.

[elalish]

Looks like this was fixed.