Aflați cum să scrie shadere, vă puteți maximiza utilizarea tuturor puterea de procesare de chips-uri grafice moderne, mii de nuclee care operează în paralel într-un singur fir, deoarece toate calculele shader se face pe GPU, nu CPU. Programarea Shader necesită o mentalitate diferită și de abordare a scrie cod, mai degrabă decât a scrie un programe convenționale, dar ele sunt potențial aproape nelimitate cu mai mult decât plătește pentru toate problemele în stadiile inițiale.
Astăzi, aproape orice efecte vizuale în jocuri și programe similare rula pe GPU-cod, începând cu iluminare realiste în jocurile AAA și finisare efecte de post-procesare, grafica 2D, și simularea de fluid.
Obiectivele acestei lecții
Mulți oameni percep programare shader ca fiind ceva de neînțeles din domeniul magiei negre. Pe web puteți găsi un număr mare de probe de cod pentru a crea efecte interesante, dar puțin sau nici o explicație, nu pentru ei. Această lecție este doar are scopul de a depăși aceste obstacole și pentru a risipi orice concepții greșite despre shader. Principalul obiectiv al acestei lecții - pentru a ajunge la o înțelegere a modului în care să scrie și să înțeleagă codul shader, începând cu elementele de bază, cititorul poate scrie cu ușurință shader de la zero, se combină și modifica pe cele existente.
Este o clasă generică, astfel încât veți fi în măsură să aplice cunoștințele lor pe orice platformă care suportă shadere.
Deci, ce este shader generală?
Shader - este un program care se execută în ciclul de redare grafică, și spune computerului cum să proceseze și să afișeze fiecare pixel. Aceste programe numite shader, pentru că de foarte multe ori acestea sunt folosite pentru a controla efectele de iluminare și de a crea umbre realiste (din umbra engleză - umbra), dar nu există nici un motiv și fără restricții de a le folosi pentru a crea alte efecte speciale.
Shader sunt scrise într-un anumit limbaj de programare. Dar nu vă faceți griji. Nu trebuie să învețe de la zero o limbă cu totul nou, pentru că pentru a scrie shadere vom folosi GLSL, sintaxa este foarte similar cu alte limbi C-like. (De fapt, există un număr destul de limbi pentru shadere scris. Cu toate acestea, datorită faptului că acestea sunt proiectate pentru a efectua pe GPU, acestea sunt aproape identice)
Să începem!
Pentru acest tutorial, vom folosi ShaderToy. Această resursă vă permite să scrie shadere direct în browser-ul dvs., fără a deranja orice setări suplimentare. (Cu toate acestea, pentru a utiliza ShaderToy aveți nevoie de un browser care acceptă WebGL, deoarece este folosit pentru redarea.) Înregistrarea nu este necesară, dar va păstra codul în viitor, în profil.
Notă:. La momentul scrierii, resursa este în stadiul de beta. Prin urmare, este posibil ca la momentul citirii articolului, elementele de interfață / sintaxă va fi puțin diferit.
Dacă faceți clic pe Nou Shader. Acum ar trebui să vedeți această fereastră:
Deci, ce se întâmplă aici?
Acum voi explica într-o singură propoziție cum funcționează shadere. Gata? Să mergem!
Obiectivul principal al shaderului - pentru a furniza patru numere de ieșire care exprimă bukvamir. g. b. a.
Să luăm toate cele de mai sus în considerare și să încerce să umple ecranul în roșu. Valori RGBA (roșu - roșu, verde - verde, albastru - albastru și alfa - canal alfa, sau de transparență, să-l puneți pur și simplu) poate varia de la 0 la 1. Prin urmare, tot ce trebuie să facem este să se întoarcă valoarea r, g, b , a = 1, 0, 0, 1. în aceste date ShaderToy sunt înregistrate în fragColor variabilă.
Felicitări! Deci, scrieți primele lucrări shader!
Sarcină. Pot schimba culoarea gri?
vec4 - un tip de date (patru-vector), asa ca am putea scrie culoarea într-o variabilă de tip vec4 și de a transmite importanța sa în fragColor:
Desigur, pentru a umple întregul ecran cu o culoare nu este foarte interesant. Putem rula codul nostru de pe sute de mii de pixeli la un moment dat, iar noi doar vopsea peste ele într-o singură culoare.
Să încercăm să umple ecranul cu un gradient. Noi nu am primit de a face acest lucru dacă nu cunoaștem coordonatele pixel în culoarea pe care dorim să le influențeze.
date de intrare Shader.
Pixel Shader oferă mai multe variabile încorporate. care pot fi utilizate în lucrare. Cine va fi fragCoord variabilă utilă pentru noi. care conține informații despre coordonatele curente ale pixelului de pe ecran. Să încercăm să picteze peste toți pixelii în jumătatea stângă a unui ecran negru, iar dreapta - roșu:
Aproximativ Componentele de orice tip vec4 variabilă poate fi accesat de obj.x. obj.y. obj.z și obj.w. sau obj.r. obj.g. obj.b. obj.a. Aceste componente kituri nu sunt diferite - este doar moduri diferite de a reprezenta aceleași date pentru a îmbunătăți lizibilitatea codului (de exemplu, dacă utilizați un obj vec4 variabilă pentru a se referi la culori, alte persoane a se vedea în denumirea de cod obj.r. imediat va înțelege).
Vezi o problemă în codul pe care tocmai am scris? Încercați pentru a comuta la modul ecran complet. clic pe butonul corespunzător din colțul din dreapta jos.
O parte a ecranului, vopsite în culoarea roșie, vor varia în funcție de dimensiunea ecranului. Pentru a fi siguri că exact jumătate a ecranului va fi colorat în roșu, trebuie să știm dimensiunile sale. Dimensiunea ecranului nu este înregistrată în variabila built-in, cum ar fi poziția pixelului curent, deoarece, de obicei, programatorul specifică dimensiunea spațiului de lucru pentru Shader dumneavoastră. În cazul nostru dezvoltatorii platforma ShaderToy set aceste dimensiuni.
Dacă avem nevoie de a utiliza unele informații din exterior, care nu este un (Shader dvs.) built-in variabile, putem transfera de la CPU (programul principal) în GPU. ShaderToy a avut deja grijă de toate pentru noi. Valorile tuturor variabilelor care sunt transmise la shader din exterior, puteți vedea în fila Shader Intrări. Variabilele care sunt transmise de la CPU la GPU atât în limba GLSL marcate cuvânt uniform.
Să ne îmbunătățim codul nostru, astfel încât este corect să se recunoască în cazul în care centrul ecranului. Vom avea nevoie de a utiliza o variabilă iResolution de file Shader Intrări:
Dacă ecran complet în acest moment, dar acum este împărțit pe ecran exact în culori și jumătate.
Ne întoarcem la gradientul.
Turn de separare a culorilor în mod clar în jumătate pe o pantă lină nu este foarte dificil. Valorile de culoare variază între 0 și 1, precum și coordonatele ecranului se schimbă de la 0 la 1. Noi folosim acest lucru.
Sarcină. dacă puteți face un gradient vertical în loc de orizontală? Și cum rămâne cu diagonala? Și ce despre gradientul de mai multe culori?
Dacă plătiți modificări și testarea acestui cod este suficient timp, atunci trebuie să ghicească că colțul din stânga sus al ecranului are coordonatele (0,1) în loc de așteptat (0,0). Este important să se țină minte acest lucru atunci când scrieți shadere.
desena imagini
Joaca-te cu culorile, desigur, să se distreze, dar dacă vrem să creăm ceva cu adevărat impresionant, Shader nostru trebuie să fie capabil să proceseze informațiile despre imaginile. Astfel, va fi posibil să se creeze un shader care afectează fie întregul ecran (de exemplu, culoare sau efect al lumii subacvatice), sau numai pe obiecte individuale, în funcție de informațiile primite (de exemplu, sistemul de iluminat).
Faceți clic pe iChannel0 și selectați orice textură sau o imagine care iti place.
Acum, informații despre imagine este transferat la shader dumneavoastră. Cu toate acestea, există o problemă - nu există nici o este încorporată funcția shader DrawImage (). Să ne amintim că singurul lucru care poate face shader - este de a schimba culoarea fiecărui pixel în mod individual.
Deci, dacă putem returna valoarea de culoare a fiecărui pixel, cum putem trage textura? Avem nevoie de o modalitate de a se raporta coordonatele pixelului fiind prelucrate cu textura corespunzătoare a pixelilor:
Acest lucru se poate face cu ajutorul funcției de built-texture2D (textura, coordonate). care are ca parametri și textura pereche de coordonate (x, y). și returnează culoarea textura în acest moment în tipul vec4 variabilă.
Corelați coordonatele texturii la coordonatele ecran pot fi în orice mod convenabil. Puteți desena întreaga textura este doar un sfert de ecran (sărind peste pixeli - adică, pentru a reduce scara) sau desena o parte a texturii.
Acum este important doar pentru a vedea imaginea de pe ecran, astfel încât vom corela toți pixelii de la unu la unu:
Deci, asta e primul nostru shader cu o imagine!
Acum, că știi cum să extragă corect informațiile din textura, puteți modifica după cum doriți! Se poate întinde, mări sau modifica valorile de culoare.
Să încercăm să adăugați un gradient, așa cum am făcut-o de mai sus:
Felicitări, tocmai ați creat primul efect postprotsessingovy!
Sarcină. dacă puteți scrie un shader care face ca orice imagine în alb-negru?
Retrăim Shader nostru
Înainte de aceasta, toate efectele pe care le-am creat, au fost statice. De fapt, folosind datele care oferă ShaderToy, puteți crea o serie de lucruri mult mai interesante. iGlobalTime - o variabilă care este în creștere cu timpul. Acesta poate fi folosit ca un parametru pentru a crea un efect periodic. Să încercăm să joace cu culorile:
In GLSL are incorporat un functii sinus și cosinus, precum și multe alte caracteristici utile, cum ar fi lungimea vectorului, sau distanța dintre vectorii. Culoarea nu poate avea o valoare negativă, astfel încât trebuie să utilizați funcția de built-ABS, care returnează numerele de valoare absolută (modulul) fără a ține cont de a semna.
Sarcină. Poți să scrie un shader care se schimbă imaginea de la alb-negru la color și înapoi din nou?
O scurtă notă privind shaderele de depanare
Cu siguranță vă sunt utilizate pentru a monitoriza codul aproape linie cu linie, și de ieșire la consola toți parametrii necesari și utilizați comanda breakpoints, pentru a vedea ce se întâmplă în timpul execuției programului. Din păcate, deci cu shader nu se poate face. Cu siguranță puteți găsi unele instrumente pentru shadere de depanare pentru platforma selectată, dar, practic, cea mai bună soluție ar fi să se stabilească valorile variabilelor pe care doriți să le verificați, astfel încât rezultatul poate fi văzut.
concluzie
Toate cele de mai sus - doar elementele de bază de a lucra cu shader, dar este înțelegerea acestor principii vă va permite să realizeze mult mai mult. A se vedea efectele care creează ShaderToy altor utilizatori și să încerce să dau seama pe cont propriu sau pentru a juca unele dintre ele.
Există un lucru care nu este acoperit în acest articol - este shader vertex. Ei scrie în aceeași limbă, singura diferență este că acestea nu sunt efectuate pixel cu pixel, și (după cum sugerează și numele) pe fiecare nod, și să se întoarcă nu numai culoarea, ci și poziția nodului. shader Vertex, de obicei, responsabile pentru proiectarea și randare 3D-scenă de pe ecran (vozmzhonost construit în cele mai multe motoare grafice). pixel shader este responsabil pentru crearea de efecte vizuale avansate, motiv pentru care ne concentrăm asupra lor.