Create a Hologram shader

Hologram shaders create distinctive sci-fi transparent effects, usually with animated scan lines and flickering instability. The hologram effect you'll create combines three key techniques:

• Fresnel effect: A phenomenon where surfaces become more reflective or visible at glancing angles. In simple terms, this means the edges of a GameObject will glow brighter than the center.
• Animated scan lines: Noise lines that move from top to bottom over time, simulating an electric surface.
• Flicker effect: Noise flicker that creates the illusion of electronic instability.

This technique is widely used in games for the following purposes:

• Futuristic user interfaces and HUD elements
• Holographic communication displays
• Projected interfaces and data screens
• Sci-fi objects and technology

This shader follows a commonly used approach, we’ll focus on breaking it down step by step to understand exactly how it works.

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.

Before building the Hologram shader, it’s important to understand what noise is and why it’s commonly used in shaders.

In shaders, noise refers to irregular, random-looking patterns used to create variation and visual complexity. Noise can simulate effects such as distortion, glitches, flickering, surface breakup, energy flow, or organic movement. Instead of flat, uniform surfaces, noise helps make materials feel dynamic and natural.

There are two main ways to create noise in a shader:

• Procedural noise, which is generated mathematically in real time.
• Noise textures, which are precomputed images containing noise patterns.

In this tutorial, you’ll use noise textures.

Sampling a noise texture is significantly more efficient than generating procedural noise. When sampling a texture, the GPU performs a single texture fetch operation, which is relatively inexpensive. Procedural noise requires multiple mathematical calculations per pixel, increasing ALU (arithmetic logic unit) cost and potentially impacting performance, especially on mobile devices and VR platforms.

These are some examples of different noise textures:

Note: You can explore the OpenGameArt noise texture library for a free and complete collection of noise textures to use in your own projects.

Because holograms should glow consistently regardless of scene lighting, and represent non-solid surfaces that do not interact with light in a traditional way, you'll use an Unlit Shader Graph to create the hologram effect.

To create the Hologram Shader Graph, follow these instructions:

1. Create a new Unlit Shader Graph

• In the Project window, navigate to your Shaders folder.
• Right-click and select Create > Shader Graph > URP > Unlit Shader Graph.
• Rename the new shader "Hologram".
• Double-click the Hologram shader to open it in the Shader Graph window.

The Shader Graph window opens. You're now ready to start building your Hologram shader.

Shaders define the rendering instructions, but they can't be applied directly to GameObjects. To use a shader on a GameObject, you need to create a material: an instance of the shader with specific parameter values.

To create a material from the shader, follow these instructions:

1. Create a new material

• In the Project window, right-click the Hologram shader and select Create > Material.
• Rename it "Hologram_Merchant".

When you create a material directly from a shader, Unity automatically assigns that shader to the new material.

Note: If you can’t see the shader assigned in the material’s Inspector window, you can drag the shader and drop it onto the material to assign it.

The material is now using your Hologram shader. Even though the shader is empty right now, the material is ready to receive the shader properties you'll create in the following steps.

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

To add a GameObject and apply the material, 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 Merchant GameObject 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 next to the small table that's already placed in the scene.

The object used in this tutorial is a 2D sprite GameObject with an Animator component attached. This example highlights the scalability of shaders, showing how the same techniques can be applied to enhance both 3D and 2D objects.

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 Hologram_Merchant material from the Project window into the Material property box.

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 Hologram_Merchant material is now applied to the Merchant GameObject. However, the Merchant GameObject currently looks plain because the shader is empty, but as you build the shader in the following steps, you'll see the hologram effect develop in real-time.

The hologram effect requires transparency settings to create the see-through appearance.

To configure the Graph Inspector settings, follow these instructions:

1. Open Graph Settings

• In the Shader Graph window, locate the Graph Inspector.
• Select the Graph Settings section.

Graph Settings control technical rendering properties that affect how Unity's rendering pipeline handles your shader.

2. Set Surface Type to Transparent

• Locate the Surface Type setting.
• Change it from Opaque to Transparent.

Setting this to Transparent enables alpha blending, which creates the see-through effect.

3. Check Allow Material Override

• Locate and enable the Allow Material Override checkbox.

