swiftuimetalrealitykitmetalkitreality-composer-pro

RealityKit Materials: Basic Gradient



Hello!

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

A few thoughts:

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?


Solution

  • 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()
            }
        }
    }
    

    enter image description here

    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) { }
    }