Create a Hologram shader with Vertex Displacement

Until now, you've only worked with the Fragment Master Stack, creating Fragment shaders that operate at the pixel level, controlling colors, transparency, and emission.

Vertex shaders, on the other hand, operate on mesh geometry. They run once for each vertex (corner) of the 3D model and can modify vertex positions before the mesh is rendered. This allows you to create animated deformation effects like waves, distortion, or, in this case, holographic instability.

Vertex displacement creates animated geometry by offsetting vertex positions based on noise or other data. For the Hologram shader, this will make the mesh subtly shift and distort, enhancing the futuristic, unstable projection effect.

Important: This tutorial is part of the Get Started with Shader Graph course, which covers different units focused on different types of shaders. In case you haven't downloaded the project files, follow these instructions on how to create a new project and import the project assets.

Rather than building from scratch, you'll duplicate the existing Hologram shader and expand it with vertex displacement. This reuses all the work you've already done. Complete the Create a Hologram shader tutorial before continuing this tutorial.

To duplicate the Hologram shader, follow these instructions:

1. Duplicate the Hologram shader

• In the Project window, navigate to your Shaders folder.
• Select the Hologram shader and press Ctrl+D (macOS: Cmd+D).
• Rename the duplicated shader "HologramVertex".
• Double-click HologramVertex to open it in the Shader Graph window.

2. Create a material

• Right-click the HologramVertex shader and select Create > Material.
• Rename it "HologramVertex_Merchant".

You'll modify this shader to add vertex displacement.

Now you'll add a GameObject into your scene and apply the HologramVertex material to it. This lets you see your shader working in real-time as you build it.

To add a GameObject and apply the HologramVertex material to it, follow these instructions:

1. Open the Development_Scene

• In the Project window, open the _GetStartedWithShaderGraph > Scenes folder.
• Double-click the Development_Scene to open it.

2. Add the object to your scene

• In the Project window, locate the Merchant prefab inside the _GetStartedWithShaderGraph > Prefabs folder.
• Drag the Merchant prefab into the Hierarchy window.
• In the Scene view, position the Merchant GameObject over the small table that's already placed in the scene.

Note: The GameObjects provided with this course are specially crafted to showcase shader effects effectively. If you use your own custom GameObjects, the shader will still work, but the visual results may look slightly different depending on the GameObject’s shape and UV layout.

3. Apply the hologram material

• Select the Merchant GameObject.
• In the Inspector window, locate the Sprite Renderer component.
• Drag the HologramVertex_Merchant material from the Project window into the Material property.

Note: This shader can also be applied to any type of screen that needs to mimic the appearance of an old or futuristic device. For example, you could use the OldTV prefab instead, and apply the material only to the Screen child GameObject to achieve a similar effect.

The vertex displacement also needs a noise texture to define how the geometry moves. Just like the line and flicker effects earlier, a noise pattern is used to drive the animation. In this case, you’ll reuse the LinesTexture noise so the vertex displacement follows the same pattern as the line effect. However, you could use any other noise texture to define a different geometry displacement.

To add another LinesTexture sample for displacement, follow these instructions:

1. Drag LinesTexture into the Workspace

• Drag the LinesTexture property from the Blackboard into the Workspace to create an Instance node.

2. Create a Sample Texture 2D LOD node

• In the Workspace, right-click and add a Sample Texture 2D LOD node (Sample > Texture > Sample Texture 2D LOD).

The Sample Texture 2D LOD node is similar to the Sample Texture 2D node used in other tutorials, but it allows you to sample a texture with manual LOD (Level of Detail) control.

3. Connect the texture and UV

• Connect the LinesTexture(T2) output to the Texture(T2) input of the Sample Texture 2D LOD node.
• In the Lines Noise group, locate the Tiling and Offset node and connect its Out(2) output to the UV(2) input of the Sample Texture 2D LOD node.

If you create a regular Sample Texture 2D node and try to connect the Tiling and Offset Out(2) output to the UV(2) input, you might notice that the connection doesn’t work. This happens because the standard Sample Texture 2D node expects the UV input to come from the mesh’s default UVs, while Sample Texture 2D LOD allows you to manually control how the texture is sampled and how UVs are applied.