Allow Material Override lets individual materials override certain Graph Settings. This gives you more flexibility to create different hologram variations (more or less transparent, different blending modes) without creating separate shaders.

The Graph settings are now configured for hologram rendering.

The Fresnel effect needs a power value to control the intensity of the edge glow. You'll create a Float property for this, configured as a slider. Slider mode constrains the property to a specific range and displays it as a slider in the Inspector window.

To create Fresnel properties, follow these instructions:

1. Create FresnelPower property

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

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 edge glow needs a color. You'll create a Color property and enable HDR. HDR (high dynamic range) mode allows colors to have intensity values greater than 1.0, creating colors brighter than pure white. This is essential for emission and glow effects, where you want colors to bloom and appear to emit light.

2. Create FresnelColor property

• In the Blackboard, select the Add (+) button and select Color.
• Rename it "FresnelColor".
• In the Graph Inspector, set the Mode property to HDR.
• Set the Default value to any color you want your preview to show. Don’t worry about choosing the perfect color right now, as you can adjust it later.

Both Fresnel properties are now ready to create the edge glow effect.

Now you'll build the Fresnel edge glow effect using the properties you just created.

To create Fresnel Effect nodes, follow these instructions:

1. Create a Fresnel Effect node

• Right-click in the Workspace and select Create Node, then search for and add a Fresnel Effect node (Math > Vector > Fresnel Effect).
• Drag the FresnelPower property from the Blackboard into the Workspace.
• Connect the FresnelPower(1) output to the Power input of the Fresnel Effect node.

2. Multiply the Fresnel effect by the color

• Right-click in the Workspace and select Create Node, then search for and add a Multiply node (Math > Basic > Multiply).
• Drag the FresnelColor property from the Blackboard into the Workspace.
• Connect the FresnelColor(4) output to theA input of the Multiply node.
• Connect the Fresnel Effect Out(1) output to the B input of the Multiply node.

3. Create a group

• Hold Ctrl (macOS: Cmd) and left-click the FresnelPower property node, Fresnel Effect node, FresnelColor property node, and Multiply node to multi-select them.
• Right-click the selection and select Group Selection. Alternatively, press Ctrl+G (macOS: Cmd+G)
• In the Group title box, enter "Fresnel Effect".

The Fresnel effect now produces a colored edge glow.

Now you’ll begin creating the part of the shader responsible for the vertical scan lines that move from top to bottom, giving the surface the appearance of an electronic screen. This effect will be created using a time-based animation driven by the Time node.

To create a Time node, follow these instructions:

1. Create a Time node

• Right-click in the Workspace and select Create Node, then search for and add a Time node (Input > Basic > Time).

It might seem confusing at first, but you can think of the Time node as a value that increases continuously every frame. Because this value keeps changing, it can be used to animate other values in your shader.

2. Create LineSpeed property

• In the Blackboard, select the Add (+) button and select Vector2.
• Rename it "LineSpeed".
• Set Default Value to X = 0 and Y = 1.

Vector2 properties store two float values (X and Y). In this case, this property will control the speed and direction of the scan line animation. Setting X to 0 and Y to 1 means the lines will move on the Y axis only (vertically).

3. Multiply Time by Linespeed

• Right-click in the Workspace, select Create Node, and search for and add a Multiply node (Math > Basic > Multiply).
• Drag LineSpeed from the Blackboard into the Workspace.
• Connect the LineSpeed(2) output to the A input of the Multiply node.
• Connect the Time Time(1) output to the B input of the Multiply node.

When you multiply the Time output by another value, you’re scaling how fast that change happens. A higher value will make the animation move faster, while a lower value will slow it down.

In this case, the LineSpeed property allows you to control the speed separately on the X and Y axes. By setting X = 0 and Y = 1, the texture does not move horizontally, and the animation only scrolls vertically. If you change the Y value higher, the vertical movement will be faster. And if it was lower, the movement would be slower.

To create vertical scan lines, you first need to extract the Y (vertical) position of each pixel on the surface of the GameObject. This value tells the shader where each pixel is located along the vertical axis. Then you’ll apply a lines noise texture using this Y value as a coordinate. The line pattern will then be repeated along the vertical direction, creating horizontal bands across the surface. When the noise is animated over time, these bands will appear to move vertically, producing the scan line effect commonly seen in holographic displays or old electronic screens.

