RealityView with centered and spaced out extruded text that sequentially fades in/out and has flames for it's material texture

fireShader.metal

#include <metal_stdlib>
using namespace metal;

float noise(float2 st) {
    float2 i = floor(st);
    float2 f = fract(st);
    
    float a = fract(sin(dot(i, float2(12.9898, 78.233))) * 43758.5453);
    float b = fract(sin(dot(i + float2(1.0, 0.0), float2(12.9898, 78.233))) * 43758.5453);
    float c = fract(sin(dot(i + float2(0.0, 1.0), float2(12.9898, 78.233))) * 43758.5453);
    float d = fract(sin(dot(i + float2(1.0, 1.0), float2(12.9898, 78.233))) * 43758.5453);

    f = f * f * (3.0 - 2.0 * f);
    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}

kernel void fireShader(
    texture2d<half, access::write> outTexture [[texture(0)]],
    uint2 gid [[thread_position_in_grid]],
    constant float &time [[buffer(0)]])
{
    float2 texCoord = float2(gid) / float2(outTexture.get_width(), outTexture.get_height());
    
    float speed = 4.0;
    float scale = 40.0;
    
    float2 p = texCoord;
    p.y = 1.0 - p.y;
    
    float n = noise(p * scale + float2(0.0, -time * speed));
    n += noise(p * scale * 2.0 + float2(0.0, -time * speed * 1.5)) * 0.5;
    
    float gradient = 1.0 - p.y;
    float flame = n * gradient;
    
    flame = pow(flame, 1.5);
    
    float3 color;
    if (flame > 0.7) {
        color = mix(float3(1.0, 1.0, 0.0), float3(1.0, 0.5, 0.0), (flame - 0.7) / 0.3);
    } else if (flame > 0.4) {
        color = mix(float3(1.0, 0.5, 0.0), float3(1.0, 0.0, 0.0), (flame - 0.4) / 0.3);
    } else {
        color = mix(float3(0.0, 0.0, 0.0), float3(1.0, 0.0, 0.0), flame / 0.4);
    }
    
    color *= flame;
    outTexture.write(half4(half3(color), 1.0), gid);
}

FlamesTextAnimationView.swift

import SwiftUI
import RealityKit

struct FlamesTextAnimationView: View {
    var textLines: [String] = ["WELCOME", "TO", "APP NAME"]
    let commandQueue: MTLCommandQueue
    let computePipeline: MTLComputePipelineState
    @State private var texture: LowLevelTexture?
    let timer = Timer.publish(every: 1.0 / 120.0, on: .main, in: .common).autoconnect()
    @State private var time: Float = 0
    
    init(shaderFunctionName: String = "fireShader") {
        let device = MTLCreateSystemDefaultDevice()!
        self.commandQueue = device.makeCommandQueue()!
        
        let library = device.makeDefaultLibrary()!
        
        let updateFunction = library.makeFunction(name: shaderFunctionName)!
        self.computePipeline = try! device.makeComputePipelineState(function: updateFunction)
    }

    var textureDescriptor: LowLevelTexture.Descriptor {
        var desc = LowLevelTexture.Descriptor()
        desc.textureType = .type2D
        desc.arrayLength = 1
        desc.width = 2048
        desc.height = 2048
        desc.depth = 1
        desc.mipmapLevelCount = 1
        desc.pixelFormat = .bgra8Unorm
        desc.textureUsage = [.shaderRead, .shaderWrite]
        desc.swizzle = .init(red: .red, green: .green, blue: .blue, alpha: .alpha)
        return desc
    }
    
    var body: some View {
        RealityView { content in
            let attributedStrings = textLines.map { getAttributedString(text: $0) }
            let entities: [ModelEntity] = try! attributedStrings.map { try getEntity(extruding: $0) }
            verticallySpaceEntities(entities)
            for index in entities.indices {
                // start each entity with full opacity
                entities[index].components[OpacityComponent.self] = .init(opacity: 0.0)
                
                // subscribe to the animation completion for each entity
                let _ = content.subscribe(to: AnimationEvents.PlaybackCompleted.self, on: entities[index]) { _ in
                    let opacity = entities[index].components[OpacityComponent.self]!.opacity
                    if opacity != 0 {
                        if index < entities.count-1 { // check for last text
                            // fade in next entity immediately
                            animateOpacityForEntity(entities[index+1], from: 0, to: 0.9999)
                        } else {
                            // wait 1.5 seconds then fade out all entities
                            entities.forEach { animateOpacityForEntity($0, from: 0.9999, to: 0, delay: 1.5) }
                        }
                    } else if index == 0 {
                        // wait 0.5 seconds then fade in first entity (restarting cycle)
                        animateOpacityForEntity(entities[0], from: 0, to: 0.9999, delay: 0.5)
                    }
                }
                content.add(entities[index])
            }
            // fade in first entity immediately
            animateOpacityForEntity(entities[0], from: 0, to: 0.9999)
        }
        .onReceive(timer) { input in
            time+=0.03
            updateTexture()
        }
    }
    