This reuses the same animated UV coordinates you created for the scan lines, ensuring the vertex displacement animates in sync with the other visual effects.

The raw noise values might create too subtle displacement. You'll multiply them to be able to increase the effect intensity.

To duplicate the displacement intensity, follow these instructions:

1. Duplicate the intensity

• Right-click in the Workspace, select Create node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Sample Texture 2D LOD RGBA(4) output to the A input.
• Leave the B input at its default value.

The B input defaults to (2, 2, 2, 2). By multiplying the noise by 2, you double the displacement intensity, making the vertex animation more visible without requiring an additional property.

Note: You could change the B input value or even create a property to control it externally if you desire.

You’ve defined how much the vertices should displace, but to apply the displacement, you first need their current positions. You’ll use a Position node set to Object space to retrieve this information.

To create an Object space Position node, follow these instructions:

1. Create a Position node

• Right-click in the Workspace, select Create node, and search for and add a Position node (Input > Geometry > Position).
• In the Position node settings, set the Space property to Object.

Object space means positions are relative to the GameObject’s local origin (0, 0, 0 at the GameObject’s pivot point). This is crucial for vertex displacement because you want to offset vertices relative to the GameObject itself, not world space. This ensures the displacement effect moves with the GameObject correctly.

Now you'll combine the original vertex position with the noise-driven offset to create the displaced position.

To calculate the displaced position, follow these instructions:

1. Define the vertex offset position

• Right-click in the Workspace, select Create node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Position Out(3) output (Object position from the last step) to the A input.
• Connect the Multiply Out(4) output (from the Duplicate the displacement intensity step) to the B input.

This defines how much each vertex should move based on the noise pattern.

2. Add the vertex offset position to the original position

• Right-click in the Workspace, select Create node, and search for and add an Add node (Math > Basic > Add).
• Connect the Position Out(3) output (from the last step) to the A input.
• Connect the Multiply Out(3) output (from this step) to the B input.

This adds the offset to the original vertex position, displacing vertices outward based on the noise values.

3. Test the effect

• Connect the Add Out(3) output (from this step) to the Position input of the Vertex Master Stack.

In the Main Preview window, you’ll notice the result appears chaotic, with very intense displacement. This happens because the calculation done in this step ((original position × offset) + original position) produces very exaggerated values, creating sharp spikes in the geometry. To fix this, you need a way to control the displacement and smoothly blend between the original (stable) position and the offset (displaced) position. You’ll achieve this in the next steps.

• Once you are ready to continue, disconnect the Add Out(3) (output from this step) from the Position input of the Vertex Master Stack.

As you saw in the preview, the vertex displacement currently is very extreme. You'll create a property to control the displacement scale.

To create a VertexOffset property, follow these instructions:

1. Create VertexOffset property

• In the Blackboard, select the Add (+) button and select Float.
• Rename it "VertexOffset".
• With the property selected, in the Graph Inspector, set the Mode property to Slider and set the slider range as follows: Min = 0, Max = 0.1, and Default Value = 0.05.

Note: The slider range values were chosen based on our own experiments and aren’t definitive. You can adjust it if you find a range that gives you better results.

The current vertex displacement is distorting the mesh significantly. In this case, small values (0.01 to 0.1) are sufficient to create visible effects without extreme distortion. The slider range keeps the displacement controlled and aesthetically appropriate.

To control displacement intensity so it changes smoothly and not abruptly, you'll use a Lerp node to blend between the original (stable) and offset (displaced) positions.

To lerp between the original and displaced positions, follow these instructions:

1. Create a Lerp node

• Right-click in the Workspace, select Create node, and search for and add a Lerp node (Math > Interpolation > Lerp).

The Lerp node blends between two values (A and B) based on a third value (T). When the T input is 0, the output equals A. When T is 1, the output equals B. Values between 0 and 1 create a smooth blend between A and B.

2. Connect the inputs

