SceneKit-BlendMode混合模式

2019-06-15 11:20:48 浏览数 (2)

本节学习目标 演示多种混合模式对几何模型渲染的作用

SCNMaterial 有一个属性blendMode,这个属性主要控制的是渲染模式的选择，默认值是 SCNBlendModeAlpha

代码语言：javascript复制
public enum SCNBlendMode : Int {
  case alpha 
  case add  
  case subtract 
  case multiply 
  case screen 
  case replace 
}

下面我们开始进入实验,实验此示例请先去除光照的影响 首先我们创建两个几何模型添加到scene中去,效果如下

image.png

代码如下

第一步 创建场景

代码语言：javascript复制
    let scene = SCNScene()

第二步 添加照相机

代码语言：javascript复制
    let cameraNode = SCNNode()
    cameraNode.camera = SCNCamera()
    scene.rootNode.addChildNode(cameraNode)
    cameraNode.position = SCNVector3(x: 0, y: 0, z: 30)

第三步 给scnview视图设置场景

代码语言：javascript复制
   let scnView = self.view as! SCNView
    scnView.scene = scene

第四步 添加两个几何体到场景中去

代码语言：javascript复制
    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)

第五步 设置允许操作摄像机,方便我们查看效果

代码语言：javascript复制
scnView.allowsCameraControl = true

准备工作已经完毕,进入今天的主题

我们修改靠近相机的几何模型,即如图的红色正方体

1.alpha模式

代码语言：javascript复制
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

那么这种效果怎么计算出来的呢?

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模式

代码语言：javascript复制
   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

image.png

3.subtract

代码语言：javascript复制
    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 的实际颜色为

image.png

后面的物体,实际的颜色为

image.png

我们将给第一个模型srcNode 开启subtract 混合,最终的颜色为

image.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 模式

代码语言：javascript复制
    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

渲染出来的颜色为黑色,为什么是这样的？

后面物体的颜色为(0,1,0),前面物体颜色为(1,0,0)

计算公式为两种颜色相乘 (10,01,0*0) -> (0,0,0)

接下来,我们前面的颜色为(1,1,1) 后面颜色为 (0,0,1) 渲染效果如下

image.png

5.screen 模式

代码语言：javascript复制
    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) 即自身颜色

实验结果如下

image.png

6.replace 模式

代码语言：javascript复制
    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,但是实际效果如下

image.png

以上就是本节的全部内容,如果您方便的话,烦请给应用评个分,鼓励我写更多有用的文章。

add alpha image png replace

0 人点赞