ARKitやSceneKitの図形をMetalシェーダーで変形させる方法

10717 ワード
iOS Swift ARKit Metal SceneKit iOS テキストリンク

ARKitやSceneKitの図形を自由に変形させる方法を紹介します。

なお、この手法を使って最終的にはARで空中に水を浮かべるといった処理も作りましたので、こちらの記事もご覧下さい。

ARKit + Metalで空中に水を浮かべる方法

やり方

今回はこんな感じの球体を変形させていきます。
※下の画像は球体にライトを当てていないのでのっぺりしていますが球体です。

SceneKitのマテリアルをMetalシェーダーで描画させる方法

球体のノードを作り、SCNProgramを使ってMetalのシェーダーの関数を設定すると、シェーダーに描画させることができます。

GameViewController.swift
// 球体をノードに追加する
let sphereNode = SCNNode()
sphereNode.geometry = SCNSphere(radius: 2)
sphereNode.position.y += Float(0.05)
sphereNode.name = "my_node"

// Metalのシェーダーを指定する
let program = SCNProgram()
program.vertexFunctionName = "vertexShader"
program.fragmentFunctionName = "fragmentShader"
sphereNode.geometry?.firstMaterial?.program = program
// 経過時間の情報をシェーダーに渡す
let time = Float(Date().timeIntervalSince(startDate))
globalData.time = time
let uniformsData = Data(bytes: &globalData, count: MemoryLayout<GlobalData2>.size)
sphereNode.geometry?.firstMaterial?.setValue(uniformsData, forKey: "globalData")

このあたりを詳しく知りたい方はこちらを読むと良いと思います。

Metal入門

Vertexシェーダーで変形してみる

まずは、簡単な変形をしてみます。
x座標にy座標分を足してみます。

Shader.metal
vertex ColorInOut vertexShader(VertexInput2          in       [[ stage_in ]],
                               constant SCNSceneBuffer& scn_frame [[buffer(0)]],
                               constant NodeBuffer& scn_node [[ buffer(1) ]],
                               device GlobalData2 &globalData [[buffer(2)]])
{
    // 出力用変数
    ColorInOut out;
    // 頂点の座標情報
    float3 pos = in.position;
    // 頂点のxにyを足している。ここが変形処理の実体
    pos.x += pos.y;
    // SceneKit用のMVP変換をする
    float4 transformed = scn_node.modelViewProjectionTransform * float4(pos, 1.0);
    // 変換後の座標を出力変数に入れる
    out.position = transformed;
    // テクスチャー座標は何もせずに出力変数に入れる
    out.texCoords = in.texCoords;

    // 出力する
    return out;
}

このようになります。

y座標の値が大きくなるほど（y座標は下から上に大きくなる）、x座標が大きくなっている（左から右に大きくなる）のがわかります。

なお、シェーダーの宣言の方法や、modelViewProjectionTransformについては、先程紹介したMetal入門に詳しくありますので、そちらをご覧ください。

cosを与えて変形させてみる。

さきほど、pos.x += pos.y;としていたところを、次のように変更してみます。

Shader.metal
    pos.x += cos(pos.y);

このようになります。

面白いですね。cosを与えると-1〜1の範囲で波打つようになります。

こうした数式の考え方はこちらの本にわかりやすく書いてありました。

Unityでわかる！ゲーム数学

経過時間を与えてアニメーションさせてみる

さきほど、pos.x += cos(pos.y);としていたところを、次のように変更してみます。

Shader.metal
    pos.x += cos(pos.y + globalData.time);

こんな感じで面白い動きをします。

最初に紹介した空中に水を浮かべる方法では、x, y, zのそれぞれについてこのような処理をすることで水のような感じを出しています。

NoteではiOS開発について定期的に発信していますので、フォローしていただけますと幸いです。
https://note.com/tokyoyoshida

Twitterでは簡単なtipsを発信しています。
https://twitter.com/jugemjugemjugem