SceneKit_入門01_旋轉(zhuǎn)人物
SceneKit_入門02_如何創(chuàng)建工程
SceneKit_入門03_節(jié)點(diǎn)
SceneKit_入門04_燈光
SceneKit_入門05_照相機(jī)
SceneKit_入門06_行為動(dòng)畫
SceneKit_入門07_幾何體
SceneKit_入門08_材質(zhì)
SceneKit_入門09_物理身體
SceneKit_入門10_物理世界
SceneKit_入門11_粒子系統(tǒng)
SceneKit_入門12_物理行為
SceneKit_入門13_骨骼動(dòng)畫
SceneKit_中級(jí)01_模型之間的過渡動(dòng)畫
SceneKit_中級(jí)02_SCNView 詳細(xì)講解
SceneKit_中級(jí)03_切換照相機(jī)視角
SceneKit_中級(jí)04_約束的使用
SceneKit_中級(jí)05_力的使用
SceneKit_中級(jí)06_場(chǎng)景的切換
SceneKit_中級(jí)07_動(dòng)態(tài)修改屬性
SceneKit_中級(jí)08_陰影詳解
SceneKit_中級(jí)09_碰撞檢測(cè)
SceneKit_中級(jí)10_濾鏡效果制作
SceneKit_中級(jí)11_動(dòng)畫事件
SceneKit_高級(jí)01_GLSL
SceneKit_高級(jí)02_粒子系統(tǒng)深入研究
SceneKit_高級(jí)03_自定義力
SceneKit_高級(jí)04_自定義場(chǎng)景過渡效果
SceneKit_高級(jí)05 檢測(cè)手勢(shì)點(diǎn)擊到節(jié)點(diǎn)
SceneKit_高級(jí)06_加載頂點(diǎn)竟闪、紋理、法線坐標(biāo)
SceneKit_高級(jí)07_SCNProgram用法探究
SceneKit_高級(jí)08_天空盒子制作
SceneKit_高級(jí)09_霧效果
SceneKit_大神01_掉落的文字
SceneKit_大神02_彈幕來襲
SceneKit_大神03_navigationbar上的3D文字

讓學(xué)習(xí)成為一種習(xí)慣

干活來襲前奏

• 創(chuàng)建工程

讓學(xué)習(xí)變成一件開心的事情

• 添加游戲框架

學(xué)習(xí)是一件很開心的事情

• 第一步,創(chuàng)建游戲?qū)Ｓ靡晥D

    SCNView *scnView  = [[SCNView alloc]initWithFrame:self.view.bounds];
    scnView.backgroundColor = [UIColor blackColor];
    scnView.scene = [SCNScene scene];
    [self.view addSubview:scnView];

• 第二步,創(chuàng)建攝像頭

  // 創(chuàng)建攝像頭
  SCNCamera *camera = [SCNCamera camera];
  SCNNode *cameraNode = [SCNNode node];
  cameraNode.camera = camera;
  cameraNode.position = SCNVector3Make(0, 0, 5);
  [scnView.scene.rootNode addChildNode:cameraNode];

• 第三步:添加一個(gè)球體模型到視圖中

    SCNSphere *sphere = [SCNSphere sphereWithRadius:1];
    SCNNode *sphereNode = [SCNNode nodeWithGeometry:sphere];
    [scnView.scene.rootNode addChildNode:sphereNode];

運(yùn)行一下:

恭喜你,簡(jiǎn)直太厲害了

準(zhǔn)備工作已經(jīng)做好,接下來反砌，正式進(jìn)入我們今天的內(nèi)容

材質(zhì)詳解

我們需要了解兩個(gè)類SCNMaterialProperty 和 SCNMaterial

• SCNMatrialProperty

有什么用?

1.包含顏色,紋理和其他可視元素等材質(zhì)屬性
2.控制紋理的包裝、過濾和紋理坐標(biāo)變換
3.紋理的可視屬性決定了物體在燈光和陰影下的樣子

設(shè)置紋理屬性的方法有哪些?(contents)

