为啥自定义 SCNGeometry 中的黑色比 SCNSphere 中的浅

Posted

技术标签:

【中文标题】为啥自定义 SCNGeometry 中的黑色比 SCNSphere 中的浅【英文标题】:Why are the shades of black in a custom SCNGeometry lighter than in an SCNSphere为什么自定义 SCNGeometry 中的黑色比 SCNSphere 中的浅 【发布时间】:2021-11-16 10:46:45 【问题描述】:

在这个场景中

左侧的球体列是使用SCNSphere() 创建的 右侧的“圆圈”列是使用SCNGeometry() 使用.point 原语创建的 只有一个环境光源 所有几何图形都使用.constant 照明模型 每对球体使用相同的 RGB 值来定义颜色。

为什么最后两对圆圈的黑色阴影比它们等效的球体浅?


重现此图像的完整游乐场代码:

创建场景

import UIKit
import SceneKit
import PlaygroundSupport

// Constants I'm using for the darkest grey colour
let B_RED: CGFloat = 0.05
let B_GREEN: CGFloat = 0.05
let B_BLUE: CGFloat = 0.05
let B_ALPHA: CGFloat = 1.0

let BLACK_COLOUR = UIColor(red: B_RED, green: B_GREEN, blue: B_BLUE, alpha: B_ALPHA)

let scene: SCNScene = 
    let s = SCNScene()
    return s
()

let sceneView: SCNView = 
    let v = SCNView(frame: CGRect(x: 0, y: 0, width: 600, height: 800))
    v.scene = scene
    v.backgroundColor = UIColor(white: 0.66, alpha: 1.0)
    v.allowsCameraControl = true
    v.debugOptions = [SCNDebugOptions.showLightInfluences]
    v.backgroundColor
    return v
()

let ambientLigntNode: SCNNode = 
    let n = SCNNode()
    n.light = SCNLight()
    n.light!.type = SCNLight.LightType.ambient
    n.light!.color = UIColor(white: 1, alpha: 1.0)
    return n
()

PlaygroundPage.current.liveView = sceneView

// a camera
var cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.simdPosition = simd_float3(0,0,8)

scene.rootNode.addChildNode(cameraNode)
scene.rootNode.addChildNode(ambientLigntNode)

球体列

// ----------------------------------------------------
// White Sphere
let whiteSphere = SCNSphere(radius: 0.3)
let whiteMaterial = SCNMaterial()
whiteMaterial.diffuse.contents = simd_float3(1,1,1)

whiteMaterial.lightingModel = .constant
whiteSphere.materials = [whiteMaterial]

let whiteSphereNode = SCNNode(geometry: whiteSphere)
whiteSphereNode.simdPosition = simd_float3(-1,2,0)

scene.rootNode.addChildNode(whiteSphereNode)

// ----------------------------------------------------
// Black Sphere
let blackSphere = SCNSphere(radius: 0.3)
let blackMaterial = SCNMaterial()
blackMaterial.diffuse.contents = BLACK_COLOUR

blackMaterial.lightingModel = .constant
blackSphere.materials = [blackMaterial]

let blackSphereNode = SCNNode(geometry: blackSphere)
blackSphereNode.simdPosition = simd_float3(-1,-2,0)

scene.rootNode.addChildNode(blackSphereNode)

// ----------------------------------------------------
// Red Sphere
let redSphere = SCNSphere(radius: 0.3)
let redMaterial = SCNMaterial()
redMaterial.diffuse.contents = UIColor(
    red: 1.0,
    green: 0.0,
    blue: 0.0,
    alpha: 1.0
)

redMaterial.lightingModel = .constant
redSphere.materials = [redMaterial]

let redSphereNode = SCNNode(geometry: redSphere)
redSphereNode.simdPosition = simd_float3(-1, 1, 0)

scene.rootNode.addChildNode(redSphereNode)

// ----------------------------------------------------
// Green Sphere
let greenSphere = SCNSphere(radius: 0.3)
let greenMaterial = SCNMaterial()
greenMaterial.diffuse.contents = UIColor(
    red: 0.0,
    green: 1.0,
    blue: 0.0,
    alpha: 1.0
)

greenMaterial.lightingModel = .constant
greenSphere.materials = [greenMaterial]

let greenSphereNode = SCNNode(geometry: greenSphere)
greenSphereNode.simdPosition = simd_float3(-1, 0, 0)

scene.rootNode.addChildNode(greenSphereNode)

// ----------------------------------------------------
// Blue Sphere
let blueSphere = SCNSphere(radius: 0.3)
let blueMaterial = SCNMaterial()
blueMaterial.diffuse.contents = UIColor(
    red: 0.0,
    green: 0.0,
    blue: 1.0,
    alpha: 1.0
)

blueMaterial.lightingModel = .constant
blueSphere.materials = [blueMaterial]

let blueSphereNode = SCNNode(geometry: blueSphere)
blueSphereNode.simdPosition = simd_float3(-1, -1, 0)

scene.rootNode.addChildNode(blueSphereNode)

// ----------------------------------------------------
// Grey Sphere
let greySphere = SCNSphere(radius: 0.3)
let greyMaterial = SCNMaterial()
greyMaterial.diffuse.contents = UIColor(
    red: 0.5,
    green: 0.5,
    blue: 0.5,
    alpha: 1.0
)

