PNG with transparency as plane texture

We have the same issue and it's a big one for us. Our app relies heavily on transparent PNGs.

I talked to the AR teams at WWDC and it seemed like something they just completely overlooked. Also unclear if they are even working on a fix. Please report the issue so they give it more priority.

Similar issue here. Rendering glass type material doesn’t work. It’s replaced by some other material and doesn’t look good. Also noticed that Reality Composer doesn’t offer a glass material for objects.

I've been able to overcome this issue for the time being by setting the tint color of the material to:

let resource = try? TextureResource.load(named: "halo")
var material = UnlitMaterial()
material.baseColor = MaterialColorParameter.texture(resource!)
material.tintColor = UIColor.white.withAlphaComponent(0.99)

Do you know if official support has been added for transparency, yet?

This does not seem to work in iOS 14 yet. I filed feedback FB7753172.
Setting an alpha on the tintColor of a SimpleMaterial that is not 1 will prevent the mesh from being rendered at all.

Anyone knows another workaround?

Thanks for submitting feedback. As a workaround on iOS 14 beta 1, please try creating the SimpleMaterial using the SimpleMaterial(color:roughness:isMetallic:) initializer, and then changing the tintColor alpha to a value less than one.

Thanks for submitting feedback. As a workaround on iOS 14 beta 1, please try creating the SimpleMaterial using the SimpleMaterial(color:roughness:isMetallic:) initializer, and then changing the tintColor alpha to a value less than one.

This solution works; but is not ideal.

@jan luca, you'll have to invoke SimpleMaterial(color:roughness:isMetallic:) initializer only; a regular SimpleMaterial might not work. However, while doing so, I'm still getting a darkish tint on the image. Kindly advise on the same.

None of the suggestions work in iOS 14.4... kind of annoyed at the developer support here... I had followed countless Stack overflow posts, and green check marked solutions from the actual framework developers on this forum, but none of it works.

All I want is a transparent material with a base color. After trying for hours and hours, I decided to make a transparent PNG to try that so I could exactly match these pieces of code:

Code Block 
   let resource = try? TextureResource.load(named: "WallOverlay")
   var material = SimpleMaterial(color: .white, roughness: 1, isMetallic: true)
   material.baseColor = MaterialColorParameter.texture(resource!)
   material.tintColor = UIColor.white.withAlphaComponent(0.99)

Does not work at all. If I use an unlit material, doesn't work.

If I use a color instead of a texture resource, it doesn't work.

In iOS 14.4 there appears to be no way to make a material transparent at this time.

It would be great if the framework engineers could acknowledge this instead of having posts with solved statuses that DO NOT work in the latest version of iOS.

Please let us know when this will be fixed, or provide a full example of making a material that actually makes it transparent. Thank you :)


P.S this is all I want to do and expect this code to work:

Code Block 
 var material = SimpleMaterial()
    material.baseColor = MaterialColorParameter.color(
      UIColor(red: 0.97, green: 0.75, blue: 0.09, alpha: 0.10)
    )
    self.model = ModelComponent(
     mesh: .generatePlane(width: 0, depth: 0),
     materials: [material]
    )

Use this color and make it barely visible, and have the real world visible behind it.

I found out the cause of the issue I posted in the comment above:

You cannot update a model's mesh like this:

Code Block 
  self.model?.mesh = MeshResource.generatePlane(
     width: planeAnchor.extent.x,
     depth: planeAnchor.extent.z
    )

You must re-create the entire model anytime you want to update the size of it!

Code Block 
 var material = SimpleMaterial(color: .blue, isMetallic: true)
   material.tintColor = .init(white: 1, alpha: 0.5)
   self.model = ModelComponent(
    mesh: .generatePlane(
     width: planeAnchor.extent.x,
     depth: planeAnchor.extent.z
    ),
    materials: [material]
   )

'

Will be opening a new ticket to show an easy reproduction later today. For anyone else with the issue, updating the mesh size breaks transparency

So is there any updated way to do this in iOS 15? baseColor and tintColor are deprecated so you can't set the baseColor to the image texture and the tint to a slightly transparent white anymore. I've gotten it to work to some extent with this code, but it's still not right.

...
let colorTexture = MaterialParameters.Texture(imageTexture)
var imageMaterial = UnlitMaterial()
imageMaterial.color = .init(tint: tint.withAlphaComponent(0.9999), texture: colorTexture)

It renders correctly with just the opaque parts of the image until you move and then it shows the transparent plane behind it, which would be fine if there wasn't any content behind it, but that's not very flexible. Here's what it looks like:

Using a SimpleMaterial doesn't help and leaves the image darker than it should be. Placing the icons in front of the background plane by 0.02-0.1 reduces the frequency of the effect but it can still happen. Additionally, 0.1 is way too far forward for many applications. What's the best way to fix this iOS 15? Do I just need to wait for iOS 16? Thanks.