自定义 SCNGeometry 节点上基于物理的光照
physically based lighting on custom SCNGeometry Node
问题
如何在 custom geometry from vertex data 上定义 material，使其渲染与 'typical' 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 现在可以显示颜色，但在所有方向上（即没有阴影）。
并且我在我的 VertexData 中添加了一个黑色 SCNSphere() 和第三个点，两者都使用相同的 RGB 值，但是 VertexData 对象中的黑色也出现了 'light'
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]
)
根据 documentation，制作自定义几何图形需要 3 个步骤。
- 创建一个包含 3D 形状顶点的
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([=13=].x, [=13=].y, [=13=].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:). This takes in an array of 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 只渲染三角形的正面，为了区分正面和背面，它依赖于您的排序。基本规则是：counterclockwise means front.
所以要引用第一个三角形，你可以说：
- 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 圆将是您能得到的最好的。
那是因为，根据 pointSize documentation:
SceneKit can render each point as a small 2D surface that always faces the camera. By applying a texture or custom shader to that surface, you can efficiently render many small objects at once.
由于渲染的只是一个面向您的圆圈，因此 .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)
问题
如何在 custom geometry from vertex data 上定义 material，使其渲染与 'typical' 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 现在可以显示颜色，但在所有方向上（即没有阴影）。
并且我在我的 VertexData 中添加了一个黑色 SCNSphere() 和第三个点，两者都使用相同的 RGB 值，但是 VertexData 对象中的黑色也出现了 'light'
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]
)
根据 documentation，制作自定义几何图形需要 3 个步骤。
- 创建一个包含 3D 形状顶点的
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([=13=].x, [=13=].y, [=13=].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:). This takes in an array of 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 只渲染三角形的正面，为了区分正面和背面，它依赖于您的排序。基本规则是：counterclockwise means front.
所以要引用第一个三角形，你可以说：
- 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 圆将是您能得到的最好的。
那是因为，根据 pointSize documentation:
SceneKit can render each point as a small 2D surface that always faces the camera. By applying a texture or custom shader to that surface, you can efficiently render many small objects at once.
由于渲染的只是一个面向您的圆圈，因此 .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)