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

Vytváranie Toon vody pre Web: časť 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

Slovak (Slovenčina) translation by Tereza Foretová (you can also view the original English article)

Vitajte späť na tento trojdielny seriál o vytváranie štylizované toon vody v PlayCanvas používaní vertex shadery. V časti 2 sme sa vzťahuje vztlaku & pena linky. V tejto záverečnej časti budeme uplatňovať podvodné skreslenie ako po procese účinok.

Lom & po procese účinky

Naším cieľom je vizuálne znázornenie lomu svetla cez vodu. Sme už zahrnuté ako vytvoriť tento druh skreslenia fragment Shader v predchádzajúcom tutorial pre 2D scény. Jediný rozdiel tu je, že budeme musieť zistiť, ktorá oblasť obrazovky je podvodná a len aplikovať deformácia tam.

Post-processing

Vo všeobecnosti po procese efekt je niečo po vykresľuje, ako je farebný odtieň alebo staré CRT obrazovky účinok použijú na celú scénu. Namiesto vykresľovanie scény priamo na obrazovku, najprv vykreslenie medzipamäte alebo textúru a potom že vykresliť na obrazovku, prechádzajúcej cez vlastné shader.

V PlayCanvas, môžete nastaviť po procese účinok vytvorením nového skriptu. Nazvime to Refraction.js a začať kopírovať túto šablónu:

To je rovnako ako normálne skript, ale môžeme definovať RefractionPostEffect triedy, ktoré môžu byť použité k fotoaparátu. To musí vertex a fragment shader vykreslenie. Atribúty sú už nastavené, takže môžeme vytvoriť Refraction.frag s týmto obsahom:

A Refraction.vert s základné vertex shader:

Teraz pripojiť Refraction.js skript na kameru, a priraďte shadery príslušné atribúty. Keď spustíte hru, mali by ste vidieť scény, presne tak, ako to bolo predtým. Je prázdny príspevok účinok, ktorý jednoducho re-omietky scény. Ak chcete overiť, či to funguje, skúste dať scénu červený odtieň.

V Refraction.frag, namiesto toho jednoducho vracia farbu, skúste nastaviť červená zložka 1.0, ktorá by mala vyzerať na obrázku nižšie.

Scene rendered with a red tint

Skreslenie Shader

Potrebujeme pridať čas uniformu pre animované skreslenia, takže ísť dopredu a vytvoriť jeden v Refraction.js, vo vnútri tejto konštruktor pre post efekt:

Teraz vnútri tejto render funkcie, môžeme odovzdať našu shader a prírastok je:

Teraz môžeme použiť rovnaký kód shader voda skreslenie tutorial, vďaka našej plnej fragment shader vyzerať takto:

Ak to všetko vyšlo, všetko by mal teraz vyzerať akoby bol pod vodou, ako nižšie.

Underwater distortion applied to the whole scene
Challenge #1: Uistite sa, skreslenie sa vzťahujú len na spodnej polovici obrazovky.

Fotoaparát masky

Už sme skoro tam. Všetci musíme urobiť teraz je používať Toto skreslenie vplyv len na podvodné časť obrazovky. Najpriamejším spôsobom, ako som prísť s to urobiť je znovu vykresliť scénu s vodnou plochou, poskytované ako pevná biela, ako je uvedené nižšie.

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

To by boli zbavené štruktúru povrchu, ktoré by pôsobiť ako maska. Míňame by potom túto textúru do nášho lomu shader, čo len narušuje pixel výsledného obrazu, ak zodpovedajúci pixel v maske je biela.

Poďme si pridať atribút boolean na vodnej hladine vedieť, ak sa používa ako maska. Pridať toto Water.js:

My potom môže prejsť do shader s material.setParameter('isMask',this.isMask); ako obvykle. Potom vyhlásiť ju v Water.frag a nastavte farbu na bielu, ak je to pravda.

Potvrdiť, že to funguje prepínanie vlastnosť "Je maska?" v editore a oživiť hru. Malo by to vyzerať biele, rovnako ako predchádzajúci obrázok.

Teraz, na re-urobiť scénu, potrebujeme druhý fotoaparát. Vytvoriť nový fotoaparát v editore a volať to CameraMask. Duplicitné vody subjektu v editore rovnako a volať to WaterMask. Uistite sa, že "je maska?" je false pre subjekt vody ale platí aj pre WaterMask.

Oznámiť nový fotoaparát k tomu, aby textúra miesto obrazovky vytvoriť nový skript s názvom CameraMask.js a pripojte ju k novej kamery. Vytvárame RenderTarget zachytiť tento fotoaparát výstup takhle:

Teraz, ak spustíte, uvidíte, tento fotoaparát je už vykresľovanie na obrazovku. Môžeme chytiť výstup jeho render target v Refraction.js takhle:

Oznámenie som prejsť túto masku textúru ako argument na post efekt konštruktor. Musíme vytvoriť odkaz na to v našej konštruktéra, takže to vyzerá:

Nakoniec, vo funkcii render prejsť medzipamäte naše shader s:

Teraz overiť, že toto je všetci pracujú, nechám to ako výzvu.

Challenge #2: Vykreslenie uMaskBuffer na obrazovke a potvrďte je výstup druhého fotoaparátu.

