Loading entities with ShaderGraph materials

Bring entities that contain materials created with Reality Composer Pro for use in your visionOS app.

Overview

Reality Composer Pro gives you the ability to create entities that you can bring over to, and interact with, in your visionOS app. This sample loads the entities created with ShaderGraph and places them in a ScrollView.

[Image]

Create the materials in ShaderGraph

In the Project Navigator, open Packages > RealityKitContent, select Package.realitycomposerpro, then click Open in Reality Composer Pro.

[Image]

The RealityKitContent package in the sample includes these shaders:

Create a volumetric view in the app

The sample uses a volumetric view in a WindowGroup to load the entities from the RealityKitContent package:

struct ShaderSamplesApp: App {
    var body: some Scene {
        WindowGroup {
            ShaderSamplesView()
        }
        .windowStyle(.volumetric)
    }
}

Load the shaders from the content package

The loadShaders method loads all the shader entities containing the shader materials from the ShaderSamplesScene scene in the realityKitContentBundle:

private func loadShaders() async {
    guard
        let shaderSamplesSceneRoot = try? await Entity(
            named: "ShaderSamplesScene", in: realityKitContentBundle
        ).children.first
    else {
        return
    }

    // Get the shader sample entities.
    for shaderSampleEntity in shaderSamplesSceneRoot.children {
        shaderSampleEntities.append(shaderSampleEntity)
    }
}

The method saves the entities in a list named shaderSampleEntities to be used later to create the RealityViewContent.

Add the shader entities into the RealityView content

The createRealityView method in the sample creates a RealityView for an entity and adds it to the RealityViewContent in the createRealityView method:

private func createRealityView(_ shaderSampleEntity: Entity) -> some View {
    RealityView { content in
        shaderSampleEntity.position = [0, 0, 0]
        shaderSampleEntity.scale = SIMD3<Float>(
            repeating: 0.75)
        content.add(shaderSampleEntity)
    }
    .glassBackgroundEffect()
    .containerRelativeFrame(
        [.horizontal], count: 3, spacing: 5)
}

The method positions the shaderSampleEntity at the center of the RealityView and reduces the scale to fit in the ScrollView.

Load the entities into a ScrollView

The sample uses a ScrollView to display all the entities in the shaderSampleEntities list in a RealityView. The ScrollView shows the name of the shader below the RealityView:

var body: some View {
    ScrollView(.horizontal) {
        HStack {
            ForEach(shaderSampleEntities) { shaderSampleEntity in
                VStack {
                    // Display the shader sample entity.
                    createRealityView(shaderSampleEntity)

                    // Display the shader name.
                    createDisplayName(shaderSampleEntity)
                }.padding([.bottom])
            }
        }
    }.task {
        // Load the shader samples scene root.
        await loadShaders()
    }
}

The sample loads the shaders in an asynchronous Task, and displays the shaders in ScrollView.