1.使用UIImage （可以直接設(shè)置圖片的名稱）
2.六個(gè)圖片的數(shù)組
3.Core Animation 的layer 對(duì)象
4.Sprite Kit 紋理提供的靜態(tài)圖片

在什么地方可以使用SCNMatrialProperty

1.材質(zhì)屬性
2.SCNScene 的background
3.SCNLight的gobo屬性
4.綁定紋理采樣器自定義GLSL著色器源代碼片段 在類中實(shí)現(xiàn) SCNShadable 屬性

a.如何創(chuàng)建紋理屬性

+ (instancetype)materialPropertyWithContents:(id)contents

提示:

也可以使用GLSL 創(chuàng)建,由于內(nèi)容過于多,暫時(shí)不講,中級(jí)篇也不講,高級(jí)會(huì)詳細(xì)講解烤咧。

b.紋理的屬性的內(nèi)容

var contents: AnyObject?

可以為一下幾個(gè)對(duì)象

顏色(NSColor/UIColor / CGColorRef)
圖片(NSImage/UIImage/CGImageRef)
圖片名稱(NSString)或者路徑(NSURL)
圖片數(shù)組(NSArray)
核心動(dòng)畫層(CALayer)
紋理(SKText,MDLTexture,MTLTexture,GLKTextureInfo)
2D 場(chǎng)景(SKScene)

注意

1.如果設(shè)置圖片數(shù)組時(shí)腹暖，這個(gè)圖片必須為六張铸题，并且大小要一致
2.Core Animation layer 使用 AVPlayerLayer
或者AVCaptureVideoPreviewLayer 呈現(xiàn) 捕捉到的視頻畫面
3.可以動(dòng)態(tài)的改變contents

c.設(shè)置材質(zhì)性能因子(取值范圍0-1,默認(rèn)值為1)

var intensity: CGFloat

會(huì)產(chǎn)生什么影響呢?

1.normal 屬性,強(qiáng)度變化的正常映射的表面的表觀粗糙度铡恕。降低強(qiáng)度使表面顯得更光滑
2.multiply 使用白色降低強(qiáng)度混物的材料性的顏色琢感，有效降低顏色乘法效應(yīng)強(qiáng)度
3.對(duì)于其他屬性,會(huì)讓內(nèi)容變暗淡

怎么動(dòng)態(tài)的改變屬性內(nèi)容呢?

千萬別著急,現(xiàn)在還不是時(shí)候.中級(jí)篇會(huì)講

d.轉(zhuǎn)換應(yīng)用材料屬性的內(nèi)容

@property(nonatomic) SCNMatrix4 contentsTransform

先給兩張圖理解一下，它干的事情吧,之后練習(xí)中我們?cè)僭敿?xì)介紹它都可以進(jìn)行哪些變化.
它變換的到底是什么:

紋理坐標(biāo)對(duì)應(yīng)顯示的圖片區(qū)域的大小

變換前

變換后

e.包裝模式(紋理坐標(biāo)的的包裝行為)
幫你理解一下

比如正方體的表面是100 我們提供的圖片是50 這是我們可以探熔，一種是原圖顯示驹针，或者放大顯示，或者重復(fù)顯示,這個(gè)包裝模式就是控制這些顯示方式的.

var wrapS: SCNWrapMode // 控制水平
var wrapT: SCNWrapMode // 控制垂直
默認(rèn)的值為:SCNWrapModeClamp.

我們看一下都有哪些可選項(xiàng):

typedef enum {
//紋理坐標(biāo)超高系統(tǒng)產(chǎn)生顏色的范圍,將使用紋理邊緣的顏色填充
 SCNWrapModeClamp = 1,
// 當(dāng)紋理坐標(biāo)超高系統(tǒng)產(chǎn)生顏色的范圍,將重復(fù)使用紋理圖片
 SCNWrapModeRepeat = 2,  
//當(dāng)紋理坐標(biāo)超高系統(tǒng)產(chǎn)生顏色的范圍 使用指定的顏色填充
 SCNWrapModeClampToBorder = 3,
// 當(dāng)紋理左邊超過系統(tǒng)差生顏色的范圍,將翻轉(zhuǎn)紋理圖片
 SCNWrapModeMirror = 4, 
 } SCNWrapMode;

