如何在SCNTube上以环形方式环绕贴图制作土星环？

问题详情 #

• 需求：制作带有环形环绕贴图的真实土星环，球体部分显示正常，仅土星环节点贴图呈现异常效果
• 预期效果：
• 当前效果：
• 使用的土星环贴图：
• 已尝试操作：
  • 直接为土星环节点设置漫反射贴图：

    let saturnRingNode = scene?.rootNode.childNode(withName: "saturn_ring", recursively: true)
    let ring = UIImage(named: "saturn_ring")
    saturnRingNode?.geometry?.firstMaterial?.diffuse.contents = ring
    

  • 旋转材质变换矩阵，但仅改变了贴图线条方向，未实现环形环绕效果：

    if let material = saturnRingNode?.geometry?.firstMaterial {
        material.diffuse.contentsTransform = SCNMatrix4MakeRotation(Float.pi / 2, 0, 0, 1) 
    }
    

具体解决方案 #

1. 确认土星环几何体类型 #

若土星环模型不是圆环（SCNTorus），平面或其他形状无法让环形贴图自然贴合。如果是自定义模型，必须检查UV映射是否匹配环形结构——贴图的横向应该对应圆环的圆周方向。

若通过代码创建几何体，直接使用SCNTorus：

// 创建适配环形贴图的土星环几何体，参数可根据需求调整
let ringGeometry = SCNTorus(ringRadius: 5.0, pipeRadius: 0.8)
saturnRingNode?.geometry = ringGeometry

2. 启用双面渲染并配置透明通道 #

土星环是薄环形结构，需要开启双面渲染让正反两面都可见，同时利用贴图的透明区域实现真实的环形缝隙：

guard let material = saturnRingNode?.geometry?.firstMaterial else { return }

// 启用双面渲染
material.isDoubleSided = true
// 设置透明模式为RGB值为0时透明（匹配贴图的黑色区域）
material.transparencyMode = .rgbZero
// 加载贴图并同时设置漫反射和透明度通道
if let ringImage = UIImage(named: "saturn_ring") {
    material.diffuse.contents = ringImage
    material.alpha.contents = ringImage // 用贴图灰度值控制透明度
}

3. 调整UV映射与材质变换 #

如果默认UV坐标无法让贴图正确环绕圆环，需要调整UV缩放或材质变换矩阵：

guard let torusGeometry = saturnRingNode?.geometry as? SCNTorus else { return }

// 增加几何体分段数，让贴图渲染更平滑
torusGeometry.ringSegmentCount = 120
torusGeometry.pipeSegmentCount = 10

// 调整材质变换，让贴图沿圆环圆周方向完整环绕
let scaleMatrix = SCNMatrix4MakeScale(10.0, 1.0, 1.0) // U方向缩放倍数根据圆环半径调整
let rotationMatrix = SCNMatrix4MakeRotation(Float.pi / 2, 0, 0, 1)
torusGeometry.firstMaterial?.diffuse.contentsTransform = SCNMatrix4Mult(scaleMatrix, rotationMatrix)

4. 检查贴图格式 #

确保saturn_ring是带Alpha透明通道的PNG图片，黑色区域会被识别为透明，这样土星环的缝隙才能正常显示。若当前是JPG格式，需转换为PNG并添加透明通道。

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