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.
- _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.
- _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.
- Add a Quad from 3D -> Quad as a child to the UI GameObject.
- 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.
- Replace the default material of the Quad.
- In the Assets/Common/Materials folder, right-click and create a new Material.
- Name the Material Panel_UI and assign one of the Vuforia/VFX shaders from the dropdown menu Shader.
- Add a Quad from 3D -> Quad as a child to the UI GameObject.
- 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.
- 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.
- Add the TargetVFX component to VFX_Label_expand.
- Configure the TargetVFX and add in the Static Scalar Properties
- _ClipVertically with the value 1
- _ClipHorizontally with the value 0
- _MaxY with the value 1
- In the Dynamic Scalar Properties, add
- _MinY with the values: Start Value 1, End Value 0, Delay 0, Duration 1.
- In the Dynamic Colors, add
- _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.
- Add the GroundPlaneStage to the Observer field, the Quad to the TargetObject, and the Panel_UI material to the Effect Material.
- 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.
- Add a Canvas GameObject as child of the UI GameObject and set its Render Mode to World Space.
- Set the Canvas scale to 0.1, uniformly.
- Position it to 0, 0, 0, and fit it to the size of your Quad.
- Add any UI as child of the Canvas.
- Add a Canvas GameObject as child of the UI GameObject and set its Render Mode to World Space.
- 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.