Predator Vision: Wärmebildeffekt


Auf der Suche nach der besten Thermal-Shader-Implementierung bin ich auf einen Matcap-Shader gestoßen, der von bgolus in Unity-Foren veröffentlicht wurde - ein guter Ausgangspunkt.

Ich habe es stark verändert, damit die Modelle in verschiedenen Winkeln einheitlicher aussehen und die Kappe an die Scheitelpunkte und Normalen gebunden ist. Das ist in der Tat keine Mütze mehr, aber ich möchte diesem Shader, von dem alles angefangen hat, trotzdem meinen Tribut zollen.


Wir werden uns der Reihe nach bewegen, zuerst die Eckpunktfunktion:

1. Normal des Objekts:

float3 v.normal; 

2. Die normalisierte Position des Scheitelpunkts beginnt am Referenzpunkt des Modells

 float3 vertexN = normalize(v.vertex); 

3. Das Vektorprodukt dieser Werte:

 float3 viewCross = cross(vertexN, v.normal); 

4. Halbieren Sie crossproduct.xy und bias, um ein gleichmäßigeres Ergebnis zu erzielen

 o.cap = viewCross.xy * 0.5 + 0.5; 

In Fragmentfunktion

5. Erstellen Sie eine Maske und multiplizieren Sie

 fixed4 m = tex2D(_Mask, i.uv); i.cap *= (1 - mg); 

6. Projizieren Sie die Farbtextur auf das Ergebnis. (Ich benutze den orange-violetten Stil, aber Sie können einen größeren Farbverlauf oder etwas anderes verwenden.)


 fixed4 color = tex2D(_Matcap, i.cap); 

Der Thermal Shader ist fertig. Der wichtige Punkt ist, dass Sie ihm ein eigenes Label geben müssen, damit das Ersetzungsskript es richtig setzt. Stellen Sie also sicher, dass die Labels Folgendes enthalten:

  Tags{ "ThermalVision" = "ThermalColors"} 

Hier ist der vollständige Shader: Pastebin-Link

Shader-Ersatz


Damit der thermische Shader einen anderen ersetzen kann, müssen Sie nur dasselbe Etikett auf den Shader aufbringen, der ersetzt werden muss:

 Tags{ "ThermalVision" = "ThermalColors"} 

Und stellen Sie sicher, dass alle erforderlichen Eigenschaften für den austauschbaren Shader geöffnet sind:

 _Mask("G = no thermal", 2D) = "black" {} _Matcap("Matcap", 2D) = "white" {} _Strength("Mask Strength", Range(0,2)) = 0.4 

Um den Shader zu wechseln, müssen Sie eine zweite Kamera hinzufügen und diese aufrufen

 camera.SetReplacementShader(Shader, "NamedShader"); 
.


Erstellen Sie also eine neue Kamera, und machen Sie sie im Verhältnis zur Hauptkamera zu einem Kind. Setzen Sie dann Position und Drehung so zurück, dass sie auf die gleiche Weise positioniert sind.


Stellen Sie "Einfarbig" und "Schwarzer Hintergrund" ein.


In der „Kameravorschau“ solltest du alles so sehen wie in einer normalen Kamera, nur ohne Skybox, mit schwarzem Hintergrund.

Es ist Zeit, die Shader zu ändern,

Fügen Sie die öffentliche Variable Shader und ziehen Sie den Thermoeffekt-Shader darauf.

SetReplacementShader dann die Kamera als neue Variable hinzu und rufen Sie SetReplacementShader in Start auf, indem Sie den öffentlichen Shader und den in den Etiketten angegebenen Namen verwenden

  public Shader ThermalShader; Camera cam; void Start() { cam = GetComponent<Camera>(); cam.SetReplacementShader(ThermalShader, "ThermalVision"); } 


Nach dem Start sollten Sie den thermischen Effekt nur bei Netzen mit einem ersetzten Shader sehen.

Bildeffekt



Zu diesem Zeitpunkt ist der thermische Shader deutlich sichtbar, es ist jedoch nichts anderes sichtbar. Um die Umgebung wieder in die Kamera zu bringen, verwende ich die DepthNormals-Textur als Bildeffekt in Kombination mit der opaken Textur.

Bildeffekt-Shader: Link zum Pastebin

Fügen Sie der Wärmebildkamera dieses einfache Blit-Skript hinzu und ziehen Sie den Shader mit dem Bildeffekt

Ich habe das gleiche Bild wie im thermischen Shader, aber Sie können ein anderes verwenden!

Thermal Vision Switch Script



Jetzt einfach während des Spiels wechseln.



Zum Umschalten der booleschen Variablen, die die Kamera enthält, zum Durchführen des Ersetzens und zum Nachbearbeiten, benutze ich die Taste T. Zum Zurückschalten drücke ich erneut die Taste T.

Fügen Sie zum Abschluss eine kleine Nachbearbeitung in die Wärmekammer ein. Ich habe Chromatic Abberation und Depth of Field hinzugefügt.

Hier ist das Skript zum Umschalten des Wärmebilds: Link zu Pastebin Link

(Wenn Sie PPS 2 verwenden, müssen Sie möglicherweise auf eine neuere Version des Post Processing-Stacks aktualisieren.)

Optional


Wenn Sie nicht möchten, dass der Effekt durch die Wände scheint, setzen Sie für die Ersatzkamera „Einfarbig“ auf „Nicht löschen“. Wenn die Skybox auch schwarz werden soll, speichern Sie das Skybox-Material im Switch-Code im Cache und setzen Sie es auf null

 Private Material SkyboxMaterial; skyboxMaterial = RenderSettings.skybox; RenderSettings.skybox = null; 

und dann zurück, wenn der thermische Effekt ausgeschaltet ist:

 RenderSettings.skybox = skyboxMaterial; 



Jetzt ähnelt es weniger der Spielmechanik als vielmehr einem einfachen visuellen Effekt.

Schnellstart, wenn Sie an Erklärungen nicht interessiert sind


1. Laden Sie den Thermoeffekt-Shader herunter

2. Laden Sie den ersetzten Toon-Shader herunter ODER fügen Sie zu Ihrem eigenen Shader "ThermalVision" = "ThermalColors" und den Variablen _Matcap , _Mask , _Strength .

3. Erstellen Sie eine zweite Kamera, eine Tochter für die Hauptkamera, und setzen Sie sie auf Einfarbig, Schwarzer Hintergrund

4. Nehmen Sie den thermischen Shader mit Bildeffekt, erstellen Sie ein Material und fügen Sie dieser zweiten Kamera das ThermalBlit-Skript hinzu, indem Sie dieses Material ziehen.

5. Fügen Sie das ThermalController Skript hinzu, ziehen Sie den ThermalController Shader und fügen Sie den Nachbearbeitungsaufwand hinzu (optional).

6. Drücken Sie T , um die Vision einzuschalten. (Was angezeigt werden soll, muss durch einen Shader ersetzt werden).

Ressourcen


Thermal Shader-Code: Pastebin-Link

Shader-Code ersetzt Toon-Shader: Link zum Pastebin

Bildeffekt-Shader-Code: Link zum Pastebin

C # Blit-Skript: Pastebin-Link

C # Thermal Vision Switch-Skript: Link zu Pastebin

Matcap-Bilder:





Zusätzliche Informationen zu austauschbaren Shadern:

Dies ist ein altes Video, aus dem ich zum ersten Mal etwas über sie gelernt habe: Video zu Ersatz-Shadern, indem in Unity Dinge gut aussehen

Source: https://habr.com/ru/post/de482928/


All Articles