從上一節(6-5a)了解,影響粒子外觀的主要參數包括圖案(particleImage)、尺寸(particleSize)以及顏色(particeColor),雖只用2D平面圖案,但透過其他參數的配合,整體粒子系統仍會形成3D效果。

另一組重要參數會影響粒子的產出與分佈,包括產出率(birthRate)、存活時間(particleLifeSpan)、噴射器外形(emitterShape)、噴射時間(emissionDuration)等,噴射器外形(emitterShape)決定粒子產出的位置,其他3個參數則影響粒子的數量。

其中產出數量 = 產出率 x 噴射時間,但這並非螢幕所看到的總數,噴射時間結束後,會再循環反覆(由於預設參數 loops = true),還得考慮每個粒子的存活時間(particleLifeSpan),才能決定螢幕顯示的粒子總數。

許多參數值還可加入變化(Variation),這裡的變化是指隨機變化的範圍。例如,假設存活時間(particleLifeSpan)設為1.0秒,存活時間變化(particleLifeSpanVariation)設為0.8秒,則代表粒子實際的存活時間會在 1.0 ± 0.4 秒之間隨機變動,也就是最短0.6秒~最長1.4秒(變動範圍0.8秒)。

整個SceneKit 粒子系統60多個參數,其中有16個可設定隨機變化(參數名稱都帶有”Variation”),因此粒子系統看似一個整體,但也允許個別有所差異,這是粒子系統能模擬不規則運動的火焰、雲霧、雨雪…等,做到活靈活現的主要原因。善用這些參數,還能做出令人驚嘆的數位藝術作品。

本節一共使用23個參數,其中4個會隨機變化,說明如下表(請特別注意最後3個參數):

# 粒子系統參數 參數值 說明
1 particleImage UIImage() 粒子外觀(圖案)
2 imageSequenceRowCount 10 (列) 圖片檔包含10列圖案
3 imageSequenceColumnCount 10 (行) 圖片檔包含10行圖案
4 imageSequenceFrameRate 3 (frame/sec) 每秒變換3個圖案
5 imageSequenceInitialFrame 50 (索引) 圖案陣列索引從50開始
6 imageSequenceInitialFrameVariation 98 (索引) 索引變化上下49
7 particleColor UIColor.yellow 主色:黃
8 particleSize 0.03 (米) 粒子平均尺寸:寬、高3公分
9 particleSizeVariation 0.02 (米) 尺寸變化範圍:±1公分
10 birthRate 300 (particle/sec) 每秒噴射/產出300個粒子
11 particleLifeSpan 5.0 (秒) 粒子存活時間5秒
12 emitterShape SCNPlane() 指定噴射源,從平面隨機位置產出
13 emissionDuration 0.5 (秒) 產出率 x 噴射時間 = 發出粒子數
若0.0則瞬間全部發射
14 emissionDurationVariation 0.5 (秒) 上下變化±0.25秒
15 loops false 噴射時間結束後不再循環
16 emittingDirection (0, 0, 1) 向螢幕(+Z軸)噴射,採節點區域座標。
17 spreadingAngle 90.0 (度) 隨機散佈角度範圍
18 particleVelocity 0.8 (m/sec) 粒子移動速度0.8m/s
19 particleVelocityVariation 1.0 (m/sec) 上下變動範圍±0.5m/s
20 particleAngularVelocity -60.0 (度/秒) 粒子旋轉速度(每秒-60度)
21 colliderNodes [大球節點] 粒子系統開啟與其他節點的碰撞偵測
22 particleDiesOnCollision true 碰撞發生後,粒子立刻消亡
23 systemSpawnedOnCollision 噴濺 碰撞發生後,啟動另一個粒子系統

本節要用這23個參數做出什麼效果呢?在電影「駭客任務」中,有個場景令筆者印象深刻,就是代表母體(The Matrix)的暗綠色文字雨,或稱代碼瀑布,在筆者準備第4單元課程時,曾看過有人用SwiftUI做出類似效果,由此啟發,本節就試試用粒子系統來做文字雨。

經過一番嘗試,最終得到的效果如下(左圖範例,右圖作業),雖然跟電影中的視覺效果有些不同,但也有表現更優之處,例如在3D場景中可覆蓋一片區域,能模擬雨滴碰撞屋頂後的飛濺效果(黃色粒子),而且從效能來看,粒子系統很顯然比SwiftUI (Canvas)更適合做這類效果。

May-13-2024 18-47-30.gif

May-15-2024 14-27-30.gif

場景中設計三個節點:天空、大球、地面,天空使用一個平面(SCNPlane),附加粒子系統,這樣文字雨(粒子)就能從天空均勻灑落;大球設計成棕色半透明,一部分露出地面當作(溫室)屋頂,並開啟物理模擬,讓文字雨可偵測碰撞;地面則加入格線(圖片取自上一課6-4c)。

三個節點的程式碼如下: