Lava Shader

Voor dit project heb ik een shader gemaakt die een plane eruit laat zien als lava. Ik wilde dit graag doen, omdat ik graag wilde leren hoe shaders werken en ik de theorie die erachter ligt nog moeilijk vond en hier meer vertrouwd mee wilde raken. Ik heb gekozen voor lava, omdat ik het een bijzonder materiaal vind en het er altijd erg indrukwekkend uit ziet. Tijdens dit project heb ik een goed leerproces doorgemaakt, doordat ik gedurende het project mijn plan heb moeten aanpassen, omdat ik erachter kwam dat mijn oorspronkelijke plan voor mij nog niet haalbaar zou zijn binnen de tijd. Hierover is meer te lezen in het hoofdstuk proces.

Ik heb uiteindelijk met ShaderGraph een shader gemaakt, waarbij er met verschillende onderdelen en een paar textures een effect wordt gecreëerd, dat lava voorstelt. Tevens heb ik op basis van de uitkomst hiervan de vertices gemanipuleerd, waardoor de plane een golvende beweging heeft en hoger wordt op plaatsen waar er steen in de lava ligt.

1.2.1 Google en YouTube

Toen ik begon met de opdracht en informatie opzocht voor het RnD formulier heb ik eerst op Google gezocht naar plaatjes die mij het gevoel gaven dat ze overeen kwamen met het idee dat ik in mijn hoofd had. Dit zijn de onderste twee plaatjes geworden die hier rechts te zien zijn. Later heb ik de andere plaatjes gevonden. Deze plaatjes spraken mij aan omdat het goed liet zien dat de lava heel fel kan zijn qua kleur. Ook is op de plaatjes te zien dat de lava stroomt en dit is iets wat ik zelf ook graag wilde, omdat het dan dynamischer en “echter” overkomt. Tevens zit er ook steen in de lava, maar niet te veel, want anders zie je de lava zelf niet meer en dat is iets wat ik persoonlijk niet mooi vindt.

• 

• 

• 

• 

In het eerste filmpje is echte lava te zien en is een goed voorbeeld van wat ik zelf ook zou willen maken. Ik zou het echter meer game-achtig, oftewel meer nep, willen maken.

In het tweede filmpje is een animatie te zien die iemand heeft gemaakt. Ik vind dit wel mooi, maar het is niet helemaal wat ik zou willen maken, omdat er naar mijn mening te veel steen in zit en het veel te snel stroomt.

1.2.2.1 Monster Hunter Rise

Tijdens het spelen van Monster Hunter Rise ben ik nog meer inspiratie tegengekomen, doordat ik toevallig een missie had in een gebied met heel veel lava, Toevallig was dit ook precies lava zoals ik dat in mijn hoofd had, vandaar dat ik het belangrijk vond om hier nog wat over te zeggen.

In de screenshots is te zien hoe fel gekleurd de lava kan zijn en hoe het stroomt. Verder is er ook te zien hoe een vulkaan eruit ziet in een game en kan ik dit als voorbeeld gebruiken als ik de mogelijkheid heb om dit toe te voegen aan mijn project.

• 

• 

• 

1.2.2.2 Hot Lava

Aan het begin van het project kende ik de game Hot Lava nog niet. Tijdens het project werd ik hier door anderen op gewezen en het bleek een perfect voorbeeld te zijn. De hele game draait om lava, dus is dit erg goed uitgewerkt. Ook heb je steen door de lava heen en spat de lava omhoog.

• 

• 

1.2.2.3 Minecraft

De screenshots in figuur 7 zijn juist voorbeelden van wat ik niet wil. Ik vind de lava in Minecraft er erg nep uitzien. Ook mist hier het gesteente wat ik wil toevoegen aan mijn shader. Als laatste wil ik juist dat mijn shader er iets realistischer uitziet en daar past het blokkensysteem van Minecraft naar mijn mening totaal niet bij.

• 

• 

Tijdens deze weken ben ik een uitgebreid proces doorlopen, wat ik hier zal beschrijven. Mijn proces is zo tot stand gekomen, doordat ik eerst andere verwachtingen had van wat ik zou kunnen doen in deze weken en ik later dit heb moeten bijschaven, maar ook heb verbeterd.

Zoals in de inleiding te lezen is was mijn oorspronkelijke idee om een lava shader te maken met shader language. Het doel is niet veranderd, maar ik heb uiteindelijk mijn shader in ShaderGraph gemaakt in plaats van met shader language. Tevens wist ik eerst niet precies wat de onderdelen waren die ik in mijn shader wilde maken. Dit heb ik later, doordat ik meer kennis kreeg over shaders, kunnen herdefiniëren.

