Hologrameffect in eenheid

Hologram is een driedimensionale projectie van een object of een persoon op een nabijgelegen gebied, door gebruik te maken van een techniek die lichtbundelkruising wordt genoemd.

Hoewel er geen echte hologrammen bestaan, werd het concept grotendeels gepopulariseerd door films en romans in het sciencefictiongenre.

In deze tutorial laat ik zien hoe je een hologram-shader maakt met een glitch-effect in Unity.

Controleer deze Horizon Bending Shader

Stap 1: Maak Hologram Shader

Het hologrameffect wordt bereikt met behulp van een aangepaste Shader.

Volg de onderstaande stappen om een ​​hologram-shader te maken:

• Maak een nieuwe Shader en geef deze een naam "Hologram"
• Verwijder alles erin en plak de onderstaande code:

Hologram.shader

//sharpcoderblog.com @2019
Shader "FX/Hologram Shader"
{
	Properties
	{
		_Color("Color", Color) = (0, 1, 1, 1)
		_MainTex("Base (RGB)", 2D) = "white" {}
		_AlphaTexture ("Alpha Mask (R)", 2D) = "white" {}
		//Alpha Mask Properties
		_Scale ("Alpha Tiling", Float) = 3
		_ScrollSpeedV("Alpha scroll Speed", Range(0, 5.0)) = 1.0
		// Glow
		_GlowIntensity ("Glow Intensity", Range(0.01, 1.0)) = 0.5
		// Glitch
		_GlitchSpeed ("Glitch Speed", Range(0, 50)) = 50.0
		_GlitchIntensity ("Glitch Intensity", Range(0.0, 0.1)) = 0
	}

	SubShader
	{
		Tags{ "Queue" = "Overlay" "IgnoreProjector" = "True" "RenderType" = "Transparent" }

		Pass
		{
			Lighting Off 
			ZWrite On
			Blend SrcAlpha One
			Cull Back

			CGPROGRAM
				
				#pragma vertex vertexFunc
				#pragma fragment fragmentFunc

				#include "UnityCG.cginc"

				struct appdata{
					float4 vertex : POSITION;
					float2 uv : TEXCOORD0;
					float3 normal : NORMAL;
				};

				struct v2f{
					float4 position : SV_POSITION;
					float2 uv : TEXCOORD0;
					float3 grabPos : TEXCOORD1;
					float3 viewDir : TEXCOORD2;
					float3 worldNormal : NORMAL;
				};

				fixed4 _Color, _MainTex_ST;
				sampler2D _MainTex, _AlphaTexture;
				half _Scale, _ScrollSpeedV, _GlowIntensity, _GlitchSpeed, _GlitchIntensity;

				v2f vertexFunc(appdata IN){
					v2f OUT;

					//Glitch
					IN.vertex.z += sin(_Time.y * _GlitchSpeed * 5 * IN.vertex.y) * _GlitchIntensity;

					OUT.position = UnityObjectToClipPos(IN.vertex);
					OUT.uv = TRANSFORM_TEX(IN.uv, _MainTex);

					//Alpha mask coordinates
					OUT.grabPos = UnityObjectToViewPos(IN.vertex);

					//Scroll Alpha mask uv
					OUT.grabPos.y += _Time * _ScrollSpeedV;

					OUT.worldNormal = UnityObjectToWorldNormal(IN.normal);
					OUT.viewDir = normalize(UnityWorldSpaceViewDir(OUT.grabPos.xyz));

					return OUT;
				}

				fixed4 fragmentFunc(v2f IN) : SV_Target{
					
					half dirVertex = (dot(IN.grabPos, 1.0) + 1) / 2;
					
					fixed4 alphaColor = tex2D(_AlphaTexture,  IN.grabPos.xy * _Scale);
					fixed4 pixelColor = tex2D (_MainTex, IN.uv);
					pixelColor.w = alphaColor.w;

					// Rim Light
					half rim = 1.0-saturate(dot(IN.viewDir, IN.worldNormal));

					return pixelColor * _Color * (rim + _GlowIntensity);
				}
			ENDCG
		}
	}
}

Stap 2: Wijs arcering toe aan materiaal

Voor demonstratiedoeleinden gebruik ik de Space Robot Kyle.

Volg de onderstaande stappen om een ​​hologram-shader aan een materiaal toe te wijzen:

• Maak een nieuw materiaal en geef het een naam "hologram_material"
• Wijs er een nieuw gemaakte Shader aan toe, die zich zou moeten bevinden op 'FX/Hologram Shader'

• Voor de kleur kies ik cyaan (0, 1, 1, 1), maar je kunt elke kleur kiezen

• Wijs voor Basis (RGB) een textuur toe die bij het model wordt geleverd

• Wijs het materiaal toe aan uw 3D-model

Maar zoals u zult merken, lijkt het model niet veel op een hologram, dat komt omdat we nog een laatste textuur moeten toewijzen, namelijk Alpha Mask (R).

In mijn geval gebruik ik een eenvoudige textuur met horizontale strepen en transparantie (om dat "Holographic segmentation" effect toe te voegen).

• Controleer de textuur hieronder:

• Wijs hierboven een textuur toe aan het alfamasker (R)

Veel beter, nu lijkt het model meer op een hologram!

Stap 3: Glitch-effect toevoegen

Het hologram Shader ondersteunt ook een glitch-effect dat vanuit een script kan worden bestuurd.

Volg de onderstaande stappen om een ​​glitch-effect aan een hologram-shader toe te voegen:

• Maak een nieuw script en geef het een naam "GlitchControl"
• Kopieer de onderstaande code erin:

GlitchControl.cs

using System.Collections;
using UnityEngine;

public class GlitchControl : MonoBehaviour
{
    //How often should the glitch effect happen (higher value means more frequently)
    public float glitchChance = 0.1f;

    Material hologramMaterial;
    WaitForSeconds glitchLoopWait = new WaitForSeconds(0.1f);

    void Awake()
    {
        hologramMaterial = GetComponent<Renderer>().material;
    }

    // Start is called before the first frame update
    IEnumerator Start()
    {
        while (true)
        {
            float glitchTest = Random.Range(0f, 1f);

            if (glitchTest <= glitchChance)
            {
                //Do Glitch
                float originalGlowIntensity = hologramMaterial.GetFloat("_GlowIntensity");
                hologramMaterial.SetFloat("_GlitchIntensity", Random.Range(0.07f, 0.1f));
                hologramMaterial.SetFloat("_GlowIntensity", originalGlowIntensity * Random.Range(0.14f, 0.44f));
                yield return new WaitForSeconds(Random.Range(0.05f, 0.1f));
                hologramMaterial.SetFloat("_GlitchIntensity", 0f);
                hologramMaterial.SetFloat("_GlowIntensity", originalGlowIntensity);
            }

            yield return glitchLoopWait;
        }
    }
}

• Voeg het GlitchControl-script toe aan hetzelfde GameObject als de Renderer-component met het 'hologram_material' materiaal.
• Druk op Afspelen en bekijk het glitch-effect: