Creating the chart bridge

To place a 3D chart in your scene, you need a bridge that will create a chart and export it as a RealityKit-compatible 3D object.

Right-click on the folder with the source files of your project and choose New Empty File. Call the file ChartBridge (or anything else you like). In fact, this will be the main file in your project.

First, import the frameworks:

import SwiftUI
import RealityKit
import Foundation
import NChart3D

Then create a class conforming to the 3 mandatory protocols:

class ChartBridge: NSObject, NChartSeriesDataSource, NChartRealityKitModelDelegate {
}

This class will create the chart, provide the data for it (that’s the duty of the NChartSeriesDataSource protocol), and act as a converter from NChart3D to RealityKit (this is what the NChartRealityKitModelDelegate protocol specifies).

In this class, create three variables you will need:

var chartRK = NChartRealityKit()
var chartRoot: Entity?
var modelID = 0

chartRK is the actual entry point to the NChart3D framework.

chartRoot will hold the root RealityKit-compatible 3D object of the created chart. In fact, the created chart will be a set of hierarchical 3D objects, but normally, you don’t need to manipulate individual ones. Instead, you will have chartRoot at hand and do all the manipulations on it, while the rest of the hierarchy will follow the root automatically.

modelID is just an internal variable which will be needed in the chart conversion process.

Define a function

func createChart(root: Entity) {
    chartRoot = root
}

It will be used to create the chart, and we’ll populate it later.

To conform to the NChartSeriesDataSource protocol, define functions

func seriesDataSourcePoints(for series: NChartSeries!) -> [Any]! {
    var result: [NChartPoint] = []
    return result
}

func seriesDataSourceName(for series: NChartSeries!) -> String! {
    return nil
}

Later, it will provide the data to the chart.

To conform to the NChartRealityKitModelDelegate protocol, define a function

func modelReady(withPositions positions: UnsafePointer!, 
    normals: UnsafePointer!, 
    texCoords: UnsafePointer!, 
    primitives: UnsafePointer!, 
    vertexCount: Int32, 
    indexCount: Int32, 
    texture: CGImage!, 
    color: UIColor!, 
    shading: Bool) {

    // This method is called for every single 3D object created by NChart3D.
    // Based on the data supplied, the RealityKit 3D model should be created and appended to the RealityKit view content.
    
    // Create the RealityKit model descriptor for the current model.
    let modelName = String(format: "chartModel-%d", modelID)
    var rtMdlDtr = MeshDescriptor(name: modelName)
    modelID += 1
    
    // Populate the model descriptor.
    if (positions != nil) {
        rtMdlDtr.positions = MeshBuffers.Positions(UnsafeBufferPointer(start: positions, count: Int(vertexCount)))
    }
    if (normals != nil) {
        rtMdlDtr.normals = MeshBuffers.Normals(UnsafeBufferPointer(start: normals, count: Int(vertexCount)))
    }
    if (texCoords != nil) {
        rtMdlDtr.textureCoordinates = MeshBuffers.TextureCoordinates(UnsafeBufferPointer(start: texCoords, count: Int(vertexCount)))
    }
    if (primitives != nil) {
        rtMdlDtr.primitives = .triangles([UInt32](UnsafeBufferPointer(start: primitives, count: Int(indexCount))))
    }
    
    // Create the model material.
    let mat: RealityFoundation.Material
    if (texture != nil) {
        guard let texRes = try?
            TextureResource(image: texture,
                            options: .init(semantic: .color, mipmapsMode: .none))
        else {
            return
        }
        let clr = PhysicallyBasedMaterial.BaseColor(texture: .init(texRes))
        if (shading) {
            var smat = SimpleMaterial(color: .white, isMetallic: true)
            smat.color = clr
            smat.roughness = 0.4
            mat = smat
        } else {
            var umat = UnlitMaterial()
            umat.color = clr
            umat.blending = .transparent(opacity: .init(floatLiteral: 0.9999))
            mat = umat
        }
    } else {
        if (shading) {
            mat = SimpleMaterial(color: color, isMetallic: false)
        } else {
            mat = UnlitMaterial(color: color)
        }
    }
    
    // Generate the RealityKit model from the descriptor and material.
    let model = ModelEntity(
        mesh: try! .generate(from: [rtMdlDtr]),
        materials: [mat]
    )
    // Append the model to the content.
    model.name = modelName
    chartRoot!.addChild(model)
}

This one is large and complicated :) But don’t worry! Normally, you don’t have to modify it unless you want some advanced tricks for the conversion of the 3D objects from NChart3D to RealityKit. In this tutorial, we will not be touching this. Still, if you are keen on experimenting, you can try to modify the materials’ settings, for example, the smat.roughness to see what will happen to the chart.

At this point, the project should build without errors and is ready to create the charts.