RealityKit Materials: Basic Gradient

Question

---

Hello!

I’m trying to make a material in RealityKit that has a basic gradient. I am making an iPadOS app.

A few thoughts:

• I cannot use Reality Composer Pro to do this because the Shader Graph tool only works for visionOS.
• I cannot use a Metal file to create a shader because I am using a .swiftpm (app playgrounds) file targeted for Swift Playgrounds. Metal files don’t seem to work on Swift Playgrounds (it’s a Swift playground, after all).
• I would prefer to not use image textures for a simple thing like this. That would take up storage. I wish it was as easy as applying a .basecolor with a UIColor, but UIColor does not support gradients.

What are my options? I know my requirements are likely not typical, but I really need to try to not break those.

I looked into CustomMaterial from RealityKit but once again, those take Metal shaders. Amazing tool, but I sadly cannot use them because I’m using a Swift Playground that doesn’t seem to with Metal files, at least it seems.

I’ve briefly done research on MetalKit? Could that help me out?

Let’s say I have a simple box in RealityKit. How would I apply a simple gradient to it given my constraints?

I really appreciate the help.

P.S. This is a SwiftUI project for reference.

EDIT:

Could I create a texture without images, perhaps by making a view into a texture and applying it? How would I do this? What are the pros and cons of this?

Another thought was could I just use MetalKit to create the gradient and apply it using CustomMaterial?

Answer 1

RealityKit gradient texture programmatically

You can definitely create a gradient fill for a RealityKit texture (without the help of the Metal Shading Language and raster files) if you use the ImageRenderer object that generates procedural images from SwiftUI views. This is what the code looks like:

import SwiftUI
import RealityKit

struct GradientView: View {
    var body: some View {
        Rectangle()
            .frame(width: 512, height: 512)
            .foregroundStyle(
                LinearGradient(gradient: Gradient(colors: [.yellow, .red]), 
                                              startPoint: .top, 
                                                endPoint: .bottom)
            )
    }
}
struct ContentView: View {
    var body: some View {
        ZStack {
            RealityKitView()
                .ignoresSafeArea()
        }
    }
}

struct RealityKitView: UIViewRepresentable {
    let arView = ARView(frame: .zero)
    
    @MainActor func textureFromView() -> UnlitMaterial {
        let renderer = ImageRenderer(content: GradientView())
        guard let cgImage = renderer.cgImage else { return .init() }
        
        var material = UnlitMaterial()
        material.color.texture = try! .init(.generate(from: cgImage, 
                                       options: .init(semantic: .color)))
        return material
    }

    func makeUIView(context: Context) -> ARView {
        let box = ModelEntity(mesh: .generateBox(size: 0.5))
        box.orientation = simd_quatf(angle: .pi/4, axis: [1,1,0])
        box.model?.materials = [self.textureFromView()]
        
        let anchor = AnchorEntity()
        anchor.addChild(box)
        arView.scene.anchors.append(anchor)
        return arView
    }
    func updateUIView(_ view: ARView, context: Context) { }
}