To create a World Position setup, 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).
• Confirm the Space property is set to World.

The Position node outputs the position of the current fragment (pixel). Setting the space to World means you get the absolute position in the scene.

2. Split vector position into individual components

• Right-click in the Workspace, select Create Node, and search for and add a Split node (Channel > Split).
• Connect the Position Out(3) output to the In input of the Split node.

The Split node separates a vector into its individual components (R/X, G/Y, B/Z, A/W). This lets you access specific channels; in this case, you only need the G(1) (Y vertical) component.

3. Create a Vector2 of the Y position

• Right-click in the Workspace, select Create Node, and search for and add a Vector 2 node (Input > Basic > Vector 2).
• Connect the Split G(1) output to the Y input of the Vector 2 node.
• Leave X unconnected (it defaults to 0).

The Vector 2 node combines two float values into a single 2D coordinate. In this case, you’re using only the Y value to define the coordinate, while the X value remains constant (0). This means the generated UVs vary only along the vertical axis.

Because the coordinates change only in the Y direction, the pattern will repeat vertically across the surface, which allows the scan lines to move down when the value is animated.

In this step, you’ll define the UV coordinates that control how often the scan line pattern repeats and how it moves across the surface. UV coordinates represent positions on the surface of a GameObject using a 2D coordinate system, similar to a grid that maps textures or patterns onto the geometry. By modifying these coordinates, you can control how a pattern is placed, repeated, or animated across the surface.

The tiling determines how many times the scan line pattern repeats, while the offset shifts the coordinates, this will create the animation that makes the lines scroll across the object.

To create a LineTile property and a Tiling and Offset node, follow these instructions:

1. Create LineTile property

• In the Blackboard, select the Add (+) button and select Vector2.
• Rename it "LineTile".
• Set the Default Value property to X = 1 and Y = 12.

This property will control how many times the scan line pattern repeats across the surface. X (horizontal tiling) controls repetition from left to right. Y (vertical tiling) controls repetition from bottom to top. With the values (1, 12), the pattern does not repeat horizontally, but it repeats 12 times vertically, creating multiple scan lines across the object.

2. Create a Tiling and Offset node

• Right-click in the Workspace, select Create Node, and search for and add a Tiling and Offset node (UV > Tiling and Offset).
• Connect the Vector 2 Out(2) output (from the previous step) to the UV input of the Tiling and Offset node.
• Drag LineTile property from the Blackboard into the Workspace.
• Connect the LineTile(2) output to the Tiling(2) input.
• Connect the Multiply(2) output (from the Create Time and LineSpeed setup step) to the Offset(2) input.

The Tiling and Offset node now generates animated UV coordinates: Tiling controls how many scan lines appear on the surface (1, 12). Offset shifts the UVs over time (Time x Linespeed).

Now you'll sample the noise texture to create the actual scan line pattern.

To sample the LinesTexture, follow these instructions:

1. Create LinesTexture property

• In the Blackboard, select the Add (+) button and select Texture2D.
• Rename it "LinesTexture".
• In the property settings, set the Default Value to the LinesNoise texture (_GetStartedWithShaderGraph > Resources).

2. Create a Sample Texture 2D node

• Right-click in the Workspace, select Create Node, and search for and add a Sample Texture 2D node (Texture > Sample Texture 2D).
• Drag LinesTexture from the Blackboard into the Workspace.
• Connect the LinesTexture (T2) output to the Texture(T2) input of the Sample Texture 2D node.
• Connect the Tiling and Offset Out(2) output to the UV(2) input of the Sample Texture 2D node.

By connecting the LinesTexture to the Sample Texture 2D node and using the animated UV coordinates from the Tiling and Offset node, the scan line pattern is sampled from different positions over time. As the UV coordinates continuously shift, the texture appears to move, creating the effect of scan lines scrolling vertically across the GameObject.

3. Group nodes creating the line noise

• Hold Ctrl (macOS: Cmd) left-click all nodes related to the lines effect (LineSpeed, Time, Multiply, Position, Split, Vector 2, LineTile, Tiling and Offset, LinesTexture, and Sample Texture 2D) to multi-select them
• Right-click and select Group Selection. Alternatively, press Ctrl+G (macOS: Cmd+G).
• In the Group title box, enter "Lines Noise".

