如何在RealityKit中为ModelEntity创建边框/轮廓？

下面介绍几种实现类似Reality Composer蓝色边框效果的方案：

方案一：使用RealityKit的OutlineMaterial（iOS 15+） #

RealityKit在iOS 15及以上版本提供了专门的OutlineMaterial，可以快速给实体添加轮廓效果，这是最简便的方式。

代码示例 #

import RealityKit

// 假设你已有一个ModelEntity
let modelEntity = ModelEntity(mesh: MeshResource.generateBox(size: 0.5))

// 创建轮廓材质
let outlineMaterial = OutlineMaterial()
outlineMaterial.color = .blue
outlineMaterial.width = 0.02  // 轮廓宽度，根据实体大小调整

// 将轮廓材质添加到实体的materials数组中
modelEntity.materials.append(outlineMaterial)

注意事项 #

• 该材质会在实体原有材质基础上叠加轮廓，不需要替换原有材质
• width参数的单位是米，需要根据实体的实际尺寸调整数值，避免轮廓过粗或过细

方案二：复制实体放大+半透明填充（兼容更低版本） #

如果需要兼容iOS 15以下的系统，可以通过创建一个放大的"外壳"实体来模拟轮廓效果：

代码示例 #

import RealityKit

func addOutline(to entity: ModelEntity, color: UIColor = .blue, thickness: Float = 0.02) {
    // 复制原实体的网格和材质
    guard let mesh = entity.model?.mesh else { return }
    
    // 创建轮廓实体，使用基础材质填充
    let outlineEntity = ModelEntity(mesh: mesh)
    outlineEntity.model?.materials = [SimpleMaterial(color: color, isMetallic: false)]
    
    // 放大轮廓实体，模拟轮廓厚度
    let scale = entity.scale + SIMD3<Float>(thickness, thickness, thickness)
    outlineEntity.scale = scale
    
    // 设置轮廓实体的透明度，避免遮挡原实体
    outlineEntity.components.set(OpacityComponent(opacity: 0.3))
    
    // 将轮廓实体作为子实体添加到原实体中
    entity.addChild(outlineEntity)
}

// 使用示例
let modelEntity = ModelEntity(mesh: MeshResource.generateBox(size: 0.5))
addOutline(to: modelEntity)

注意事项 #

• 这种方法需要确保原实体的锚点在中心，否则放大后的轮廓会偏移
• 透明度可以根据需求调整，若要实现纯边框效果，可以给轮廓实体使用UnlitMaterial并关闭深度测试

方案三：自定义Shader实现更精细的轮廓 #

如果需要更复杂的轮廓效果（比如仅在边缘显示、不同角度的轮廓变化），可以通过自定义Shader来实现：

思路 #

利用深度缓冲和法线信息，在片元着色器中检测边缘，绘制轮廓。你可以通过CustomMaterial来加载自定义的Metal Shader代码。

代码示例（核心部分） #

// 创建自定义材质
let customMaterial = try! CustomMaterial(
    surfaceShader: .init(named: "OutlineShader"),
    geometryShader: nil,
    lightingModel: .unlit
)

modelEntity.materials = [customMaterial]

对应的Metal Shader（OutlineShader.metal）大致逻辑：

#include <RealityKit/RealityKit.h>

[[visible]] void surface(SurfaceParameters params) {
    // 采样深度和法线，检测边缘
    float depth = texture(params.depthTexture, params.texCoord).r;
    float3 normal = normalize(texture(params.normalTexture, params.texCoord).rgb * 2.0 - 1.0);
    
    // 边缘检测逻辑（简化版）
    float edge = step(0.01, abs(depth - params.scenePosition.z));
    edge += step(0.1, abs(dot(normal, params.viewDirection)));
    
    params.output.color = edge > 0.5 ? float4(0, 0, 1, 1) : float4(0,0,0,0);
}

注意事项 #

• 自定义Shader需要掌握Metal语言基础，调试成本较高
• 可以参考Apple官方的RealityKit自定义材质文档来完善细节

内容的提问来源于stack exchange，提问作者user13965197