自定义 SCNGeometry 节点上基于物理的照明

Posted 2023-03-23

技术标签:

【中文标题】自定义 SCNGeometry 节点上基于物理的照明【英文标题】：physically based lighting on custom SCNGeometry Node 【发布时间】：2021-11-13 07:42:31 【问题描述】：

问题

如何定义 custom geometry from vertex data 上的材质，使其呈现与“典型”SCNNode 相同的效果？

详情

在这个场景中有

定向灯使用physicallybased 光照模型的红色球体使用基于物理的照明模型的蓝色球体使用顶点数据的自定义 SCNGeometry，使用基于物理的照明模型

红色和蓝色球体按照我的预期呈现。自定义几何体中的两个点/球体是黑色的。

为什么？

这里是游乐场代码：

场景设置


import UIKit
import SceneKit
import PlaygroundSupport


// create a scene view with an empty scene
var sceneView = SCNView(frame: CGRect(x: 0, y: 0, width: 600, height: 600))
var scene = SCNScene()
sceneView.scene = scene
sceneView.backgroundColor = UIColor(white: 0.75, alpha: 1.0)
sceneView.allowsCameraControl = true
PlaygroundPage.current.liveView = sceneView

let directionalLightNode: SCNNode = 
    let n = SCNNode()
    n.light = SCNLight()
    n.light!.type = SCNLight.LightType.directional
    n.light!.color = UIColor(white: 0.75, alpha: 1.0)
    return n
()

directionalLightNode.simdPosition = simd_float3(0,5,0) // Above the scene
directionalLightNode.simdOrientation = simd_quatf(angle: -90 * Float.pi / 180.0, axis: simd_float3(1,0,0)) // pointing down

scene.rootNode.addChildNode(directionalLightNode)

// a camera
var cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.simdPosition = simd_float3(0,0,5)
scene.rootNode.addChildNode(cameraNode)

添加蓝色和红色球体

// ----------------------------------------------------
// Example creating SCNSphere Nodes directly

// Sphere 1
let sphere1 = SCNSphere(radius: 0.3)
let sphere1Material = SCNMaterial()
sphere1Material.diffuse.contents = UIColor.red
sphere1Material.lightingModel = .physicallyBased
sphere1.materials = [sphere1Material]

let sphere1Node = SCNNode(geometry: sphere1)
sphere1Node.simdPosition = simd_float3(-2,0,0)

// Sphere2
let sphere2 = SCNSphere(radius: 0.3)
let sphere2Material = SCNMaterial()
sphere2Material.diffuse.contents = UIColor.blue
sphere2Material.lightingModel = .physicallyBased
sphere2.materials = [sphere2Material]

let sphere2Node = SCNNode(geometry: sphere2)
sphere2Node.simdPosition = simd_float3(-1,0,0)

scene.rootNode.addChildNode(sphere1Node)
scene.rootNode.addChildNode(sphere2Node)

添加自定义 SCNGeometry

// ----------------------------------------------------
// Example creating SCNGeometry using vertex data
struct Vertex 
    let x: Float
    let y: Float
    let z: Float
    let r: Float
    let g: Float
    let b: Float


let vertices: [Vertex] = [
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0),
    Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0)
]

let vertexData = Data(
    bytes: vertices,
    count: MemoryLayout<Vertex>.size * vertices.count
)

let positionSource = SCNGeometrySource(
    data: vertexData,
    semantic: SCNGeometrySource.Semantic.vertex,
    vectorCount: vertices.count,
    usesFloatComponents: true,
    componentsPerVector: 3,
    bytesPerComponent: MemoryLayout<Float>.size,
    dataOffset: 0,
    dataStride: MemoryLayout<Vertex>.size
)
let colorSource = SCNGeometrySource(
    data: vertexData,
    semantic: SCNGeometrySource.Semantic.color,
    vectorCount: vertices.count,
    usesFloatComponents: true,
    componentsPerVector: 3,
    bytesPerComponent: MemoryLayout<Float>.size,
    dataOffset: MemoryLayout<Float>.size * 3,
    dataStride: MemoryLayout<Vertex>.size
)

