如何在SceneKit中将几何体表面法线渲染为图片？

在Xcode的SceneKit编辑器中，支持对SCNGeometry的表面法线进行可视化展示：

该编辑器的这一效果基于SCNGeometrySource.Semantic实现，如果你需要在代码中将几何体的表面法线渲染为图片，可以参考以下方案：

自定义Metal Shader实现法线可视化并渲染为图片 #

通过编写Shader将法线向量转换为RGB颜色，再将场景内容渲染成图片，步骤如下：

1. 编写自定义Shader文件 #

创建名为NormalVisualization.metal的文件，写入以下代码：

#include <metal_stdlib>
using namespace metal;
#include <SceneKit/scn_metal>

struct NodeBuffer {
    float4x4 modelViewProjectionTransform;
    float4x4 modelTransform;
};

vertex SCNVertexOutput vertexShader(NodeBuffer buffer [[buffer(0)]],
                                   SCNVertexInput in [[stage_in]]) {
    SCNVertexOutput out;
    out.position = buffer.modelViewProjectionTransform * in.position;
    // 将法线向量从[-1,1]区间映射到[0,1]，对应RGB颜色值
    out.color = float4((in.normal + float3(1.0)) * 0.5, 1.0);
    return out;
}

fragment float4 fragmentShader(SCNVertexOutput in [[stage_in]]) {
    return in.color;
}

2. 加载Shader并应用到几何体 #

在Swift代码中加载Shader，为几何体设置自定义材质：

import SceneKit

// 创建目标几何体（示例为立方体）
let geometry = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0)

// 加载自定义Shader程序
let shaderProgram = SCNProgram()
do {
    let shaderContent = try String(contentsOfFile: "NormalVisualization.metal", encoding: .utf8)
    shaderProgram.vertexShader = shaderContent
    shaderProgram.fragmentShader = shaderContent
} catch {
    fatalError("加载Shader失败：\(error)")
}

// 配置材质并应用到几何体
let normalMaterial = SCNMaterial()
normalMaterial.program = shaderProgram
geometry.materials = [normalMaterial]

// 构建SceneKit场景
let scene = SCNScene()
let geometryNode = SCNNode(geometry: geometry)
scene.rootNode.addChildNode(geometryNode)

// 添加相机
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.position = SCNVector3(x: 2, y: 2, z: 2)
cameraNode.look(at: geometryNode.position)
scene.rootNode.addChildNode(cameraNode)

3. 将场景渲染为图片 #

使用SCNRenderer将相机视角下的场景渲染成UIImage：

// 初始化渲染器
guard let device = MTLCreateSystemDefaultDevice() else {
    fatalError("无法获取Metal设备")
}
let renderer = SCNRenderer(device: device, options: nil)
renderer.scene = scene

// 设置渲染尺寸
let renderSize = CGSize(width: 1024, height: 1024)
// 渲染图片
if let renderedImage = renderer.image(
    from: cameraNode.pointOfView!,
    viewport: CGRect(origin: .zero, size: renderSize),
    sceneTime: 0,
    passes: nil
) {
    // 这里可以将图片保存到本地或进行其他处理
    // 示例：保存到相册
    UIImageWriteToSavedPhotosAlbum(renderedImage, nil, nil, nil)
}

注意事项 #

Xcode编辑器内置的法线可视化是编辑器专属功能，无法通过API直接调用该渲染逻辑，因此代码层面必须通过自定义Shader的方式实现法线可视化并渲染为图片。

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