Tinkering with the Vuforia VFX Library¶

Use the VFX shader framework to create great looking AR experiences with Vuforia targets and augmentations. This guide provides step-by-step instructions to configure the TargetVFX component.

For a more general introduction and setup guide of the VFX Library, please see the Vuforia VFX Library and the Vuforia VFX Library Overview for the many available Prefabs ready for use in your Unity Project.

The shader Prefabs can also be customized from the TargetVFX component by replacing or changing the values of the parameters. In this guide, we explore how to change the properties of a TargetVFX on a Model Target.

Model Targets Multiple VFX¶

In your scene, add an ARCamera GameObject configured as described in the Vuforia VFX Library article.
Add a ModelTarget GameObject with a database and Model Target selected in its Inspector. See Introduction to Model Targets in Unity for details.
Add an identical same-sized 3D model as a child to the ModelTarget GameObject.
Create an empty GameObject as a child of the ModelTarget GameObject named Effects.
Add the VFX_Contour_axial_scan prefab as a child to the Effect GameObject.

Configure the TargetVFX¶

We can now adjust the properties of the TargetVFX and alter the behavior of the effect.
Add the 3D model to the Target Object field. For Model Targets, you can add and use the Target Representation from the Model Target Behaviour component
Optional. In the Material, you can exchange the material with a custom material and shader. See Using your material below. Otherwise, keep the Material with the DepthNormalContour and instead ensure that the ARCamera is using the DepthNormals depth mode.
In the Observer, add the ModelTarget GameObject.
Test the effect in the webcam play mode or with a sequence in the recording play mode. See Vuforia Play Mode in Unity for details.

Adjust the shader properties¶

The VFX_Contour_axial_scan contain the following properties:

_AxialClip – which controls whether an axial clipping should be used.
_Radial_Clip - which controls whether a radial (spherical) clipping should be used.
_Min – represents the point of the clipping bounds applied by the shader. This is only applicable when _AxialClip is used. The value (-1, -1, -1) determines the point of the clipping bounding box in normalized coordinates between -1 and 1.
_Max – represents the point of the clipping bounds applied by the shader. By setting the _Max as a dynamic property with a start and end value you can control the amount and direction of the effect.
_ContourColor – represents the color of the contour lines.
_SurfaceColor – represents the surface color. As a dynamic property, the _SurfaceColor can be set as a fading effect.

TIP: In the DepthNormalContour material there are many more shader properties that can be added and configured in the TargetVFX. See Shader Properties below.

Alternative configuration of the VFX_Contour_axial_scan¶

Let’s do an alternative version of this shader. We could for example create an accompanying effect to simulate deselecting the object. We set the new effect to play after the prefab axial scan.

In the Hierarchy, right-click the VFX_Contour_axial_scan and duplicate it.
Rename the duplicate to VFX_Contour_custom_scan.
Start by removing the _ContourColor in the Static Colors.
Adjust the _Max and _SurfaceColor from the Dynamic properties.
1. _Max: Adjust the XYZ start and end values so that the transition occurs from the top and downwards. Set the Delay and Duration to 2 seconds.
2. _SurfaceColor: Set the colors in Dynamic Colors to transition from white to a color of your choice. Make sure the Alpha value of your color is not 0. Set the Delay to 2 and Duration to 1.5 seconds
Disable the Is Target Shown On Target Found.
In the VFX_Contour_axial_scan GameObject, add your custom shader to the OnReachedEnd(). It will now play after the first shader has finished.

Ground Plane Interactive Placement VFX¶

In a different scenario, interactive Ground Plane content can be freely used with the visual effects to for example a UI (User Interface) board. We can reuse the available elements from in the Ground Plane sample scenes and apply an effect to the parts of the UI that have mesh renderers and materials assigned to them.

