iOS の ParticleSystem を試してみた #Swift

iOS にも ParticleSystem があるのを知っていますか？
SceneKit の SCNParticleSystem を使えば、簡単にリッチな視覚効果を再現することができます。
一般的に、パーティクルシステムは煙や火花、雲などをシミュレーションするために用いられます。

ベースコード

パーティクルシステムの実装に必要な最低限のコードは以下になります。
やっていることは、サイズが4cmのピンク色のパーティクルを1秒間に1個ずつ生成しているだけです。
この状態では、画面にピンク色の点が見えるだけになります。

今回は ARKit と組み合わせ、パーティクルシステムを付与したノードを ARSCNView の rootNode に追加することで3次元空間上にパーティクルを配置しています。

let node = SCNNode()
node.position = .init(0, 0, -0.4)

let ps = SCNParticleSystem()
ps.birthRate = 1
ps.particleSize = 0.04
ps.particleColor = .systemRed

node.addParticleSystem(ps)
sceneView.scene.rootNode.addChildNode(node)

生成範囲の調整

emitterShape を設定することで、パーティクルの生成範囲を指定することができます。
ベースコードのように何も設定しない場合、すべてのパーティクルは一点から生成されます。

ps.emitterShape = SCNSphere(radius: 0.04)

SCNPlane	SCNSphere	SCNBox	SCNPyramid	SCNTorus

サイズ

各パーティクルのサイズは particleSize で調整可能です。
また、particleSizeVariation を設定すれば各パーティクルのサイズを特定の範囲内でランダムに決定することができます。particleSize が 1.0、particleSizeVariation が 1.0 の場合、サイズの範囲は 0.5 ~ 1.5 となります。

ps.particleSize = 0.004
ps.particleSizeVariation = 0.004

色

各パーティクルの色は particleColor で調整可能です。
また、particleColorVariation を設定することでサイズと同様に値のランダム化ができます。particleColorVariation の型は SCNVector4 となっており、色相、彩度、明度、アルファの順に4つの値が必要です。

ps.particleColor = .systemRed
ps.particleColorVariation = .init(x: 1.0, y: 1.0, z: 1.0, w: 1.0)

色相のみ変化 { 1, 0, 0, 0 }	彩度のみ変化 { 0, 1, 0, 0 }	すべて変化 { 1, 1, 1, 1 }

プロパティのアニメーション

Animatable となっている属性はアニメーションを行うことができます。最も簡単にアニメーションを設定する方法は、propertyControllers を設定する方法だと思われます。
propertyControllers は [SCNParticleSystem.ParticleProperty : SCNParticlePropertyController]? 型で、特定の属性に SCNParticlePropertyController を紐付ける形になります。

以下の例では、白 -> ピンク -> 青 -> 緑 の順に各パーティクルの色が変化するようなアニメーションを付与しています。

let colorAnimation = CAKeyframeAnimation()
colorAnimation.values = [
    UIColor.white,
    UIColor.systemPink,
    UIColor.systemBlue,
    UIColor.systemGreen
]
colorAnimation.keyTimes = [0, 1, 2, 3]
colorAnimation.duration = 3

ps.propertyControllers = [.color: .init(animation: colorAnimation)]

最後に

今回は iOS のパーティクルシステムについての簡単な紹介でしたが、SCNParticleSystem には他にも多くのプロパティが用意されています。パーティクルに動きをつけたり、パーティクルから新たなパーティクルを生成することで様々な表現が可能です。
今回紹介した基本的なプロパティを操作するだけでも、アーティスティックな作品をつくることが可能かと思います。