In the preview of the Sample Texture 2D node, you’ll see the lines shifting vertically as they alternate between black and white, creating an animated pattern. The areas where the texture appears black will be treated as transparent, while the white areas remain visible.

When you think of holograms, they are rarely perfectly stable. As energy flows through them, parts of the image may flicker or briefly disappear, creating the impression of an unstable projection. You can see this effect in the example shown at the overview, where some areas don’t emit light constantly and fade in and out over time. To recreate this behavior, you’ll use another noise texture sampled over time to introduce a flickering instability effect.

To sample the LinesTexture, follow these instructions:

1. Create FlickerTexture property

• In the Blackboard, select the Add (+) button and select Texture2D.
• Rename it "FlickerTexture".
• Set the Default Value to the FlickerNoise texture (_GetStartedWithShaderGraph > Resources).

2. Create a Sample Texture 2D node

• Right-click in the Workspace, select Create Node, and search for and add a Sample Texture 2D node (Texture > Sample Texture 2D).
• Drag the FlickerTexture from the Blackboard into the Workspace.
• Connect the FlickerTexture(T2) output to the Texture(T2) input.
• Connect the Time Time(1) output to the UV(2) input.

By using Time to offset the UV coordinates, the UV values continuously change over time. Different parts of the texture are sampled each frame, producing the animated flicker effect. Reusing the same Time node keeps both noises (lines and flicker) synchronized and avoids unnecessary duplicate calculations in the shader.

In the preview of the Sample Texture 2D node. You’ll see the image shifting between light and dark in different areas, creating a flickering effect.

When looking at the preview, you might notice that the flicker effect appears too intense. You can control this by remapping its value range. By adjusting the range, you reduce the brightness variation of the texture, resulting in a more subtle and controlled flicker effect.

To remap the flicker intensity, follow these instructions:

1. Create a Remap node

• Right-click in the Workspace, select Create Node, and add a Remap node (Math > Range > Remap).

The Remap node remaps values from one range to another. This is useful for controlling the minimum and maximum brightness of effects, preventing them from becoming too dim or too bright.

2. Configure the Remap node

• Connect the Sample Texture 2D RGBA(4) output to the In(1) input of the Remap node
• In the Remap node, set the In Min Max(2) property to X = 0 and Y = 1 (the original input range from the texture) and set the Out Min Max(2) property to X = 0.3 and Y = 1 (the output range).

By setting the minimum output to 0.3 instead of 0, you prevent the flicker from making the hologram completely disappear. The hologram will pulse between 30% and 100% brightness instead of 0% to 100%.

Note: The Out Min Max(2) 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, or even turn it into a property so you can control it from the Inspector window.

3. Group the Flicker noise nodes

• Hold Ctrl (macOS: Cmd) and left-click the FlickerTexture, Sample Texture 2D, and Remap nodes to multi-select them.
• Right-click and select Group Selection. Alternatively, press Ctrl+G (macOS: Cmd+G).
• In the Group title box, enter "Flicker Noise".

Noise textures are usually generated by using different mathematical algorithms, each producing distinct visual patterns. Fundamental noise types include Perlin, Simplex, and Worley noise. These algorithms define how values are distributed across the texture, which directly affects the shapes and patterns that appear in the final result.

More complex or stylized noise textures are often created by combining or modifying these fundamental types. These procedural variations can stretch, distort, or layer multiple noise functions together to produce more specialized visual effects.

The LinesNoise texture used in this tutorial is a stretched Worley noise texture. Worley noise (also called Voronoi noise) naturally produces cellular or segmented patterns. When this pattern is stretched vertically, the cells become elongated into thin bands, which resemble scan lines. This makes it particularly useful for creating hologram-style visual effects.

The FlickerNoise texture uses Fractal Brownian Motion (fBM) noise. fBM is created by layering multiple noise octaves at different frequencies and amplitudes, producing organic, cloud-like patterns. This creates a more natural, less regular flicker effect.

Now you'll merge the animated scan lines with the flicker effect, making a single pulse and flicker effect.

To combine the Lines and Flicker noise, follow these instructions:

1. Multiply lines with flicker noise