注意:

使用SCNWrapModeClampToBorder 時(shí),使用borderColor 屬性的顏色,代替超過圖片之外的顏色诀艰。

f.紋理濾波
這個(gè)屬性有什么用?

當(dāng)材料表面的部分出現(xiàn)較大或小于原來的紋理圖像時(shí)柬甥，紋理過濾決定了材料屬性的內(nèi)容的外觀

@property(nonatomic) SCNFilterMode minificationFilter

可選項(xiàng)

typedef enum : NSInteger {
 //
 SCNFilterModeNone = 0,
 // 當(dāng)這個(gè)位置沒有紋理顏色時(shí)，會(huì)采樣離他最近的顏色值
 SCNFilterModeNearest = 1,
 //當(dāng)這個(gè)位置沒有紋理顏色時(shí),線性插值顏色作為自己的顏色
 SCNFilterModeLinear = 2,
} SCNFilterMode;

默認(rèn)值為 SCNFilterModeLinear

mipmap濾波

var mipFilter: SCNFilterMode

有什么用?

當(dāng)材料表面的部分出現(xiàn)較大或小于原來的紋理圖像時(shí)涡驮，紋理過濾決定了材料屬性的內(nèi)容的外觀 , 主要針對(duì)(mipmap)
Mipmap(有時(shí)候拼寫成mipmap)是一種電腦圖形圖像技術(shù)，用于在三維圖像的二維代替物中達(dá)到立體感效應(yīng)

mipmap 有多厲害

可以增加渲染的性能:當(dāng)渲染的圖片比較小時(shí),SceneKit 會(huì)自動(dòng)創(chuàng)建若干個(gè)mipmap層,給材質(zhì)屬性的圖片內(nèi)容,渲染的時(shí)候喜滨，SceneKit 會(huì)自動(dòng)采樣mipmap層

可選值為

typedef enum : NSInteger {
SCNFilterModeNone = 0, // 默認(rèn)值 不用mipmap
 SCNFilterModeNearest = 1,
 SCNFilterModeLinear = 2, // 線性
} SCNFilterMode;

給張圖理解一下

學(xué)習(xí)你要花時(shí)間的

非均質(zhì)性(各向異性)紋理濾波

var maxAnisotropy: CGFloat

你應(yīng)該了解的?

1.用來過濾捉捅、處理當(dāng)視角變化導(dǎo)致3D物體表面傾斜時(shí)造成的紋理錯(cuò)誤,
2.各向異性濾波,可以提供紋理渲染質(zhì)量,當(dāng)紋理的表面出現(xiàn)在一個(gè)相對(duì)于相機(jī)的極端角度,這時(shí)往往是通過采樣多個(gè)mipmap層渲染每個(gè)像素,提高渲染質(zhì)量,但是消耗的渲染的成本。
3.SceneKit自動(dòng)增加或降低需要最大限度地提高渲染質(zhì)量渲染每個(gè)像素的各向異性,由該屬性指定的限制,渲染時(shí)所使用的最大各向異性水平依賴于使用中的圖形硬件,如果設(shè)置值為MAXFloat 約束使用最高的GPU 支持的 各向異性的值.
4.maxAnisotropy的值小于等于1 則禁止使用各向異性

注意:

如果使用各向異性濾波虽风，必須使用mipmap ,也就是說mipFilter 的值不能為SCNFilterModeNone.

給張圖理解一下各向異性

讓學(xué)習(xí)成為一種習(xí)慣

紋理通道

@property(nonatomic) NSInteger mappingChannel

先解釋一下這屬性

幾何對(duì)象可能有多個(gè)紋理坐標(biāo)源,每個(gè)都對(duì)應(yīng)一個(gè)獨(dú)一無二的通道數(shù)字,你可以使用這些通道數(shù)字,去繪制材質(zhì)的內(nèi)容通過不同的方式

舉個(gè)例子幫你理解一下:

學(xué)習(xí)快樂

