Interacting with the virtual

We want our users to be able to place and then move or adjust their object's pose as they need to. If you recall, a pose represents the six degrees of freedom that an object can be represented in in 3D space. Before we start posing an object though, we need to be able to select an object. After we select an object, we want to be able to outline it in order to identify it to the user as selected. Since outlining the object sounds like an essential first step, let's tackle that first. Follow along the given steps to create the object outlining:

  1. Go back to Unity. Create a new folder in the Assets/ARCoreDesign/Materials folder and name it Shaders.
  2. Right-click (Ctrl + Click on Mac) inside the new folder within the Project window and from the Context menu, select Create | Shader | Standard Surface Shader. Name the new shader ARMobileSpecularOutline.
  3. Double-click on the ARMobileSpecularOutline shader to open it in your code editor.
  4. Delete the contents of the file. We will replace it with the ARCore mobile specular shader we used earlier.
  5. Open the MobileSpecularWithLightEstimation.shader file in your text editor and copy the entire contents to your clipboard. The file is in the Assets/GoogleARCore/HelloARExample/Materials/Shaders folder.
  6. Paste the contents of your clipboard to the new ARMobileSpecularOutline.shader file we just created. Again, we are copying the sample source and converting it to our own.
While this shader is a copy of our light estimation shader and will use light estimation, we want to try and keep our variable names as succinct as possible. Normally, we will add light estimation to the name of the shader. However, in this, we will use an AR prefix to remind us that this shader uses light estimation and is optimized for AR.
  1. Edit the name of the shader, top line, to the following:
Shader "ARCoreDesgin/ARMobileSpecularOutline"
  1. Next, we have several edits to do at the top of the file. Change the Properties section to the following by adding the new lines not highlighted:
Properties
{
_Albedo ("Albedo", Color) = (1, 1, 1, 1)
_Shininess ("Shininess", Range (0.03, 1)) = 0.078125
_MainTex ("Base (RGB) Gloss (A)", 2D) = "white" {}
[NoScaleOffset] _BumpMap ("Normalmap", 2D) = "bump" {}
_Outline ("_Outline", Range(0,0.1)) = 0
_OutlineColor ("Color", Color) = (1, 1, 1, 1)
}
  1. This adds three new properties: _Albedo, _Outline, and _OutlineColor. We added _Albedo in order to set a color on our materials without using a texture. _Outline defines the size of the outline, and _OutlineColor refers to the color.
  2. After the identified lines, inject the following block of code:
Tags { "RenderType"="Opaque" }
LOD 250 //after me
Pass {
Tags { "RenderType"="Opaque" }
Cull Front

CGPROGRAM

#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

struct v2f {
float4 pos : SV_POSITION;
};
float _Outline;
float4 _OutlineColor;

float4 vert(appdata_base v) : SV_POSITION {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
float3 normal = mul((float3x3) UNITY_MATRIX_MV, v.normal);
normal.x *= UNITY_MATRIX_P[0][0];
normal.y *= UNITY_MATRIX_P[1][1];
o.pos.xy += normal.xy * _Outline;
return o.pos;
}

half4 frag(v2f i) : COLOR {
return _OutlineColor;
}

ENDCG
}
  1. This block of code is the part that creates the outline and does this by rendering a second time. It does this using the Pass keyword. Inside Pass, we can see more tags being defined and another start to a shader program with CGPROGRAM. The second block is a vertex/fragment shader and if you look inside the vert function, you can see where the outline is calculated. It does this by projecting the models vertex normal a distance determined by _Outline. Then, in the frag function, we just return the outline color. Again, don't panic if this looks intimidating, it is.
  2. The last thing we need to do is add the new _Albedo property to our surface shader and add code to use it. Scroll down and add the following line after the identified line:
fixed _GlobalLightEstimation;  //after me
float4 _Albedo;
  1. Scroll down further to the surf function and modify the following line:
from o.Albedo = tex.rgb;

to o.Albedo = tex.rgb * _Albedo;
  1. All this is done to apply the Albedo color to the texture. If there is no texture, a value of 1.0 is used, which means just the Albedo color is shown. We needed to add this bit because our imported models didn't come with textures, and we didn't want to have to use a texture.
  2. Save the file and return to Unity. Ensure that you see no compiler errors.

That completes the outline shader, but, of course, we want to test how it works. Let's create a new material and set it on our model to see how this looks:

  1. Create a new material called ARMobileSpecularOutline_Green in the Assets/ARCoreDesign/Materials folder.
  2. Change the new material's shader to use the newly created shader ARCoreDesign | ARMobileSpecularOutline.
  3. Set the Albedo color to a pleasant green, perhaps #09D488FF. Set the Shininess to about 0.5 or so, you decide.
The actual color of the fabric material is #8F8E2A; use that color if you don't want such an obvious difference.
  1. Set _Outline to 0.02, which is still quite thick, but obvious. Use this value for now, and you can change it later.
  2. Select the sofa prefab in the Assets/ARCoreDesign/Prefabs folder and replace the fabric material with the new ARMobileSpecularOutline_Green, as shown:
Changing the sofa prefab to use the new material
  1. Save your project. Connect, build, and then run. Place a chair and see how it looks.

We have our outline shader in place, but now we need to programmatically turn the outline on when a user selects an object.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.63.87