In a scene, add an ARCamera GameObject configured as described in the Vuforia VFX Library article.
Add the Prefab GroundPlaneAugmentationPlacement. This Prefab contains the Plane Finder and a Ground Plane Stage that is already set up with the ObjectManipulator.cs script and an empty Content GameObject.
Change the GroundPlaneStage's Stage Type to MID-AIR.

Add content¶

In the Content GameObject, add two empty GameObjects named Effect and UI.
1. Add a Quad from 3D -> Quad as a child to the UI GameObject.
  1. Add the Billboard.cs to the UI GameObject. The script will continually face the Quad and its content towards the user as they move around.
2. Replace the default material of the Quad.
  1. In the Assets/Common/Materials folder, right-click and create a new Material.
  2. Name the Material Panel_UI and assign one of the Vuforia/VFX shaders from the dropdown menu Shader.
  3. In this example, the VFX/Unlit/ColorTexture is used.
    
    TIP: Look up the shader in the Project assets to view the shader's properties. They contain the parameters you can use and tweak for that material through the TargetVFX. See also Shader Properties below for details.
  4. Assign the Panel_UI material to the Quad.

Add effect¶

In the Effect GameObject, create a new empty GameObject with the name VFX_Label_expand.
1. Add the TargetVFX component to VFX_Label_expand.
2. Configure the TargetVFX and add in the Static Scalar Properties
  1. _ClipVertically with the value 1
  2. _ClipHorizontally with the value 0
  3. _MaxY with the value 1
3. In the Dynamic Scalar Properties, add
  1. _MinY with the values: Start Value 1, End Value 0, Delay 0, Duration 1.
4. In the Dynamic Colors, add
  1. _Color with a Start and End color of your choice. We chose Hex-code 83C5C4 and Hex-code FFFFFF. Add 1 to the Delay and the Duration.
5. Add the GroundPlaneStage to the Observer field, the Quad to the TargetObject, and the Panel_UI material to the Effect Material.
6. Disable the Play on Awake and Animation Auto Rewind. We want the UI to expand only on user interaction.

Test with recording¶

You can change the playback sequence in the Vuforia Configuration to the vfx_groundplane_sequence in the folder Assets/SampleResources/Recordings. See the effect in Play Mode and modify the effect to your liking.

Finalize¶

The UI parent GameObject can be extended with GUI and Unity's UI elements to appear after the effect has run.
1. Add a Canvas GameObject as child of the UI GameObject and set its Render Mode to World Space.
  1. Set the Canvas scale to 0.1, uniformly.
  2. Position it to 0, 0, 0, and fit it to the size of your Quad.
2. Add any UI as child of the Canvas.
3. Disable the Canvas from the Inspector.
In the VFX_Label_expand, add a new event to the OnReachedEnd().
Assign the Canvas as the object and set GameObject.SetActive to enabled.
You can now test the modified effect in Play Mode or build it to your device

Shader Properties¶

In the tables below, you can find the most common properties of the shaders used in the VFX Library. Change, add or remove these properties in the TargetVFX to customize your special effects provided that the shader was assigned to the selected material. For a full list of available properties in one shader, please review the shader file itself. The shaders can be found in the directory Assets/VFXCore/Shaders/… in the folders Depth, Lit, Transparent, and Unlit.

Common Shader Properties¶

Property Name	Description
_Center	The origin (in world coordinates) of the reference frame used by the shader
_AxisX / _AxisY / _AxisZ	The X/Y/Z-axis vector (in world coordinates) of the reference frame used by the shader
_Scale	The scale factor to be applied to the clipping coordinates
_AxialClip	Whether an axial clip should be applied
_RadialClip	Whether a radial clip should be applied
_Min / _Max	The axial clipping min/max coordinates, along with the projection of each fragment 3D position onto each axis (see _AxisX, _AxisY, _AxisZ)
_MinRadius / _MaxRadius	The radial clipping min/max radii (distance from _Center)
_ClipLineColor	The color of the clipping line
_ClipLineWidth	The width of the clipping line

DepthMaskSphereCut¶

