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
This time we will transform a sphere like this.
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.
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.
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
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.
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
Recommended Posts