How to show image from gallery in RealityKit?

Question

I want to show image from gallery. i am loading the image using imagePicker.

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    guard let image = info[.originalImage] as? UIImage else { return }
  
    if let imgUrl = info[UIImagePickerController.InfoKey.imageURL] as? URL{            
        self.photoEntity = createPhotoEntity(fileUrl: imgUrl, fileName: imgName)
    }
    dismiss(animated: true)
}

and then i have created a modelEntity like this.

private func createPhotoEntity(fileUrl: URL, fileName: String) -> ModelEntity? {
    // Create a TextureResource by loading the contents of the file URL.
    do {
        let texture = try TextureResource.load(contentsOf: fileUrl)
        let planeMesh = MeshResource.generatePlane(width: 0.5, depth: 0.5)
        var material = UnlitMaterial()
        material.color = .init(tint: .red.withAlphaComponent(0.999), texture: .init(texture))
        let entity = ModelEntity(mesh: planeMesh, materials: [material])
        entity.generateCollisionShapes(recursive: true)
        ARView.installGestures([.scale, .translation], for: entity)
        return entity
    } catch(let error) {
        print("error loading. \(error.localizedDescription)")
    }
    return nil
}

But the fact is, image is being shown with a color and this is legit.

But Is there any way to show only image without any color?

Answer 1

Tested on Xcode 13.4, macOS 12.4

import Foundation
import RealityKit
import UIKit
import SwiftUI


@available(macOS 11.0, iOS 15.0, *)
public extension UnlitMaterial {
    static func imageWith(imageName: String, bundle: Bundle? = nil, uiTint: UIColor) throws -> UnlitMaterial {
        var material = UnlitMaterial()
        do {
            let texture = try TextureResource.load(named: imageName, in: bundle)
            let materialParameter = MaterialParameters.Texture(texture)
            let materialBaseColor = UnlitMaterial.BaseColor(tint: uiTint, texture: materialParameter)
            material.color = materialBaseColor
            return material
        } catch let error {
            throw error
        }
    }
    
    static func imageWith(imageName: String, bundle: Bundle? = nil, tint: Color) throws -> UnlitMaterial {
        var material = UnlitMaterial()
        do {
            let texture = try TextureResource.load(named: imageName, in: bundle)
            let materialParameter = MaterialParameters.Texture(texture)
            let materialBaseColor = UnlitMaterial.BaseColor(tint: UIColor(tint), texture: materialParameter)
            material.color = materialBaseColor
            return material
        } catch let error {
            throw error
        }
    }
}

Usage:

if #available(iOS 15.0, *) {
                do {
                    var imageMaterial = try UnlitMaterial.imageWith(imageName: "1", uiTint: .white)
                    let bluePlane = ModelEntity(mesh: bluePlaneMeshResource, materials: [imageMaterial])
                    bluePlane.transform.rotation *= simd_quatf(angle: 90, axis: SIMD3<Float>(1,0,0))
                    box1AnchorEntity.addChild(bluePlane)
                    view.scene.addAnchor(box1AnchorEntity)
                } catch let error {
                    print("Error: \(error)")
                }
            } else {
                // Fallback on earlier versions
            }

Answer 2

Try this. Take into consideration, a tint color is multiplied by an image – so, if tint's RGBA = [1,1,1,1], a result of multiplication will be an image itself (without tinting)...

import ARKit
import RealityKit

class ViewController: UIViewController {
    
    @IBOutlet var arView: ARView!
    var anchor: AnchorEntity!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        self.anchor = AnchorEntity(world: [0,0,-1])
        
        let ball: MeshResource = .generateSphere(radius: 0.25)
        
        var material = UnlitMaterial()
        
        if #available(iOS 15.0, *) {

            material.color = try! .init(tint: .white,
                                     texture: .init(.load(named: "img", 
                                                             in: nil)))
        }
        
        let ballEntity = ModelEntity(mesh: ball, materials: [material])
        
        self.anchor.addChild(ballEntity)
        
        self.arView.scene.anchors.append(self.anchor)
    }
}