很簡(jiǎn)單:

表示一個(gè)相框的一個(gè)幾何體可能會(huì)使用一組紋理坐標(biāo)來映射相框架本身的材質(zhì)棒口，另一組紋理坐標(biāo)用于將圖片放置到框架中

到目前為止,我們把SCNMatrialProperty的屬性內(nèi)容,已經(jīng)全部講解完畢,你理解了沒?接下來,我們還要學(xué)習(xí)一個(gè)特別重要的類(SCNMaterial)

• SCNMaterial
  上面的工程建好的你,可以跟著下面的步驟做。

講解這個(gè)類,我們換一種方式,我喜歡圖文并茂,我相信你也喜歡辜膝。

這幾點(diǎn)你要記牢了

1.材質(zhì)可以在多個(gè)幾何體重復(fù)使用
2.它是管理光線和陰影屬性以及決定幾何表面呈現(xiàn)出來的樣子
3.一個(gè)幾何體可以設(shè)置多個(gè)材質(zhì)

a.漫發(fā)射屬性(diffuse)
我們有一樣圖片是這樣的:

紋理圖片,沒有你可以截圖

上代碼:

sphere.firstMaterial.diffuse.contents = @"earth-diffuse.jpg";

運(yùn)行結(jié)果:

你應(yīng)該也成功了吧

總結(jié)一下:

1.這個(gè)屬性設(shè)置的幾何體的基本的顏色,好比是你穿的衣服无牵。
2.如果你不設(shè)置這個(gè)屬性,它默認(rèn)的contents內(nèi)容是顏色white

其實(shí)它的過程像穿衣服一樣

你應(yīng)該記住了吧

影響環(huán)境光的相應(yīng)屬性(ambient)

先上代碼:

  sphere.firstMaterial.locksAmbientWithDiffuse = YES;
  sphere.firstMaterial.ambient.contents = [UIColor blueColor];

  // 添加環(huán)境光
   SCNNode *ambientlightNode = [SCNNode node];
   ambientlightNode.light =[SCNLight light];
   ambientlightNode.light.type = SCNLightTypeAmbient;
   [scnView.scene.rootNode addChildNode:ambientlightNode];

給張圖理解一下

學(xué)習(xí)開心

鏡面材質(zhì)屬性(高光)
有什么效果？

當(dāng)光照射到物體表面是厂抖，物體反射出來顏色

添加一張高光照片

白色區(qū)域就是能顯示高光的部分

上代碼:

sphere.firstMaterial.specular.contents = @"earth-specular.jpg";

運(yùn)行結(jié)果:

讓學(xué)習(xí)成為習(xí)慣

小提示:

如果你想要所有部分全部顯示高光,你可以給他設(shè)置白色

再給張圖理解一下

你理解了沒?

設(shè)置法線取向
理解:

1.按理來說,我們的法線都是垂直我們的表面的,通過這個(gè)屬性,可以模擬光在每個(gè)頂點(diǎn)的取向茎毁。
2.可以通過紋理圖片作為法線地圖,使用RGB 表示 XYZ

下圖就是一樣模擬法線坐標(biāo)的圖像

效果圖

映射(reflectiv)
你可以這樣理解:

給材質(zhì)外邊加一個(gè)罩子,光能透過這個(gè)罩子照射到物體上,比如映射屬性為白色反射所有光,所以你看不見任何顏色,黑色吸收任何光,光能照射到物體上,物體能反射光,所以你能看見。
下面是一張反射屬性紋理圖:

映射紋理圖

代碼:

sphere.firstMaterial.reflective.contents = @"earth-reflective.jpg";
// 映射因子沒有上限值
sphere.firstMaterial.fresnelExponent = 10;

執(zhí)行結(jié)果:

添加反射后的運(yùn)行結(jié)果圖

設(shè)置自身發(fā)光
特點(diǎn):

自己能發(fā)光,不能照亮別的物體

首先我們添加一個(gè)黑色的聚光燈

 SCNNode *spotLightNode = [SCNNode node];
