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

  1. In your scene, add an ARCamera GameObject configured as described in the Vuforia VFX Library article.
  2. Add a ModelTarget GameObject with a database and Model Target selected in its Inspector. See Introduction to Model Targets in Unity for details.
  3. Add an identical same-sized 3D model as a child to the ModelTarget GameObject.
  4. Create an empty GameObject as a child of the ModelTarget GameObject named Effects.
  5. 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.

  1. Add the 3D model to the Target Object field.
  2. 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.
  3. In the Observer, add the ModelTarget GameObject.
  4. 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.

  1. In the Hierarchy, right-click the VFX_Contour_axial_scan and duplicate it.
  2. Rename the duplicate to VFX_Contour­_custom_scan.
  3. Start by removing the _ContourColor in the Static Colors.
  4. 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
  5. Disable the Is Target Shown On Target Found.

  1. 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.

  1. In a scene, add an ARCamera GameObject configured as described in the Vuforia VFX Library article.
  2. 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.
  3. Change the GroundPlaneStage’s Stage Type to MID-AIR.

Add content

  1. 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.

  1. 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.

  1. >Assign the Panel_UI material to the Quad.

Add effect

  1. 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

  1. 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

  1. 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.

  1. Disable the Canvas from the Inspector.
  1. In the VFX_Label_expand, add a new event to the OnReachedEnd().
  2. Assign the Canvas as the object and set GameObject.SetActive to enabled.

  1. 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

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.