专栏首页每日一篇技术文章SceneKit-BlendMode混合模式

SceneKit-BlendMode混合模式

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

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

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

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

image.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模式效果图如下

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

   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

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

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

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

    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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 专题】33 自定义 View 之 Paint

    Flutter 提供了与 Android 相似的 Paint 和 Canvas 来实现自定义 View,使应用更方便完善。和尚尝试学习和使用自定义 View。

    阿策小和尚
  • 【Flutter 专题】118 图解特殊利器 ShaderMask 着色器

    和尚在尝试把图片做成黑白色时,了解到 ShaderMask 这个利器,今天和尚简单学习和尝试一下;

    阿策小和尚
  • SwiftUI:特殊效果 - 模糊,混合模式等

    SwiftUI使我们能够出色地控制视图的呈现方式,包括应用实时模糊,混合模式,饱和度调整等功能。

    韦弦zhy
  • ARKit 进阶:材质

    光照与材质,是决定 3D 世界中的模型如何渲染的关键参数。许多时候模型的渲染对与不对,往往只是一种视觉的感受。由于不是测试驱动的,所以多数情况下,考验的不是你的...

    郭艺帆
  • ARKit 进阶:物理世界

    ARKit的渲染能力是由其他框架实现的,除了苹果的SceneKit, Unity3D、UE, 或者其他自定义的OpenGL、Metal渲染引擎都可以与ARKit...

    郭艺帆
  • 100 行代码写一个手机AR

    Step-1.实现两个协议 1.AVCaptureMetadataOutputObjectsDelegate 2.UINavigationControlle...

    酷走天涯
  • iOS 14 egret H5游戏卡顿问题分析和部分解决办法

    测试1: 简单demo,使用egret引擎显示3000个图(都是同一个100*100 png 纹理),逐帧做旋转。(博客园视频播放可能有问题,视频地址:http...

    用户1258909
  • VR+全景播放器+头控讲解-01

    近两年随着AR/VR逐渐火热,企业为了给自己的产品中加入新的元素,有可能会将3D元素添加到应用中去,对于IOS 工程师,你有三种选择 OpenGL ES / M...

    酷走天涯
  • iOS - SceneKit显示与交互3D建模(一)

    LinXunFeng

扫码关注云+社区

领取腾讯云代金券