In de eerste week van de opdracht was ik jammer genoeg ziek en heb ik alleen met de rest van mijn groep mee kunnen kijken wat zij aan het maken waren. Ik kreeg op dat moment wel het gevoel dat ik niet doorhad hoe zij hun shaders hadden gemaakt en ik begreep ook veel van de termen niet. Toen ik de week erna beter was en aan de slag kon heb ik allereerst een simpele tutorial (Octo Beard (2020)) uitgekozen om een begin te maken aan mijn shader. Deze tutorial liet zien hoe je een texture over een object laat bewegen. Hiermee heb ik gemaakt wat in afbeelding 6 te zien is.

Deze bewegende texture was uiteindelijk niet wat ik nodig had voor mijn eindresultaat, dus ging ik mij verdiepen in hoe ik een shader kon maken. Ik heb rondgezocht naar een goede uitleg en kwam uiteindelijk uit op een tutorial die waterdruppels op een glasplaat maakte met een shader. The Art of Code (2019) Mijn idee was dan om dit aan te passen door de kleuren te veranderen en de druppels aan elkaar vast te maken om lava te maken in plaats van water. Ik heb hier een tijdje mee geprobeerd verder te komen, maar uiteindelijk kwam ik er niet uit, doordat ik nog niet de “klik” had met betrekking tot shader language. Ik begreep al snel dat ik ervoor moest zorgen dat ik meer een idee had over hoe shader language werkt óf dat ik een ander plan moest gaan maken.

Samen met een mede-student heb ik extra uitleg gevraagd bij een docent, waardoor wij de basis van shader language begrepen. Hierna heb ik geprobeerd verder te gaan met mijn idee, maar ik liep al snel weer vast. Ik heb veel rondgezocht of er iets was wat mij kon helpen, bijvoorbeeld boeken of andere materialen. Er was niks waarmee ik zeker weten, binnen een tijd die snel genoeg was, voldoende kon leren om mijn project te maken. Nu was het het moment om een ander plan te bedenken.

Vanaf dit moment besloot ik om, in ieder geval voor nu, mijn project in ShaderGraph te maken. Ik ben begonnen met een tutorial, die toevallig ook over lava ging. Gabriel Aguiar Prod. (2019) Hier heb ik heel veel van geleerd. Met ShaderGraph had ik snel door hoe alles werkte en ik wist na een beetje rondproberen hoe ik alles kon maken wat ik bedacht en als dat niet zo was wist ik hoe ik op internet naar een oplossing moest zoeken.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class FlowingLava : MonoBehaviour
{
    public float scrollSpeed = 0.1f;
    Renderer rendererComp;
 
    // Start is called before the first frame update
    void Start()
    {
        rendererComp = GetComponent<Renderer>();
    }
 
    // Update is called once per frame
    void Update()
    {
        float moveThis = Time.time * scrollSpeed;
        rendererComp.material.SetTextureOffset("_MainTex", new Vector2(0, moveThis));
    }
}

Code-snippet 1: Bewegende texture op een 3D-object in C#.

In dit hoofdstuk ga ik uitleggen hoe de ShaderGraph werkt die ik heb gemaakt en welke blokken waarbij horen. Hier rechts is te zien in figuur 11 welke input er helemaal aan het begin wordt doorgegeven aan meerdere blokken binnen de grafiek. Hieronder valt onder andere de tijd, omdat de beweging van de lava gebaseerd is op tijd. Dit heb ik zo gedaan, omdat hij dan makkelijk automatisch blijft bewegen en verder gaat. Tevens is er ook een variabele genaamd “Tiling”, deze komt vanuit de input die de gebruiker in de inspector vanuit de Unity-editor geeft. Deze variabele wordt gebruikt als je een grotere plane in de wereld hebt waarop je de shader wilt toepassen en ook als deze niet vierkant is. Dit zorgt er dan voor dat alle volgende stappen in de grafiek hiernaar geschaald worden.

Verder is hier links in figuur 12 te zien welke outputs ik gebruik van de ShaderGraph. Ik gebruik de Normal om mijn texture, die de normals bevat, door te geven. Hierover vertel ik meer in hoofdstuk 3.1.2. Albedo is degene die al het visuele aanneemt, de kleuren die op de plane getekend moeten worden. Hierover meer in hoofdstuk 3.1. Als laatste gebruik ik Vertex Position, welke ervoor zorgt dat hij op basis van mijn input de plane vervormt. Hierover meer in hoofdstuk 3.2.

In figuur 14 is het onderdeel van de shader te zien dat over alles gaat wat visueel is aan de shader, oftewel alles wat uiteindelijk in de albedo van het eindblok gaat. Het is niet haalbaar om dit in losse screenshots te laten zien (vanwege de connecties tussen de blokken), dus ik raad aan om rechts te klikken op de afbeelding en hem in een nieuw tabblad vergroot te bekijken.

Het uiterlijk van de lava wordt vanuit verschillende onderdelen gemaakt. Allereerst zal ik het over de kleur hebben. Deze is bovenin de screenshot te zien. Het begin met de kleur die via de inspector wordt ingevoerd, dit is standaard een rode kleur. Daarna heb ik een blok met een kleurovergang die ik maskeer met zwart, waardoor het overgaat van wit naar zwart. Vervolgens vermenigvuldig ik dit met de overlay kleur die in de inspector is ingevuld en wat hier uit komt wordt als een overlay over de shader heen geplaatst. In de screenshot is ook te zien dat dit ervoor zorgt dat de diepere delen van de lava felgeel zijn.

