SceneKit_中級10_濾鏡效果製作

weixin_34234823發表於2016-10-21

SceneKit_入門01_旋轉人物
SceneKit_入門02_如何建立工程
SceneKit_入門03_節點
SceneKit_入門04_燈光
SceneKit_入門05_照相機
SceneKit_入門06_行為動畫
SceneKit_入門07_幾何體
SceneKit_入門08_材質
SceneKit_入門09_物理身體
SceneKit_入門10_物理世界
SceneKit_入門11_粒子系統
SceneKit_入門12_物理行為
SceneKit_入門13_骨骼動畫
SceneKit_中級01_模型之間的過渡動畫
SceneKit_中級02_SCNView 詳細講解
SceneKit_中級03_切換照相機視角
SceneKit_中級04_約束的使用
SceneKit_中級05_力的使用
SceneKit_中級06_場景的切換
SceneKit_中級07_動態修改屬性
SceneKit_中級08_陰影詳解
SceneKit_中級09_碰撞檢測
SceneKit_中級10_濾鏡效果製作
SceneKit_中級11_動畫事件
SceneKit_高階01_GLSL
SceneKit_高階02_粒子系統深入研究
SceneKit_高階03_自定義力
SceneKit_高階04_自定義場景過渡效果
SceneKit_高階05 檢測手勢點選到節點
SceneKit_高階06_載入頂點、紋理、法線座標
SceneKit_高階07_SCNProgram用法探究
SceneKit_高階08_天空盒子製作
SceneKit_高階09_霧效果
SceneKit_大神01_掉落的文字
SceneKit_大神02_彈幕來襲
SceneKit_大神03_navigationbar上的3D文字

1594482-838ed54e20d47486.PNG
讓學習成為一種習慣

本節學習目標

在SceneKit 遊戲引擎中如何使用濾鏡

其實很簡單的

需要重點關注一個屬性和一個類

  • SCNNode 的一個屬性
open var filters: [CIFilter]?
  • CIFilter

內建的核心影像濾鏡處理,這個類可以建立很多濾鏡效果,當然我們也可以自定義濾鏡效果,關於這個類的詳細使用情況請查閱蘋果官方文件

舉個簡單的例子告訴你怎麼使用

  • 第一步 建立工程(略)
  • 第二步 匯入框架SceneKit
  • 第三步 建立遊戲專用檢視
let scnView = SCNView(frame: self.view.bounds, options: [SCNView.Option.preferredRenderingAPI.rawValue:true])     
scnView.backgroundColor = UIColor.black
self.view.addSubview(scnView)
  • 第四步 建立遊戲場景
 let scene = SCNScene()
 scnView.scene = scene
  • 第五步 建立照相機
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
scene.rootNode.addChildNode(cameraNode)
  • 第六步 建立一個正方體
let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0)
box.firstMaterial?.diffuse.contents = "1.png"
let boxNode = SCNNode(geometry: box)
boxNode.position = SCNVector3Make(0, 0, -2)
scene.rootNode.addChildNode(boxNode)

可以新增一個環境光源如果不手動建立環境光,系統會自動建立一個環境光,注意一點,系統這個光源是沒有辦法獲取的

這個時候,你可以執行一下

1594482-f1e3c447ce44943b.png
讓學習成為一種習慣

上面是基本的東西,相信所有跟著我的教程學習的所有夥伴都已經完全掌握了,那麼我們接下來就演示一下如何對我們這個圖片進行濾鏡

  • 濾鏡1
let filter = CIFilter(name: "CIEdgeWork")!
boxNode.filters = [filter]
1594482-a4ad16d7288af07f.png
讓學習成為一種習慣
  • 濾鏡 2
  let filter = CIFilter(name: "CIGaussianBlur")!
  filter.setDefaults()
  filter.setValue(10, forKey: kCIInputRadiusKey)
  boxNode.filters = [filter]