• Right-click in the Workspace, select Create Node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Sample Texture 2D RGBA(4) output from the Lines Noise group to the A input.
• Connect the Remap Out (4) output from the Flicker Noise group to the B input.

This multiplication combines the two animated effects: the scan lines and the flicker, creating pulsing, unstable hologram lines.

Now, it is time to combine the Fresnel effect glow with the animated scan line and flicker effects.

To add the Fresnel effect to the lines and flicker effects, follow these instructions:

1. Add the Fresnel effect with the noise

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

This adds the edge glow on top of the animated noise effects, creating a hologram with bright edges and animated unstable scan lines.

The hologram shader needs a base texture node that shows the GameObject’s original details beneath all the effects.

To create a BaseMap and the final connections, follow these instructions:

1. Create BaseMap property

• In the Blackboard, select the Add (+) button and select Texture2D.
• Rename it "BaseMap".

Important: If you’re using the provided Merchant prefab, you don’t need to assign a texture to the Default Value attribute. This GameObject uses a 2D animation, so its base texture changes every frame and is automatically assigned at runtime. For other 2D or 3D GameObjects, make sure to assign the GameObject’s base texture to the Default Value attribute.

2. Create a Sample Texture 2D node

• Right-click in the Workspace, select Create node, and search for and add a Sample Texture 2D node (Texture > Sample Texture 2D).
• Drag BaseMap from the Blackboard into the Workspace.
• Connect the BaseMap(T2) output to the Texture(T2) input.

3. Combine all effects with the base texture’s color

• Right-click in the Workspace, select Create node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Sample Texture 2D RGBA(4) output to the A input.
• Connect the Add Out (4) output (from last step) to the B input.

This multiplies the base texture's color (RGB) with all the hologram effects, tinting the texture with the animated glow.

4. Combine all effects with the base texture’s transparency

• Right-click in the Workspace, select Create node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Sample Texture 2D A(1) output (alpha channel) to the A input.
• Connect the Add Out (from last step) to the B input.

This multiplies the base texture's transparency (Alpha) with the hologram effects, controlling which parts of the GameObject are more or less transparent based on the texture and effects.

You need two separate multiply operations because color and transparency need to be handled differently. The first multiplication uses the RGB channels (color), while the second one only uses the Alpha channel to control visibility. This ensures the transparency is calculated correctly without being affected by the color information.

To apply all the logic you’ve created, you need to connect the final results to the Fragment Stack. Connect the output that controls color (RGB) to the Base Color block, and the output that controls transparency to the Alpha block. This ensures the shader correctly applies both the visual effects and the transparency to the GameObject.

To connect to the Master Stack outputs, follow these instructions:

1. Connect to Base Color and Alpha

• Connect Multiply Out(4) output (RGB multiplication) to the Base Color input of the Fragment Master Stack.
• Connect Multiply Out(4) output (Alpha multiplication) to the Alpha input of the Fragment Master Stack.
• Save your final shader with Ctrl+S (macOS: Cmd+S).

The Hologram shader is now complete. Look at your GameObject in the Scene view. You should see the translucent effect with both the lines and flicker noise changing every second. 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 effect by adjusting the shader parameters exposed in the material's Inspector window.

To assign textures and adjust their parameters, follow these instructions:

1. Ensure the material is selected

• In the Project window, select the Hologram_Merchant material.

2. Verify and assign textures

• In the Inspector window, confirm the following properties:
  • BaseMap: Should be empty if you’re using Merchant prefab.

Important: In case you’re using another GameObject and there’s no reference, assign the GameObject’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: Even if default textures were assigned inside the Shader Graph window, materials may lose those references. Always double-check that all textures are properly assigned.

3. Adjust hologram parameters

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

4. See the animation

• Select the Play button in the Unity Editor and 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.

Once your Hologram shader is finished, save your work and create a prefab so the Merchant GameObject 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 to 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 GameObjects 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 created a complete hologram shader using transparency, noise textures, time-based animation, and the Fresnel effect. You now understand how to use noise textures efficiently, combine multiple animated effects, organize complex shader graphs with groups, and create sci-fi holographic effects.

In the next tutorial, you'll expand this hologram shader by adding vertex displacement to create animated mesh deformation, making the hologram appear even more unstable and futuristic.