• Connect the Position Out output (from the Create Object space Position node step) to the A input.
• Connect the Add Out output (from the Calculate displaced position step) to the B input.
• Drag VertexOffset from the Blackboard into the Workspace.
• Connect the VertexOffset output to the T input.

Now you'll connect the displaced positions to the Vertex Master Stack to apply the geometry deformation.

To connect the displaced positions to the Vertex Position output, follow these instructions:

1. Connect to Vertex Position

• The Vertex Stack should be visible on the right, above the Fragment Stack. If you don't see it, you may need to scroll to the Master Stack area.
• Connect the Lerp Out output to the Position input of the Vertex Master Stack.
• Save your final shader with Ctrl+S (macOS: Cmd+S)

The Vertex Position output controls where each vertex is rendered. By feeding displaced positions here, you animate the mesh geometry itself, creating hologram distortion and instability effects that affect the actual shape of the GameObject, not just its surface appearance. You can now see this effect in the model of the Main Preview.

Your vertex displacement is now active. Look at your GameObject in the Scene view. You should see the mesh subtly shifting and distorting based on the animated noise. The effect will appear smoother once you enter Play mode. This is because the Time node updates continuously during Play mode, but not in Edit mode, where updates are limited to optimize performance. Once you select the Play button, the animation runs in real time, and the effect should appear as intended.

You can now fine-tune the hologram with vertex displacement effect by adjusting the shader parameters exposed in the material’s Inspector window.

To adjust the shader parameters, follow these instructions:

1. Ensure the material is selected

• In the Project window, select the HologramVertex_Merchant material.

2. Verify textures are assigned

• In the Inspector window, verify all textures are assigned:
  • BaseMap: Should be empty if you’re using the Merchant GameObject.

Important: In case there you’re using another object and there is no reference, assign the object’s base texture.

• LinesTexture: In case there’s no reference, assign the LinesNoise texture.
• FlickerTexture: In case there’s no reference, assign the FlickerNoise texture.

Important: Check that all properties are correctly assigned, as materials can lose default references.

3. Adjust all hologram parameters

• In the Inspector window, locate the FresnelPower, FresnelColor, LineSpeed, LineTile and VertexOffset properties you defined for the shader.
• Position your Scene view or Game view camera to see the GameObject from different angles.
• Continue adjusting the FresnelPower, FresnelColor, LineSpeed, LineTile and VertexOffset properties until you achieve the desired hologram with vertex displacement appearance.

4. See the animation

• Select the Play button in the Unity Editor. Observe the animated 2D sprite. The hologram effect should remain consistent throughout the animation.
• Select the Play button again to exit Play mode.

Tip: Green and bluish colors often work well for screen-like devices or holographic effects. Also remember that small values for the Vertex Offset (around 0.01 to 0.1) are usually enough to create visible displacement. Using higher values will produce a more dramatic deformation effect.

Once your HologramVertex shader is finished, save your work and create a prefab so the object can be reused easily.

1. Create a prefab of your object

• In the Project window, open the Prefabs > _My Objects folder.
• Drag the Merchant GameObject from the Hierarchy window into the _My Objects folder. This creates a prefab that stores the GameObject, its material, and its components.
• In the Hierarchy window, select the Merchant GameObject and, in the Inspector window, disable the checkbox in the GameObject header to deactivate it. This helps keep the scene organized.
• From the main menu, select File > Save.

Important: Saving (Ctrl+S (macOS: Cmd+S)) with the Shader Graph window open only saves the shader. Scene changes must be saved separately.

The prefab is now saved and ready to reuse, and the shader can be applied to any other objects by creating new materials from it.

Take a moment to review the final shader graph created in this tutorial and compare it with your own. Make sure all nodes are properly connected and that all properties are correctly declared.

Congratulations!

You've expanded the hologram shader with vertex displacement, creating animated geometry deformation. You’ve now worked with both Vertex and Fragment shaders, learned how to modify vertex positions in the Vertex Master Stack, why Object space matters for displacement, and how to use Lerp to blend between original and displaced positions.

You’ve completed this unit and created the shaders introduced in this section. This unit is part of the Get Started with Shader Graph course, which is organized into multiple units that explore different shader techniques, we encourage you to check out our other units.