前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SceneKit-BlendMode混合模式

SceneKit-BlendMode混合模式

作者头像
酷走天涯
发布2019-06-15 11:20:48
7740
发布2019-06-15 11:20:48
举报
文章被收录于专栏:每日一篇技术文章

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档