In Part 1 of this tutorial we looked at how to integrate both WRLD Unity SDK and ARKit Unity Plugin ARKit Unity Plugin in a single scene. In this part you will learn how to attach map to a surface and only show the sections within the bounds provided by ARKit.
We will be using a stencil mask to show area within a cube and we will be updating that cube with the data provided by ARKit so that it covers the visible surface. So let’s jump right in where we left off in our earlier blog post.
Step 1: Creating a cube for stencil mask
We want to create a cube that will be our mask. For that we have to make sure that the pivot of that cube is at the bottom. Unity cube however have pivot in the center but we can easily change that by making it a child of another object. The steps below show how to accomplish just that.
- Create a new GameObject and name it WRLDMapMask. Make sure its position is set to (x: 0, y: 0, z: 0).
- Create a 3D Cube and name it StencilMask. Make it child of WRLDMapMask and set its position to (x:0, y: 0.5, z: 0).
- Now if you select the WRLDMapMask GameObject in the Hierarchy you will be able to see the the cube’s pivot is at the bottom.
Step 2: Creating a parent for WRLD Map and WRLDMapMask
Now that we have both the map and its mask ready, we can put them as a child of single object that will be anchored to the surface provided by ARKit.
- Create a new GameObject and name it WRLDMapParent. Make sure its position is set to (x: 0, y: 0, z: 0).
- Drag drop both WRLD Map and WRLDMapMask on to WRLDMapParent to make them its children.
- Make sure both are positioned at (x: 0, y: 0, z: 0).
- You hierarchy should now look like the image below.
Step 3: Anchoring our WRLDMapParent and updating our WRLDMapMask according to ARKit
Time to do some coding. We will be writing a script that will position our Map onto a surface and update our mask. To do so create a new C# script and name it WRLDARKitAnchorHandler. Now copy the code provided below and paste it in the script.
Save the script. And back in scene create a new GameObject named ARKitAnchorHandler. Click “Add Component” and add ARKitAnchorHandler component on this object. Now drag drop both WRLDMapParent and WRLDMapMask into their respective fields. See the image below for reference.
Now when you run the application you would be able to see that our maps positions itself on the surface and the 3D Cube covers the surface area correctly.
Step 4: Adding Stencil mask shaders
In order for our mask to work, we will need to add a couple of shaders. One will be used on our mask and one will be used on the materials used by WRLD Map. Create two shaders and copy the code given below.
Create StencilVolume.shader with the following code. This shader will be applied to our cube. So where ever the cube is visible in our view, it will write on the stencil buffer. This shader doesn’t draw anything so our cube will be completely invisible.
Create MainShader.shader with the following code. This is a basic surface shader that will be used on our map elements. It will check the stencil buffer and only draw where the value is set by the previous shader.
If you are interested in learning more about stencils then please checkout the Unity documentation that covers the subject in detail.
Step 5: Modifying the materials
Now that we have our shaders ready. We can assign them to our objects. First we will assign the stencil volume shader to our 3D Cube.
- Create a new material named StencilMaskMaterial
- Open the shader menu and assign it our Stencil Volume shader.
- Now assign that material to our StencilMask GameObject.
- Modifying the materials used by WRLD Map is very easy as well.
- Navigate to Assets/Wrld/Resources/WrldMaterials
- Select all the materials in that folder
- Now change the shader to Main Shader.
And that’s it. Now when you run that app on the device, map will only display within the bounds of detected surface.
Step 6: Update streaming
While playing around with the app you might have noticed that if the surface area is large then our mask might grow bigger than the map we have streamed, that’s because we are not updating our Streaming Camera so that it streams the map according to where we are looking. Fortunately doing so is very straight-forward.
Create a new C# script and name it WRLDARStreamingCameraHandler. Copy the following code in the script.
Now select our StreamingCamera GameObject. Click Add Component and add WRLDARStreamingCameraHandler. In the WRLD Map Transform field, drag drop our WRLD Map GameObject.
Our streaming camera will now reorient constantly according to ARKit Camera and will update streaming from whichever angle of position we are looking from.
Step 7: Build and Share
That is all the steps required to make the WRLD Map attached to a surface detected by ARKit. Now you can start working on your own additions and build something awesome We love watching all the new creative experiences that people make with WRLD SDK so please do share with us @wrld3d, #madewithWRLD.
If you have any questions, please reach out to us at email@example.com as we are here to assist you.
Cheers, Ali Arslan