greyMaterial.lightingModel = .constant
greySphere.materials = [greyMaterial]

let greySphereNode = SCNNode(geometry: greySphere)
greySphereNode.simdPosition = simd_float3(-1, -3, 0)

scene.rootNode.addChildNode(greySphereNode)

圆圈列

// ----------------------------------------------------
// Custom 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 a: Float


let vertices: [Vertex] = [
    Vertex(x: 0.0, y: 2.0, z: 0.0, r: 1.0, g: 1.0, b: 1.0, a: 1.0),  // white
    Vertex(x: 0.0, y: 1.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0, a: 1.0),  // red
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 0.0, g: 1.0, b: 0.0, a: 1.0),  // green
    Vertex(x: 0.0, y: -1.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0, a: 1.0), // blue
    Vertex(x: 0.0, y: -3.0, z: 0.0, r: 0.5, g: 0.5, b: 0.5, a: 1.0), // rgb
    Vertex(
        x: 0.0, y: -2.0, z: 0.0,
        r: Float(B_RED), g: Float(B_GREEN), b: Float(B_BLUE), a: Float(B_ALPHA)
    )
]

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 colourSource = SCNGeometrySource(
    data: vertexData,
    semantic: SCNGeometrySource.Semantic.color,
    vectorCount: vertices.count,
    usesFloatComponents: true,
    componentsPerVector: 4,
    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, colourSource],
    elements: [elements]
)
let sphereNode = SCNNode(geometry: spheres)

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


spheres.materials = [sphereMaterial]

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


根据接受的答案更新。从 sRGB 转换为 LinearRGB 得到相同的结果

func srgbToLinear(x: Float) -> Float 
    if x <= 0.04045 
        return x / 12.92;
    
    return powf((x + 0.055) / 1.055, 2.4)


let vertices: [Vertex] = [
    Vertex(x: 0.0, y: 2.0, z: 0.0, r: 1.0, g: 1.0, b: 1.0, a: 1.0),  // white
    Vertex(x: 0.0, y: 1.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0, a: 1.0),  // red
    Vertex(x: 0.0, y: 0.0, z: 0.0, r: 0.0, g: 1.0, b: 0.0, a: 1.0),  // green
    Vertex(x: 0.0, y: -1.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0, a: 1.0), // blue
    Vertex(x: 0.0, y: -3.0, z: 0.0, r: srgbToLinear(x: 0.5), g: srgbToLinear(x: 0.5), b: srgbToLinear(x: 0.5), a: 1.0), // rgb
    Vertex(
        x: 0.0, y: -2.0, z: 0.0,
        r: srgbToLinear(x: Float(B_RED)),
        g: srgbToLinear(x: Float(B_GREEN)),
        b: srgbToLinear(x: Float(B_GREEN)),
        a: 1.0
    )
]

【问题讨论】:

一个奇怪的接近投票。这个问题只有一个问题... 【参考方案1】:

如果两种类型的图形是在不同的色彩空间中生成的,就会出现这种情况。例如,如果球体的灰色被解释为在 sRGB 中作为颜色空间,而圆形被解释为通用 RGB 空间,那么您会看到不同的颜色值。

考虑以下游乐场代码:

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport
import CoreGraphics

class MyViewController : UIViewController 
    override func loadView() 
        let view = CustomView()
        view.backgroundColor = UIColor.darkGray

        self.view = view
    


class CustomView : UIView 
    override func draw(_ rect: CGRect) 
        if let cgContext = UIGraphicsGetCurrentContext() 

            cgContext.saveGState()

            let gray : [CGFloat] = [0.5, 0.5, 0.5, 1.0]


            let srgbGray = CGColor(
                colorSpace: CGColorSpace(name: CGColorSpace.sRGB)!, components: gray)!

            cgContext.setFillColor(srgbGray)
            cgContext.fillEllipse(in: CGRect(x:10, y:20, width:72, height: 72))

            let genericGray = CGColor(colorSpace: CGColorSpace(name: CGColorSpace.genericRGBLinear)!, components: gray)!
            cgContext.setFillColor(genericGray)
            cgContext.fillEllipse(in: CGRect(x:110, y:20, width:72, height: 72))


            cgContext.restoreGState()

        
    

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

它产生的效果几乎与您所看到的相同。我怀疑圆圈是在假设通用颜色空间的情况下绘制的,而球体是在假设 sRGB 的情况下绘制的。

【讨论】:

是的,看起来就是这样。这里是another Question / Answer,基本一样。 我已经更新了我的问题,以表明它现在可以使用 srgbToLinear() 应用的函数。谢谢你的回答。

以上是关于为啥自定义 SCNGeometry 中的黑色比 SCNSphere 中的浅的主要内容,如果未能解决你的问题,请参考以下文章

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

对于自定义 UITableViewCell 中的大图像,为啥 drawRect 滚动比 UIImageView 慢

POI 使用XSSF导出Excel自定义单元格颜色为啥始终是黑色的?代码如下

为啥这个自定义 UIView 代码不显示 UILabel 的?

折线图的 s-s-rS 自定义颜色

iPhone App - 为啥我的 CGContext 圆圈看起来像黑色方块?