De basis van het uiterlijk van de lava, namelijk het gesteente wat door de lava heen stroomt, maak ik door een voronoi-blok (een blok dat een soort cellenstructuur genereert) te gebruiken en deze te mengen met een zwart-witte lijnen texture. Dit deel wordt vermenigvuldigd met het gekleurde deel, waarna de uitkomst hiervan ook nog met een gespikkelde texture wordt vermenigvuldigd. Door het vermenigvuldigen wordt alles samengevoegd en uiteindelijk naar de albedo geleid.

Wanneer je naar de screenshot kijkt en de lijnen volgt, waarbij je naar de previews kijkt, is duidelijk te zien hoe alles ontstaat.

3.1.2 Normals

Dit is een van de makkelijkste onderdelen geweest van de hele shader. Ik heb allereerst een texture-blok aangemaakt, waarmee ik een normal map ophaal die ik met een programma uit een lava texture heb gegenereerd. Hierna link ik de uitkomst hiervan met een normal strength-blok, waardoor ik er een variabele aan vast kan maken die de sterkte van de normal map regelt. Hierdoor is de sterkte van de normals in de inspector in Unity aanpasbaar. Als laatste gaat het resultaat van dit blok in de input genaamd normal in het eindblok.

Ook voor dit onderdeel raad ik aan om de screenshot van figuur 17 in een nieuw tabblad vergroot te openen.

Ten eerste neem ik de positie van het object en voeg ik deze toe aan de stenen die in de blokken van het uiterlijk van de lava gemaakt worden. Vervolgens split ik dit en neem ik de G waarde, wat hier de y-waarde is en vermenigvuldig ik deze met de gemiddelde tiling, zodat als je een grotere plane hebt hij dieper/hoger golft. Het blok dat de kleuren invert is nodig, omdat hij anders juist de diepte zou ingaan waar er stenen zijn.

Het is erg belangrijk, wanneer je een eigengemaakt onderdeel (zoals een shader of eigen functionaliteit via code) in Unity hebt, om goede variabelen te gebruiken, welke je doorvoert naar de Unity-editor. Hierdoor kan jijzelf, of bijvoorbeeld iemand anders, heel makkelijk, zonder code (of in dit geval de grafiek) aan te moeten passen, variabelen wijzigen om zo het object precies naar wens te krijgen. In figuur 11 is te zien welke variabelen ik allemaal aanpasbaar heb gemaakt in de inspector in Unity.

Als laatste heb ik een nieuwe scene aangemaakt in Unity met als doel een kleine wereld te maken waarin mijn shader goed tot zijn recht komt. Mijn doel was hier ook om te ontdekken hoe mijn shader in gebruik is en of ik er nog andere toepassingen zouden kunnen zijn ten opzichte van wat ik oorspronkelijk had bedacht. In figuur 12 is bijvoorbeeld te zien hoe ik een paar instellingen heb aangepast om water in plaats van lava te maken. Verder is in hoofdstuk 4 meer te zien van de wereld die ik heb gemaakt om mijn shader in te presenteren. Ik heb de focus gelegd op het maken van een wereld die er oneindig uitziet en waarbij er ook een omgeving is die lijkt te leven. Daarom zijn er extra karakters en ook veel extra voorwerpen, zoals huizen en een groot bos.

In figuur 20 zijn een aantal afbeeldingen te zien, waar de lava in de wereld zichtbaar is. Het eindresultaat beschrijf ik als volgt:

Een lava shader die je makkelijk in een wereld kan gebruiken, door terrein te maken met deuken erin, waarbij je een plane eronder legt zodat het een poel vormt. De shader is dynamisch en is dikker waar er steen is. Ook is de shader schaalbaar en is er veel aanpasbaar.

• 

• 

• 

• 

In de toekomst zijn er een aantal dingen die ik nog zou willen aanpassen/verbeteren. Hieronder vallen ook de optionele dingen, die ik eerder nog niet had kunnen doen, zoals: stoomwolken die uit de lava komen en lava spetters. Zie hoofdstuk 4.1. Ook wilde ik tijdens het maken de spikkels in de lava nog aanpasbaar maken. Dit is er echter niet van gekomen en zou ik ook in de toekomst willen toevoegen.

Tevens zou ik natuurlijk nog willen leren hoe shader language werkt, dit is iets wat ik in de toekomst ga doen en dit kan ik dan bijvoorbeeld leren door als oefening deze shader na te maken in shader language. Ik heb al een goede tutorial gevonden die vanaf het begin uitlegt hoe shader language, én de theorie daarachter, werkt. Deze zou ik dan willen gaan volgen. Deze video is hier rechts te bekijken.