RealityKit - Animate opacity of a ModelEntity?

Question

By setting the color of a material on the model property of a ModelEntity, I can alter the opacity/alpha of an object. But how do you animate this?

Answer 1

I tested it using different techniques and came to the sad conclusion: you can't animate a material's opacity in RealityKit framework because RealityKit materials don't support animation at runtime (for now I hope). Let's wait for RealityKit's major update.

Here's a code you can use for test

(arView.alpha property just works):

import UIKit
import RealityKit

class ViewController: UIViewController {

    @IBOutlet var arView: ARView!

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        arView.alpha = 1.0 
        opacityAnimation()
    }

    func opacityAnimation() {

        UIView.animate(withDuration: 5.0,
                         animations: {

            self.arView.alpha = 0.0
        })
    }
}

And use this code snippet in order to make sure that animation doesn't work properly

(there's no animation process, just value assignment):

import UIKit
import RealityKit

class ViewController: UIViewController {

    @IBOutlet var arView: ARView!
    let tetheringAnchor = AnchorEntity(world: [0,0,0])
    var material = SimpleMaterial()
    let mesh: MeshResource = .generateSphere(radius: 0.5)
    var sphereComponent: ModelComponent? = nil

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        material.metallic = .float(1.0)
        material.roughness = .float(0.0)
        material.baseColor = .color(.red)

        sphereComponent = ModelComponent(mesh: mesh,
                                    materials: [material])

        tetheringAnchor.components.set(sphereComponent!)
        arView.scene.anchors.append(tetheringAnchor)

        opacityAnimation()
    }

    func opacityAnimation() {

        UIView.animate(withDuration: 5.0,
                         animations: {

            self.material.metallic = .float(1.0)
            self.material.roughness = .float(0.0)
            self.material.baseColor = .color(.green)

            self.sphereComponent = ModelComponent(mesh: self.mesh,
                                             materials: [self.material])

            self.tetheringAnchor.components.set(self.sphereComponent!)
            self.arView.scene.anchors.append(self.tetheringAnchor)
        })
    }
}

Answer 2

I don't know if it suits with your use case. But you should consider video material. As you can see in this WWDC session (2min45). An entity with complex pulsating opacity.

https://developer.apple.com/videos/play/wwdc2020/10612/

Answer 3

As @AndyFedo says there is currently no way to animate the opacity nor alpha of an Entity.

Even changing a SimpleMaterial at run time currently results in flickering.

Having said this I was able to animate the Alpha of a SimpleMaterials Color, however based on testing it is in no way optimal or recommended for that matter.

But just in case you wanted to try to further experiment with this avenue please see an attached example which assumes that you only have a single SimpleMaterial:

class CustomBox: Entity, HasModel, HasAnchoring {

  var timer: Timer?
  var baseColour: UIColor!

  //MARK:- Initialization

  /// Initializes The Box With The Desired Colour
  /// - Parameter color: UIColor
  required init(color: UIColor) {
    self.baseColour = color
    super.init()
    self.components[ModelComponent] = ModelComponent(mesh: .generateBox(size: [0.2, 0.2, 0.2]),
                                                     materials:  [SimpleMaterial (color:  baseColour, isMetallic: false)]
    )
  }

  required init() { super.init() }

  //MARK:- Example Fading

  /// Fades The Colour Of The Entities Current Material
  func fadeOut() {

    var alpha: CGFloat = 1.0
    timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true) { timer in

      if alpha == 0 {
        timer.invalidate()
        return
      }

      var material = SimpleMaterial()
      alpha -= 0.01
      material.baseColor = MaterialColorParameter.color(self.baseColour.withAlphaComponent(alpha))
      material.metallic = .float(Float(alpha))
      material.roughness = .float(Float(alpha))
      DispatchQueue.main.async {
        self.model?.materials = [material]

      }
    }
  }
}

As such just to test you can create and then call the function like so:

let box = CustomBox(color: .green)
box.position = [0,0,-0.5]
arView.scene.anchors.append(box)
box.fadeOut()

Also I would politely ask, that this answer not get downvoted as I am simply iterating the fact that (a) it isn't possible with any current built in methods, and (b) that it can in part be achieved albeit to a very limited extent (and thus currently; in a way which one would see fit for production).