physically based lighting on custom SCNGeometry Node

Question

Question

How do you define the material on a custom geometry from vertex data, so that it renders the same as 'typical' SCNNodes?

---

Details

In this scene there are

• A directional light
• A red sphere using physicallybased lighting model
• A blue sphere using physicallybased lighting model
• A custom SCNGeometry using vertex data, using a physicallybased lighting model

The red and blue spheres render as I would expect. The two points / spheres in the custom geometry are black.

Why?

---

Here is the playgrond code:

Setting the scene

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)

Adding the blue and red spheres

// ----------------------------------------------------
// 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)

Adding the custom 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)

---

Some Exploration

Adding normals now shows the colours, but in all directions (i.e, there's no shadow).

And I've added a black SCNSphere() and a 3rd point to my VertexData, both using the same RGB values, but the black in the VertexData object appears too '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]
)

Answer 1

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

\n

\n
1. 创建SCNGeometrySource包含 3D 形状顶点的 。
\n
2. 创建一个SCNGeometryElement包含索引数组的数组，显示顶点如何连接。
\n
3. 将SCNGeometrySource源 和SCNGeometryElement合并为SCNGeometry.
\n

\n

让我们从第 1 步开始。您希望自定义几何图形是 3D 形状，对吧？但你只有 2 个顶点。

\n

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

\n

这将形成一条线...

\n

\n

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

\n

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

\n

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

如果数据本身是nil，SceneKit 如何知道如何连接你的顶点？但无论如何，还有一个更简单的初始化器：init(indices:primitiveType:)。这需要一个 数组FixedWidthInteger，每个数组代表一个 \xe2\x80\x8bvertex 回到你的positionSource.

\n

那么每个顶点是如何用 a 表示的呢FixedWidthInteger？好吧，还记得你是如何将verticesConverted, 数组传入SCNVector3的吗positionSource？SceneKit 将每个都视为FixedWidthInteger索引并使用它进行访问verticesConverted。

\n

由于索引始终为整数且为正数，UInt16因此应该没问题（它符合FixedWidthInteger）。

\n

/// pairs of 3 indices, each representing a vertex\nlet indices: [UInt16] = [\n   \xe2\x80\x8b0, 1, 3, /// front triangle\n   \xe2\x80\x8b1, 2, 3, /// right triangle\n   \xe2\x80\x8b2, 0, 3, /// back triangle\n   \xe2\x80\x8b3, 0, 2, /// left triangle\n   \xe2\x80\x8b0, 2, 1 /// bottom triangle\n]\nlet element = SCNGeometryElement(indices: indices, primitiveType: .triangles)\n

\n

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

\n

\n

因此，要引用第一个三角形，您可以说：

\n

\n
• \xe2\x80\x8b0, 1, 3
\n
• 1, 3, 0
\n
• 3, 0, 1
\n

\n

一切都很好。最后，第 3 步非常简单。只需结合SCNGeometrySource和SCNGeometryElement即可。

\n

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

\n

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

\n

/// add some color\nlet material = SCNMaterial()\nmaterial.diffuse.contents = UIColor.orange\nmaterial.lightingModel = .physicallyBased\ngeometry.materials = [material]\n\n/// add the node\nlet node = SCNNode(geometry: geometry)\nscene.rootNode.addChildNode(node)\n

\n

\n\n

笔记：

\n

\n
• 我注意到你试图使用 2 SCNGeometrySources。第二个是用 来添加颜色SCNGeometrySource.Semantic.color，对吗？我使用的更简单的初始化程序 ，init(vertices:)默认为.vertex。如果您想要每个顶点的颜色或其他东西，您可能需要返回到init(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:).
\n
• 尝试sceneView.autoenablesDefaultLighting = true一些更好的照明
\n
• 完整的演示游乐场在这里
\n

\n\n

编辑：单顶点球体？

\n

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

\n

elements.pointSize = 100\nelements.minimumPointScreenSpaceRadius = 100\nelements.maximumPointScreenSpaceRadius = 100\n

\n

...那么 2D 圆将是您能得到的最好的。

\n

\n

这是因为，根据pointSize文档：

\n

\n

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

\n

\n

由于渲染的实际上只是一个旋转面向您的圆圈，因此.physicallyBased照明不起作用（.constant会，但仅此而已）。最好用许多小三角形制作球体，就像上面答案中的金字塔一样。这也是苹果公司对其内置几何结构所做的事情，包括SCNSphere.

\n

let sphere = SCNSphere(radius: 1)\nlet sphereMaterial = SCNMaterial()\nsphereMaterial.diffuse.contents = UIColor.purple\nsphereMaterial.fillMode = .lines /// add this to see the triangles\nsphereMaterial.lightingModel = .physicallyBased\nsphere.materials = [sphereMaterial]\n\nlet sphereNode = SCNNode(geometry: sphere)\nscene.rootNode.addChildNode(sphereNode)\n

\n

\n