Jedna vec, byť vedomí je cieľ vykreslenia nastavený v Inicializácia CameraMask.js a že musí byť pripravený v čase, keď sa nazýva Refraction.js. Ak skripty fungovať opačne, zobrazí sa chybové hlásenie. Uistite sa, že pracujú v správnom poradí, presuňte CameraMask do hornej časti zoznam entít v editore, ako je uvedené nižšie.

PlayCanvas editor with CameraMask at top of entity list

Druhý fotoaparát je vždy potrebné pri pohľade na rovnaký názor ako ten pôvodný, tak urobme to vždy sledovať svoje pozície a rotácie v aktualizácii CameraMask.js:

A definovať CameraToFollow Inicializácia:

Utratenie masky

Oba fotoaparáty sú v súčasnosti rendering to isté. Chceme maska fotoaparát robí všetko okrem skutočné vody a chceme skutočný fotoaparát vykreslenie všetko okrem maske vody.

Na tento účel môžeme použiť fotoaparát utratenie Bitová maska. To funguje podobne ako kolízie masky, ak ste niekedy používali tie. Objekt bude vyradené (nie tavené) Ak je výsledok logickú a medzi jeho masku a maskou kamera 1.

Povedzme, že voda bude mať 2 nastavený bit a WaterMask bude mať trochu 3. Potom skutočný fotoaparát potrebuje mať všetky bity súbor okrem 3 a maska fotoaparát potrebuje mať všetky bity súbor s výnimkou 2. Jednoduchý spôsob, ako povedať, "všetky bity s výnimkou N" má robiť:

Môžete si prečítať viac o tom tu binárne operátory.

Nastaviť fotoaparát utratenie masky, môžeme dať to vnútri CameraMask.js na inicializáciu na dne:

Teraz, v Water.js, nastavte vody oka maska 2 a maska verziu na bit 3:

Teraz jedno zobrazenie bude mať normálne voda, a druhý bude mať pevné biele vody. Ľavej polovici obrázku je pohľad z pôvodného kamery a pravá polovica je z maska fotoaparátu.

Split view of mask camera and original camera

Použitie masky

Jeden posledný krok teraz! Vieme, že oblasti pod vodou sú označené biele pixely. Musíme skontrolovať, ak sme si nie v biely pixel, a ak áno, vypnite skreslenie v Refraction.frag:

A že to mali urobiť!

Jedna vec k poznámke je, že keďže textúry masky je inicializovaný na spustenie, keď zmeníte veľkosť okna v režime runtime, bude už zodpovedala veľkosti obrazovky.

Anti-Aliasing

Ako voliteľný krok vyčistenie, ste si možno všimli, že hrany v scéne teraz vyzerajú trochu ostré. Toto je, pretože keď sme použiť náš príspevok efekt, sme stratili anti-aliasing.

Môžeme použiť dodatočné anti-alias na vrchole naše efekt ako ďalší post efekt. Našťastie existuje jeden dostupný v predajni PlayCanvas, môžeme jednoducho použiť. Prejdite na stránke majetku skript, kliknite na tlačidlo veľké zelené prevziať a vyberte váš projekt zo zobrazeného zoznamu. Skript sa zobrazia v hlavnom okne majetku ako posteffect-fxaa.js. Stačí to pripojiť fotoaparát subjektu, a vaša scéna by mal vyzerať trochu krajšie!

Záverečné myšlienky

Ak ste urobil ste to tak ďaleko, dajte si potľapkanie na chrbte! Sme sa vzťahuje veľa techník v tejto sérii. Teraz by ste mali púšťať vertex shadery, vykresľovanie textúr, uplatnenie post-processing účinky, selektívne utratenie objektov, pomocou medzipamäť pre hĺbky a práca s miešanie a transparentnosti. Hoci sme boli vykonávacie v PlayCanvas, to sú všetky pojmy všeobecná grafika nájdete v nejakej forme na akejkoľvek platforme, môžete skončiť v.

Všetky tieto techniky sú tiež uplatniteľné na rôzne iné efekty. Jeden obzvlášť zaujímavé uplatnenie našiel som vertex shadery je v tomto hovoriť o umení Abzu, kde si vysvetliť, ako bývali vertex shadery efektívne animovať desaťtisíce ryby na obrazovke.

Teraz mali tiež mať pekné Vodné efekt môžete použiť pre vaše hry! Ľahko sa mohli prispôsobiť teraz, že ste dať dohromady každý detail sami. Tam je ešte oveľa viac môžete urobiť s vodou (som ešte nespomenula nejaký druh reflexie vôbec). Nižšie uvádzame niekoľko nápadov.

Hluk-založené vlny

Namiesto toho jednoducho oživovanie vlny s kombináciou sínus a cosines, môžete ochutnať hluku textúry robiť vlny vyzerajú trochu prirodzenejšie a nepredvídateľné.

Dynamické pena chodníky

Namiesto úplne statické vodovodov na povrchu, mohol čerpať na tejto textúry, keď objekty premiestniť, vytvoriť dynamické pena chodník. Existuje mnoho spôsobov, ako ísť asi robí, takže by to mohlo byť svoj vlastný projekt.

Zdrojový kód

Nájdete hotové hostil PlayCanvas projektu tu. Three.js port je k dispozícii v tomto úložisku.

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.