[SWIFT] So transformieren Sie ARKit- und SceneKit-Figuren mit Metal Shader

Ich werde vorstellen, wie Sie die Formen von ARKit und SceneKit frei transformieren können.

Außerdem habe ich mit dieser Methode endlich einen Prozess wie das Schwimmen von Wasser in der Luft mit AR durchgeführt. Lesen Sie daher auch diesen Artikel.

Wie man mit ARKit + Metal Wasser in der Luft schwimmt

Weise

Dieses Mal werden wir eine Kugel wie diese transformieren.

Das Bild unten ist flach, da die Kugel nicht beleuchtet ist, sondern eine Kugel.

Zeichnen von SceneKit-Materialien mit Metal Shader

Sie können einen Shader zeichnen lassen, indem Sie einen sphärischen Knoten erstellen und die Metal-Shader-Funktion mit SCNProgram festlegen.

`GameViewController.swift`


//Fügen Sie einem Knoten eine Kugel hinzu
let sphereNode = SCNNode()
sphereNode.geometry = SCNSphere(radius: 2)
sphereNode.position.y += Float(0.05)
sphereNode.name = "my_node"

//Geben Sie den Metall-Shader an
let program = SCNProgram()
program.vertexFunctionName = "vertexShader"
program.fragmentFunctionName = "fragmentShader"
sphereNode.geometry?.firstMaterial?.program = program
//Übergeben Sie die Informationen zur verstrichenen Zeit an den Shader
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")

Wenn Sie mehr über diesen Bereich erfahren möchten, lesen Sie bitte hier.

Einführung in Metal

Versuchen Sie, mit dem Vertex-Shader zu transformieren

Lassen Sie uns zunächst eine einfache Transformation durchführen. Fügen wir die y-Koordinate zur x-Koordinate hinzu.

`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)]])
{
    //Ausgabevariablen
    ColorInOut out;
    //Koordinateninformationen von Eckpunkten
    float3 pos = in.position;
    //Y wird zu x des Scheitelpunkts hinzugefügt. Dies ist die Substanz des Transformationsprozesses
    pos.x += pos.y;
    //Führen Sie eine MVP-Konvertierung für SceneKit durch
    float4 transformed = scn_node.modelViewProjectionTransform * float4(pos, 1.0);
    //Fügen Sie die konvertierten Koordinaten in die Ausgabevariable ein
    out.position = transformed;
    //Fügen Sie die Texturkoordinaten in die Ausgabevariable ein, ohne etwas zu tun
    out.texCoords = in.texCoords;
    
    //Ausgabe
    return out;
}

Es sieht aus wie das.

Sie können sehen, dass die x-Koordinate (die Zunahme von links nach rechts) umso größer ist, je größer der y-Koordinatenwert ist (die y-Koordinate nimmt von unten nach oben zu).

Einzelheiten zum Deklarieren von Shadern und modelViewProjectionTransform finden Sie in der zuvor eingeführten Einführung in Metal.

Gib cos und versuche es zu transformieren.

Ändern wir die Stelle, an der pos.x + = pos.y; wie folgt eingestellt wurde.

`Shader.metal`


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

Es sieht aus wie das.

Es ist interessant. Wenn cos angegeben wird, wird es im Bereich von -1 bis 1 gewellt.

Die Idee dieser Formeln wurde in diesem Buch leicht verständlich geschrieben.

Mit Einheit verstehen! Spielmathematik

Geben Sie die verstrichene Zeit und versuchen Sie zu animieren

Ändern wir die Stelle, an der pos.x + = cos (pos.y); wie folgt eingestellt wurde.

`Shader.metal`


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

Es macht interessante Bewegungen wie diese. qiita用動画.gif

Bei dem zu Beginn eingeführten Verfahren zum Schwimmen von Wasser in der Luft wird das Gefühl von Wasser gegeben, indem eine solche Behandlung für jedes von x, y und z durchgeführt wird.

Hinweis veröffentlicht regelmäßig Informationen zur iOS-Entwicklung. Folgen Sie uns daher. https://note.com/tokyoyoshida

Wir senden einfache Tipps auf Twitter. https://twitter.com/jugemjugemjugem