本节学习目标
演示多种混合模式对几何模型渲染的作用
SCNMaterial 有一个属性blendMode,这个属性主要控制的是渲染模式的选择,默认值是 SCNBlendModeAlpha
public enum SCNBlendMode : Int {
case alpha
case add
case subtract
case multiply
case screen
case replace
}
下面我们开始进入实验,实验此示例请先去除光照的影响
首先我们创建两个几何模型添加到scene中去,效果如下
![1594482-0400b87a51b36173.png](https://i-blog.csdnimg.cn/blog_migrate/d473051f0a75e8cc70cb3fac33e08b78.webp?x-image-process=image/format,png)
代码如下
第一步 创建场景
let scene = SCNScene()
第二步 添加照相机
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
scene.rootNode.addChildNode(cameraNode)
cameraNode.position = SCNVector3(x: 0, y: 0, z: 30)
第三步 给scnview视图设置场景
let scnView = self.view as! SCNView
scnView.scene = scene
第四步 添加两个几何体到场景中去
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)
第五步 设置允许操作摄像机,方便我们查看效果
scnView.allowsCameraControl = true
准备工作已经完毕,进入今天的主题
我们修改靠近相机的几何模型,即如图的红色正方体
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模式效果图如下
![1594482-c49eecf6130de4f6.png](https://i-blog.csdnimg.cn/blog_migrate/62b1ff3ad805da2f46311997fd363d7f.webp?x-image-process=image/format,png)
那么这种效果怎么计算出来的呢?
srcAlpha * (sR,sG,sB) + (1-srcAlpha)*(tR,tG,sB)
红色部分后面是黑色 所以最终的结果为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)
计算公式
(sR+tR,sG+tG,sB+tB)
就是讲模型自身的颜色和场景目标的颜色值进行相加得到一个新的颜色值,注意相加的值最大取1
![1594482-028386f04c408a79.png](https://i-blog.csdnimg.cn/blog_migrate/6bf7343adae1c531e7c8f60c9c06794c.webp?x-image-process=image/format,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)
![1594482-fb918c411df7d537.png](https://i-blog.csdnimg.cn/blog_migrate/0a2db221d77ff624026ef1d06d5dc197.webp?x-image-process=image/format,png)
前面的物体即boxNode 的实际颜色为
![1594482-b874bada8082d47a.png](https://i-blog.csdnimg.cn/blog_migrate/d4a83b2cdce59a85faabe6ef59a54f81.webp?x-image-process=image/format,png)
后面的物体,实际的颜色为
![1594482-3f66e4004c61426e.png](https://i-blog.csdnimg.cn/blog_migrate/e2dc202eb3a130ea11cd98f0c958169c.webp?x-image-process=image/format,png)
我们将给第一个模型srcNode 开启subtract 混合,最终的颜色为
![1594482-cebd013121383a2e.png](https://i-blog.csdnimg.cn/blog_migrate/3a41a1841e3e987fcb59c3c818003db2.webp?x-image-process=image/format,png)
计算公式
(tR-sR,tG-sG,tB-sB)
使用目标颜色减去模型自身的颜色,注意相减的值不能小于1,物体1和物体2重叠部分的计算公式为(0-1,1-1,1-0)->(0,0,1) 最终为蓝色,没有重叠的部分(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)
效果图为
![1594482-fc36cd9aa6c55f91.png](https://i-blog.csdnimg.cn/blog_migrate/c4545d80a45063897238a08ab39db7bb.webp?x-image-process=image/format,png)
渲染出来的颜色为黑色,为什么是这样的?
后面物体的颜色为(0,1,0),前面物体颜色为(1,0,0)
计算公式为两种颜色相乘 (10,01,0*0) -> (0,0,0)
接下来,我们前面的颜色为(1,1,1) 后面颜色为 (0,0,1) 渲染效果如下
![1594482-7a2822993bfdeff0.png](https://i-blog.csdnimg.cn/blog_migrate/622522e21fdb186dcbe4f00efabcf7ad.webp?x-image-process=image/format,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) 目标颜色 (0,1,0)
计算公式
((1-sR)tR,(1-sG)tR,(1-sB)*tB) + (sR,sG,sB)
重叠部分颜色计算((1-1)1,(1-0)1+(1-0)*0)+(1,0,0)->(1,1,0),没有重叠的颜色为(1,0,0) 即自身颜色
实验结果如下
![1594482-765b219ae3576baf.png](https://i-blog.csdnimg.cn/blog_migrate/fd0f4af8874fbe517fca1660fe7d36a4.webp?x-image-process=image/format,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)
这个比较简单就是取代的的意思
计算公式
(sR,sG,sB)
在此示例中,我们可以看到设置了透明度为0.5,但是实际效果如下
![1594482-c92e502b5274e294.png](https://i-blog.csdnimg.cn/blog_migrate/6a987e818ed53040294c25d8da91c604.webp?x-image-process=image/format,png)
以上就是本节的全部内容,如果您方便的话,烦请给应用评个分,鼓励我写更多有用的文章。