    func getAttributedString(text: String) -> AttributedString {
        var textString = AttributedString(text)
        textString.font = .systemFont(ofSize: 5.0)
        return textString
    }
    
    func getEntity(extruding: AttributedString) throws -> ModelEntity {
        let resource = try getMeshResource(extruding: extruding)
        let primaryMaterial = getPrimaryMaterial()
        let secondaryMaterial = getSecondaryMaterial()
        let entity = ModelEntity(mesh: resource,
                                 materials: [primaryMaterial, secondaryMaterial])
        centerTextEntity(entity)
        return entity
    }
    
    func getMeshResource(extruding: AttributedString) throws -> MeshResource {
        var extrusionOptions = MeshResource.ShapeExtrusionOptions()
        extrusionOptions.extrusionMethod = .linear(depth: 0.4)
        extrusionOptions.materialAssignment = .init(front: 0, back: 0, extrusion: 1, frontChamfer: 1, backChamfer: 1)
        extrusionOptions.chamferRadius = 0.1
        return try MeshResource(extruding: extruding, extrusionOptions: extrusionOptions)
    }
    
    func getPrimaryMaterial() -> RealityKit.Material {
        if texture == nil {
            let texture = try! LowLevelTexture(descriptor: textureDescriptor)
            self.texture = texture
        }
        guard let texture else { return UnlitMaterial(color: .red) }
        let resource = try! TextureResource(from: texture)
        var material = UnlitMaterial()
        material.color.texture = .init(resource)
        material.textureCoordinateTransform.scale = [20,12]
        material.faceCulling = .none
        return material
    }
    
    func updateTexture() {
        guard let texture else { return }
        guard let commandBuffer = commandQueue.makeCommandBuffer(),
              let computeEncoder = commandBuffer.makeComputeCommandEncoder() else {
            return
        }
        commandBuffer.enqueue()
        computeEncoder.setComputePipelineState(computePipeline)
        let outTexture: MTLTexture = texture.replace(using: commandBuffer)
        computeEncoder.setTexture(outTexture, index: 0)
        var timeBuffer = [time]
        computeEncoder.setBytes(&timeBuffer, length: MemoryLayout<Float>.size, index: 0)
        let w = computePipeline.threadExecutionWidth
        let h = computePipeline.maxTotalThreadsPerThreadgroup / w
        let threadGroupSize = MTLSizeMake(w, h, 1)
        
        let threadGroupCount = MTLSizeMake(
            (textureDescriptor.width + threadGroupSize.width - 1) / threadGroupSize.width,
            (textureDescriptor.height + threadGroupSize.height - 1) / threadGroupSize.height,
            1)
        computeEncoder.dispatchThreadgroups(
            threadGroupCount,
            threadsPerThreadgroup: threadGroupSize)
        computeEncoder.endEncoding()
        commandBuffer.commit()
    }
    
    func getSecondaryMaterial() -> RealityKit.Material {
        return UnlitMaterial(color: .black)
    }

    func centerTextEntity(_ entity: ModelEntity) {
        guard let bounds = entity.model?.mesh.bounds else { return }
        entity.transform.translation.x -= bounds.extents.x * 0.5
        entity.transform.translation.y -= bounds.extents.y * 0.5
    }
    
    func verticallySpaceEntities(_ entities: [ModelEntity]) {
        let spacing: Float = 0.03
        var accumulatedVerticalSpace: Float = 0
        for entity in entities {
            let bounds = entity.model!.mesh.bounds
            entity.transform.translation.y -= accumulatedVerticalSpace
            accumulatedVerticalSpace += bounds.extents.y + spacing
        }
    }

    func animateOpacityForEntity(_ entity: Entity, from: Float, to: Float, delay: Double = 0.0, speed: Float = 1.0) {
        let animation = createOpacityAnimationResource(from: from, to: to, delay: delay, speed: speed)
        entity.playAnimation(animation)
    }
    
    func createOpacityAnimationResource(from: Float, to: Float, delay: Double, speed: Float) -> AnimationResource {
        let animationDefinition = FromToByAnimation(from: from, to: to, bindTarget: .opacity)
        let animationViewDefinition = AnimationView(source: animationDefinition, delay: delay, speed: speed)
        return try! AnimationResource.generate(with: animationViewDefinition)
    }
}

#Preview {
    FlamesTextAnimationView()
}