本節(jié)學(xué)習(xí)目標(biāo)
演示多種混合模式對(duì)幾何模型渲染的作用

SCNMaterial 有一個(gè)屬性blendMode,這個(gè)屬性主要控制的是渲染模式的選擇，默認(rèn)值是 SCNBlendModeAlpha

public enum SCNBlendMode : Int {
  case alpha 
  case add  
  case subtract 
  case multiply 
  case screen 
  case replace 
}

下面我們開(kāi)始進(jìn)入實(shí)驗(yàn),實(shí)驗(yàn)此示例請(qǐng)先去除光照的影響
首先我們創(chuàng)建兩個(gè)幾何模型添加到scene中去,效果如下

image.png

代碼如下

第一步 創(chuàng)建場(chǎng)景

    let scene = SCNScene()

第二步 添加照相機(jī)

    let cameraNode = SCNNode()
    cameraNode.camera = SCNCamera()
    scene.rootNode.addChildNode(cameraNode)
    cameraNode.position = SCNVector3(x: 0, y: 0, z: 30)

第三步 給scnview視圖設(shè)置場(chǎng)景

   let scnView = self.view as! SCNView
    scnView.scene = scene

第四步 添加兩個(gè)幾何體到場(chǎng)景中去

    let srcNode = SCNNode()
    srcNode.geometry = SCNBox(width: 10, height: 10, length: 10, chamferRadius: 0)
    srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 1)
    scene.rootNode.addChildNode(srcNode)

    let desNode = SCNNode()
    desNode.geometry = SCNBox(width: 10, height: 10, length: 10, chamferRadius: 0)
    desNode.position = SCNVector3Make(0, 0, -20)
    desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)
    scene.rootNode.addChildNode(desNode)

第五步 設(shè)置允許操作攝像機(jī),方便我們查看效果

scnView.allowsCameraControl = true

準(zhǔn)備工作已經(jīng)完畢,進(jìn)入今天的主題

我們修改靠近相機(jī)的幾何模型,即如圖的紅色正方體

1.alpha模式

srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 0.5)
srcNode.geometry?.firstMaterial?.blendMode = .alpha
desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)

alpha模式效果圖如下

image.png

那么這種效果怎么計(jì)算出來(lái)的呢?

srcAlpha * (sR,sG,sB) + (1-srcAlpha)*(tR,tG,sB)

紅色部分后面是黑色 所以最終的結(jié)果為srcAlpha * (sR,sG,sB) ,即前面物體本身的顏色0.5*(1,0,0)+(1-0)*(0,0,0),綠色部分為:0.5*(0.5,0,0)+0.5*(0,1,0)

2.add模式

   srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 1)
   srcNode.geometry?.firstMaterial?.blendMode = .add
   desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)

計(jì)算公式

(sR+tR,sG+tG,sB+tB)

就是講模型自身的顏色和場(chǎng)景目標(biāo)的顏色值進(jìn)行相加得到一個(gè)新的顏色值,注意相加的值最大取1

image.png

3.subtract

    srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 1, blue: 0, alpha: 1)
    srcNode.geometry?.firstMaterial?.blendMode = .subtract
    desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 1, alpha: 1)

image.png

前面的物體即boxNode 的實(shí)際顏色為

image.png

后面的物體,實(shí)際的顏色為

image.png

我們將給第一個(gè)模型srcNode 開(kāi)啟subtract 混合,最終的顏色為

image.png

計(jì)算公式

(tR-sR,tG-sG,tB-sB)

使用目標(biāo)顏色減去模型自身的顏色,注意相減的值不能小于1,物體1和物體2重疊部分的計(jì)算公式為(0-1,1-1,1-0)->(0,0,1) 最終為藍(lán)色,沒(méi)有重疊的部分(0-1,0-1,0-1) -> (0,0,0)

4.multiply 模式

    srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 1)
    srcNode.geometry?.firstMaterial?.blendMode = .multiply
    desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)

效果圖為

image.png

渲染出來(lái)的顏色為黑色,為什么是這樣的匹颤？

后面物體的顏色為(0,1,0),前面物體顏色為(1,0,0)

計(jì)算公式為兩種顏色相乘 (10,01,0*0) -> (0,0,0)

接下來(lái),我們前面的顏色為(1,1,1) 后面顏色為 (0,0,1) 渲染效果如下

image.png

5.screen 模式

    srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 1)
    srcNode.geometry?.firstMaterial?.blendMode = .screen
    desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)

自身顏色(1,0,0) 目標(biāo)顏色 (0,1,0)

計(jì)算公式
((1-sR)tR,(1-sG)tR,(1-sB)*tB) + (sR,sG,sB)

重疊部分顏色計(jì)算((1-1)1,(1-0)1+(1-0)*0)+(1,0,0)->(1,1,0),沒(méi)有重疊的顏色為(1,0,0) 即自身顏色

實(shí)驗(yàn)結(jié)果如下

image.png

6.replace 模式

    srcNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 0.5)
    srcNode.geometry?.firstMaterial?.blendMode = .replace
    desNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0, green: 1, blue: 0, alpha: 1)

這個(gè)比較簡(jiǎn)單就是取代的的意思

計(jì)算公式

(sR,sG,sB)

在此示例中,我們可以看到設(shè)置了透明度為0.5,但是實(shí)際效果如下

image.png

以上就是本節(jié)的全部?jī)?nèi)容,如果您方便的話(huà),煩請(qǐng)給應(yīng)用評(píng)個(gè)分,鼓勵(lì)我寫(xiě)更多有用的文章塞淹。