spotLightNode.position = SCNVector3Make(0, 50, 0);
spotLightNode.rotation = SCNVector4Make(1, 0, 0, -M_PI/2.0);
spotLightNode.light = [SCNLight light];
spotLightNode.light.color = [UIColor blackColor];
spotLightNode.light.type = SCNLightTypeSpot;
[scnView.scene.rootNode addChildNode:spotLightNode];

運(yùn)行結(jié)果:

啥都看不見

我們添加一個(gè)自身發(fā)光的紋理圖片

這是一張圖片,其實(shí)就是說,紋理坐標(biāo)對(duì)應(yīng)的點(diǎn)發(fā)射這樣的光,黑色表示不發(fā)光

代碼:

sphere.firstMaterial.emission.contents = @"earth-emissive.jpg";

設(shè)置材質(zhì)的透明度

什么意思?

也就是說,讓這個(gè)幾何物體的部分或者全部能變成透明的,不好理解看圖

上代碼:

sphere.firstMaterial.transparent.contents = @"cloudsTransparency.png";
sphere.firstMaterial.transparencyMode = SCNTransparencyModeRGBZero;
// 設(shè)置透明比例 0為不透 沒有上限
 sphere.firstMaterial.transparency = 2;

運(yùn)行結(jié)果:

學(xué)習(xí)是一件很開心的事情

讓學(xué)習(xí)變成習(xí)慣

設(shè)置一個(gè)顏色值和物體著色完成夠的值相乘

我們先給物體添加一個(gè)自身材質(zhì)屬性和發(fā)光材質(zhì)屬性

 sphere.firstMaterial.diffuse.contents = @"earth-diffuse.jpg" ;
 sphere.firstMaterial.emission.contents = @"earth-emissive.jpg";

運(yùn)行結(jié)果:

學(xué)習(xí)要開心

接下來,我們讓這個(gè)結(jié)果和綠色相乘

 sphere.firstMaterial.multiply.contents = [UIColor greenColor];

運(yùn)行結(jié)果:

學(xué)習(xí)吧,年輕人

設(shè)置自照明

注意:

如果selfIllumination屬性不為nil, emission 屬性則不起作用
代碼:
// 把所用的光照全部去掉
sphere.firstMaterial.selfIllumination.contents = [UIColor blueColor];

運(yùn)行結(jié)果:

就是這個(gè)效果

材質(zhì)可以有名字的

@property(nonatomic, copy) NSString *name

如何渲染球體內(nèi)部

  // 默認(rèn)渲染一邊
  sphere.firstMaterial.doubleSided = true;
 // 剔除正面
  sphere.firstMaterial.cullMode = SCNCullFront;
 // 剔除反面

sphere.firstMaterial.cullMode = SCNCullBack;

混合渲染模式
確定如何使用這種材料的像素顏色與渲染目標(biāo)中的其他像素顏色混合的模式

enum SCNBlendMode : Int {
case Alpha // 默認(rèn)值
case Add
case Subtract
case Multiply
case Screen
case Replace
}

渲染材質(zhì)是否產(chǎn)生深度信息

// 默認(rèn)YES
var writesToDepthBuffer: Bool
@property(nonatomic) BOOL writesToDepthBuffer
// 渲染是否優(yōu)先讀取深度信息 默認(rèn)為YES
var readsFromDepthBuffer: Bool

光照模式

NSString *const SCNLightingModelPhong 
NSString *const SCNLightingModelBlinn
NSString *const SCNLightingModelLambert 
NSString *const SCNLightingModelConstant

看下面的圖稍微理解一下

每個(gè)都有對(duì)應(yīng)的計(jì)算公式,舉個(gè)例子,比如SCNLightingModelBlinn

color = ambient* al + diffuse* max(0, dot(N, L)) + specular*pow(max(0, dot(H, N)), shininess)

可能暫時(shí)用不到,用到了再去官方資料查找就好了忱辅。

本節(jié)的內(nèi)容有點(diǎn)多,希望能夠理解,后面我們大量使用今天的內(nèi)容七蜘。

代碼庫,聽說經(jīng)常給人點(diǎn)贊都當(dāng)老板了!