How to transform ARKit and SceneKit shapes with Metal shader

I will introduce how to freely transform the shapes of ARKit and SceneKit.

In addition, using this method, I finally made a process such as floating water in the air with AR, so please see this article as well.

How to float water in the air with ARKit + Metal

manner

This time we will transform a sphere like this.

The image below is flat because the sphere is not illuminated, but it is a sphere.

How to draw SceneKit materials with Metal shader

You can make the shader draw by creating a sphere node and setting the Metal shader function using SCNProgram.

`GameViewController.swift`


//Add a sphere to a node
let sphereNode = SCNNode()
sphereNode.geometry = SCNSphere(radius: 2)
sphereNode.position.y += Float(0.05)
sphereNode.name = "my_node"

//Specify a metal shader
let program = SCNProgram()
program.vertexFunctionName = "vertexShader"
program.fragmentFunctionName = "fragmentShader"
sphereNode.geometry?.firstMaterial?.program = program
//Pass the elapsed time information to the 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")

If you want to know more about this area, please read here.

Introduction to Metal

Try transforming with Vertex shader

First, let's make a simple transformation. Let's add the y coordinate to the x coordinate.

`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)]])
{
    //Output variables
    ColorInOut out;
    //Vertex coordinate information
    float3 pos = in.position;
    //Add y to x at the vertex. This is the substance of the transformation process
    pos.x += pos.y;
    //Perform MVP conversion for SceneKit
    float4 transformed = scn_node.modelViewProjectionTransform * float4(pos, 1.0);
    //Put the converted coordinates in the output variable
    out.position = transformed;
    //Put the texture coordinates in the output variable without doing anything
    out.texCoords = in.texCoords;
    
    //Output
    return out;
}

It looks like this.

You can see that the larger the y-coordinate value (the y-coordinate increases from bottom to top), the larger the x-coordinate (from left to right).

For details on how to declare shaders and modelViewProjectionTransform, please refer to the Introduction to Metal introduced earlier.

Give cos and try to transform it.

Let's change what was previously set as pos.x + = pos.y; as follows.

`Shader.metal`


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

It looks like this.

It is interesting. If cos is given, it will undulate in the range of -1 to 1.

The idea of these mathematical formulas was written in this book in an easy-to-understand manner.

Understand with Unity! Game Mathematics

Give the elapsed time and try to animate

Let's change the place where pos.x + = cos (pos.y); was set earlier as follows.

`Shader.metal`


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

It makes interesting movements like this. qiita用動画.gif

In the method of floating water in the air introduced at the beginning, the feeling of water is given by performing such treatment for each of x, y, and z.

Note regularly publishes about iOS development, so please follow us. https://note.com/tokyoyoshida

Twitter has simple tips. https://twitter.com/jugemjugemjugem