let elements = SCNGeometryElement(
    data: nil,
    primitiveType: .point,
    primitiveCount: vertices.count,
    bytesPerIndex: MemoryLayout<Int>.size
)
        
elements.pointSize = 100
elements.minimumPointScreenSpaceRadius = 100
elements.maximumPointScreenSpaceRadius = 100

let spheres = SCNGeometry(sources: [positionSource, colorSource], elements: [elements])
let sphereNode = SCNNode(geometry: spheres)

let sphereMaterial = SCNMaterial()
sphereMaterial.lightingModel = .physicallyBased

spheres.materials = [sphereMaterial]

sphereNode.simdPosition = simd_float3(0,0,0)
scene.rootNode.addChildNode(sphereNode)

一些探索

添加 normals 现在会显示颜色，但会显示所有方向（即没有阴影）。

我添加了黑色SCNSphere() 和VertexData 的第三个点，两者都使用相同的RGB 值，但VertexData 对象中的黑色显得太“浅”

let vertices: [Vertex] = [
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0),
    Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0),
    Vertex(x: 0.0, y: 1.0, z: 0.0, r: 0.07, g: 0.11, b: 0.12)
]

let vertexData = Data(
    bytes: vertices,
    count: MemoryLayout<Vertex>.size * vertices.count
)

let normals = Array(repeating: SCNVector3(1,1,1), count: vertices.count)
let normalSource = SCNGeometrySource(normals: normals)

///
///

let spheres = SCNGeometry(
    sources: [
        positionSource,
        normalSource,
        colorSource
    ],
    elements: [elements]
)

【问题讨论】：

【参考方案1】：

根据documentation，制作自定义几何图形需要 3 个步骤。

SCNGeometrySource

SCNGeometryElement

SCNGeometrySource

SCNGeometryElement

SCNGeometry

让我们从第 1 步开始。您希望您的自定义几何图形成为 3D 形状，对吗？不过，您只有 2 个顶点。

let vertices: [Vertex] = [         /// what's `r`, `g`, `b` for btw? 
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0),
    Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0)
]

这将形成一条线......

制作 3D 形状的常用方法是使用三角形。让我们再添加 2 个顶点来制作金字塔。

let vertices: [Vertex] = [
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0), /// vertex 0
    Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0), /// vertex 1
    Vertex(x: 1.0, y: 0.0, z: -0.5, r: 0.0, g: 0.0, b: 1.0), /// vertex 2
    Vertex(x: 0.0, y: 1.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0), /// vertex 3
]

现在，我们需要将顶点转换为 SceneKit 可以处理的东西。在您当前的代码中，您将vertices 转换为Data，然后使用init(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:) 初始化程序。

let vertexData = Data(
    bytes: vertices,
    count: MemoryLayout<Vertex>.size * vertices.count
)
let positionSource = SCNGeometrySource(
    data: vertexData,
    semantic: SCNGeometrySource.Semantic.vertex,
    vectorCount: vertices.count,
    usesFloatComponents: true,
    componentsPerVector: 3,
    bytesPerComponent: MemoryLayout<Float>.size,
    dataOffset: 0,
    dataStride: MemoryLayout<Vertex>.size
)

这是非常先进和复杂的。使用init(vertices:) 会更容易。

let verticesConverted = vertices.map  SCNVector3($0.x, $0.y, $0.z)  /// convert to `[SCNVector3]`
let positionSource = SCNGeometrySource(vertices: verticesConverted)

现在您已经获得了SCNGeometrySource，是时候进行第 2 步了——通过SCNGeometryElement 连接顶点。在您当前的代码中，您使用init(data:primitiveType:primitiveCount:bytesPerIndex:)，然后传入nil...

let elements = SCNGeometryElement(
    data: nil,
    primitiveType: .point,
    primitiveCount: vertices.count,
    bytesPerIndex: MemoryLayout<Int>.size
)

如果数据本身是nil，SceneKit 将如何知道如何连接您的顶点？但无论如何，还有一个更简单的初始化程序：init(indices:primitiveType:)。这需要FixedWidthInteger 的数组，每个代表positionSource 中的一个顶点。