Property Name	Description
_Color	The color of the non-cut surface
_BackgroundColor	The color of the background; visible through the cut
_MainTex	(optional) Texture, the color gets multiplied by the _Color
_Center	The center point of the spherical cut volume, in world coordinates
_Radius	The radius of the spherical cut volume
_BorderWidth	The width of the cut border (relative to the radius)
_OcclusionMode (toggle)	Whether the shader should write to the depth buffer only, or rendered with color
_RadialFade (toggle)	Whether the shader should apply a radial fade effect from the center of the cut

DepthNormalContour¶

Property Name	Description
_ContourColor	The color of the depth contour lines
_DepthThreshold	The depth threshold to extract a contour line (in Unity world units)
_NormalAngleThreshold	The angle threshold to extract a contour line from the surface normal by comparing adjacent pixel normals
_SurfaceColor	The color of the surface
_Toon (toggle)	Whether a "toon" effect should be applied to the surface, on top of the contour effect

Unlit - ColorTexture¶

Property Name	Description
_Color	The base color of the surface
_MainTex	The texture
_ClipHorizontally (toggle)	Whether a horizontal (in texture UV space) clipping should be applied
_ClipVertically (toggle)	Whether a vertical (in texture UV space) clipping should be applied

Unlit / RadialFade¶

Property Name	Description
_Color	The base color of the surface
_MainTex	The texture
_Radius	The radius (in texture UV space) where the radial fade effect ends (pixels beyond that radius will be completely transparent)

Lit / VolumeTexture*¶

Property Name	Description
_Color	The base color of the surface
_AmbientFactor	An ambient color component is added to the diffuse component of the shader
_MainTex	The 3D texture

*When the LoadTextureData() method on the VolumeTextureLoader.cs is called, the VolumeColor material, or a Material with a Shader using a 3D texture, must already be applied on all the meshes (Mesh Renderer components) of the Objects to which the VolumeTextureLoader is applied.

The same apply if the PlayOnAwake is enabled: The VolumeColor or your custom material needs to already be applied on the relevant meshes in the Unity scene (i.e., before the Awake() gets executed).

Transparent / LightWave¶

Property Name	Description
_Radius	The radial distance (in world space units) of the light wave from the origin of the effect
_WaveLength	The length of the high luminance zone of the light wave
_WaveNoise	Whether a spatial noise component should be added to the spherical shape of the wave front
_NoiseTex	(optional) Texture from which the spatial noise is looked up
_NoiseAmp	Noise amplitude (in word space units)
_NoiseFreq	Spatial frequency for the noise texture lookup
_MosaicEffect	Whether a mosaic effect should be enabled
_MosaicBlockSize	Size (in word space units) of each block in the mosaic

Unlit / Vignette¶

Property Name	Description
_BorderColor	The color applied at the vignette borders
_BorderWidth	The width of the vignette borders
_MainTex	The texture

Depth / DepthMapContour¶

Property Name	Description
_DistanceFade	Whether the transparency should increase with distance
_StartFadeDistance	The distance (from the viewer) at which the distance fading starts
_EndFadeDistance	The distance (from the viewer) at which the distance fading ends

Unlit / Texture / HeighClip¶

Property Name	Description
_MinHeight	The height (in world space units measured along the vertical axis) below which the clipping starts
_MaxHeight	The height (in world space units measured along the vertical axis) above which the clipping starts
_MainTex	The texture

Using your Material¶

If you wish to create a custom material with your shader. See Unity's guides on materials and their guide on shaders.

If you use your own material, for example, by replacing the Material in a configured TargetVFX, we recommend using the property names in the shader of your custom material to be the same as the naming conventions found in the VFX shaders. Find the shaders and click on each to see their property names, In the Project context menu, search: t:shader or navigate to Assets/VFXCore/Shaders/…

For more details on properties used in shaders, please see Unity's documentation on shader properties.

Learn More¶

Vuforia VFX Library

Vuforia VFX Library Overview

Vuforia VFX Minimap for Area Targets