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

Question

问题

如何定义来自顶点数据的自定义几何上的材料，使其呈现与“典型”SCNNodes相同的内容？

详细信息

在这个场景里

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

红蓝两色的球体和我所期望的一样。自定义几何中的两个点/球是黑色的。

为什么？

下面是playgrond代码：

设置场景

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添加了一个黑色的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]
)

​

​

Answer 1

根据文档，定制几何图形需要三个步骤。

1. 创建一个包含三维形状顶点的SCNGeometrySource。
2. 创建一个包含索引数组的SCNGeometryElement，显示顶点是如何连接的。
3. 将SCNGeometrySource源和SCNGeometryElement组合成一个SCNGeometry。

让我们从步骤1开始，，您希望您的自定义几何图形是一个三维形状，对吗？不过，你只有两个顶点。

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

这将形成一条线..。

​

​

制作三维形状的一种常见方法是从三角形。让我们再增加两个顶点，形成一个金字塔。

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只呈现三角形的正面，为了区分正面和背面，它依赖于您的排序。最基本的规则是：counterclockwise的意思是正面。

​

​

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

• ​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个SCNGeometrySource，第二个是用SCNGeometrySource.Semantic.color添加颜色，对吗？我使用的更简单的初始化器init(vertices:)默认为.vertex。如果您想要每个顶点的颜色或其他什么，您可能需要返回到init(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:)。
• 尝试sceneView.autoenablesDefaultLighting = true以获得更好的照明
• 全演示操场

编辑:单顶点球？

你不应该用一个点来造一个球体。如果你要做..。

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

..。然后二维圆圈将是你能得到的最好的。

​

​

那是因为，根据文档

SceneKit可以将每个点渲染成一个小的2D表面，它总是面向摄像机。通过将纹理或自定义着色器应用于该表面，您可以一次有效地渲染多个小对象。

因为所呈现的只是一个面向您的旋转的圆，所以.physicallyBased照明无法工作(.constant会，但仅此而已)。最好是用许多小的三角形来制作你的球体，就像上面答案中的金字塔。这也是苹果在包括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)

​

​