那么FixedWidthInteger 是如何表示每个顶点的呢？好吧，还记得你是如何将verticesConverted（SCNVector3 的数组）传递给positionSource 的吗？ SceneKit 将每个FixedWidthInteger 视为一个索引，并使用它访问verticesConverted。

由于索引总是整数和正数，UInt16 应该没问题（它符合FixedWidthInteger）。

/// pairs of 3 indices, each representing a vertex
let indices: [UInt16] = [
   0, 1, 3, /// front triangle
   1, 2, 3, /// right triangle
   2, 0, 3, /// back triangle
   3, 0, 2, /// left triangle
   0, 2, 1 /// bottom triangle
]
let element = SCNGeometryElement(indices: indices, primitiveType: .triangles)

这里的顺序非常具体。默认情况下，SceneKit 只渲染三角形的正面，并且为了区分正面和背面，它依赖于您的排序。基本规则是：逆时针表示前面。

所以提到第一个三角形，你可以说：

0, 1, 3 1、3、0 3、0、1

一切都很好。最后，步骤 3 超级简单。只需将SCNGeometrySource 和SCNGeometryElement 结合起来即可。

let geometry = SCNGeometry(sources: [positionSource], elements: [element])

就是这样！现在您的SCNGeometrySource 和SCNGeometryElement 都已正确设置，lightingModel 将正常工作。

/// add some color
let material = SCNMaterial()
material.diffuse.contents = UIColor.orange
material.lightingModel = .physicallyBased
geometry.materials = [material]

/// add the node
let node = SCNNode(geometry: geometry)
scene.rootNode.addChildNode(node)

注意事项：

我注意到您尝试使用 2 SCNGeometrySources。第二个是用SCNGeometrySource.Semantic.color添加颜色，对吧？我使用的更简单的初始化程序init(vertices:)，默认为.vertex。如果你想要每个顶点的颜色或其他东西，你可能需要返回init(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:)。尝试sceneView.autoenablesDefaultLighting = true 以获得更好的照明效果 Full demo playground here

编辑：单顶点球体？

您不应该使用单个点来制作球体。如果你打算这样做......

elements.pointSize = 100
elements.minimumPointScreenSpaceRadius = 100
elements.maximumPointScreenSpaceRadius = 100

...那么 2D Circle 将是你能得到的最好的。

那是因为，根据pointSize documentation：

SceneKit 可以将每个点渲染为一个始终面向相机的小型 2D 表面。通过向该表面应用纹理或自定义着色器，您可以一次有效地渲染许多小对象。

由于渲染的内容实际上只是一个旋转以面对您的圆圈，.physicallyBased 照明将不起作用（.constant 将，但仅此而已）。最好用许多小三角形制作你的球体，比如上面答案中的金字塔。这也是 Apple 使用其内置几何体所做的事情，包括 SCNSphere。

let sphere = SCNSphere(radius: 1)
let sphereMaterial = SCNMaterial()
sphereMaterial.diffuse.contents = UIColor.purple
sphereMaterial.fillMode = .lines /// add this to see the triangles
sphereMaterial.lightingModel = .physicallyBased
sphere.materials = [sphereMaterial]

let sphereNode = SCNNode(geometry: sphere)
scene.rootNode.addChildNode(sphereNode)

【讨论】：

我认为这不能回答我的问题。我正在使用primitiveType: .point，因为我想要“点”，而不是三角形。我的代码正确地绘制了点，但我不知道如何设置材质和照明，使它们看起来像两个独立的 SCNSphere() 对象。在你的评论中你问/// what's r, g, b` 顺便说一句？ ` - 这些是颜色，用于.color semantic。 @tospig 编辑了我的答案。点不适用于 3D 形状。感谢更新。正如您所指出的，关键在于 pointSize 的文档中，它只渲染 2D 表面。

以上是关于自定义 SCNGeometry 节点上基于物理的照明的主要内容，如果未能解决你的问题，请参考以下文章

SCNGeometry 自定义形状出现黑色

Rancher 2.0 里程碑版本：支持添加自定义节点！

SCNGeometry 与多边形作为primitiveType

SceneKit：使用 dae 动画更新 SCNGeometry

SceneKit：使用dae动画更新SCNGeometry

iOS开发之SceneKit框架--SCNGeometry.h