تأثير الهولوغرام في الوحدة

الهولوغرام هو إسقاط ثلاثي الأبعاد لجسم أو شخص على منطقة قريبة، من خلال استخدام تقنية تسمى تقاطع شعاع الضوء.

على الرغم من عدم وجود صور ثلاثية الأبعاد حقيقية، فقد تم نشر هذا المفهوم إلى حد كبير من خلال الأفلام والروايات في نوع الخيال العلمي.

في هذا البرنامج التعليمي، سأعرض كيفية عمل تظليل ثلاثي الأبعاد مع تأثير خلل في Unity.

تحقق من هذا Horizon Bending Shader

الخطوة 1: إنشاء تظليل الهولوغرام

يتم تنفيذ تأثير الهولوغرام بمساعدة تظليل مخصص.

لإنشاء تظليل الهولوغرام، اتبع الخطوات التالية:

• قم بإنشاء تظليل جديد وقم بتسميته "Hologram"
• قم بإزالة كل ما بداخله ثم قم بلصق الكود أدناه:

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
		}
	}
}

الخطوة 2: تعيين تظليل للمادة

لأغراض العرض التوضيحي، سأستخدم Space Robot Kyle.

لتعيين تظليل صورة ثلاثية الأبعاد لمادة ما، اتبع الخطوات التالية:

• قم بإنشاء مادة جديدة وقم بتسميتها "hologram_material"
• قم بتعيين تظليل تم إنشاؤه حديثًا إليه، والذي يجب أن يكون موجودًا في 'FX/Hologram Shader'

• بالنسبة للون سأختار سماوي (0، 1، 1، 1) ولكن يمكنك اختيار أي لون

• بالنسبة للقاعدة (RGB)، قم بتعيين مادة تأتي مع النموذج

• قم بتعيين المادة لنموذجك ثلاثي الأبعاد

ولكن كما ستلاحظ، فإن النموذج لا يشبه إلى حد كبير الصورة المجسمة، وذلك لأننا نحتاج إلى تعيين مادة أخيرة وهي قناع ألفا (R).

في حالتي، سأستخدم نسيجًا بسيطًا مع خطوط أفقية وشفافية (لإضافة تأثير "Holographic segmentation").

• تحقق من الملمس أدناه:

• تعيين مادة أعلاه لقناع ألفا (R)

أفضل بكثير، الآن يبدو النموذج أشبه بالصورة المجسمة!

الخطوة 3: إضافة تأثير خلل

يدعم برنامج Hologram Shader أيضًا تأثير الخلل الذي يمكن التحكم فيه من خلال البرنامج النصي.

لإضافة تأثير خلل إلى تظليل الهولوغرام، اتبع الخطوات التالية:

• قم بإنشاء برنامج نصي جديد وقم بتسميته "GlitchControl"
• انسخ الكود أدناه بداخله:

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;
        }
    }
}

• قم بإرفاق البرنامج النصي GlitchControl بنفس GameObject كمكون Renderer مع المادة 'hologram_material'.
• اضغط على Play ولاحظ تأثير الخلل: