Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Shaders
Gamedevelopment

Vytváření Toon vody pro Web: část 3

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Creating Toon Water for the Web.
Creating Toon Water for the Web: Part 2

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

Vítejte zpět na tento tří část série o vytváření stylizované toon vodu v PlayCanvas pomocí vertex shadery. V části 2 jsme pokryli vztlak & pěna řádky. V této závěrečné části musíme použít podvodní zkreslení jako závěrečná efekt.

Refrakce & Závěrečná účinky

Naším cílem je vizuálně komunikovat lomu světla prostřednictvím vody. Už jsme probrali jak vytvořit tento druh zkreslení v shaderu pro fragmenty v předchozí kurz pro 2D scénu. Jediný rozdíl je, že budeme potřebovat zjistit, které oblasti obrazovky je pod vodou a aplikovat pouze zkreslení.

Následné zpracování

Závěrečná účinek je obecně cokoliv aplikovat na celou scénu po vykreslení, například barevný odstín nebo efekt staré CRT obrazovky. Namísto vykreslování scény přímo na obrazovku, nejprve vykreslit do vyrovnávací paměti nebo textury a pak to vykreslení na obrazovku, procházející shaderu vlastní.

V PlayCanvas můžete nastavit efekt po procesu tím, že vytvoří nový skript. Nazvěme to Refraction.js a zkopírujte tuto šablonu začít:

To je jako normální skript, ale můžeme definovat třídu RefractionPostEffect, která lze použít na fotoaparátu. To je vrchol a shaderu pro fragmenty k vykreslení. Atributy jsou již nastaveny, takže pojďme vytvořit Refraction.frag s tímto obsahem:

A Refraction.vert s základní funkce vertex shader:

Nyní k fotoaparátu připojit skript Refraction.js a shadery přiřadit příslušné atributy. Když spustíte hru, měli byste vidět scény přesně tak, jak to bylo předtím. To je efekt prázdný post, který jednoduše znovu vykresluje scény. Chcete-li ověřit, že to funguje, zkuste dávat scénu červený nádech.

V Refraction.frag namísto jednoduše vrací barvu, zkuste červená složka 1.0, která by měla vypadat jako na obrázku níže.

Scene rendered with a red tint

Zkreslení Shader

Musíme přidat čas uniforma pro animované zkreslení, tak neváhejte a vytvořit v Refraction.js, uvnitř tento konstruktor pro post efekt:

Nyní uvnitř této funkce vykreslení předat naši shaderu a jezdcem:

Nyní můžeme použít stejný kód shaderu z vody zkreslení kurz, takže naši plnou fragmentu shader vypadat takto:

Je-li to dopadlo, všechno by měl nyní vypadat jako kdyby je to pod vodou, jako níže.

Underwater distortion applied to the whole scene
Výzva #1: Aby zkreslení se vztahují pouze na spodní polovině obrazovky.

Fotoaparát masky

Už tam skoro jsme. Vše, co musíme udělat, je použít tento efekt deformace na podvodní části obrazovky. Nejpřímější způsob, jakým jsem přijít s k tomu je opakovaně vykreslit scénu s vodní plochou vykreslen jako tuhá bílá, jak je ukázáno níže.

Water surface rendered as a solid white to act as a mask

To by být vykreslen pro texturu, která by působila jako maska. Jsme pak předat tuto texturu našeho lomu shader, který by pouze narušilo pixel ve výsledném obrazu, pokud odpovídající pixel v masce je bílá.

Pojďme přidat atribut typu boolean na povrchu vody vědět, pokud je používán jako maska. Přidáte do Water.js:

Můžeme ji pak předat shader s material.setParameter('isMask',this.isMask); jako obvykle. Pak deklarovat v Water.frag a nastavte barvu na bílou, když je to pravda.

Potvrďte, že to funguje přepínání vlastnosti "Je maska?" v editoru a znovu zahájit hru. Mělo by to vypadat bílá, jako na předchozí obrázek.

Teď, opakovaně vykreslit scénu, potřebujeme druhou kameru. V editoru vytvořte nový fotoaparát a volání CameraMask. Duplikovat entity vody v okně editor a volání WaterMask. Zda "je maska?" je false pro vodu entita, ale pravdivé pro WaterMask.

Abych nový fotoaparát k vykreslení textury místo obrazovky, vytvořte nový skript s názvem CameraMask.js a připojit ji k nový fotoaparát. Vytváříme RenderTarget pro zachycení tohoto fotoaparátu výstup podobný tomuto:

Teď Pokud spustíte, uvidíte, že tento fotoaparát je již vykreslování na obrazovce. Můžeme chytit výstup svého cíle vykreslení v Refraction.js takto:

Všimněte si, že jsem předat tuto masku texturu jako argument do konstruktoru efekt post. Je třeba vytvořit odkaz na něj v našich konstruktoru, takže to vypadá:

Konečně ve funkci vykreslení předáte vyrovnávací paměť našeho shader s:

Nyní ověřte, že se jedná o všechny pracovní, nechám to jako výzvu.

