[SWIFT] Comment transformer des figurines ARKit et SceneKit avec Metal Shader

Je vais vous présenter comment transformer librement les formes d'ARKit et de SceneKit.

De plus, en utilisant cette méthode, j'ai finalement créé un processus tel que faire flotter de l'eau dans l'air avec AR, alors veuillez également consulter cet article.

Comment faire flotter de l'eau dans les airs avec ARKit + Metal

manière

Cette fois, nous transformerons une sphère comme celle-ci.

L'image ci-dessous est plate car la sphère n'est pas éclairée, mais c'est une sphère.

Comment dessiner des matériaux SceneKit avec Metal Shader

Vous pouvez dessiner un shader en créant un nœud sphérique et en définissant la fonction Metal shader à l'aide de SCNProgram.

`GameViewController.swift`


//Ajouter une sphère à un nœud
let sphereNode = SCNNode()
sphereNode.geometry = SCNSphere(radius: 2)
sphereNode.position.y += Float(0.05)
sphereNode.name = "my_node"

//Spécifiez le nuanceur de métal
let program = SCNProgram()
program.vertexFunctionName = "vertexShader"
program.fragmentFunctionName = "fragmentShader"
sphereNode.geometry?.firstMaterial?.program = program
//Passer les informations de temps écoulé au 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")

Si vous souhaitez en savoir plus sur ce domaine, veuillez lire ici.

Introduction au métal

Essayez de transformer avec Vertex shader

Tout d'abord, faisons une simple transformation. Ajoutons la coordonnée y à la coordonnée x.

`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)]])
{
    //Variables de sortie
    ColorInOut out;
    //Coordonnées des informations des sommets
    float3 pos = in.position;
    //Y est ajouté à x du sommet. Telle est la substance du processus de transformation
    pos.x += pos.y;
    //Effectuer la conversion MVP pour SceneKit
    float4 transformed = scn_node.modelViewProjectionTransform * float4(pos, 1.0);
    //Mettez les coordonnées converties dans la variable de sortie
    out.position = transformed;
    //Mettez les coordonnées de texture dans la variable de sortie sans rien faire
    out.texCoords = in.texCoords;
    
    //Production
    return out;
}

Ça ressemble à ça.

Vous pouvez voir que plus la valeur de la coordonnée y est élevée (la coordonnée y augmente de bas en haut), plus la coordonnée x est grande (l'augmentation de la gauche vers la droite).

Pour plus de détails sur la façon de déclarer les shaders et modelViewProjectionTransform, veuillez vous référer à l 'Introduction à Metal présentée précédemment.

Donnez du cos et essayez de le transformer.

Changeons l'endroit où pos.x + = pos.y; a été défini comme suit.

`Shader.metal`


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

Ça ressemble à ça.

C'est intéressant. Si cos est donné, il ondulera dans la plage de -1 à 1.

L'idée de ces formules a été écrite dans ce livre d'une manière facile à comprendre.

Comprenez avec Unity! Mathématiques du jeu

Donnez le temps écoulé et essayez d'animer

Changeons l'endroit où pos.x + = cos (pos.y); a été défini comme suit.

`Shader.metal`


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

Cela fait des mouvements intéressants comme celui-ci. qiita用動画.gif

Dans la méthode de l'eau flottante dans l'air introduit au début, la sensation de l'eau est donnée en effectuant un tel traitement pour chacun des x, y et z.

Note publie régulièrement sur le développement iOS, alors suivez-nous. https://note.com/tokyoyoshida

Nous envoyons des conseils simples sur Twitter. https://twitter.com/jugemjugemjugem