1594482-176cee817b89049e.png
讓學習成為一種習慣
  • 濾鏡 3
 let filter = CIFilter(name: "CISepiaTone")!     
 filter.setDefaults()
 filter.setValue(0.8, forKey: kCIInputIntensityKey)                    
 boxNode.filters = [filter]
1594482-00e7d6593e7239c7.png
讓學習成為一種習慣
  • 濾鏡 4
  let filter = CIFilter(name: "CISepiaTone",withInputParameters: [kCIInputIntensityKey: 5])!
 boxNode.filters = [filter]
1594482-99fee423c9b5bd80.png
讓學習成為一種習慣
  • 濾鏡 5
let filter = CIFilter(name: "CIPixellate",
withInputParameters: [kCIInputScaleKey: 10.0])!
boxNode.filters = [filter]
1594482-48f9ab39649b4363.png
感謝一直關注我的朋友們,你們的認可,給了我前進的動力
  • 濾鏡 6
let filter = CIFilter(name: "CIPhotoEffectProcess")!
 boxNode.filters = [filter]
1594482-5228a1346189be53.png
讓學習成為一種習慣

我們知道濾鏡屬性是一個陣列,那麼必然可以組合使用,我們下面演示一下

 let filter1 = CIFilter(name: "CIPixellate",
        withInputParameters: [kCIInputScaleKey: 10.0])!
let filter2 = CIFilter(name: "CIPhotoEffectProcess")!
    boxNode.filters = [filter1,filter2]
1594482-0a41d3aed433b2b1.png
分享是一種快樂,點贊是一種美德

偷偷的告訴你

系統框架提供了很多濾鏡效果,上面只是冰山一角,應該都滿足大多數的濾鏡效果,如果你真的需要自定義濾鏡效果,那你可以使用 CIKernel,CISampler, CIFilterShape 他們 或者GLSL 進行自定義濾鏡設計

參考

CIAdditionCompositing //影像合成
CIAffineTransform //仿射變換
CICheckerboardGenerator //棋盤發生器
CIColorBlendMode //CIColor混合模式
CIColorBurnBlendMode //CIColor燃燒混合模式
CIColorControls
CIColorCube //立方體
CIColorDodgeBlendMode //CIColor避免混合模式
CIColorInvert //CIColor反相
CIColorMatrix //CIColor矩陣
CIColorMonochrome //黑白照
CIConstantColorGenerator //恆定顏色發生器
CICrop //裁剪
CIDarkenBlendMode //亮度混合模式
CIDifferenceBlendMode //差分混合模式
CIExclusionBlendMode //互斥混合模式
CIExposureAdjust //曝光調節
CIFalseColor //偽造顏色
CIGammaAdjust //灰度係數調節
CIGaussianGradient //高斯梯度
CIHardLightBlendMode //強光混合模式
CIHighlightShadowAdjust //高亮陰影調節
CIHueAdjust //飽和度調節
CIHueBlendMode //飽和度混合模式
CILightenBlendMode
CILinearGradient //線性梯度
CILuminosityBlendMode //亮度混合模式
CIMaximumCompositing //最大合成
CIMinimumCompositing //最小合成
CIMultiplyBlendMode //多層混合模式
CIMultiplyCompositing //多層合成
CIOverlayBlendMode //覆蓋疊加混合模式
CIRadialGradient //半徑梯度
CISaturationBlendMode //飽和度混合模式
CIScreenBlendMode //全屏混合模式
CISepiaTone //棕黑色調
CISoftLightBlendMode //弱光混合模式
CISourceAtopCompositing
CISourceInCompositing
CISourceOutCompositing
CISourceOverCompositing
CIStraightenFilter //拉直過濾器
CIStripesGenerator //條紋發生器
CITemperatureAndTint //色溫
CIToneCurve //色調曲線
CIVibrance //振動
CIVignette //印花
CIWhitePointAdjust //白平衡調節

程式碼庫,聽說經常給人點贊都變帥了!

相關文章