Výzva č. #2: Vykreslení uMaskBuffer na obrazovku potvrďte, že je to výstup druhého fotoaparátu.

Jedna věc je být si vědom je, že cíl vykreslení je nastaveno v inicializace CameraMask.js, a že musí být připraven v době, kdy se nazývá Refraction.js. Pokud skripty běží opačně, budete mít chybu. Ujistěte se, zda jsou ve správném pořadí, přetáhněte CameraMask horní části Seznam entit v editoru, jak je ukázáno níže.

PlayCanvas editor with CameraMask at top of entity list

Druhá kamera by měla vždy být při pohledu na stejný názor jako ten původní, tak bude vždy následovat jeho pozici a rotaci v aktualizaci CameraMask.js:

A definovat CameraToFollow v initialize:

Odstranění odvrácených stran masky

Obě kamery jsou v současné době vykreslování totéž. Chceme masky fotoaparát vykreslit vše kromě reálného vody, a chceme skutečnou kamerou vykreslit vše kromě masky vody.

Chcete-li to, můžeme použít fotoaparátu utracení bitovou masku. To funguje podobně jako kolize masky Pokud jste někdy používali ty. Objekt bude vyřazeno (ne tavené), je-li výsledek bitové operace AND mezi jeho maska a maska kamera je 1.

Řekněme, že voda bude mít nastaven bit, 2, a WaterMask bude bit 3. Pak skutečné kamery musí mít všechny bity až 3 a fotoaparát Maska musí mít všechny bity s výjimkou 2. Snadný způsob, jak říct "všechny bity s výjimkou N", je to:

Si můžete přečíst více o bitové operátory.

Chcete-li nastavit fotoaparát utracení masky, můžeme dát to uvnitř initialize je CameraMask.js dole:

Nyní v Water.js, nastavte síť vody masku na bit 2 a maska verzi to bit 3:

Nyní jeden názor bude mít normální vodu a druhý bude mít pevné bílé vody. Levá polovina obrázku níže je pohled z původní kamery a pravá polovina je z kamery masku.

Split view of mask camera and original camera

Použití masky

Jeden poslední krok teď! Víme, že oblasti pod vodou jsou označeny bílými pixely. Potřebujeme jen zkontrolovat, zda my nejsme na bílé pixel a pokud ano, vypněte deformace v Refraction.frag:

A to by bylo!

Jedna věc k poznámce je, že vzhledem k tomu, textury jako maska je inicializován při spuštění, při velikosti okna za běhu, to už neodpovídá velikosti obrazovky.

Anti-Aliasing

Jako volitelný krok čištění jste si možná všimli že hrany ve scéně teď vypadat trochu ostrý. To proto, že když jsme použili naše post efekt, ztratili jsme anti-aliasing.

Můžeme aplikovat další vyhladit nad naším účinek jako další příspěvek efekt. Naštěstí existuje k dispozici v úložišti PlayCanvas, můžeme jen použít. Přejděte na stránku aktiv skript, klepněte velké zelené tlačítko Stáhnout a vyberte projekt ze seznamu, který se zobrazí. Skript se zobrazí v kořenovém adresáři vašeho majetku okna jako posteffect-fxaa.js. Jen to připojit fotoaparát entity, a vaše scéna by měla vypadat trochu hezčí!

Závěrečné myšlenky

Pokud jste to dotáhli tak daleko, dát poplácání na zádech! Jsme se vztahuje mnoho technik v tomto seriálu. Nyní byste měli být spokojeni s vertex shadery, vykreslování textur, použití post-processing efekty, selektivně utracení objekty, pomocí vyrovnávací paměti hloubky a práci s prolnutí a průhlednost. I když jsme byli implementace v PlayCanvas, to jsou všechny grafiky obecné pojmy, najdete v různých obměnách na jakékoli platformě skončíte v.

Všechny tyto techniky jsou rovněž použitelná pro řadu dalších účinků. Jeden obzvlášť zajímavé aplikace jsem našel vertex shader je v tom mluvit o umění Abzu, kde vysvětlují, jak používají vertex shaderů efektivně animovat desítky tisíc ryb na obrazovce.

Nyní byste měli také mít pěkné vodní efekt, který lze použít pro své hry! Jste si mohli snadno přizpůsobit, teď, že jste se dal dohromady zprávu sami. Je stále mnohem víc, že můžete dělat s vodou (jsem ještě nezmínil žádný druh reflexe vůbec). Níže je pár nápadů.

Na základě hluku vlny

Namísto jednoduše animování vlny s kombinací sinus a Kosinová věta, můžete ochutnat hluk texturu aby vlny vypadají trochu více přirozené a nepředvídatelné.

Dynamické pěny stezky

Místo zcela statické vodovodní potrubí na povrchu můžete kreslit na této textury při objekty se přesunou, vytvořit dynamické pěny stopu. Existuje mnoho způsobů, jak jít o tom, takže to by mohlo být svůj vlastní projekt.

Zdrojový kód

Můžete najít že dokončené hostil PlayCanvas projektu zde. Three.js port je také k dispozici v tomto úložišti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.