Unity 5.x Shaders and Effects Cookbook - Netsitesnetsites.mx/Unity3dTutorials/Unity 5.x shaders and...
435
Transcript of Unity 5.x Shaders and Effects Cookbook - Netsitesnetsites.mx/Unity3dTutorials/Unity 5.x shaders and...
Unity5.xShadersandEffectsCookbook
TableofContents
Unity5.xShadersandEffectsCookbook
Credits
AbouttheAuthors
www.PacktPub.com
eBooks,discountoffers,andmore
Whysubscribe?
Preface
Whatthisbookcovers
Whatyouneedforthisbook
Whothisbookisfor
Sections
Gettingready
Howtodoit…
Howitworks…
There’smore…
Seealso
Conventions
Readerfeedback
Customersupport
Downloadingtheexamplecode
Downloadingthecolorimagesofthisbook
Errata
Piracy
Questions
1.CreatingYourFirstShader
Introduction
CreatingabasicStandardShader
Gettingready
Howtodoit…
Howitworks…
Seealso
MigratingLegacyShadersfromUnity4toUnity5
Gettingready
Howtodoit…
Upgradingautomatically
UsingStandardShaders
Migratingcustomshaders
Howitworks…
Seealso
Addingpropertiestoashader
Gettingready
Howtodoit…
Howitworks…
Seealso
UsingpropertiesinaSurfaceShader
Howtodoit…
Howitworks…
There’smore…
Seealso
2.SurfaceShadersandTextureMapping
Introduction
Diffuseshading
Gettingready
Howtodoit…
Howitworks…
Usingpackedarrays
Howtodoit…
Packedmatrices
Seealso
Addingatexturetoashader
Gettingready
Howtodoit…
Howitworks…
There’smore…
Seealso
ScrollingtexturesbymodifyingUVvalues
Gettingready
Howtodoit…
Howitworks…
Normalmapping
Gettingready
Howtodoit…
Howitworks…
There’smore…
Creatingatransparentmaterial
Gettingready
Howtodoit…
Howitworks…
CreatingaHolographicShader
Gettingready
Howtodoit…
Howitworks…
There’smore…
Seealso
Packingandblendingtextures
Gettingready
Howtodoit…
Howitworks…
Creatingacirclearoundyourterrain
Gettingready
Howtodoit…
Movingthecircle
Howitworks…
3.UnderstandingLightingModels
Introduction
Creatingacustomdiffuselightingmodel
Gettingready
Howtodoit…
Howitworks…
CreatingaToonShader
Gettingready
Howtodoit…
Howitworks…
There’smore…
CreatingaPhongSpeculartype
Gettingready
Howtodoit…
Howitworks…
CreatingaBlinnPhongSpeculartype
Gettingready
Howtodoit…
Howitworks…
Seealso
CreatinganAnisotropicSpeculartype
Gettingready
Howtodoit…
Howitworks…
4.PhysicallyBasedRenderinginUnity5
Introduction
Understandingthemetallicsetup
Gettingready
Howtodoit…
Howitworks…
Seealso
AddingtransparencytoPBR
Gettingready
Howtodoit…
Semi-transparentmaterials
Fadingobjects
Solidgeometrieswithholes
Seealso
Creatingmirrorsandreflectivesurfaces
Gettingready
Howtodoit…
Howitworks…
Seealso
Bakinglightsinyourscene
Gettingready
Howtodoit…
Configuringthestaticgeometry
Configuringthelightprobes
Bakingthelights
Howitworks…
Seealso
5.VertexFunctions
Introduction
AccessingavertexcolorinaSurfaceShader
Gettingready
Howtodoit…
Howitworks…
There’smore…
AnimatingverticesinaSurfaceShader
Gettingready
Howtodoit…
Howitworks…
Extrudingyourmodels
Gettingready
Howtodoit…
Howitworks…
There’smore…
Addingextrusionmaps
Implementingasnowshader
Gettingready
Howtodoit…
Howitworks…
Coloringthesurface
Alteringthegeometry
Seealso
Implementingavolumetricexplosion
Gettingready
Howtodoit…
Howitworks…
There’smore…
Seealso
6.FragmentShadersandGrabPasses
Introduction
UnderstandingVertexandFragmentShaders
Gettingready
Howtodoit…
Howitworks…
There’smore…
Inputsemantics
Outputsemantics
Seealso
Usinggrabpass
Gettingready
Howtodoit…
Howitworks…
There’smore…
ImplementingaGlassShader
Gettingready
Howtodoit…
Howitworks…
There’smore…
ImplementingaWaterShaderfor2Dgames
Gettingready
Howtodoit…
Howitworks…
7.MobileShaderAdjustment
Introduction
Whatisacheapshader?
Gettingready
Howtodoit…
Howitworks…
Profilingyourshaders
Gettingready
Howtodoit…
Howitworks…
There’smore…
Modifyingourshadersformobile
Gettingready
Howtodoit…
Howitworks…
8.ScreenEffectswithUnityRenderTextures
Introduction
Settingupthescreeneffectsscriptsystem
Gettingready
Howtodoit…
Howitworks…
There’smore…
Usingbrightness,saturation,andcontrastwithscreeneffects
Gettingready
Howtodoit…
Howitworks…
UsingbasicPhotoshop-likeBlendmodeswithscreeneffects
Gettingready
Howtodoit…
Howitworks…
There’smore…
UsingtheOverlayBlendmodewithscreeneffects
Gettingready
Howtodoit…
Howitworks…
9.GameplayandScreenEffects
Introduction
Creatinganoldmoviescreeneffect
Gettingready
Howtodoit…
Howitworks…
Seealso
Creatinganightvisionscreeneffect
Gettingready
Howtodoit…
Howitworks…
There’smore…
10.AdvancedShadingTechniques
Introduction
UsingCgIncludefilesthatarebuiltintoUnity
Gettingready
Howtodoit…
Howitworks…
MakingyourshaderworldmodularwithCgInclude
Gettingready
Howtodoit…
Howitworks…
ImplementingaFurShader
Gettingready
Howtodoit…
Howitworks…
There’smore…
Implementingheatmapswitharrays
Gettingready
Howtodoit…
Howitworks…
Index
Unity5.xShadersandEffectsCookbook
Unity5.xShadersandEffectsCookbookCopyright©2016PacktPublishing
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystem,ortransmittedinanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecaseofbriefquotationsembeddedincriticalarticlesorreviews.
Everyefforthasbeenmadeinthepreparationofthisbooktoensuretheaccuracyoftheinformationpresented.However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.Neithertheauthors,norPacktPublishing,anditsdealersanddistributorswillbeheldliableforanydamagescausedorallegedtobecauseddirectlyorindirectlybythisbook.
PacktPublishinghasendeavoredtoprovidetrademarkinformationaboutallofthecompaniesandproductsmentionedinthisbookbytheappropriateuseofcapitals.However,PacktPublishingcannotguaranteetheaccuracyofthisinformation.
FirstPublished:February2016
Productionreference:1220216
PublishedbyPacktPublishingLtd.
LiveryPlace
35LiveryStreet
BirminghamB32PB,UK.
ISBN978-1-78528-524-0
www.packtpub.com
CreditsAuthors
AlanZucconi
KennethLammers
Reviewer
KennethLammers
CommissioningEditor
PriyaSingh
AcquisitionEditors
RahulNair
ErolStaveley
ContentDevelopmentEditor
MehvashFatima
TechnicalEditors
PranilPathare
DanishShaikh
CopyEditor
TasneemFatehi
ProjectCoordinator
KinjalBari
Proofreader
SafisEditing
Indexer
MonicaAjmeraMehta
Graphics
KirkD’Penha
DishaHaria
ProductionCoordinator
NileshMohite
CoverWork
NileshMohite
AbouttheAuthorsAlanZucconiisapassionatedeveloper,author,andmotivationalspeaker,recognizedasoneofDevelop’s“30under30.”Hisexpertisehasbeenbuiltoverthepast10years,whilehededicatedhistimetoacademiaandthegamingindustry.Hestartedhisindependentcareertofullyexplorehiscreativity,tearingdownthewallbetweenartandgaming.Priortothat,heworkedatImperialCollegeLondon,wherehediscoveredhispassionforteachingandwriting.Histitlesincludethegravitypuzzle,0RBITALIS,andtheupcomingtimetravelplatformer,StillTime.
KennethLammershasover15yearsofexperienceinthegamingindustry,workingasacharacterartist,technicalartist,technicalartdirector,andprogrammer.Throughouthiscareer,hehasworkedontitlessuchasCallofDuty3,Crackdown2,AlanWake,andKinectStarWars.HecurrentlyownsandoperatesOzoneInteractivealongwithhisbusinesspartner,NoahKaarbo.Together,theyhaveworkedwithclientssuchasAmazon,ElineMedia,IGT,andMicrosoft.
KennyhasworkedforMicrosoftGamesStudios,Activision,andSurreal,andhasrecentlygoneoutonhisown,operatingCreativeTDandOzoneInteractive.
KennyauthoredthefirstversionofUnityShadersandEffectsCookbookbyPacktPublishing,andwasveryhappytobeapartofthewriting,updatingandreviewingofthisbook.
www.PacktPub.com
eBooks,discountoffers,andmoreDidyouknowthatPacktofferseBookversionsofeverybookpublished,withPDFandePubfilesavailable?YoucanupgradetotheeBookversionatwww.PacktPub.comandasaprintbookcustomer,youareentitledtoadiscountontheeBookcopy.Getintouchwithusat<[email protected]>formoredetails.
Atwww.PacktPub.com,youcanalsoreadacollectionoffreetechnicalarticles,signupforarangeoffreenewslettersandreceiveexclusivediscountsandoffersonPacktbooksandeBooks.
https://www2.packtpub.com/books/subscription/packtlib
DoyouneedinstantsolutionstoyourITquestions?PacktLibisPackt’sonlinedigitalbooklibrary.Here,youcansearch,access,andreadPackt’sentirelibraryofbooks.
Whysubscribe?FullysearchableacrosseverybookpublishedbyPacktCopyandpaste,print,andbookmarkcontentOndemandandaccessibleviaawebbrowser
PrefaceUnity5.xShadersandEffectsCookbookisyourguidetobecomingfamiliarwiththecreationofshadersandposteffectsinUnity5.Youwillstartyourjourneyatthebeginning,creatingthemostbasicshadersandlearninghowtheshadercodeisstructured.Thisfoundationalknowledgewillarmyouwiththemeanstoprogressfurtherthrougheachchapter,learningadvancedtechniquessuchasvolumetricexplosionsandfurshading.ThiseditionofthebookiswrittenspecificallyforUnity5andwillhelpyoutomasterphysically-basedrenderingandglobalilluminationtogetasclosetophotorealismaspossible.
Bytheendofeachchapter,youwillhavegainednewskillsetsthatwillincreasethequalityofyourshadersandevenmakeyourshaderwritingprocessmoreefficient.Thesechaptershavebeentailoredsothatyoucanjumpintoeachsectionandlearnaspecificskillfrombeginnertoexpert.ForthosewhoarenewtoshaderwritinginUnity,youcanprogressthrougheachchapter,oneatatime,tobuildonyourknowledge.Eitherway,youwilllearnthetechniquesthatmakemoderngameslookthewaytheydo.
Onceyouhavecompletedthisbook,youwillhaveasetofshadersthatyoucanuseinyourUnity3Dgamesaswellastheunderstandingtoaddtothem,accomplishneweffects,andaddressperformanceneeds.Solet’sgetstarted!
WhatthisbookcoversChapter1,CreatingYourFirstShader,introducesyoutotheworldofshadercodinginUnity4and5.
Chapter2,SurfaceShadersandTextureMapping,coversthemostcommonandusefultechniquesthatyoucanimplementwithSurfaceShaders,includinghowtousetexturesandnormalmapsforyourmodels.
Chapter3,UnderstandingLightingModels,givesyouanin-depthexplanationofhowshadersmodelthebehavioroflight.Thechapterteachesyouhowtocreatecustomlightingmodelsusedtosimulatespecialeffectssuchastoonshading.
Chapter4,PhysicallyBasedRenderinginUnity5,showsyouthatphysically-basedrenderingisthestandardtechnologyusedbyUnity5tobringrealismtoyourgames.Thischapterexplainshowtomakethemostoutofit,masteringtransparencies,reflectivesurfaces,andglobalillumination.
Chapter5,VertexFunctions,teachesyouhowshaderscanbeusedtoalterthegeometryofanobject;thischapterintroducesvertexmodifiersandusesthemtobringvolumetricexplosions,snowshaders,andothereffectstolife.
Chapter6,FragmentShadersandGrabPasses,explainshowtousegrabpassestomakematerialsthatemulatethedeformationsgeneratedbythesesemi-transparentmaterials.
Chapter7,MobileShaderAdjustment,helpsyouoptimizeyourshaderstogetthemostoutofanydevices.
Chapter8,ScreenEffectswithUnityRenderTextures,showsyouhowtocreatespecialeffectsandvisualsthatwouldotherwisebeimpossibletoachieve.
Chapter9,GameplayandScreenEffects,tellsyouhowpost-processingeffectscanbeusedtocomplementyourgameplay,simulating,forinstance,anightvisioneffect.
Chapter10,AdvancedShadingTechniques,introducesthemostadvancedtechniquesinthisbook,suchasfurshadingandheatmaprendering.
WhatyouneedforthisbookThefollowingisalistoftherequiredandoptionalsoftwaretocompletetherecipesinthisbook:
Unity5A3DapplicationsuchasMaya,Max,orBlender(optional)A2DimageeditingapplicationsuchasPhotoshoporGimp(optional)
WhothisbookisforThisbookiswrittenfordeveloperswhowanttocreatetheirfirstshadersinUnity5orwishtotaketheirgametoawholenewlevelbyaddingprofessionalpost-processingeffects.AsolidunderstandingofUnityisrequired.
SectionsInthisbook,youwillfindseveralheadingsthatappearfrequently(Gettingready,Howtodoit,Howitworks,There’smore,andSeealso).
Togiveclearinstructionsonhowtocompletearecipe,weusethesesectionsasfollows:
GettingreadyThissectiontellsyouwhattoexpectintherecipe,anddescribeshowtosetupanysoftwareoranypreliminarysettingsrequiredfortherecipe.
Howtodoit…Thissectioncontainsthestepsrequiredtofollowtherecipe.
Howitworks…Thissectionusuallyconsistsofadetailedexplanationofwhathappenedintheprevioussection.
There’smore…Thissectionconsistsofadditionalinformationabouttherecipeinordertomakethereadermoreknowledgeableabouttherecipe.
SeealsoThissectionprovideshelpfullinkstootherusefulinformationfortherecipe.
ConventionsInthisbook,youwillfindanumberoftextstylesthatdistinguishbetweendifferentkindsofinformation.Herearesomeexamplesofthesestylesandanexplanationoftheirmeaning.
Codewordsintext,databasetablenames,foldernames,filenames,fileextensions,pathnames,dummyURLs,userinput,andTwitterhandlesareshownasfollows:“EnterthefollowingcodeintothePropertiesblockofyourshader.”
Ablockofcodeissetasfollows:
voidsurf(InputIN,inoutSurfaceOutputo)
{
float4c;
c=pow((_EmissiveColor+_AmbientColor),_MySliderValue);
o.Albedo=c.rgb;
o.Alpha=c.a;
}
Whenwewishtodrawyourattentiontoaparticularpartofacodeblock,therelevantlinesoritemsaresetinbold:
voidsurf(InputIN,inoutSurfaceOutputStandardo){
fixed4c=pow((_Color+_AmbientColor),_MySliderValue);
o.Albedo=c.rgb;
o.Metallic=_Metallic;
o.Smoothness=_Glossiness;
o.Alpha=c.a;
}
Newtermsandimportantwordsareshowninbold.Wordsthatyouseeonthescreen,forexample,inmenusordialogboxes,appearinthetextlikethis:“IntheProjecttabinyourUnityeditor,right-clickontheAssetsfolderandselectCreate|Folder.”
NoteWarningsorimportantnotesappearinaboxlikethis.
TipTipsandtricksappearlikethis.
ReaderfeedbackFeedbackfromourreadersisalwayswelcome.Letusknowwhatyouthinkaboutthisbook—whatyoulikedordisliked.Readerfeedbackisimportantforusasithelpsusdeveloptitlesthatyouwillreallygetthemostoutof.
Tosendusgeneralfeedback,simplye-mail<[email protected]>,andmentionthebook’stitleinthesubjectofyourmessage.
Ifthereisatopicthatyouhaveexpertiseinandyouareinterestedineitherwritingorcontributingtoabook,seeourauthorguideatwww.packtpub.com/authors.
CustomersupportNowthatyouaretheproudownerofaPacktbook,wehaveanumberofthingstohelpyoutogetthemostfromyourpurchase.
DownloadingtheexamplecodeYoucandownloadtheexamplecodefilesforthisbookfromyouraccountathttp://www.packtpub.com.Ifyoupurchasedthisbookelsewhere,youcanvisithttp://www.packtpub.com/supportandregistertohavethefilese-maileddirectlytoyou.
Youcandownloadthecodefilesbyfollowingthesesteps:
1. Loginorregistertoourwebsiteusingyoure-mailaddressandpassword.2. HoverthemousepointerontheSUPPORTtabatthetop.3. ClickonCodeDownloads&Errata.4. EnterthenameofthebookintheSearchbox.5. Selectthebookforwhichyou’relookingtodownloadthecodefiles.6. Choosefromthedrop-downmenuwhereyoupurchasedthisbookfrom.7. ClickonCodeDownload.
Oncethefileisdownloaded,pleasemakesurethatyouunziporextractthefolderusingthelatestversionof:
WinRAR/7-ZipforWindowsZipeg/iZip/UnRarXforMac7-Zip/PeaZipforLinux
DownloadingthecolorimagesofthisbookWealsoprovideyouwithaPDFfilethathascolorimagesofthescreenshots/diagramsusedinthisbook.Thecolorimageswillhelpyoubetterunderstandthechangesintheoutput.Youcandownloadthisfilefromhttps://www.packtpub.com/sites/default/files/downloads/Unity5xShadersAndEffectsCookbook_SecondEdition_Graphics.pdf
ErrataAlthoughwehavetakeneverycaretoensuretheaccuracyofourcontent,mistakesdohappen.Ifyoufindamistakeinoneofourbooks—maybeamistakeinthetextorthecode—wewouldbegratefulifyoucouldreportthistous.Bydoingso,youcansaveotherreadersfromfrustrationandhelpusimprovesubsequentversionsofthisbook.Ifyoufindanyerrata,pleasereportthembyvisitinghttp://www.packtpub.com/submit-errata,selectingyourbook,clickingontheErrataSubmissionFormlink,andenteringthedetailsofyourerrata.Onceyourerrataareverified,yoursubmissionwillbeacceptedandtheerratawillbeuploadedtoourwebsiteoraddedtoanylistofexistingerrataundertheErratasectionofthattitle.
Toviewthepreviouslysubmittederrata,gotohttps://www.packtpub.com/books/content/supportandenterthenameofthebookinthesearchfield.TherequiredinformationwillappearundertheErratasection.
PiracyPiracyofcopyrightedmaterialontheInternetisanongoingproblemacrossallmedia.AtPackt,wetaketheprotectionofourcopyrightandlicensesveryseriously.IfyoucomeacrossanyillegalcopiesofourworksinanyformontheInternet,pleaseprovideuswiththelocationaddressorwebsitenameimmediatelysothatwecanpursuearemedy.
Pleasecontactusat<[email protected]>withalinktothesuspectedpiratedmaterial.
Weappreciateyourhelpinprotectingourauthorsandourabilitytobringyouvaluablecontent.
QuestionsIfyouhaveaproblemwithanyaspectofthisbook,youcancontactusat<[email protected]>,andwewilldoourbesttoaddresstheproblem.
Chapter1.CreatingYourFirstShaderThischapterwillcoversomeofthemorecommondiffusetechniquesfoundintoday’sGameDevelopmentShadingPipelines.Inthischapter,youwilllearnaboutthefollowingrecipes:
CreatingabasicStandardShaderMigratingLegacyShadersfromUnity4toUnity5AddingpropertiestoashaderUsingpropertiesinaSurfaceShader
IntroductionLet’simagineacubethathasbeenpaintedwhiteuniformly.Evenifthecolorusedisthesameoneachface,theywillallhavedifferentshadesofwhitedependingonthedirectionthatthelightiscomingfromandtheanglethatwearelookingatit.Thisextralevelofrealismisachievedin3Dgraphicsbyshaders,specialprogramsthataremostlyusedtosimulatehowlightworks.Awoodencubeandametalonemaysharethesame3Dmodel,butwhatmakesthemlookdifferentistheshaderthattheyuse.Recipeafterrecipe,thisfirstchapterwillintroduceyoutoshadercodinginUnity.Ifyouhavelittletonopreviousexperiencewithshaders,thischapteriswhatyouneedtounderstandwhatshadersare,howtheywork,andhowtocustomizethem.
Bytheendofthischapter,youwillhavelearnedhowtobuildbasicshadersthatperformbasicoperations.Armedwiththisknowledge,youwillbeabletocreatejustaboutanySurfaceShader.
CreatingabasicStandardShaderEveryUnitygamedevelopershouldbefamiliarwiththeconceptofcomponents.Alltheobjectsthatarepartofagamecontainanumberofcomponentsthataffecttheirlookandbehavior.Whilescriptsdeterminehowobjectsshouldbehave,renderersdecidehowtheyshouldappearonthescreen.Unitycomeswithseveralrenderers,dependingonthetypeofobjectthatwearetryingtovisualise;every3DmodeltypicallyhasMeshRenderer.Anobjectshouldhaveonlyonerenderer,buttherendereritselfcancontainseveralmaterials.Eachmaterialisawrapperforasingleshader,thefinalringinthefoodchainof3Dgraphics.Therelationshipsbetweenthesecomponentscanbeseeninthefollowingdiagram:
Understandingthedifferencebetweenthesecomponentsisessentialtounderstandhowshaderswork.
GettingreadyTogetstartedwiththisrecipe,youwillneedtohaveUnity5runningandmusthavecreatedanewproject.TherewillalsobeaUnityprojectincludedwiththiscookbook,soyoucanusethatoneaswellandsimplyaddyourowncustomshaderstoitasyoustepthrougheachrecipe.Withthiscompleted,youarenowreadytostepintothewonderfulworldofreal-timeshading!
Howtodoit…Beforegettingintoourfirstshader,let’screateasmallsceneforustoworkwith.ThiscanbedonebynavigatingtoGameObject|CreateEmptyintheUnityeditor.Fromhere,youcancreateaplanetoactasaground,acoupleofspherestowhichwewillapplyourshader,andadirectionallighttogivethescenesomelight.Withourscenegenerated,wecanmoveontotheshaderwritingsteps:
1. IntheProjecttabinyourUnityeditor,right-clickontheAssetsfolderandselectCreate|Folder.
NoteIfyouareusingtheUnityprojectthatcamewiththecookbook,youcanskiptostep4.
2. RenamethefolderthatyoucreatedtoShadersbyright-clickingonitandselectingRenamefromthedrop-downlistorselectingthefolderandhittingF2onthekeyboard.
3. CreateanotherfolderandrenameittoMaterials.4. Right-clickontheShadersfolderandselectCreate|Shader.Thenright-clickonthe
MaterialsfolderandselectCreate|Material.5. RenameboththeshaderandmaterialtoStandardDiffuse.6. LaunchtheStandardDiffuseshaderinMonoDevelop(thedefaultscripteditorfor
Unity)bydouble-clickingonit.Thiswillautomaticallylaunchtheeditorforyouanddisplaytheshadercode.
NoteYouwillseethatUnityhasalreadypopulatedourshaderwithsomebasiccode.This,bydefault,willgetyouabasicDiffuseshaderthatacceptsonetexture.Wewillbemodifyingthisbasecodesothatyoucanlearnhowtoquicklystartdevelopingyourowncustomshaders.
7. Nowlet’sgiveourshaderacustomfolderfromwhichit’sselected.TheveryfirstlineofcodeintheshaderisthecustomdescriptionthatwehavetogivetheshadersothatUnitycanmakeitavailableintheshaderdrop-downlistwhenassigningtomaterials.WehaverenamedourpathtoShader"CookbookShaders/StandardDiffuse",butyoucannameittowhateveryouwantandrenameitatanytime.Sodon’tworryaboutanydependenciesatthispoint.SavetheshaderinMonoDevelopandreturntotheUnityeditor.Unitywillautomaticallycompiletheshaderwhenitrecognizesthatthefilehasbeenupdated.Thisiswhatyourshadershouldlooklikeatthispoint:
Shader"CookbookShaders/StandardDiffuse"{
Properties{
_Color("Color",Color)=(1,1,1,1)
_MainTex("Albedo(RGB)",2D)="white"{}
_Glossiness("Smoothness",Range(0,1))=0.5
_Metallic("Metallic",Range(0,1))=0.0
}
SubShader{
Tags{"RenderType"="Opaque"}
LOD200
CGPROGRAM
//PhysicallybasedStandardlightingmodel,andenableshadowson
alllighttypes
#pragmasurfacesurfStandardfullforwardshadows
//Useshadermodel3.0target,togetnicerlookinglighting
#pragmatarget3.0
sampler2D_MainTex;
structInput{
float2uv_MainTex;
};
half_Glossiness;
half_Metallic;
fixed4_Color;
voidsurf(InputIN,inoutSurfaceOutputStandardo){
//Albedocomesfromatexturetintedbycolor
fixed4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
o.Albedo=c.rgb;
//Metallicandsmoothnesscomefromslidervariables
o.Metallic=_Metallic;
o.Smoothness=_Glossiness;
o.Alpha=c.a;
}
ENDCG
}
FallBack"Diffuse"
}
8. Technicallyspeaking,thisisaSurfaceShaderbasedonphysically-basedrendering,whichUnity5hasadoptedasitsnewstandard.Asthenamesuggests,thistypeofshaderachievesrealismbysimulatinghowlightphysicallybehaveswhenhittingobjects.IfyouareusingapreviousversionofUnity(suchasUnity4),yourcodewilllookverydifferent.Priortotheintroductionofphysically-basedshaders,Unity4usedlesssophisticatedtechniques.Allthesedifferenttypesofshaderwillbefurtherexploredinthenextchaptersofthisbook.
9. Afteryourshaderiscreated,weneedtoconnectittoamaterial.SelectthematerialcalledStandardDiffusethatwecreatedinstep4andlookattheInspectortab.FromtheShaderdrop-downlist,selectCookbookShaders|StandardDiffuse.(Yourshaderpathmightbedifferentifyouchosetouseadifferentpathname.)Thiswillassignyourshadertoyourmaterialandmakeitreadyforyoutoassigntoanobject.
NoteToassignamaterialtoanobject,youcansimplyclickanddragyourmaterialfrom
theProjecttabtotheobjectinyourscene.YoucanalsodragamaterialontotheInspectortabofanobjectintheUnityeditortoassignamaterial.
Thescreenshotofanexampleisasfollows:
Notmuchtolookatatthispoint,butourshaderdevelopmentenvironmentissetupandwecannowstarttomodifytheshadertosuitourneeds.
Howitworks…Unityhasmadethetaskofgettingyourshaderenvironmentupandrunning,whichisveryeasyforyou.Itissimplyamatterofafewclicksandyouaregoodtogo.TherearealotofelementsworkinginthebackgroundwithregardtotheSurfaceShaderitself.UnityhastakentheCgshaderlanguageandmadeitmoreefficienttowritebydoingalotoftheheavyCgcodeliftingforyou.TheSurfaceShaderlanguageisamorecomponent-basedwayofwritingshaders.Taskssuchasprocessingyourowntexturecoordinatesandtransformationmatriceshavealreadybeendoneforyou,soyoudon’thavetostartfromscratchanymore.Inthepast,wewouldhavetostartanewshaderandrewritealotofcodeoverandoveragain.AsyougainmoreexperiencewithSurfaceShaders,youwillnaturallywanttoexploremoreoftheunderlyingfunctionsoftheCglanguageandhowUnityisprocessingallofthelow-levelgraphicsprocessingunit(GPU)tasksforyou.
NoteAllthefilesinaUnityprojectarereferencedindependentlyfromthefolderthattheyarein.Wecanmoveshadersandmaterialsfromwithintheeditorwithouttheriskofbreakinganyconnection.Files,however,shouldneverbemovedfromoutsidetheeditorasUnitywillnotbeabletoupdatetheirreferences.
So,bysimplychangingtheshader’spathnametoanameofourchoice,wehavegotourbasicDiffuseshaderworkingintheUnityenvironment,withlightsandshadowsandallthatbyjustchangingonelineofcode!
SeealsoThesourcecodeofthebuilt-inshadersistypicallyhiddeninUnity5.Youcannotopenthisfromtheeditorlikeyoudowithyourownshaders.
Formoreinformationonwheretofindalargeportionofthebuilt-inCgfunctionsforUnity,gotoyourUnityinstalldirectoryandnavigatetoUnity45\Editor\Data\CGIncludes.Inthisfolder,youcanfindthesourcecodeoftheshadersshippedwithUnity.Overtime,theyhavechangedalot;UNITYDOWNLOADARCHIVE(https://unity3d.com/get-unity/download/archive)istheplacetogoifyouneedtoaccessthesourcecodesofashaderusedinadifferentversionofUnity.Afterchoosingtherightversion,selectBuiltinshadersfromthedrop-downlist,asshowninthefollowingimage.Therearethreefilesthatareofnoteatthispoint—UnityCG.cginc,Lighting.cginc,andUnityShaderVariables.cginc.Ourcurrentshaderismakinguseofallthesefilesatthemoment:
Chapter10,AdvancedShadingTechniques,willexplorein-depthhowtouseGcIncludeforamodularapproachtoshadercoding.
MigratingLegacyShadersfromUnity4toUnity5Itisundeniablethatgraphicsinvideogameshavechangedmassivelyoverthelast10years.Everynewgamecomeswithcutting-edgetechniquesthataregettingusclosertoachievingreal-timephotorealism.WeshouldnotbesurprisedbythefactthatshadersthemselveshavechangedmassivelythroughoutthelifetimeofUnity.Thisisoneofthemajorsourcesofconfusionwhenapproachingshadersforthefirsttime.PriortoUnity5,mainlytwodifferentshaderswereadopted:DiffuseandSpecular.Asthenamessuggest,theywereusedformatteandshinymaterials,respectively.IfyouarealreadyusingUnity5,youcanskipthisrecipe.ThisrecipewillexplainhowtoreplicatetheseeffectsusingUnity5.
GettingreadyThestartingpointofthisrecipeishavingaworkspacemadeinUnity4,whichusessomeofthebuilt-inshadersthatwereoriginallyprovided.Ifyouaretostartanewgame,thereisnodoubtthatyoushouldusethelatestversionofUnity.However,ifyourprojectisalreadyinthelaterstagesofdevelopmentwithanolderversion,youshouldbeverycarefulbeforemigrating.Manythingshavechangedbehindthecurtainsoftheengine,andevenifyourbuilt-inshaderswillmostlikelyworkwithoutanyproblem,yourscriptsmightnot.Ifyouaretomigrateyourentireworkspace,thefirstthingthatyoushoulddoistakebackup.ItisimportanttorememberthatsavingassetsandscenesisnotenoughasmostoftheconfigurationinUnityisstoredinitsmetadatafiles.Thesafestoptiontosurviveamigrationistoduplicatetheentirefolderthatcontainsyourproject.ThebestwayofdoingthisisbyphysicallycopyingthefolderfromFileExplorer(Windows)orFinder(Mac).
Howtodoit…Therearetwomainoptionsifyouwanttomigrateyourbuilt-inshaders:upgradingyourprojectautomaticallyorswitchingtoStandardShadersinstead.
UpgradingautomaticallyThisoptionistheeasiestone.Unity5canimportaprojectmadewithanearlierversionandupgradeit.Youshouldnoticethatoncetheconversionisdone,youwillnotbeabletouseUnity4;evenifnoneofyourassetsmayhavechangeddirectly,Unitymetadatahasbeenconverted.Toproceedwiththis,openUnity5andclickonOPENOTHERtoselectthefolderofyouroldproject.Youwillbeaskedifyouwanttoconvertit;clickonUpgradetoproceed.Unitywillreimportallofyourassetsandrecompileallofyourscripts.Theprocessmightlastforseveralhoursifyourprojectisbig.Oncetheconversionisdone,yourbuilt-inshadersfromUnity4shouldhavebeenreplacedwiththeirlegacyequivalent.Youcancheckthisfromtheinspectorofyourmaterialsthatshouldhavechanged(forinstance)fromBumpedDiffusetoLegacyShader/BumpedDiffuse.
NoteEvenifDiffuse,Specular,andtheotherbuilt-inshadersfromUnity4arenowdeprecated,Unity5keepsthemforbackwardcompatibility.Theycanbefoundinthedrop-downmenuofamaterialundertheLegacyShadersfolder.
UsingStandardShadersInsteadofusingtheLegacyShaders,youmightdecidetoreplacethemwiththenewStandardShadersfromUnity5.Beforedoingthis,youshouldkeepinmindthatastheyarebasedonadifferentlightingmodel,yourmaterialswillmostlikelylookdifferent.Unity4camewithmorethaneightydifferentbuilt-inshadersdividedinsixdifferentfamilies(Normal,Transparent,TransparentCutout,Self-Illuminated,andReflective).InUnity5,theyareallreplacedbytheStandardShaderintroducedinthepreviousrecipe.Unfortunately,thereisnomagicrecipetoconvertyourshadersdirectly.However,youcanusethefollowingtableasastartingpointtounderstandhowtheStandardShadercanbeconfiguredtosimulateUnity4LegacyShaders:
Shader Unity4 Unity4(Legacy) Unity5
DiffuseDiffuse
Lambert
LegacyShader/Diffuse
Lambert
Standard
Physically-basedrendering:MetallicWorkflow
SpecularSpecular
Blinn-Phong
LegacyShader/Specular
Blinn-Phong
Standard(Specularsetup)
Physically-basedrendering:SpecularWorkflow
Transparent
TransparentVertex-Lit LegacyShader/TransparentVertex-LitStandard
RenderingMode:Transparent
TransparentCutoutVertex-Lit
LegacyShader/TransparentCutoutVertex-Lit
Standard
RenderingMode:Cutout
YoucanchangetheshaderusedbyyouroldmaterialusingtheShaderdrop-downmenuinInspector.AllyouneedtodoissimplyselecttheappropriateStandardShader.Ifyouroldshaderusedtextures,colours,andnormalmaps,theywillbeautomaticallyusedinthenewStandardShader.YoumightstillhavetoconfiguretheparametersoftheStandardShadertogetasclosetoyouroriginallightingmodelaspossible.ThefollowingpictureshowstheubiquitousStanfordbunnyrenderedwithaLegacyDiffuseShader(right),convertedStandardShader(left),andStandardShaderwithSmoothnesssettozero(middle):
MigratingcustomshadersIfyouhavewrittencustomshadersinUnity4,chancesarethatthiswillworkstraightawayinUnity5.Despitethis,Unityhasmadesomeminorchangesinthewayshaderswork,whichcancausebotherrorsandinconsistencies.Themostrelevantandimportantoneistheintensityofthelight.LightsinUnity5aretwiceasbright.AlltheLegacyShadershavebeenrewrittentotakethisintoaccount;ifyouhaveupgradedyourshadersorswitchedtoStandardShaders,youwillnotnoticeanydifference.Ifyouhavewrittenyourownlightingmodel,youwillhavetobesurethattheintensityofthelightisnotmultipliedbytwoanymore.Thefollowingcodeisusedtoensurethis:
//Unity4
c.rgb=s.Albedo*_LightColor0.rgb*(diff*atten*2);
//Unity5
c.rgb=s.Albedo*_LightColor0.rgb*(diff*atten);
Ifyouhaven’twrittenashaderyet,don’tpanic:lightingmodelswillbeextensivelyexplainedinChapter3,UnderstandingLightingModels.
NoteThereareseveralotherchangesinthewayUnity5handlesshaderscomparedtoUnity4.YoucanseealloftheminShadersinUnity5.0at
http://docs.unity3d.com/Manual/UpgradeGuide5-Shaders.html.
Howitworks…Writingshadersisalwaysatrade-offbetweenrealismandefficiency;realisticshadersrequireintensivecomputation,potentiallyintroducingasignificantlag.It’simportanttouseonlythoseeffectsthatarestrictlyrequired:ifamaterialdoesnotneedspecularreflections,thenthereisnoneedtouseashaderthatcalculatesthem.ThishasbeenthemainreasonwhyUnity4hasbeenshippedwithsomanydifferentshaders.ThenewStandardShaderofUnity5canpotentiallyreplaceallofthepreviousshadersasitincorporatesnormalmapping,transparency,andreflection.However,ithasbeencleverlyoptimizedsothatonlytheeffectsthatarereallynecessaryarecalculated.Ifyourstandardmaterialdoesnothavereflections,theywillnotbecalculated.
Despitethis,theStandardShaderismainlydesignedforrealisticmaterials.TheLegacyDiffuseandSpecularshaders,incomparison,werenotreallydesignedforrealisticmaterials.ThisisthereasonswitchingfromLegacytoStandardShaderswillmostlyintroduceslightchangesinthewayyourobjectsarerendered.
SeealsoChapter3,UnderstandingLightingModels,exploresin-depthhowtheDiffuseandSpecularshaderswork.EvenifdeprecatedinUnity5,understandingthemisessentialifyouwanttodesignnewlightingmodels.Chapter4,PhysicallyBasedRenderinginUnity5,willshowyouhowtounlockthepotentialoftheStandardShaderinUnity5.
AddingpropertiestoashaderPropertiesofashaderareveryimportantfortheshaderpipelineastheyarethemethodthatyouusetolettheartistoruseroftheshaderassigntexturesandtweakyourshadervalues.PropertiesallowyoutoexposeGUIelementsinamaterial’sInspectortabwithoutyouhavingtouseaseparateeditor,whichprovidesvisualwaystotweakashader.
WithyourshaderopenedinMonoDevelop,lookattheblockoflines2through7.ThisiscalledthePropertiesblock.Currently,itwillhaveonepropertyinitcalled_MainTex.Ifyoulookatyourmaterialthathasthisshaderappliedtoit,youwillnoticethatthereisonetextureGUIelementintheInspectortab.TheselinesofcodeinourshaderarecreatingthisGUIelementforus.
Again,Unityhasmadethisprocessveryefficientintermsofcodingandtheamountoftimeittakestoiteratethroughchangingyourproperties.
GettingreadyLet’sseehowthisworksinourcurrentshadercalledStandardDiffuse,bycreatingourownpropertiesandlearningmoreaboutthesyntaxinvolved.Forthisexample,wewillrefittheshaderpreviouslycreated.Insteadofusingatexture,itwillonlyuseitscolorandsomeotherpropertiesthatwewillbeabletochangedirectlyfromtheInspectortab.StartbyduplicatingtheStandardDiffuseshader.YoucandothisbyselectingitintheInspectortabandpressingCtrl+D.ThiswillcreateacopycalledStandardDiffuse2.
NoteYoucangiveafriendliernametoyourshaderinitsfirstline.Forinstance,Shader"CookbookShaders/StandardDiffuse"tellsUnitytocallthisStandardDiffuseshaderandmoveittoagroupcalledCookbookShaders.IfyouduplicateashaderusingCtrl+D,yournewfilewillsharethesamename.Toavoidconfusion,makesuretochangethefirstlineofeachnewshadersothatitusesauniquealias.
Howtodoit…OncetheStandardDiffuse2shaderisready,wecanstartchangingitsproperties:
1. InourPropertiesblockofourshader,removethecurrentpropertybydeletingthefollowingcodefromourcurrentshader:
_MainTex("Albedo(RGB)",2D)="white"{}
2. Aswehaveremovedanessentialproperty,thisshaderwillnotcompileuntiltheotherreferencesto_MainTexareremoved.Let’sremovethisotherline:
sampler2D_MainTex;
3. Theoriginalshaderused_MainTextocolorthemodel.Let’schangethisbyreplacingthefirstlineofcodeofthesurf()functionwiththis:
fixed4c=_Color;
4. WhenyousaveandreturntoUnity,theshaderwillcompile,andyouwillseethatnowourmaterial’sInspectortabdoesn’thaveatextureswatchanymore.Tocompletetherefitofthisshader,let’saddonemorepropertyandseewhathappens.Enterthefollowingcode:
_AmbientColor("AmbientColor",Color)=(1,1,1,1)
5. Wehaveaddedanothercolorswatchtothematerial’sInspectortab.Nowlet’saddonemoretogetafeelforotherkindsofpropertiesthatwecancreate.AddthefollowingcodetothePropertiesblock:
_MySliderValue("ThisisaSlider",Range(0,10))=2.5
6. WehavenowcreatedanotherGUIelementthatallowsustovisuallyinteractwithourshader.Thistime,wecreatedasliderwiththenameThisisaSlider,asshowninthefollowingscreenshot:
Propertiesallowyoutocreateavisualwaytotweakshaderswithouthavingtochangevaluesintheshadercodeitself.Thenextrecipewillshowyouhowthesepropertiescanactuallybeusedtocreateamoreinterestingshader.
Note
Whilepropertiesbelongtoshaders,thevaluesassociatedwiththemarestoredinmaterials.Thesameshadercanbesafelysharedbetweenmanydifferentmaterials.Ontheotherhand,changingthepropertyofamaterialwillaffectthelookofalltheobjectsthatarecurrentlyusingit.
Howitworks…EveryUnityshaderhasabuilt-instructurethatitislookingforinitscode.ThePropertiesblockisoneofthosefunctionsthatareexpectedbyUnity.Thereasonbehindthisistogiveyou,theshaderprogrammer,ameansofquicklycreatingGUIelementsthattiedirectlyintoyourshadercode.ThesepropertiesthatyoudeclareinthePropertiesblockcanthenbeusedinyourshadercodetochangevalues,colors,andtextures.Thesyntaxtodefineapropertyisasfollows:
Let’stakealookatwhatisgoingonunderthehoodhere.Whenyoufirststartwritinganewproperty,youwillneedtogiveitaVariableName.ThevariablenameisgoingtobethenamethatyourshadercodeisgoingtouseinordertogetthevaluefromtheGUIelement.Thissavesusalotoftimebecausewedon’thavetosetupthissystemourselves.
ThenextelementsofapropertyaretheInspectorGUINameandTypeoftheproperty,whichiscontainedwithinparentheses.TheInspectorGUINameisthenamethatisgoingtoappearinthematerial’sInspectortabwhentheuserisinteractingwithandtweakingtheshader.TheTypeisthetypeofdatathatthispropertyisgoingtocontrol.TherearemanytypesthatwecandefineforpropertiesinsideofUnityshaders.Thefollowingtabledescribesthetypesofvariablesthatwecanhaveinourshaders:
SurfaceShaderpropertytypes
Range(min,
max)Thiscreatesafloatpropertyasasliderfromtheminimumvaluetothemaximumvalue
ColorThiscreatesacolorswatchintheInspectortabthatopensupacolorpicker=(float,float,float,float)
2D Thiscreatesatextureswatchthatallowsausertodragatextureintheshader
Rect Thiscreatesanon-power-of-2textureswatchandfunctionsthesameasthe2DGUIelement
CubeThiscreatesacubemapswatchintheInspectortabandallowsausertodraganddropacubemapintheshader
Float ThiscreatesafloatvalueintheInspectortabbutwithoutaslider
Vector Thiscreatesafour-floatpropertythatallowsyoutocreatedirectionsorcolors
Finally,thereistheDefaultValue.Thissimplysetsthevalueofthispropertytothevaluethatyouplaceinthecode.So,inthepreviousexampleimage,thedefaultvalueforthe
propertynamed_AmbientColor,whichisoftheColortype,issettoavalueof1,1,1,1.AsthisisacolorpropertyexpectingacolorthatisRGBAorfloat4orr,g,b,a=x,y,z,w,thiscolorproperty,whenfirstcreated,issettowhite.
SeealsoThepropertiesaredocumentedintheUnitymanualathttp://docs.unity3d.com/Documentation/Components/SL-Properties.html.
UsingpropertiesinaSurfaceShaderNowthatwehavecreatedsomeproperties,let’sactuallyhookthemuptotheshadersothatwecanusethemastweakstoourshaderandmakethematerialprocessmuchmoreinteractive.
Wecanusetheproperties’valuesfromthematerial’sInspectortabbecausewehaveattachedavariablenametothepropertyitself,butintheshadercode,youhavetosetupacoupleofthingsbeforeyoucanstartcallingthevaluebyitsvariablename.
Howtodoit…ThefollowingstepsshowyouhowtousethepropertiesinaSurfaceShader:
1. Tobegin,let’sremovethefollowinglinesofcode,aswedeletedthepropertycalled_MainTexintheCreatingabasicStandardShaderrecipeofthischapter:
_MainTex("Albedo(RGB)",2D)="white"{}
sampler2D_MainTex;
fixed4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
2. Next,addthefollowinglinesofcodetotheshader,belowtheCGPROGRAMline:
float4_AmbientColor;
float_MySliderValue;
3. Withstep2complete,wecannowusethevaluesfromthepropertiesinourshader.Let’sdothisbyaddingthevaluefromthe_Colorpropertytothe_AmbientColorpropertyandgivingtheresultofthistotheo.Albedolineofcode.So,let’saddthefollowingcodetotheshaderinthesurf()function:
voidsurf(InputIN,inoutSurfaceOutputStandardo){
fixed4c=pow((_Color+_AmbientColor),_MySliderValue);
o.Albedo=c.rgb;
o.Metallic=_Metallic;
o.Smoothness=_Glossiness;
o.Alpha=c.a;
}
4. Finally,yourshadershouldlooklikethefollowingshadercode.IfyousaveyourshaderinMonoDevelopandre-enterUnity,yourshaderwillcompile.Iftherewerenoerrors,youwillnowhavetheabilitytochangetheambientandemissivecolorsofthematerialaswellasincreasethesaturationofthefinalcolorusingtheslidervalue.Prettyneat,huh!
Shader"CookbookShaders/StandardDiffuse3"{
//WedefinePropertiesinthepropertiesblock
Properties{
_Color("Color",Color)=(1,1,1,1)
_AmbientColor("AmbientColor",Color)=(1,1,1,1)
_MySliderValue("ThisisaSlider",Range(0,10))=2.5
}
SubShader{
Tags{"RenderType"="Opaque"}
LOD200
//Weneedtodeclarethepropertiesvariabletypeinsideofthe
//CGPROGRAMsowecanaccessitsvaluefromthepropertiesblock.
CGPROGRAM
#pragmasurfacesurfStandardfullforwardshadows
#pragmatarget3.0
structInput{
float2uv_MainTex;
};
fixed4_Color;
float4_AmbientColor;
float_MySliderValue;
voidsurf(InputIN,inoutSurfaceOutputStandardo){
//Wecanthenusethepropertiesvaluesinourshader
fixed4c=pow((_Color+_AmbientColor),_MySliderValue);
o.Albedo=c.rgb;
o.Alpha=c.a;
}
ENDCG
}
FallBack"Diffuse"
}
TipDownloadingtheexamplecode
YoucandownloadtheexamplecodefilesforallPacktbooksyouhavepurchasedfromyouraccountathttp://www.packtpub.com.Ifyoupurchasedthisbookelsewhere,youcanvisithttp://www.packtpub.com/supportandregistertohavethefilese-maileddirectlytoyou.
NoteThepow(arg1,arg2)functionisabuilt-infunctionthatwillperformtheequivalentmathfunctionofpower.So,argument1isthevaluethatwewanttoraisetoapowerandargument2isthepowerthatwewanttoraiseitto.
Tofindoutmoreaboutthepow()function,lookattheCgtutorial.ItisagreatfreeresourcethatyoucanusetolearnmoreaboutshadingandgetaglossaryofallthefunctionsavailabletoyouintheCgshadinglanguage:
http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html
Thefollowingscreenshotdemonstratestheresultobtainedusingourpropertiestocontrolourmaterial’scolorsandsaturationfromwithinthematerial’sInspectortab:
Howitworks…WhenyoudeclareanewpropertyinthePropertiesblock,youareprovidingawayfortheshadertoretrievethetweakedvaluefromthematerial’sInspectortab.Thisvalueisstoredinthevariablenameportionoftheproperty.Inthiscase,_AmbientColor,_Color,and_MySliderValuearethevariablesinwhichwearestoringthetweakedvalues.InorderforyoutobeabletousethevalueintheSubShader{}block,youneedtocreatethreenewvariableswiththesamenamesastheproperty’svariablename.Thisautomaticallysetsupalinkbetweenthesetwosothattheyknowtheyhavetoworkwiththesamedata.Additionally,itdeclaresthetypeofdatathatwewanttostoreinoursubshadervariables,whichwillcomeinhandywhenwelookatoptimizingshadersinalaterchapter.
Onceyouhavecreatedthesubshadervariables,youcanthenusethevaluesinthesurf()function.Inthiscase,wewanttoaddthe_Colorand_AmbientColorvariablestogetherandtakeittoapowerofwhateverthe_MySliderValuevariableisequaltointhematerial’sInspectortab.
ThevastmajorityofshadersstartoutasStandardShadersandgetmodifieduntiltheymatchthedesiredlook.WehavenowcreatedthefoundationforanySurfaceShaderyouwillcreatethatrequiresadiffusecomponent.
NoteMaterialsareassets.Thismeansthatanychangemadetothemwhileyourgameisrunningintheeditorarepermanent.Ifyouhavechangedthevalueofapropertybymistake,youcanundoitusingCtrl+Z.
There’smore…Likeanyotherprogramminglanguage,Cgdoesnotallowmistakes.Assuch,yourshaderwillnotworkifyouhaveatypoinyourcode.Whenthishappens,yourmaterialsarerenderedinunshadedmagenta:
Whenascriptdoesnotcompile,Unitypreventsyourgamefrombeingexportedorevenexecuted.Conversely,errorsinshadersdonotstopyourgamefrombeingexecuted.
Ifoneofyourshadersappearsasmagenta,itistimetoinvestigatewheretheproblemis.Ifyouselecttheincriminatedshader,youwillseealistoferrorsdisplayedinitsInspectortab:
Despiteshowingthelinethatraisedtheerror,itrarelymeansthatthisisthelinethathastobefixed.Theerrormessageshowninthepreviousimageisgeneratedbydeletingthesampler2D_MainTexvariablefromtheSubShader{}block.However,theerrorisraisedbythefirstlinethattriestoaccesssuchavariable.
Findingandfixingwhat’swrongwithcodeisaprocesscalleddebugging.Themostcommonmistakesthatyoushouldcheckforareasfollows:
Amissingbracket.Ifyouforgottoaddacurlybrackettocloseasection,thecompilerislikelytoraiseerrorsattheendofthedocument,atthebeginning,oranewsection.Amissingsemicolon.Oneofthemostcommonmistakesbutluckilyoneoftheeasiesttospotandfix.Errorsareoftenraisedbythefollowingline.ApropertythathasbeendefinedinthePropertiessectionbuthasnotbeencoupledwithavariableintheSubShader{}block.ConverselytowhatyoumightbeusedtoinC#scripts,floatingpointvaluesinCgdonotneedtothefollowedbyanf:it’s1.0,not1.0f.
Theerrormessagesraisedbyshaderscanbeverymisleading,especiallyduetotheirstrictsyntacticconstraints.Ifyouareindoubtabouttheirmeaning,it’sbesttosearchtheInternet.Unityforumsarefilledwithotherdeveloperswhoarelikelytohaveencountered(andfixed)yourproblembefore.
SeealsoMoreinformationonhowtomasterSurfaceShadersandtheirpropertiescanbefoundinChapter2,SurfaceShadersandTextureMapping.Ifyouarecurioustoseewhatshaderscanactuallydowhenusedattheirfullpotential,havealookatChapter10,AdvancedShadingTechniques,forsomeofthemostadvancedtechniquescoveredinthisbook.
Chapter2.SurfaceShadersandTextureMappingInthischapter,wewillexploreSurfaceShaders.Wewillstartfromaverysimplemattematerialandendwithholographicprojectionsandadvancedterrainsblending.Wecanalsousetexturestoanimate,blend,anddriveanyotherpropertythatwewant.Inthischapter,youwilllearnaboutthefollowingmethods:
DiffuseshadingUsingpackedarraysAddingatexturetoashaderScrollingtexturesbymodifyingUVvaluesNormalmappingCreatingatransparentmaterialCreatingaHolographicShaderPackingandblendingtexturesCreatingacirclearoundyourterrain
IntroductionSurfaceShadershavebeenintroducedinChapter1,CreatingYourFirstShader,asthemaintypeofshaderusedinUnity.Thischapterwillshowindetailwhattheseactuallyareandhowtheywork.Generallyspeaking,therearetwoessentialstepsineverySurfaceShader.First,youhavetospecifycertainphysicalpropertiesofthematerialthatyouwanttodescribe,suchasitsdiffusecolor,smoothness,andtransparency.Thesepropertiesareinitializedinafunctioncalledsurfacefunctionandstoredinastructurecalledsurfaceoutput.Secondly,thesurfaceoutputispassedtoalightingmodel.Thisisaspecialfunctionthatwillalsotakeinformationaboutthenearbylightsinthescene.Boththeseparametersarethenusedtocalculatethefinalcolorforeachpixelofyourmodel.Thelightingfunctioniswheretherealcalculationsofashadertakeplaceasit’sthepieceofcodethatdetermineshowlightshouldbehavewhenittouchesamaterial.
ThefollowingdiagramlooselysummarizeshowaSurfaceShaderworks.CustomlightingmodelswillbeexploredinChapter3,UnderstandingLightingModels,whileChapter5,VertexFunctions,willfocusonvertexmodifiers:
DiffuseshadingBeforestartingourjourneyintotexturemapping,itisimportanttounderstandhowdiffusematerialswork.Certainobjectsmighthaveauniformcolorandsmoothsurface,butnotsmoothenoughtoshineonreflectedlight.ThesemattematerialsarebestrepresentedwithaDiffuseshader.Whileintherealworld,purediffusematerialsdonotexist;Diffuseshadersarerelativelycheaptoimplementandfindalargeapplicationingameswithlow-polyaesthetics.
GettingreadyThereareseveralwaysinwhichyoucancreateyourownDiffuseshader.AquickwayistostartwiththeStandardShaderinUnity5andeditittoremoveanytexture,similarlytowhatwaspreviouslydoneinChapter1,CreatingYourFirstShader.
Howtodoit…Let’sstartwithourStandardShader,andapplythefollowingchanges:
1. Removeallthepropertiesexcept_Color:
_Color("Color",Color)=(1,1,1,1)
2. FromtheSubShader{}section,removethe_MainTex,_Glossiness,and_Metallicvariables.Youshouldnotremovethereferencetouv_MainTexasCgdoesnotallowtheInputstructtobeempty.Thevaluewillbesimplyignored.
3. Removethecontentofthesurf()functionandreplaceitwiththefollowing:
o.Albedo=_Color.rgb;
4. Yourshadershouldlookasfollows:
Shader"CookbookShaders/Diffuse"{
Properties{
_Color("Color",Color)=(1,1,1,1)
}
SubShader{
Tags{"RenderType"="Opaque"}
LOD200
CGPROGRAM
#pragmasurfacesurfStandardfullforwardshadows
#pragmatarget3.0
structInput{
float2uv_MainTex;
};
fixed4_Color;
voidsurf(InputIN,inoutSurfaceOutputStandardo){
o.Albedo=_Color.rgb;
}
ENDCG
}
FallBack"Diffuse"
}
AsthisshaderhasbeenrefittedfromaStandardShader,itwillusephysically-basedrenderingtosimulatehowlightbehavesonyourmodels.Ifyouaretryingtoachieveanon-photorealisticlook,youcanchangethefirst#pragmadirectivesothatitusesLambertratherthanStandard.Ifyoudoso,youshouldalsoreplaceSurfaceOutputStandardwithSurfaceOutput.
Howitworks…Thewayshadersallowyoutocommunicatetherenderingpropertiesofyourmaterialtotheirlightingmodelisviaasurfaceoutput.Itisbasicallyawrapperaroundalltheparametersthatthecurrentlightingmodelneeds.Itshouldnotsurpriseyouthatdifferentlightingmodelshavedifferentsurfaceoutputstructs.ThefollowingtableshowsthethreemainoutputstructsusedinUnity5andhowtheycanbeused:
Typeofshaders Unity4 Unity5
DiffuseAnySurfaceShaderSurfaceOutput
StandardSurfaceOutputStandard
SpecularAnySurfaceShaderSurfaceOutput
Standard(Specularsetup)SurfaceOutputStandardSpecular
TheSurfaceOutputstructhasthefollowingproperties:
fixed3Albedo;:Thisisthediffusecolorofthematerialfixed3Normal;:Thisisthetangentspacenormal,ifwrittenfixed3Emission;:Thisisthecolorofthelightemittedbythematerial(thispropertyisdeclaredashalf3intheStandardShaders)fixedAlpha;:ThisisthetransparencyofthematerialhalfSpecular;:Thisisthespecularpowerfrom0to1fixedGloss;:Thisisthespecularintensity
TheSurfaceOutputStandardstructhasthefollowingproperties:
fixed3Albedo;:Thisisthebasecolorofthematerial(whetherit’sdiffuseorspecular)fixed3Normal;
half3Emission;:Thispropertyisdeclaredashalf3,whileitwasdefinedasfixed3inSurfaceOutputfixedAlpha;
halfOcclusion;:Thisistheocclusion(default1)halfSmoothness;:Thisisthesmoothness(0=rough,1=smooth)halfMetallic;:0=non-metal,1=metal
TheSurfaceOutputStandardSpecularstructhasthefollowingproperties:
fixed3Albedo;.fixed3Normal;.half3Emission;.fixedAlpha;.halfOcclusion;.halfSmoothness;.fixed3Specular;:Thisisthespecularcolor.ThisisverydifferentfromtheSpecularpropertyinSurfaceOutputasitallowsspecifyingacolorratherthana
singlevalue.
UsingaSurfaceShadercorrectlyisamatterofinitializingthesurfaceoutputwiththecorrectvalues.
UsingpackedarraysLooselyspeaking,thecodeinsideashaderhastobeexecutedforatleasteverypixelinyourscreen.ThisisthereasonwhyGPUsarehighlyoptimizedforparallelcomputing.ThisphilosophyisalsoevidentinthestandardtypeofvariablesandoperatorsavailableinCg.Understandingthemisessentialnotjusttouseshaderscorrectly,butalsotowritehighlyoptimizedones.
Howtodoit…TherearetwotypesofvariablesinCg:singlevaluesandpackedarrays.Thelattercanbeidentifiedbecausetheirtypeendswithanumbersuchasfloat3orint4.Astheirnamessuggest,thesetypesofvariablesaresimilartostructs,whichmeansthattheyeachcontainseveralsinglevalues.Cgcallsthempackedarrays,thoughtheyarenotexactlyarraysinthetraditionalsense.
Theelementsofapackedarraycanbeaccessedasanormalstruct.Theyaretypicallycalledx,y,z,andw.However,Cgalsoprovidesyouwithanotheraliasforthem,thatis,r,g,b,anda.Despitetherebeingnodifferencebetweenusingxorr,itcanmakeahugedifferenceforthereaders.Shadercoding,infact,ofteninvolvescalculationwithpositionsandcolors.YoumighthaveseenthisintheStandardShaders:
o.Alpha=_Color.a;
Here,owasastructand_Colorwasapackedarray.ThisisalsowhyCgprohibitsthemixedusageofthesetwosyntaxes:youcannotuse_Color.xgz.
ThereisalsoanotherimportantfeatureofpackedarraysthathasnoequivalentinC#:swizzling.Cgallowsaddressingandreorderingelementswithinpackedarraysinjustasingleline.Onceagain,thisappearsintheStandardShader:
o.Albedo=_Color.rgb;
Albedoisfixed3,whichmeansthatitcontainsthreevaluesofthefixedtype.However,_Colorisdefinedasfixed4.Adirectassignmentwouldresultinacompilererroras_ColorisbiggerthanAlbedo.TheC#wayofdoingthiswouldbeasfollows:
o.Albedo.r=_Color.r;
o.Albedo.g=_Color.g;
o.Albedo.b=_Color.b;
However,itcanbecompressedinCg:
o.Albedo=_Color.rgb;
Cgalsoallowsreorderingelements,forinstance,using_Color.bgrtoswaptheredandbluechannels.
Lastly,whenasinglevalueisassignedtoapackedarray,itiscopiedtoallofitsfields:
o.Albedo=0;//Black=(0,0,0)
o.Albedo=1;//White=(1,1,1)
Thisisreferredtoassmearing.
Swizzlingcanalsobeusedontheleft-handsideofanexpression,allowingonlycertaincomponentsofapackedarraytobeoverwritten:
o.Albedo.rg=_Color.rg;
Inwhichcase,itiscalledmasking.
PackedmatricesWhereswizzlingreallyshowsitsfullpotentialiswhenappliedtopackedmatrices.Cgallowstypessuchasfloat4x4,whichrepresentsamatrixoffloatswithfourrowsandfourcolumns.Youcanaccessasingleelementofthematrixusingthe_mRCnotation,whereRistherowandCisthecolumn:
float4x4matrix;
//...
floatfirst=matrix._m00;
floatlast=matrix._m33;
The_mRCnotationcanalsobechained:
float4diagonal=matrix._m00_m11_m22_m33;
Anentirerowcanbeselectedusingsquaredbrackets:
float4firstRow=matrix[0];
//Equivalentto
float4firstRow=matrix._m00_m01_m02_m03;
SeealsoPackedarraysareoneofthenicestfeaturesofCg.Youcandiscovermoreaboutthemhere:
http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter02.html
AddingatexturetoashaderTexturescanbringourshaderstolifeveryquicklyintermsofachievingveryrealisticeffects.Inordertoeffectivelyusetextures,weneedtounderstandhowa2Dimageismappedtoa3Dmodel.Thisprocessiscalledtexturemapping,anditrequiressomeworktobedoneontheshaderand3Dmodelthatwewanttouse.Models,infact,aremadeoutoftriangles;eachvertexcanstoredatathatshaderscanaccess.OneofthemostimportantinformationstoredinverticesistheUVdata.Itconsistsoftwocoordinates,UandV,rangingfrom0to1.TheyrepresenttheXYpositionofthepixelinthe2Dimagethatwillbemappedtothevertices.UVdataispresentonlyforvertices;whentheinnerpointsofatrianglehavetobetexture-mapped,theGPUinterpolatestheclosestUVvaluestofindtherightpixelinthetexturetobeused.Thefollowingimageshowsyouhowa2Dtextureismappedtoatrianglefroma3Dmodel:
TheUVdataisstoredinthe3Dmodelandrequiresamodelingsoftwaretobeedited.SomemodelslacktheUVcomponent,hencetheycannotsupporttexturemapping.TheStanfordbunny,forexample,wasnotoriginallyprovidedwithone.
GettingreadyForthisrecipe,you’llneeda3DmodelwithUVdataanditstexture.TheybothneedtobeimportedtoUnitybeforestarting.Youcandothissimplybydraggingthemtotheeditor.AstheStandardShadersupportstexturemappingbydefault,we’llusethisandthenexplainindetailhowitworks.
Howtodoit…AddingatexturetoyourmodelusingtheStandardShaderisincrediblysimple,asfollows:
1. CreateanewStandardShadercalledTexturedShader.2. CreateanewmaterialcalledTexturedMaterial.3. Assigntheshadertothematerialbydraggingoverit.4. Afterselectingthematerial,dragyourtexturetotheemptyrectanglecalledAlbedo
(RGB).Ifyouhavefollowedallthesestepscorrectly,yourmaterialInspectortabshouldlooklikethis:
TheStandardShaderknowshowtomapa2Dimagetoa3DmodelusingitsUVdata.
Howitworks…WhentheStandardShaderisusedfromtheinspectorofamaterial,theprocessbehindtexturemappingiscompletelytransparenttodevelopers.Ifwewanttounderstandhowitworks,it’snecessarytotakeacloserlookatTexturedShader.FromthePropertiessection,wecanseethattheAlbedo(RGB)textureisactuallyreferredtointhecodeas_MainTex:
_MainTex("Albedo(RGB)",2D)="white"{}
IntheCGPROGRAMsection,thistextureisdefinedassampler2D,thestandardtypefor2Dtextures:
sampler2D_MainTex;
ThenextlineshowsastructcalledInput.Thisistheinputparameterforthesurfacefunctionandcontainsapackedarraycalleduv_MainTex:
structInput{
float2uv_MainTex;
};
Everytimethesurf()surfacefunctioniscalled,theInputstructurewillcontaintheUVof_MainTexforthespecificpointofthe3Dmodelthatneedstoberendered.TheStandardShaderrecognizesthatthenameuv_MainTexrefersto_MainTexandinitializesitautomatically.IfyouareinterestedinunderstandinghowtheUVisactuallymappedfroma3Dspacetoa2Dtexture,youcancheckChapter3,UnderstandingLightingModels.
Finally,theUVdataisusedtosamplethetextureinthefirstlineofthesurfacefunction:
fixed4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
Thisisdoneusingthetex2D()functionofCg;ittakesatextureandUVandreturnsthecolorofthepixelatthatposition.
NoteTheUandVcoordinatesgofrom0to1,where(0,0)and(1,1)correspondtotwooppositecorners.DifferentimplementationsassociateUVwithdifferentcorners;ifyourtexturehappenstoappearreversed,tryinvertingtheVcomponent.
There’smore…WhenyouimportatexturetoUnity,youaresettingupsomeofthepropertiesthatsampler2Dwilluse.ThemostimportantistheFiltermode,whichdetermineshowcolorsareinterpolatedwhenthetextureissampled.ItisveryunlikelythattheUVdatawillpointexactlytothecenterofapixel;inalltheothercases,youmightwanttointerpolatebetweentheclosestpixelstogetamoreuniformcolor.ThefollowingisthescreenshotoftheInspectortabofanexampletexture:
Formostapplications,Bilinearprovidesaninexpensiveyeteffectivewaytosmooththetexture.Ifyouarecreatinga2Dgame,however,Bilinearmightproduceblurredtiles.Inthiscase,youcanusePointtoremoveanyinterpolationfromthetexturesampling.
Whenatextureisseenfromasteepangle,texturesamplingislikelytoproducevisuallyunpleasantartifacts.YoucanreducethembysettingAnisoLeveltoahighervalue.Thisisparticularusefulforfloorandceilingtextures,whereglitchescanbreaktheillusionofcontinuity.
SeealsoIfyouwouldliketoknowmoreabouttheinnerworkingofhowtexturesaremappedtoa3Dsurface,youcanreadtheinformationavailableathttp://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter03.html.
Foracompletelistoftheoptionsavailablewhenimportinga2Dtexture,youcanrefertothefollowingwebsite:
http://docs.unity3d.com/Manual/class-TextureImporter.html
ScrollingtexturesbymodifyingUVvaluesOneofthemostcommontexturetechniquesusedintoday’sgameindustryistheprocessofallowingyoutoscrollthetexturesoverthesurfaceofanobject.Thisallowsyoutocreateeffectssuchaswaterfalls,rivers,lavaflows,andsoon.It’salsoatechniquethatisthebasistocreateanimatedspriteeffects,butwewillcoverthisinasubsequentrecipeofthischapter.Let’sfirstseehowwewillcreateasimplescrollingeffectinaSurfaceShader.
GettingreadyTobeginthisrecipe,youwillneedtocreateanewshaderfileandmaterial.Thiswillsetusupwithanicecleanshaderthatwecanusetostudythescrollingeffectbyitself.
Howtodoit…Tobeginwith,wewilllaunchournewshaderfilethatwejustcreatedandenterthecodementionedinthefollowingsteps:
1. Theshaderwillneedtwonewpropertiesthatwillallowustocontrolthespeedofthetexturescrolling.So,let’saddaspeedpropertyfortheXdirectionandaspeedpropertyfortheYdirection,asshowninthefollowingcode:
Properties{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
_MainTex("Base(RGB)",2D)="white"{}
_ScrollXSpeed("XScrollSpeed","Range(0,10))=2
_ScrollYSpeed("YScrollSpeed","Range(0,10))=2
}
2. ModifytheCgpropertiesintheCGPROGRAMsectionandcreatenewvariablessothatwecanaccessthevaluesfromourproperties:
fixed4_MainTint;
fixed_ScrollXSpeed;
fixed_ScrollYSpeed;
sampler2D_MainTex;
3. ModifythesurfacefunctiontochangetheUVsgiventothetex2D()function.Then,usethebuilt-in_TimevariabletoanimatetheUVsovertimewhentheplaybuttonispressedintheeditor:
voidsurf(InputIN,inoutSurfaceOutputo)
{
//CreateaseparatevariabletostoreourUVs
//beforewepassthemtothetex2D()function
fixed2scrolledUV=IN.uv_MainTex;
//Createvariablesthatstoretheindividualxandy
//componentsfortheUV'sscaledbytime
fixedxScrollValue=_ScrollXSpeed*_Time;
fixedyScrollValue=_ScrollYSpeed*_Time;
//ApplythefinalUVoffset
scrolledUV+=fixed2(xScrollValue,yScrollValue);
//Applytexturesandtint
half4c=tex2D(_MainTex,scrolledUV);
o.Albedo=c.rgb*_MainTint;
o.Alpha=c.a;
}
ThefollowingimagedemonstratestheresultofutilizingthescrollingUVsystemtocreateasimplerivermotionforyourenvironments.YoucannoticethiseffectinthescenecalledScrollingUVsfromthecodefilesprovidedwiththisbook:
Howitworks…Thescrollingsystemstartswiththedeclarationofacoupleofproperties,whichwillallowtheuserofthisshadertoincreaseordecreasethespeedofthescrollingeffectitself.Attheircore,theyarefloatvaluesbeingpassedfromthematerial’sInspectortabtothesurfacefunctionoftheshader.Formoreinformationonshaderproperties,seeChapter1,CreatingYourFirstShader.
Oncewehavethesefloatvaluesfromthematerial’sInspectortab,wecanusethemtooffsetourUVvaluesintheshader.
Tobeginthisprocess,wefirststoretheUVsinaseparatevariablecalledscrolledUV.Thisvariablehastobefloat2/fixed2becausetheUVvaluesarebeingpassedtousfromtheInputstructure:
structInput
{
float2uv_MainTex;
}
Oncewehaveaccesstothemesh’sUVs,wecanoffsetthemusingourscrollspeedvariablesandbuilt-in_Timevariable.Thisbuilt-invariablereturnsavariableofthefloat4type,meaningthateachcomponentofthisvariablecontainsdifferentvaluesoftimeasitpertainstogametime.
Acompletedescriptionoftheseindividualtimevaluesaredescribedatthefollowinglink:http://docs.unity3d.com/Manual/SL-UnityShaderVariables.html
This_TimevariablewillgiveusanincrementedfloatvaluebasedonUnity’sgametimeclock.So,wecanusethisvaluetomoveourUVsinaUVdirectionandscalethattimewithourscrollspeedvariables:
//Createvariablesthatstoretheindividualxandy
//componentsfortheuv'sscaledbytime
fixedxScrollValue=_ScrollXSpeed*_Time;
fixedyScrollValue=_ScrollYSpeed*_Time;
Withthecorrectoffsetbeingcalculatedbytime,wecanaddthenewoffsetvaluebacktotheoriginalUVposition.Thisiswhyweareusingthe+=operatorinthenextline.WewanttotaketheoriginalUVposition,addthenewoffsetvalue,andthenpassthistothetex2D()functionasthetexture’snewUVs.Thiscreatestheeffectofthetexturemovingonthesurface.WearereallymanipulatingtheUVs,sowearefakingtheeffectofthetexturemoving:
scrolledUV+=fixed2(xScrollValue,yScrollValue);
half4c=tex2D(_MainTex,scrolledUV);
NormalmappingEverytriangleofa3Dmodelhasafacingdirection,whichisthedirectionthatitispointingtoward.Itisoftenrepresentedwithanarrowplacedinthecenterofthetriangleandorthogonaltothesurface.Thefacingdirectionplaysanimportantroleinthewaylightreflectsonasurface.Iftwoadjacenttrianglesfacedifferentdirections,theywillreflectlightsatdifferentangles,hencethey’llbeshadeddifferently.Forcurvedobjects,thisisaproblem:itisobviousthatthegeometryismadeoutofflattriangles.
Toavoidthisproblem,thewaythelightreflectsonatriangledoesn’ttakeintoaccountitsfacingdirection,butitsnormaldirectioninstead.AsstatedinAddingatexturetoashaderrecipe,verticescanstoredata;thenormaldirectionisthemostusedinformationaftertheUVdata.Thisisavectorofunitlengththatindicatesthedirectionfacedbythevertex.Regardlessofthefacingdirection,everypointwithinatrianglehasitsownnormaldirectionthatisalinearinterpolationoftheonesstoredinitsvertices.Thisgivesustheabilitytofaketheeffectofhigh-resolutiongeometryonalow-resolutionmodel.Thefollowingimageshowsthesamegeometricshaperenderedwithdifferentper-vertexnormals.Intheimageontheleft,normalsareorthogonaltothefacerepresentedbyitsvertices;thisindicatesthatthereisaclearseparationbetweeneachface.Ontheright,normalsareinterpolatedalongthesurface,indicatingthatevenifthesurfaceisrough,lightshouldreflectasifit’ssmooth.It’seasytoseethatevenifthethreeobjectsinthefollowingimagesharethesamegeometry,theyreflectlightdifferently.Despitebeingmadeoutofflattriangles,theobjectontherightreflectslightasifitssurfacewasactuallycurved:
Smoothobjectswithroughedgesareaclearindicationthatper-vertexnormalshavebeeninterpolated.Thiscanbeseenifwedrawthedirectionofthenormalstoredineveryvertex,asshowninthefollowingimage.Youshouldnotethateverytrianglehasonlythreenormals,butasmultipletrianglescansharethesamevertex,morethanonelinecancomeoutofit:
Calculatingthenormalsfromthe3Dmodelisatechniquethathasrapidlydeclinedinfavorofamoreadvancedone—normalmapping.Similartowhathappenswithtexturemapping,thenormaldirectionscanbeprovidedusinganadditionaltexture,usuallycallednormalmaporbumpmap.NormalmapsareusuallyRGBimages,wheretheRGBcomponentsareusedtoindicatetheX,Y,andZcomponentsofthenormaldirection.Therearemanywaystocreatenormalmapsthesedays.SomeapplicationssuchasCrazyBump(http://www.crazybump.com/)andNDOPainter(http://quixel.se/ndo/)willtakein2Ddataandconvertittonormaldataforyou.OtherapplicationssuchasZbrush4R7(http://www.pixologic.com/)andAUTODESK(http://usa.autodesk.com)willtake3Dsculpteddataandcreatenormalmapsforyou.Theactualprocessofcreatingnormalmapsisdefinitelyoutofthescopeofthisbook,butthelinksintheprevioustextshouldhelpyougetstarted.
UnitymakestheprocessofaddingnormalstoyourshadersquiteaneasyprocessintheSurfaceShaderrealmusingtheUnpackNormals()function.Let’sseehowthisisdone.
GettingreadyCreateanewmaterialandshaderandsetthemuponanewobjectintheSceneview.Thiswillgiveusacleanworkspaceinwhichwecanlookatjustthenormalmappingtechnique.
Youwillneedanormalmapforthisrecipe,butthereisalsooneintheUnityprojectincludedwiththisbook.
Anexamplenormalmapincludedwiththisbook’scontentsisshownhere:
Howtodoit…Thefollowingarethestepstocreateanormalmapshader:
1. Let’sgetthePropertiesblocksetupinordertohaveacolortintandtexture:
Properties
{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
_NormalTex("NormalMap",2D)="bump"{}
}
NoteByinitializingthetextureasbump,wearetellingUnitythat_NormalTexwillcontainanormalmap.Ifthetextureisnotset,itwillbereplacedbyagreytexture.Thecolorused(0.5,0.5,0.5,1)indicatesnobumpatall.
2. LinkthepropertiestotheCgprogrambydeclaringtheminSubShader{}belowtheCGPROGRAMstatement:
CPROGRAM
#pragmasurfacesurfLambert
//LinkthepropertytotheCGprogram
sampler2D_NormalTex;
float4_MainTint;
3. WeneedtomakesurethatweupdatetheInputstructwiththepropervariablenamesothatwecanusethemodel’sUVsforthenormalmaptexture:
//MakesureyougettheUVsforthetextureinthestruct
structInput
{
float2uv_NormalTex;
}
4. Finally,weextractthenormalinformationfromthenormalmaptextureusingthebuilt-inUnpackNormal()function.Then,youonlyhavetoapplythesenewnormalstotheoutputoftheSurfaceShader:
//Getthenormaldataoutofthenormalmaptexture
//usingtheUnpackNormalfunction
float3normalMap=UnpackNormal(tex2D(_NormalTex,IN.uv_NormalTex));
//Applythenewnormaltothelightingmodel
o.Normal=normalMap.rgb;
Thefollowingimagedemonstratestheresultofournormalmapshader:
NoteShaderscanhavebothatexturemapandnormalmap.ItisnotuncommontousethesameUVdatatoaddressboth.However,itispossibletoprovideasecondarysetofUVsinthevertexdata(UV2)specificallyusedforthenormalmap.
Howitworks…Theactualmathtoperformthenormalmappingeffectisdefinitelybeyondthescopeofthischapter,butUnityhasdoneitallforusalready.Ithascreatedthefunctionsforussothatwedon’thavetokeepdoingitoverandoveragain.ThisisanotherreasonwhySurfaceShadersareareallyefficientwaytowriteshaders.
IfyoulookintheUnityCG.cgincfilefoundintheDatafolderinyourUnityinstallationdirectory,youwillfindthedefinitionsfortheUnpackNormal()function.WhenyoudeclarethisfunctioninyourSurfaceShader,Unitytakestheprovidednormalmapandprocessesitforyouandgivesyouthecorrecttypeofdatasothatyoucanuseitinyourper-pixellightingfunction.It’sahugetime-saver!Whensamplingatexture,yougetRGBvaluesfrom0to1;however,thedirectionsofanormalvectorrangefrom-1to+1.UnpackNormal()bringsthesecomponentsintherightrange.
OnceyouhaveprocessedthenormalmapwiththeUnpackNormal()function,yousenditbacktoyourSurfaceOutputstructsothatitcanbeusedinthelightingfunction.Thisisdonebyo.Normal=normalMap.rgb;.WewillseehowthenormalisactuallyusedtocalculatethefinalcolorofeachpixelinChapter3,UnderstandingLightingModels.
There’smore…Youcanalsoaddsomecontrolstoyournormalmapshaderthatletsauseradjusttheintensityofthenormalmap.Thisiseasilydonebymodifyingthexandycomponentsofthenormalmapvariableandthenaddingitallbacktogether.AddanotherpropertytothePropertiesblockandnameit_NormalMapIntensity:
_NormalMapIntensity("Normalintensity",Range(0,1))=1
Multiplythexandycomponentsoftheunpackednormalmapandreapplythisvaluetothenormalmapvariable:
fixed3n=UnpackNormal(tex2D(_BumpTex,IN.uv_uv_MainTex)).rgb;
n.x*=_NormalMapIntensity;
n.y*=_NormalMapIntensity;
o.Normal=normalize(n);
NoteNormalvectorsaresupposedtohavelengthsequaltoone.Multiplyingthemfor_NormalMapIntensitychangestheirlength,makingnormalizationnecessary.
Now,youcanletauseradjusttheintensityofthenormalmapinthematerial’sInspectortab.Thefollowingimageshowstheresultofmodifyingthenormalmapwithourscalarvalues:
CreatingatransparentmaterialAlltheshadersseensofarhavesomethingincommon—theyareusedforsolidmaterials.Ifyouwanttoimprovethelookofyourgame,transparentmaterialsareoftenagoodwaytostart.Theycanbeusedforanythingfromafireeffecttoawindowglass.Workingwiththem,unfortunately,isslightlymorecomplicated.Beforerenderingsolidmodels,Unityordersthemaccordingtothedistancefromthecamera(Zordering)andskipsallthetrianglesthatarefacingawayfromthecamera(culling).Whenrenderingtransparentgeometries,thereareinstancesinwhichthesetwoaspectscancauseproblems.ThisrecipewillshowyouhowtosolvesomeoftheseissueswhenitcomestocreatingatransparentSurfaceShader.ThistopicwillbeheavilyrevisitedinChapter6,FragmentShadersandGrabPasses,whererealisticglassandwatershaderswillbeprovided.
GettingreadyThisreciperequiresanewshader,whichwe’llbecallingTransparent,andanewmaterialsothatitcanbeattachedtoanobject.Asthisisgoingtobeatransparentglasswindow,aquadorplaneisperfect.Wewillalsoneedseveralothernon-transparentobjectstotesttheeffect.Inthisexample,wewilluseaPNGfortheglasstexture.Thealphachanneloftheimagewillbeusedtodeterminethetransparencyoftheglass.Theprocessofcreatingsuchanimagedependsonthesoftwarethatyouareusing.However,thesearethemainstepsthatyouwillneedtofollow:
1. Findtheimageoftheglassyouwantforyourwindows.2. Openitwithaphotoeditingsoftware,suchasGIMPorPhotoshop.3. Selectthepartsoftheimagethatyouwanttobesemi-transparent.4. Createawhite(fullopacity)layermaskonyourimage.5. Usetheselectionpreviouslymadetofillthelayermaskwithadarkercolor.6. SavetheimageandimportittoUnity.
ThetoyimageusedinthisrecipeisapictureofastainedglassfromtheMeauxCathedralinFrance(https://en.wikipedia.org/wiki/Stained_glass).Ifyouhavefollowedallthesteps,yourimageshouldlooklikethis(RGBchannelsontheleft,andAchannelontheright):
Howtodoit…Asmentionedpreviously,thereareafewaspectsthatweneedtotakecareofwhileusingaTransparentShader:
1. IntheSubShader{}sectionoftheshader,addthefollowingtagsthatsignaltheshaderistransparent:
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
}
2. Asthisshaderisdesignedfor2Dmaterials,makesurethatthebackgeometryofyourmodelisnotdrawnbyaddingthefollowing:
CullBack
3. Telltheshaderthatthismaterialistransparentandneedstobeblendedwithwhatwasdrawnonthescreenbefore:
#pragmasurfacesurfStandardalpha:fade
4. UsethisSurfaceShadertodeterminethefinalcolorandtransparencyoftheglass:
voidsurf(InputIN,inoutSurfaceOutputStandardo)
{
float4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
o.Albedo=c.rgb;
o.Alpha=c.a;
}
Howitworks…Thisshaderintroducesseveralnewconcepts.Firstofall,Tagsareusedtoaddinformationabouthowtheobjectisgoingtoberendered.ThereallyinterestingonehereisQueue.Unity,bydefault,willsortyourobjectsforyoubasedonthedistancefromthecamera.So,asanobjectgetsnearertothecamera,itisgoingtobedrawnoveralltheobjectsthatarefurtherawayfromthecamera.Formostcases,thisworksoutjustfineforgames,butyouwillfindcertainsituationswhereyouwillwanttohavemorecontroloverthesortingofyourobjectsinyourscene.Unityhasprovideduswithsomedefaultrenderqueues,eachwithauniquevaluethatdirectsUnitywhentodrawtheobjecttothescreen.Thesebuilt-inrenderqueuesarecalledBackground,Geometry,AlphaTest,Transparent,andOverlay.Thesequeuesweren’tjustcreatedarbitrarily;theyactuallyserveapurposetomakeourliveseasierwhenwritingshadersandinteractingwiththereal-timerenderer.Refertothefollowingtablefordescriptionsontheusageofeachoftheseindividualrenderqueues:
Renderqueue Renderqueuedescription
Renderqueuevalue
Background Thisrenderqueueisrenderedfirst.Itisusedforskyboxesandsoon. 1000
GeometryThisisthedefaultrenderqueue.Thisisusedformostobjects.Opaquegeometryusesthisqueue.
2000
AlphaTestAlpha-testedgeometryusesthisqueue.It’sdifferentfromtheGeometryqueueasit’smoreefficienttorenderalpha-testedobjectsafterallthesolidobjectsaredrawn.
2450
Transparent
ThisrenderqueueisrenderedafterGeometryandAlphaTestqueuesinback-to-frontorder.Anythingalpha-blended(thatis,shadersthatdon’twritetothedepthbuffer)shouldgohere,forexample,glassandparticleeffects.
3000
OverlayThisrenderqueueismeantforoverlayeffects.Anythingrenderedlastshouldgohere,forexample,lensflares.
4000
So,onceyouknowwhichrenderqueueyourobjectbelongsto,youcanassignitsbuilt-inrenderqueuetag.OurshaderusedtheTransparentqueue,sowewroteTags{"Queue"="Trasparent"}.
NoteThefactthattheTransparentqueueisrenderedafterGeometrydoesnotmeanthatourglasswillappearontopofalltheothersolidobjects.Unitywilldrawtheglasslast,butitwillnotrenderpixelsthatbelongtopiecesofgeometryhiddenbehindsomethingelse.ThiscontrolisdoneusingatechniquecalledZBuffering.Moreinformationonhowmodelsarerenderedcanbefoundathttp://docs.unity3d.com/Manual/SL-CullAndDepth.html.
TheIgnoreProjectortagmakesthisobjectunaffectedbyUnity’sprojectors.Lastly,RenderTypeplaysaroleinshaderreplacement,atopicthatwillbecoveredbrieflyinChapter9,GameplayandScreenEffects.
Thelastconceptintroducedisalpha:fade.Thisindicatesthatallthepixelsfromthismaterialhavetobeblendedwithwhatwasonthescreenbeforeaccordingtotheiralphavalues.Withoutthisdirective,thepixelswillbedrawninthecorrectorder,buttheywon’thaveanytransparency.
CreatingaHolographicShaderMoreandmorespace-themedgamesarebeingreleasedeveryyear.Animportantpartofagoodsci-figameisthewayfuturistictechnologyispresentedandintegratedinthegameplay.There’snothingthatscreamsfuturisticmorethanholograms.Despitebeingpresentinmanyflavors,hologramsareoftenrepresentedassemi-transparent,thinprojectionsofanobject.Thisrecipeshowsyouhowtocreateashaderthatsimulatessucheffects.Takethisasastartingpoint:youcanaddnoise,animatedscanlines,andvibrationstocreateatrulyoutstandingholographiceffect.Thefollowingimageshowsanexampleofaholographiceffect:
GettingreadyAstheholographiceffectsshowsonlytheoutlinesofanobject,we’llcallthisshaderSilhouette.Attachittoamaterialandassignittoyour3Dmodel.
Howtodoit…Thefollowingchangeswillmodifyourexistingshaderintoaholographicone:
1. Addthefollowingpropertytotheshader:
_DotProduct("Rimeffect",Range(-1,1))=0.25
2. AdditsrespectivevariabletotheCGPROGRAMsection:
float_DotProduct;
3. Asthismaterialistransparent,addthefollowingtags:
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
}
NoteAccordingtothetypeofobjectthatyouwilluse,youmightwantitsbacksidetoappear.Ifthisisthecase,addCullOffsothatthebackofthemodelwon’tberemoved(culled).
4. Thisshaderisnottryingtosimulatearealisticmaterial,sothereisnoneedtousethePBRlightingmodel.TheLambertianreflectance,whichisverycheap,isusedinstead.Additionally,weshoulddisableanylightingwithnolightingandsignaltoCgthatthisisaTransparentShaderusingalpha:fade:
#pragmasurfacesurfLambertalpha:fadenolighting
5. ChangetheInputstructuresothatUnitywillfillitwiththecurrentviewdirectionandworldnormaldirection:
structInput
{
float2uv_MainTex;
float3worldNormal;
float3viewDir;
};
6. Usethefollowingsurfacefunction.RememberthatasthisshaderisusingtheLambertianreflectanceasitslightingfunction,thenameofthesurfaceoutputstructureshouldbechangedaccordinglytoSurfaeOutputinsteadofSurfaceOutputStandard:
voidsurf(InputIN,inoutSurfaceOutputo)
{
float4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
o.Albedo=c.rgb;
floatborder=1-(abs(dot(IN.viewDir,IN.worldNormal)));
floatalpha=(border*(1-_DotProduct)+_DotProduct);
o.Alpha=c.a*alpha;
}
YoucannowusetheRimeffectslidertochoosethestrengthoftheholographiceffect.
Howitworks…Asmentionedbefore,thisshaderworksbyshowingonlythesilhouetteofanobject.Ifwelookattheobjectfromanotherangle,itsoutlinewillchange.Geometricallyspeaking,theedgesofamodelareallthosetriangleswhosenormaldirectionisorthogonal(90degrees)tothecurrentviewdirection.TheInputstructuredeclarestheseparameters,worldNormalandviewDir,respectively.
Theproblemofunderstandingwhentwovectorsareorthogonalcanbesolvedusingthedotproduct.It’sanoperatorthattakestwovectorsandreturnszeroiftheyareorthogonal.Weuse_DotProducttodeterminehowclosetozerothedotproducthastobeforthetriangletofadecompletely.
Thesecondaspectthatisusedinthisshaderisthegentlefadingbetweentheedgeofthemodel(fullyvisible)andtheangledeterminedby_DotProduct(invisible).Thislinearinterpolationisdoneasfollows:
floatalpha=(border*(1-_DotProduct)+_DotProduct);
Finally,theoriginalalphafromthetextureismultipliedwiththenewlycalculatedcoefficienttoachievethefinallook.
There’smore…Thistechniqueisverysimpleandrelativelyinexpensive.Yet,itcanbeusedforalargevarietyofeffects,suchasthefollowing:
Theslightlycoloredatmosphereofaplanetinsci-figamesTheedgeofanobjectthathasbeenselectedoriscurrentlyunderthemouseAghostorspecterSmokecomingoutofanengineTheshockwaveofanexplosionThebubbleshieldofaspaceshipunderattack
SeealsoThedotproductplaysanimportantroleinthewayreflectionsarecalculated.Chapter3,UnderstandingLightingModels,willexplainindetailhowitworksandwhyitiswidelyusedinsomanyshaders.
PackingandblendingtexturesTexturesareusefultostorenotonlyloadsofdata,notjustpixelcolorsaswegenerallytendtothinkofthem,butalsoformultiplesetsofpixelsinboththexandydirectionsandRGBAchannels.WecanactuallypackmultipleimagesintoonesingleRGBAtextureanduseeachoftheR,G,B,andAcomponentsasindividualtexturesthemselvesbyextractingeachofthesecomponentsintheshadercode.
TheresultofpackingindividualgrayscaleimagesintoasingleRGBAtexturecanbeseeninthefollowingimage:
Whyisthishelpful?Well,intermsoftheamountofactualmemorythatyourapplicationtakesup,texturesarealargeportionofyourapplication’ssize.So,tobeginreducingthesizeofyourapplication,wecanlookatalloftheimagesthatweareusinginourshaderandseeifwecanmergethesetexturesintoasingletexture.
AnytexturethatisgrayscalecanbepackedintooneoftheRGBAchannelsofanothertexture.Thismightsoundabitoddatfirst,butthisrecipeisgoingtodemonstrateoneoftheusesofpackingatextureandusingthesepackedtexturesinashader.
Oneexampleofusingthesepackedtexturesiswhenyouwanttoblendasetoftexturestogetherontoasinglesurface.Youseethismostofteninterraintypeshaders,whereyouneedtoblendintoanothertexturenicelyusingsomesortofcontroltextureorthepackedtexture,inthiscase.Thisrecipecoversthistechniqueandshowsyouhowyoucanconstructthebeginningsofanicefour-textureblendedterrainshader.
GettingreadyLet’screateanewshaderfileinyourShadersfolderandthencreateanewmaterialforthisshader.Thenamingconventionisentirelyuptoyouforyourshaderandmaterialfiles,sotryyourbesttokeepthemorganizedandeasytoreferencelateron.
Onceyouhaveyourshaderandmaterialready,createanewsceneinwhichwecantestourshader.
Youwillalsoneedtogatherupfourtexturesthatyouwouldwanttoblendtogether.Thesecanbeanything,butforaniceterrainshader,youwillwantgrass,dirt,rockydirt,androcktextures.
Thesearethecolortexturesthatwewillbeusingforthisrecipe,whichareincludedwiththisbook.
Finally,wewillalsoneedablendingtexturethatispackedwithgrayscaleimages.Thiswillgiveusthefourblendingtexturesthatwecanusetodirecthowthecolortextureswillbeplacedontheobjectsurface.
Wecanuseveryintricateblendingtexturestocreateaveryrealisticdistributionofterraintexturesoveraterrainmesh,asseeninthefollowingimage:
Howtodoit…Let’slearnhowtousepackedtexturesbyenteringthecodeshowninthefollowingsteps:
1. WeneedtoaddafewpropertiestoourPropertiesblock.Wewillneedfivesampler2Dobjects,ortextures,andtwocolorproperties:
Properties
{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
//Addthepropertiesbelowsowecaninputallofourtextures
_ColorA("TerrainColorA",Color)=(1,1,1,1)
_ColorB("TerrainColorB",Color)=(1,1,1,1)
_RTexture("RedChannelTexture",2D)=""{}
_GTexture("GreenChannelTexture",2D)=""{}
_BTexture("BlueChannelTexture",2D)=""{}
_ATexture("AlphaChannelTexture",2D)=""{}
_BlendTex("BlendTexture",2D)=""{}
}
2. WethenneedtocreatetheSubShader{}sectionvariablesthatwillbeourlinktothedatainthePropertiesblock:
CGPROGRAM
#pragmasurfacesurfLambert
float4_MainTint;
float4_ColorA;
float4_ColorB;
sampler2D_RTexture;
sampler2D_GTexture;
sampler2D_BTexture;
sampler2D_BlendTex;
sampler2D_ATexture;
3. So,nowwehaveourtexturepropertiesandwearepassingthemtoourSubShader{}function.Inordertoallowtheusertochangethetilingratesonaper-texturebasis,wewillneedtomodifyourInputstruct.Thiswillallowustousethetilingandoffsetparametersoneachtexture:
structInput
{
float2uv_RTexture;
float2uv_GTexture;
float2uv_BTexture;
float2uv_ATexture;
float2uv_BlendTex;
};
4. Inthesurf()function,getthetextureinformationandstorethemintheirownvariablessothatwecanworkwiththedatainaclean,easy-to-understandway:
//Getthepixeldatafromtheblendtexture
//weneedafloat4herebecausethetexture
//willreturnR,G,B,andAorX,Y,Z,andW
float4blendData=tex2D(_BlendTex,IN.uv_BlendTex);
//Getthedatafromthetextureswewanttoblend
float4rTexData=tex2D(_RTexture,IN.uv_RTexture);
float4gTexData=tex2D(_GTexture,IN.uv_GTexture);
float4bTexData=tex2D(_BTexture,IN.uv_BTexture);
float4aTexData=tex2D(_ATexture,IN.uv_ATexture);
5. Let’sblendeachofourtexturestogetherusingthelerp()function.Ittakesthreearguments,lerp(value:a,value:b,blend:c).Thelerp()functiontakesintwotexturesandblendsthemwiththefloatvaluegiveninthelastargument:
//NoweneedtocontructanewRGBAvalueandaddall
//thedifferentblendedtexturebacktogether
float4finalColor;
finalColor=lerp(rTexData,gTexData,blendData.g);
finalColor=lerp(finalColor,bTexData,blendData.b);
finalColor=lerp(finalColor,aTexData,blendData.a);finalColor.a=
1.0;
6. Finally,wemultiplyourblendedtextureswiththecolortintvaluesandusetheredchanneltodeterminewherethetwodifferentterraintintcolorsgo:
//Addonourterraintintingcolors
float4terrainLayers=lerp(_ColorA,_ColorB,blendData.r);
finalColor*=terrainLayers;
finalColor=saturate(finalColor);
o.Albedo=finalColor.rgb*_MainTint.rgb;
o.Alpha=finalColor.a;
Theresultofblendingtogetherfourterraintexturesandcreatingaterraintintingtechniquecanbeseeninthefollowingimage:
Howitworks…Thismightseemlikequiteafewlinesofcode,buttheconceptbehindblendingisactuallyquitesimple.Forthetechniquetowork,wehavetoemploythebuilt-inlerp()functionfromtheCgFXstandardlibrary.Thisfunctionallowsustopickavaluebetweenargumentoneandargumenttwousingargumentthreeastheblendamount:
Function Description
lerp(a,b,
f)
Thisinvolveslinearinterpolation:(1–f)*a+b*f
Here,aandbarematchingvectororscalartypes.Thefparametercanbeeitherascalarorvectorofthesametypeasaandb.
So,forexample,ifwewantedtofindthemid-valuebetween1and2,wecouldfeedthevalue0.5asthethirdargumenttothelerp()functionanditwouldreturnthevalue1.5.ThisworksperfectlyforourblendingneedsasthevaluesofanindividualchannelinanRGBAtexturearesinglefloatvalues,usuallyintherangeof0to1.
Intheshader,wesimplytakeoneofthechannelsfromourblendtextureanduseittodrivethecolorthatispickedinalerp()functionforeachpixel.Forinstance,wetakeourgrasstextureanddirttexture,usetheredchannelfromourblendingtexture,andfeedthistoalerp()function.Thiswillgiveusthecorrectblendedcolorresultforeachpixelonthesurface.
Amorevisualrepresentationofwhatishappeningwhenusingthelerp()functionisshowninthefollowingimage:
Theshadercodesimplyusesthefourchannelsoftheblendtextureandallthecolortexturestocreateafinalblendedtexture.Thisfinaltexturethenbecomesourcolorthatwecanmultiplywithourdiffuselighting.
CreatingacirclearoundyourterrainManyRTSgamesdisplaydistances(rangeattack,movingdistance,sight,andsoon)bydrawingacirclearoundtheselectedunit.Iftheterrainisflat,thiscanbedonesimplybystretchingaquadwiththetextureofacircle.Ifthat’snotthecase,thequadwillmostlikelybeclippedbehindahilloranotherpieceofgeometry.Thisrecipewillshowyouhowtocreateashaderthatallowsyoutodrawcirclesaroundanobjectofarbitrarycomplexity.Ifyouwanttobeabletomoveoranimateyourcircle,wewillneedbothashaderandC#script.Thefollowingimageshowsanexampleofdrawingacircleinahillyregionusingashader:
GettingreadyDespiteworkingwitheverypieceofgeometry,thistechniqueisorientedtoterrains.Hence,thefirststepissettingupaterraininUnity.
1. Let’sstartbycreatinganewshadercalledRadiusShaderandtherespectivematerial,Radius.
2. Havethecharacterforyourobjectready;wewilldrawacirclearoundit.3. Fromthemenu,navigatetoGameObject|3DObject|Terraintocreateanew
terrain.4. Createthegeometryforyourterrain.Youcaneitherimportanexistingoneordraw
yourownusingthetoolsavailable(Raise/LowerTerrain,PaintHeight,SmoothHeight).
5. TerrainsarespecialobjectsinUnity,andthewaytexturemappingworksonthemisdifferentfromtraditional3Dmodels.Youcannotprovide_MainTexfromashaderasitneedstobeprovideddirectlyfromtheterrainitself.Todothis,selectPaintTextureandthenclickonAddTexture…:
6. Nowthatthetextureisset,youhavetochangethematerialoftheterrainsothatacustomshadercanbeprovided.FromTerrainSettings,changetheMaterialpropertytoCustom,andthendragtheRadiusmaterialtotheCustomMaterialbox.
Youarenowreadytocreateyourshader.
Howtodoit…Let’sstartbyeditingtheRadiusShaderfile:
1. Inthenewshader,addthesefourproperties:
_Center("Center",Vector)=(0,0,0,0)
_Radius("Radius",Float)=0.5
_RadiusColor("RadiusColor",Color)=(1,0,0,1)
_RadiusWidth("RadiusWidth",Float)=2
2. AddtheirrespectivevariablestotheCGPROGRAMsection:
float3_Center;
float_Radius;
fixed4_RadiusColor;
float_RadiusWidth;
3. InputtooursurfacefunctionrequiresnotonlytheUVofthetexture,butalsotheposition(inworldcoordinates)ofeverypointoftheterrain.WecanretrievethisparameterbychangingtheInputstructasfollows:
structInput
{
float2uv_MainTex;//TheUVoftheterraintexture
float3worldPos;//Thein-worldposition
};
4. Lastly,weusethissurfacefunction:
voidsurf(InputIN,inoutSurfaceOutputStandardo)
{
floatd=distance(_Center,IN.worldPos);
if(d>_Radius&&d<_Radius+_RadiusWidth)
o.Albedo=_RadiusColor;
else
o.Albedo=tex2D(_MainTex,IN.uv_MainTex).rgb;
}
Thesestepsareallittakestodrawacircleonyourterrain.Youcanusethematerial’sInspectortabtochangetheposition,radius,andcolorofthecircle.
MovingthecircleIfyouwantthecircletofollowyourcharacter,otherstepsarenecessary:
1. CreateanewC#scriptcalledRadius.2. Addthesepropertiestothescript:
publicMaterialradiusMaterial;
publicfloatradius=1;
publicColorcolor=Color.white;
3. IntheUpdate()method,addtheselinesofcode:
radiusMaterial.SetVector("_Center",transform.position);
radiusMaterial.SetFloat("_Radius",radius);
radiusMaterial.SetColor("_RadiusColor",color);
4. Attachthescripttoyourcharacter.5. Finally,dragtheRadiusmaterialtotheRadiusMaterialslotofthescript.
Youcannowmoveyourcharacteraroundandthiswillcreateanicecirclearoundit.ChangingthepropertiesoftheRadiusscriptwillchangetheradiusaswell.
Howitworks…Therelevantparameterstodrawacircleareitscenter,radius,andcolor.Theyareallavailableintheshaderwiththenames_Center,_Radius,and_RadiusColor.ByaddingtheworldPosvariabletotheInputstructure,weareaskingUnitytoprovideuswiththepositionofthepixelthatwearedrawingexpressedinworldcoordinates.Thisistheactualpositionofanobjectintheeditor.
Thesurf()functioniswherethecircleisactuallydrawn.Itcalculatesthedistancefromthepointbeingdrawnandcenteroftheradius,thenitcheckswhetheritisbetween_Radiusand_Radius+_RadiusWidth;ifthisisthecase,itusesthechosencolor.Intheothercase,itjustsamplesthetexturemaplikealltheothershadersseensofar.
Chapter3.UnderstandingLightingModelsInthepreviouschapters,weintroducedSurfaceShadersandexplainedhowwecanchangephysicalproperties(suchasAlbedoandSpecular)tosimulatedifferentmaterials.Howdoesthisreallywork?AttheheartofeverySurfaceShader,thereisitslightingmodel.It’sthefunctionthattakesthesepropertiesandcalculatesthefinalshadeofeachpixel.Unityusuallyhidesthisfromthedevelopersbecauseinordertowritealightingmodel,youhavetounderstandhowlightreflectsandrefractsontosurfaces.Thischapterwillfinallyshowyouhowlightingmodelsworkandgiveyouthebasicstocreateyourown.
Inthischapter,youwilllearnthefollowingrecipes:
CreatingacustomdiffuselightingmodelCreatingaToonShaderCreatingaPhongSpeculartypeCreatingaBlinnPhongSpeculartypeCreatinganAnisotropicSpeculartype
IntroductionSimulatingthewaylightworksisaverychallengingandresource-consumingtask.Formanyyears,videogameshaveusedverysimplelightingmodelsthat,despitelackingrealism,wereverybelievable.Evenifmost3Denginesarenowusingphysically-basedrenderers,itisworthexploringsomesimplertechniques.Theonespresentedinthischapterarereasonablyrealisticandwidelyadoptedondeviceswithlowresourcessuchasmobilephones.Understandingthesesimplelightingmodelsisalsoessentialifyouwanttocreateyourownone.
CreatingacustomdiffuselightingmodelIfyouarefamiliarwithUnity4,youmayknowthatthedefaultshaderitprovidedwasbasedonalightingmodelcalledLambertianreflectance.Thisrecipewillshowyouhowitispossibletocreateashaderwithacustomlightingmodelandexplainthemathematicsandimplementationbehindit.ThefollowingimageshowsthesamegeometryrenderedwithaStandardShader(right)anddiffuseLambertone(left):
ShadersbasedontheLambertianreflectanceareclassifiedasnon-photorealistic;noobjectintherealworldreallylookslikethis.However,LambertShadersarestilloftenusedinlowpolygamesastheyproduceaneatcontrastbetweenthefacesofcomplexgeometries.ThelightingmodelusedtocalculatetheLambertianreflectanceisalsoveryefficient,makingitperfectformobilegames.
Unityhasalreadyprovideduswithalightingfunctionthatwecanuseforourshaders.ItiscalledtheLambertianlightingmodel.Itisoneofthemorebasicandefficientformsofreflectance,whichyoucanfindinalotofgameseventoday.AsitisalreadybuiltintheUnitySurfaceShaderlanguage,wethoughtitisbesttostartwiththisfirstandbuildonit.YoucanalsofindanexampleintheUnityreferencemanual,butwewillgointomoredepthwithitandexplainwherethedataiscomingfromandwhyitisworkingthewayitis.Thiswillhelpyougetanicegroundinginsettingupcustomlightingmodelssothatwecanbuildonthisknowledgeinthefuturerecipesinthischapter.
GettingreadyLet’sstartbycarryingoutthefollowingsteps:
1. Createanewshaderandgiveitaname.2. Createanewmaterial,giveitaname,andassignthenewshadertoitsshader
property.3. Then,createasphereobjectandplaceitroughlyinthecenterofthescene.4. Finally,let’screateadirectionallighttocastsomelightonourobject.
WhenyourassetshavebeensetupinUnity,youshouldhaveascenethatresemblesthefollowingscreenshot:
Howtodoit…TheLambertianreflectancecanbeachievedwiththefollowingchangestotheshader:
1. Beginbyaddingthefollowingpropertiestotheshader’sPropertiesblock:
_MainTex("Texture",2D)="white"
2. Changethe#pragmadirectiveoftheshadersothat,insteadofStandard,itusesourcustomlightingmodel:
#pragmasurfacesurfSimpleLambert
3. Useaverysimplesurfacefunction,whichjustsamplesthetextureaccordingtoitsUVdata:
voidsurf(InputIN,inoutSurfaceOutputo){
o.Albedo=tex2D(_MainTex,IN.uv_MainTex).rgb;
}
4. AddafunctioncalledLightingSimpleLambert()thatwillcontainthefollowingcodefortheLambertianreflectance:
half4LightingSimpleLambert(SurfaceOutputs,half3lightDir,half
atten){
halfNdotL=dot(s.Normal,lightDir);
half4c;
c.rgb=s.Albedo*_LightColor0.rgb*(NdotL*atten*1);
c.a=s.Alpha;
returnc;
}
Howitworks…AspreviouslyseeninChapter1,CreatingYourFirstShader,the#pragmadirectiveisusedtospecifywhichsurfacefunctiontouse.Choosingadifferentlightingmodelworksinasimilarfashion:SimpleLambertforcesCgtolookforafunctioncalledLightingSimpleLambert().NoteLightingatthebeginning,whichisomittedinthedirective.
Thelightingfunctiontakesthreeparameters:thesurfaceoutput(whichcontainsthephysicalpropertiessuchasthealbedoandtransparency),thedirectionthelightiscomingfrom,anditsattenuation.
AccordingtotheLambertianreflectance,theamountoflightasurfacereflectsdependsontheanglebetweentheincidentlightandsurfacenormal.Ifyouhaveplayedpoolbilliards,youaresurelyfamiliarwiththisconcept;thedirectionofaballdependsonitsincidentangleagainstthewall.Ifyouhitawallata90degreeangle,theballwillcomebackatyou;ifyouhititwithaverylowangle,itsdirectionwillbemostlyunchanged.TheLambertianmodelmakesthesameassumption;ifthelighthitsatrianglewitha90degreeangle,allthelightgetsreflectedback.Thelowertheangle,thelesslightisreflectedbacktoyou.Thisconceptisshowninthefollowingimage:
Thissimpleconcepthastobetranslatedintoamathematicalform.Invectoralgebra,theanglebetweentwounitvectorscanbecalculatedviaanoperatorcalleddotproduct.Whenthedotproductisequaltozero,twovectorsareorthogonal,whichmeansthattheymakea90degreeangle.Whenitisequaltoone(orminusone),theyareparalleltoeachother.Cghasafunctioncalleddot(),whichimplementsthedotproductextremelyefficiently.
Thefollowingpictureshowsalightsource(sun)shiningonacomplexsurface.Lindicatesthelightdirection(calledlightDirintheshader)andNisthenormaltothesurface.Thelightisreflectedwiththesameanglethatithitsthesurface:
TheLambertianreflectancesimplyusestheNdotLdotproductasamultiplicativecoefficientfortheintensityoflight:
WhenNandLareparallel,allthelightisreflectedbacktothesource,causingthegeometrytoappearbrighter.The_LightColor0variablecontainsthecolorofthelightthatiscalculated.
NotePriortoUnity5,theintensityofthelightsweredifferent.IfyouareusinganoldDiffuseshaderbasedontheLambertianmodel,youmaynoticethatNdotLwasmultipliedbytwo:(NdotL*atten*2)ratherthan(NdotL*atten).IfyouareimportingacustomshaderfromUnity4,youwillneedtocorrectthismanually.LegacyShaders,however,havealreadybeendesignedtakingthisaspectintoaccount.
Whenthedotproductisnegative,thelightiscomingfromtheoppositesideofthetriangle.Thisisnotaproblemforopaquegeometriesastrianglesthatarenotfacingthecamerafrontallyareculled(discarded)andnotrendered.
ThisbasicLambertisagreatstartingpointwhenyouareprototypingyourshadersasyoucangetalotaccomplishedintermsofwritingthecorefunctionalityoftheshaderwhilenothavingtoworryaboutthebasiclightingfunctions.
UnityhasprovideduswithalightingmodelthathasalreadytakenthetaskofcreatingaLambertlightingforyou.IfyoulookattheUnityCG.cgincfilefoundinyourUnity’sinstallationdirectoryundertheDatafolder,youwillnoticethatyouhaveLambertandBlinnPhonglightingmodelsavailableforyoutouse.Themomentyoucompileyourshaderwith#pragmasurfacesurfLambert,youaretellingtheshadertoutilizeUnity’simplementationoftheLambertlightingfunctionintheUnityCG.cgincfilesothatwedon’thavetowritethatcodeoverandoveragain.WewillexplorehowtheBlinnPhongmodelworkslaterinthischapter.
CreatingaToonShaderOneofthemostusedeffectsingamesisthetoonshading,whichisalsoknownascelshading(shortforcelluloid).Itisanon-photorealisticrenderingtechniquethatmakes3Dmodelsappearflat.Manygamesuseittogivetheillusionthatthegraphicsarebeinghand-drawnratherthanbeing3D-modeled.Youcansee,inthefollowingpicture,asphererenderedwithaStandardShader(right)andToonShader(left):
Achievingthiseffectusingjustsurfacefunctionsisnotimpossible,butitwouldbeextremelyexpensiveandtime-consuming.Thesurfacefunction,infact,onlyworksonthepropertiesofthematerial,notitsactuallightingcondition.Astoonshadingrequirestochangethewaylightreflects,weneedtocreateourcustomlightingmodelinstead.
GettingreadyLet’sstartthisrecipebycreatingashaderanditsmaterialandimportingaspecialtexture,asfollows:
1. Startbycreatinganewshader;inthisexample,wewillextendtheonemadeinthepreviousrecipe.
2. Createanewmaterialfortheshaderandattachittoa3Dmodel.Thetoonshadingworksbestoncurvedsurfaces.
3. Thisreciperequiresanadditionaltexturecalledrampmap.ItisimportantthatyouchangeitsWrapModetoClamp.Ifyouwanttheedgesbetweenthecolorstobesharp,theFilterModeshouldalsobesettoPoint:
Howtodoit…Thetoonaestheticcanbeachievedwiththefollowingchangestotheshader:
1. Addanewpropertyforatexturecalled_RampTex:
_RampTex("Ramp",2D)="white"{}
2. AdditsrelativevariableintheCGPROGRAMsection:
sampler2D_RampTex;
3. Changethe#pragmadirectivesothatitpointstoafunctioncalledLightingToon():
#pragmasurfacesurfToon
4. Usethislightingmodel:
fixed4LightingToon(SurfaceOutputs,fixed3lightDir,fixedatten)
{
halfNdotL=dot(s.Normal,lightDir);
NdotL=tex2D(_RampTex,fixed2(NdotL,0.5));
fixed4c;
c.rgb=s.Albedo*_LightColor0.rgb*NdotL*atten;
c.a=s.Alpha;
returnc;
}
Howitworks…Themaincharacteristicofthetoonshadingisthewaythelightisrendered;surfacesarenotshadeduniformly.Toachievethiseffect,weneedarampmap.ItspurposeistoremaptheLambertianlightintensityNdotLtoanothervalue.Usingarampmapwithoutagradient,wecanforcethelightingtoberenderedinsteps.Thefollowingimageshowshowtherampmapisusedtocorrectthelightintensity:
There’smore…Therearemanydifferentwaysonecanachieveatoonshadingeffect.Usingdifferentrampscanproducedramaticchangesinthewayyourmodelslook,soyoushouldexperimentinordertofindthebestone.
AnalternativetoramptexturesistosnapthelightintensityNdotLsothatitcanonlyassumeacertainnumberofvaluesequidistantlysampledfrom0to1:
half4LightingCustomLambert(SurfaceOutputs,half3lightDir,half3
viewDir,halfatten){
halfNdotL=dot(s.Normal,lightDir);
halfcel=floor(NdotL*_CelShadingLevels)/(_CelShadingLevels-0.5);//
Snap
half4c;
c.rgb=s.Albedo*_LightColor0.rgb*cel*atten;
c.a=s.Alpha;
returnc;
}
ThesnappingcodemultipliesNdotLtimes_CelShadingLevels,roundsittoaninteger,andthendividesitback.Bydoingthis,thecelquantityisforcedtoassumeoneofthe_CelShadingLevelsequidistantvaluesfrom0to1.Thisremovestheneedforaramptextureandmakesallthecolorstepsofthesamesize.Ifyouaregoingforthisimplementation,remembertoaddapropertycalled_CelShadingLevelstoyourshader.
CreatingaPhongSpeculartypeThespecularityofanobjectsurfacesimplydescribeshowshinyitis.Thesetypesofeffectsareoftenreferredtoasview-dependenteffectsintheshaderworld.ThisisbecauseinordertoachievearealisticSpeculareffectinyourshaders,youneedtoincludethedirectionthatthecameraoruserisfacingtheobject’ssurface.Themostbasicandperformance-friendlySpeculartypeisthePhongSpeculareffect.Itisthecalculationofthelightdirectionreflectingoffofthesurfacecomparedtotheuser’sviewdirection.ItisaverycommonSpecularmodelusedinmanyapplications,fromgamestomovies.Whileitisn’tthemostrealisticintermsofaccuratelymodelingthereflectedSpecular,itgivesagreatapproximationthatperformswellinmostsituations.Additionally,ifyourobjectisfurtherawayfromthecameraandthereisnoneedforaveryaccurateSpecular,thisisagreatwaytoprovideaSpeculareffecttoyourshaders.
Inthisrecipe,wewillbecoveringhowtoimplementtheper-vertexversionoftheshaderandalsotheper-pixelversionusingsomenewparametersintheSurfaceShader’sInputstruct.Wewillseethedifferenceanddiscusswhenandwhytousethesetwodifferentimplementationsfordifferentsituations.
GettingreadyTostartwiththisrecipe,performthefollowingsteps:
1. Createanewshader,material,andobject,andgivethemappropriatenamessothatyoucanfindthemlater.
2. Attachtheshadertothematerialandthematerialtotheobject.Tofinishoffyournewscene,createanewdirectionallightsothatwecanseeourSpeculareffectaswecodeit.
Howtodoit…FollowthefollowingstepstocreateaPhonglightingmodel:
1. Youmightbeseeingapatternatthispoint,butwealwaysliketostartoutwithourmostbasicpartoftheshaderwritingprocess:thecreationofproperties.So,let’saddthefollowingpropertiestotheshader:
Properties
{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
_MainTex("Base(RGB)",2D)="white"{}
_SpecularColor("SpecularColor",Color)=(1,1,1,1)
_SpecPower("SpecularPower",Range(0,30))=1
}
2. WethenhavetomakesuretoaddthecorrespondingvariablestoourCGPROGRAMblockinourSubShader{}block:
float4_SpecularColor;
sampler2D_MainTex;
float4_MainTint;
float_SpecPower;
3. NowwehavetoaddourcustomlightingmodelsothatwecancomputeourownPhongSpecular.Don’tworryifitdoesn’tmakesenseatthispoint;wewillcovereachlineofcodeintheHowitworks…section.Addthefollowingcodetotheshader’sSubShader{}function:
fixed4LightingPhong(SurfaceOutputs,fixed3lightDir,half3viewDir,
fixedatten)
{
//Reflection
floatNdotL=dot(s.Normal,lightDir);
float3reflectionVector=normalize(2.0*s.Normal*NdotL-
lightDir);
//Specular
floatspec=pow(max(0,dot(reflectionVector,viewDir)),_SpecPower);
float3finalSpec=_SpecularColor.rgb*spec;
//Finaleffect
fixed4c;
c.rgb=(s.Albedo*_LightColor0.rgb*max(0,NdotL)*atten)+
(_LightColor0.rgb*finalSpec);
c.a=s.Alpha;
returnc;
}
4. Finally,wehavetotelltheCGPROGRAMblockthatitneedstouseourcustomlightingfunctioninsteadofoneofthebuilt-inones.Wedothisbychangingthe#pragmastatementtothefollowing:
CPROGRAM
#pragmasurfacesurfPhong
ThefollowingscreenshotdemonstratestheresultofourcustomPhonglightingmodelusingourowncustomreflectionvector:
Howitworks…Let’sbreakdownthelightingfunctionbyitself,astherestoftheshadershouldbeprettyfamiliartoyouatthispoint.
Inthepreviousrecipes,wehaveusedalightingfunctionthatprovidedonlythelightdirection,lightDir.Unitycomeswithasetoflightingfunctionsthatyoucanuse,includingonethatprovidestheviewdirection,viewDir.Refertothefollowingtableorgotohttp://docs.unity3d.com/Documentation/Components/SL-SurfaceShaderLighting.html:
Notview-dependent
half4LightingNameYouchoose(SurfaceOutputs,half3lightDir,halfatten);
View-dependent half4LightingNameYouchoose(SurfaceOutputs,half3lightDir,half3viewDir,
halfatten);
Inourcase,wearedoingaSpecularshader,soweneedtohavetheview-dependentlightingfunctionstructure.So,wehavetowritethefollowing:
CPROGRAM
#pragmasurfacesurfPong
fixed4LightingPhong(SurfaceOutputs,fixed3lightDir,half3viewDir,
fixedatten)
{
//...
}
Thiswilltelltheshaderthatwewanttocreateourownview-dependentshader.Alwaysmakesurethatyourlightingfunctionnameisthesameinyourlightingfunctiondeclarationandthe#pragmastatement,orUnitywillnotbeabletofindyourlightingmodel.
ThecomponentsthatplayaroleinthePhongmodelaredescribedinthefollowingimage.WehavethelightdirectionL(coupledwithitsperfectreflectionR)andnormaldirectionN.TheyhaveallbeenencounteredbeforeintheLambertianmodel,withtheexceptionofV,whichistheviewdirection:
ThePhongmodelassumesthatthefinallightintensityofareflectivesurfaceisgivenbytwocomponents:itsdiffusecolorandSpecularvalue,asfollows:
ThediffusecomponentDremainsunchangedfromtheLambertianmodel:
TheSpecularcomponentSisdefinedasfollows:
Here,pistheSpecularpowerdefinedas_SpecPowerintheshader.TheonlyunknownparameterisR,whichisthereflectionofLaccordingtoN.Invectoralgebra,thiscanbecalculatedasfollows:
Thisisexactlywhatiscalculatedinthefollowing:
float3reflectionVector=normalize(2.0*s.Normal*NdotL-lightDir);
Thishastheeffectofbendingthenormaltowardsthelight;asavertexnormalispointingawayfromthelight,itisforcedtolookatthelight.Refertothefollowingscreenshotforamorevisualrepresentation.Thescriptthatproducesthisdebugeffectisincludedinthebook’ssupportpageathttps://www.packtpub.com/books/content/support:
ThefollowingscreenshotdisplaysthefinalresultofourPhongSpecularcalculationisolatedintheshader:
CreatingaBlinnPhongSpeculartypeBlinnisanothermoreefficientwayofcalculatingandestimatingspecularity.Itisdonebygettingthehalfvectorfromtheviewdirectionandlightdirection.ItwasbroughtintotheworldofCgbyJimBlinn.Hefoundthatitwasmuchmoreefficienttojustgetthehalfvectorinsteadofcalculatingourownreflectionvectors.Itcutdownonthecodeandprocessingtime.Ifyouactuallylookatthebuilt-inBlinnPhonglightingmodelincludedintheUnityCG.cgincfile,youwillnoticethatitisusingthehalfvectoraswell,henceitisnamedBlinnPhong.ItisjustasimplerversionofthefullPhongcalculation.
GettingreadyTostartwiththisrecipe,performthefollowingsteps:
1. Thistime,insteadofcreatingawholenewscene,let’sjustusetheobjectsandscenethatwehave,andcreateanewshaderandmaterialandnamethemBlinnPhong.
2. Onceyouhaveanewshader,double-clickonittolaunchMonoDevelopsothatwecanstarteditingourshader.
Howtodoit…PerformthefollowingstepstocreateaBlinnPhonglightingmodel:
1. First,weneedtoaddourownpropertiestothePropertiesblocksothatwecancontrolthelookoftheSpecularhighlight:
Properties
{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
_MainTex("Base(RGB)",2D)="white"{}
_SpecularColor("SpecularColor",Color)=(1,1,1,1)
_SpecPower("SpecularPower",Range(0.1,60))=3
}
2. Then,weneedtomakesurethatwehavecreatedthecorrespondingvariablesinourCGPROGRAMblocksothatwecanaccessthedatafromourPropertiesblock,inoursubshader:
sampler2D_MainTex;
float4_MainTint;
float4_SpecularColor;
float_SpecPower;
3. Nowit’stimetocreateourcustomlightingmodelthatwillprocessourDiffuseandSpecularcalculations.Thecodeisasfollows:
fixed4LightingCustomBlinnPhong(SurfaceOutputs,fixed3lightDir,
half3viewDir,fixedatten)
{
floatNdotL=max(0,dot(s.Normal,lightDir));
float3halfVector=normalize(lightDir+viewDir);
floatNdotH=max(0,dot(s.Normal,halfVector));
floatspec=pow(NdotH,_SpecPower)*_SpecularColor;
float4c;
c.rgb=(s.Albedo*_LightColor0.rgb*NdotL)+(_LightColor0.rgb*
_SpecularColor.rgb*spec)*atten;
c.a=s.Alpha;
returnc;
}
4. Tocompleteourshader,wewillneedtotellourCGPROGRAMblocktouseourcustomlightingmodelratherthanabuilt-inonebymodifyingthe#pragmastatementwiththefollowingcode:
CPROGRAM
#pragmasurfacesurfCustomBlinnPhong
ThefollowingscreenshotdemonstratestheresultsofourBlinnPhonglightingmodel:
Howitworks…TheBlinnPhongSpecularisalmostexactlylikethePhongSpecular,exceptthatitismoreefficientbecauseituseslesscodetoachievealmostthesameeffect.Beforetheintroductionofphysically-basedrendering,thisapproachwasthedefaultchoiceforSpecularreflectioninUnity4.
CalculatingthereflectionvectorRisgenerallyexpensive.TheBlinnPhongSpecularreplacesitwiththehalfvectorHbetweentheviewdirectionVandlightdirectionL:
Insteadofcalculatingourownreflectionvector,wearesimplygoingtogetthevectorhalfwaybetweentheviewdirectionandlightdirection,basicallysimulatingthereflectionvector.Ithasactuallybeenfoundthatthisapproachismorephysicallyaccuratethanthelastapproach,butwethoughtitnecessarytoshowyouallthepossibilities:
Accordingtovectoralgebra,thehalfvectorcanbecalculatedasfollows:
Here, isthelengthofthevector .InCg,wesimplyneedtoaddtheviewdirectionandlightdirectiontogetherandthennormalizetheresulttoaunityvector:
float3halfVector=normalize(lightDir+viewDir);
Then,wesimplyneedtodotthevertexnormalwiththisnewhalfvectortogetourmainSpecularvalue.Afterthis,wejusttakeittoapowerof_SpecPowerandmultiplyitbytheSpecularcolorvariable.It’smuchlighteronthecodeandmath,butstillgivesusaniceSpecularhighlightthatwillworkforalotofreal-timesituations.
SeealsoThelightmodelsseeninthischapterareextremelysimple;norealmaterialisperfectlymatteorperfectlyspecular.Moreover,itisnotuncommonforcomplexmaterialssuchasclothing,wood,andskintorequireknowledgeofhowlightscattersinthelayersbeneaththesurface.
Usethefollowingtabletorecapthedifferentlightingmodelsencounteredsofar:
Technique Type Unity5shader LightIntensity(I)
Lambertian Diffuse LegacyShaders|Diffuse
Phong Specular
BlinnPhong Specular LegacyShaders|Specular
ThereareotherinterestingmodelssuchastheOren-Nayarlightingmodelforroughsurfaces:https://en.wikipedia.org/wiki/Oren%E2%80%93Nayar_reflectance_model
CreatinganAnisotropicSpeculartypeAnisotropicisatypeofSpecularorreflectionthatsimulatesthedirectionalityofgroovesinasurfaceandmodifies/stretchestheSpecularintheperpendiculardirection.Itisveryusefulwhenyouwanttosimulatebrushedmetals,notametalwithaclear,smooth,andpolishedsurface.ImaginetheSpecularthatyouseewhenyoulookatthedatasideofaCDorDVDorthewaySpecularisshapedatthebottomofapotorpan.Youwillnoticethatifyoucarefullyexaminethesurface,youwillseethatthereisadirectiontothegroovesinthesurface,usuallyinthewaythemetalwasbrushed.WhenyouapplyaSpeculartothissurface,yougetaSpecularstretchedintheperpendiculardirection.
ThisrecipewillintroduceyoutotheconceptofaugmentingyourSpecularhighlightstoachievedifferenttypesofbrushedsurfaces.Infuturerecipes,wewilllookatwaysinwhichwecanusetheconceptsofthisrecipetoachieveothereffectssuchasstretchedreflectionsandhair,buthere,youaregoingtolearnthefundamentalsofthetechniquefirst.WewillbeusingthisshaderasareferenceforourowncustomAnisotropicShader:
http://wiki.unity3d.com/index.php?title=Anisotropic_Highlight_Shader
ThefollowingscreenshotshowsexamplesofdifferenttypesofSpeculareffectsonecanachieveusingAnisotropicShadersinUnity:
GettingreadyLet’sstartthisrecipebycreatingashader,itsmaterial,andsomelightsforourscene:
1. Createanewscenewithsomeobjectsandlightssothatwecanvisuallydebugourshader.
2. Thencreateanewshaderandmaterial,andhookthemuptoourobjects.3. Lastly,wewillneedsomesortofnormalmapthatwillindicatethedirectionalityof
ourAnisotropicSpecularhighlight.
ThefollowingscreenshotshowstheAnisotropynormalmapwewillbeusingforthisrecipe.Itisavailablefromthebook’ssupportpageathttps://www.packtpub.com/books/content/support:
Howtodoit…TocreateanAnisotropiceffect,weneedtomakethefollowingchangestotheshaderpreviouslycreated:
1. Wefirstneedtoaddthepropertiesthatwearegoingtoneedforourshader.Thesewillallowalotofartisticcontroloverthefinalappearanceofthesurface:
Properties
{
_MainTint("DiffuseTint",Color)=(1,1,1,1)
_MainTex("Base(RGB)",2D)="white"{}
_SpecularColor("specularColor",Color)=(1,1,1,1)
_Specular("SpecularAmount",Range(0,1))=0.5
_SpecPower("SpecularPower",Range(0,1))=0.5
_AnisoDir("AnisotropicDirection",2D)=""{}
_AnisoOffset("AnisotropicOffset",Range(-1,1))=-0.2
}
2. WethenneedtomaketheconnectionbetweenourPropertiesblockandourSubShader{}blocksothatwecanusethedatabeingprovidedbythePropertiesblock:
sampler2D_MainTex;
sampler2D_AnisoDir;
float4_MainTint;
float4_SpecularColor;
float_AnisoOffset;
float_Specular;
float_SpecPower;
3. NowwecancreateourlightingfunctionthatwillproducethecorrectAnisotropiceffectonoursurface.Wewillusethefollowingcodeforthis:
fixed4LightingAnisotropic(SurfaceAnisoOutputs,fixed3lightDir,half3
viewDir,fixedatten)
{
fixed3halfVector=normalize(normalize(lightDir)+
normalize(viewDir));
floatNdotL=saturate(dot(s.Normal,lightDir));
fixedHdotA=dot(normalize(s.Normal+s.AnisoDirection),
halfVector);
floataniso=max(0,sin(radians((HdotA+_AnisoOffset)*180)));
floatspec=saturate(pow(aniso,s.Gloss*128)*s.Specular);
fixed4c;
c.rgb=((s.Albedo*_LightColor0.rgb*NdotL)+(_LightColor0.rgb*
_SpecularColor.rgb*spec))*atten;
c.a=s.Alpha;
returnc;
}
4. Inordertousethisnewlightingfunction,weneedtotellthesubshader’s#pragma
statementtolookforitinsteadofusingoneofthebuilt-inlightingfunctions.Wearealsotellingtheshadertotargetshadermodel3.0sothatwecanhavemorespacefortexturesinourprogram:
CGPROGRAM
#pragmasurfacesurfAnisotropic
#pragmatarget3.0
5. WehavealsogiventheAnisotropicnormalmapitsownUVsbydeclaringthefollowingcodeintheInputstruct.Thisisn’tentirelynecessaryaswecouldjustusetheUVsfromthemaintexture,butthisgivesusindependentcontroloverthetilingofourbrushedmetaleffectsothatwecanscaleittoanysizewewant:
structInput
{
float2uv_MainTex;
float2uv_AnisoDir;
};
6. WealsoneedtoaddtheSurfaceAnisoOutputstruct:
structSurfaceAnisoOutput
{
fixed3Albedo;
fixed3Normal;
fixed3Emission;
fixed3AnisoDirection;
halfSpecular;
fixedGloss;
fixedAlpha;
};
7. Finally,weneedtousethesurf()functiontopassthecorrectdatatoourlightingfunction.So,wewillgettheper-pixelinformationfromourAnisotropicnormalmapandsetourSpecularparametersasfollows:
voidsurf(InputIN,inoutSurfaceAnisoOutputo)
{
half4c=tex2D(_MainTex,IN.uv_MainTex)*_MainTint;
float3anisoTex=UnpackNormal(tex2D(_AnisoDir,IN.uv_AnisoDir));
o.AnisoDirection=anisoTex;
o.Specular=_Specular;
o.Gloss=_SpecPower;
o.Albedo=c.rgb;
o.Alpha=c.a;
}
TheAnisotropicnormalmapallowsustogivethesurfacedirectionandhelpsusdispersetheSpecularhighlightaroundthesurface.ThefollowingscreenshotdemonstratestheresultofourAnisotropicShader:
Howitworks…Let’sbreakdownthisshaderintoitscorecomponentsandexplainwhywearegettingtheeffect.Wewillmostlybecoveringthecustomlightingfunctionhere,astherestoftheshadershouldbeprettyself-explanatoryatthispoint.
WefirststartbydeclaringourownSurfaceAnisoOutputstruct.Weneedtodothisinordertogettheper-pixelinformationfromtheAnisotropicnormalmap,andtheonlywaywecandothisinaSurfaceShaderistouseatex2D()functioninthesurf()function.Thefollowingcodeshowsthecustomsurfaceoutputstructureusedinourshader:
structSurfaceAnisoOutput
{
fixed3Albedo;
fixed3Normal;
fixed3Emission;
fixed3AnisoDirection;
halfSpecular;
fixedGloss;
fixedAlpha;
};
WecanusetheSurfaceAnisoOutputstructasawayofinteractingbetweenthelightingfunctionandsurfacefunction.Inourcase,wearestoringtheper-pixeltextureinformationinthevariablecalledanisoTexinoursurf()functionandthenpassingthisdatatotheSurfaceAnisoOutputstructbystoringitintheAnisoDirectionvariable.Oncewehavethis,wecanusetheper-pixelinformationinthelightingfunctionusings.AnisoDirection.
Withthisdataconnectionsetup,wecanmoveontoouractuallightingcalculations.Thisbeginsbygettingtheusualoutoftheway,thehalfvector,sothatwedon’thavetodothefullreflectioncalculationanddiffuselighting,whichisthevertexnormaldottedwiththelightvectorordirection.ThisisdoneinCgwiththefollowinglines:
fixed3halfVector=normalize(normalize(lightDir)+normalize(viewDir));
floatNdotL=saturate(dot(s.Normal,lightDir));
Then,westarttheactualmodificationtotheSpeculartogettherightlook.Wefirstdotthenormalizedsumofthevertexnormalandper-pixelvectorsfromourAnisotropicnormalmapwithhalfVectorcalculatedinthepreviousstep.Thisgivesusafloatvaluethatgivesavalueof1asthesurfacenormal,whichismodifiedbytheAnisotropicnormalmapasitbecomesparallelwithhalfVectorand0asitisperpendicular.Finally,wemodifythisvaluewithasin()functionsothatwecanbasicallygetadarkermiddlehighlightandultimatelyaringeffectbasedoffofhalfVector.AllthepreviouslymentionedoperationsaresummarizedinthefollowingtwolinesofCgcode:
fixedHdotA=dot(normalize(s.Normal+s.AnisoDirection),halfVector);
floataniso=max(0,sin(radians((HdotA+_AnisoOffset)*180)));
Finally,wescaletheeffectoftheanisovaluebytakingittoapowerofs.Gloss,andthengloballydecreaseitsstrengthbymultiplyingitbys.Specular:
floatspec=saturate(pow(aniso,s.Gloss*128)*s.Specular);
Thiseffectisgreattocreatemoreadvancedmetaltypesurfaces,especiallytheonesthatarebrushedandseemtohavedirectionalitytothem.Italsoworkswellforhairoranysortofsoftsurfacewithdirectionalitytoit.ThefollowingscreenshotshowstheresultofdisplayingthefinalAnisotropiclightingcalculation:
Chapter4.PhysicallyBasedRenderinginUnity5OneofthebiggestchangesintroducedinUnity5isphysically-basedrendering,whichisalsoknownasPBR.Previouschaptershaverepeatedlymentioneditwithoutrevealingtoomuchaboutit.IfyouwanttounderstandnotonlyhowPBRworks,buthowtomakethemostoutofit,thisisthechapteryoushouldread.
Inthischapter,youwilllearnthefollowingrecipes:
UnderstandingthemetallicsetupAddingtransparencytoPBRCreatingmirrorsandreflectivesurfacesBakinglightsinyourscene
IntroductionAllthelightingmodelsencounteredinChapter3,UnderstandingLightingModels,wereveryprimitivedescriptionsofhowlightbehaves.Themostimportantaspectduringtheirmakingwasefficiency.Real-timeshadingisexpensive,andtechniquessuchasLambertianorBlinnPhongareacompromisebetweencomputationalcostandrealism.Havingamorepowerfulgraphicsprocessingunit(GPU)hasallowedustowriteprogressivelymoresophisticatedlightingmodelsandrenderingengines,withtheaimofsimulatinghowlightactuallybehaves.Thisis,inanutshell,thephilosophybehindPBR.Asthenamesuggests,ittriestogetascloseaspossibletothephysicsbehindtheprocessesthatgiveauniquelooktoeachmaterial.Despitethis,thetermPBRhasbeenwidelyusedinmarketingcampaignsandismoreofasynonymforstate-of-the-artrenderingratherthanawell-definedtechnique.Unity5implementsPBRbyintroducingtwoimportantchanges.Thefirstisacompletelynewlightingmodel(calledStandard).SurfaceShadersallowdeveloperstospecifythephysicalpropertiesofamaterial,buttheydonotimposeactualphysicalconstraintsonthem.PBRfillsthisgapusingalightingmodelthatenforcesprinciplesofphysicssuchasenergyconservation(anobjectcannotreflectmorelightthantheamountitreceives),microsurfacescattering(roughsurfacesreflectlightmoreerraticallycomparedtosmoothones),Fresnelreflectance(specularreflectionsappearatgrazingangles),andsurfaceocclusion(thedarkeningofcornersandothergeometriesthatarehardtolight).Alltheseaspects,andmanyothers,areusedtocalculatetheStandardlightingmodel.ThesecondaspectthatmakesPBRsorealisticiscalledGlobalIllumination(GI)andisthesimulationofphysically-basedlighttransport.Itmeansthatobjectsarenotdrawninthesceneasiftheywereseparateentities.Theyallcontributetothefinalrenderingaslightcanreflectonthembeforehittingsomethingelse.Thisaspectisnotcapturedintheshadersthemselvesbutisanessentialpartofhowtherenderingengineworks.Unfortunately,accuratelysimulatinghowlightraysactuallybounceoversurfacesinrealtimeisbeyondthecapabilitiesofmodernGPUs.Unity5makessomecleveroptimizationsthatallowretainingvisualfidelitywithoutsacrificingperformance.Someofthemostadvancedtechniques(suchasreflections),however,requiretheuserinput.Alloftheseaspectswillbecoveredinthischapter.ItisimportanttorememberthatPBRandGIdonotautomaticallyguaranteethatyourgamewillbephotorealistic.Achievingphotorealismisaverychallengingtaskand,likeeveryart,itrequiresgreatexpertizeandexceptionalskills.
UnderstandingthemetallicsetupUnity5providestwodifferenttypesofPBRshaders;theyarereferredtointhedrop-downmenuofthematerial’sInspectortabasStandardandStandard(Specularsetup).ThemaindifferenceisthattheformerexposestheMetallicproperty,whilethelatterreplacesitwithSpecular.BoththesemetallicandspecularsetupsrepresentdifferentwaysinwhichonecaninitializePBRmaterials.OneoftheconceptsthathasdrivenPBRistheabilitytoprovidemeaningful,physically-relatedpropertiesthatartistsanddeveloperscantweakandplaywith.Thepropertiesofsomematerialsareeasiertorepresentindicatinghowmetallictheyare,whileforsome,theotherismoreimportantinordertodefinehowtheyreflectlightsdirectly.IfyouhaveusedUnity4inthepast,Standard(Specularsetup)mightlookmorefamiliartoyou.Thisrecipewillshowyouhowtousethemetallicsetupeffectively.It’simportanttorememberthatthemetallicworkflowisnotjustformetallicmaterials;itisawaytodefinehowmaterialswilllookaccordingtohowmetallicornon-metallictheirsurfaceis.Despitebeingpresentedastwodifferenttypesofshaders,bothMetallicandSpecularsetupsaregenerallyequallyexpressive.AsshownintheUnitydocumentationathttp://docs.unity3d.com/Manual/StandardShaderMetallicVsSpecular.html,thesamematerialscanusuallyberecreatedwithbothsetups(seethefollowingimage):
GettingreadyThisrecipewillusetheStandardShaderprovidedinUnity5,sothereisnoneedtocreateanewone.Thestepstostarttherecipeareasfollows:
1. Createanewmaterial.2. FromitsInspector,makesurethatStandardisselectedfromitsShaderdrop-down
menu.
Youwillalsoneedatextured3Dmodel.
Howtodoit…TherearetwomaintexturesthatneedtobeconfiguredintheStandardShader:AlbedoandMetallic.Tousethemetallicworkfloweffectively,weneedtoinitializethesemapscorrectly:
1. TheAlbedomapshouldbeinitializedwiththeunlittextureofthe3Dmodel.2. TocreatetheMetallicmap,startbyduplicatingthefileforyourAlbedomap.You
candothisbyselectingthemapfromtheProjecttabandpressingCtrl+D.3. Usewhite(#ffffff)tocolortheregionsofthemapthatcorrespondtomaterialsthat
aremadeofpuremetal.Useblack(#000000)foralltheothercolors.Shadesofgreyshouldbeusedfordusty,weathered,orwornoutmetalsurfaces,rust,scratchedpaint,andsoon.Asamatteroffact,Unityusesonlytheredchanneltostorethemetallicvalue;thegreenandblueonesareignored.
4. UsethealphachanneloftheimagetoprovideinformationabouttheSmoothnessofthematerial.
5. AssigntheMetallicmaptothematerial.BothMetallicandSmoothnesssliderswilldisappearasthesetwopropertiesarenowcontrolledbythemap.
Howitworks…LegacyShadersallowartiststocreatematerialsthateasilybreaktheillusionofphotorealismbyhavinglightingconditionsthatareimpossibleinreality.ThishappensbecauseallthepropertiesofamaterialexposedinaLegacySurfaceShaderareuncorrelated.Byintroducingthemetallicworkflow,Unity5imposesmoreconstraintsonthewayobjectslook,makingitharderforartiststocreateillogicalmaterials.
Metalsareknownfortheconductingofelectricity;lightisintheformofelectromagneticwaves,meaningthatalmostallmetalsbehaveinasimilarwaycomparedtonon-conductors(oftenreferredasinsulators).Conductorstendtoreflectmostphotons(70-100%),resultinginhighreflectance.Theremaininglightisabsorbed,ratherthandiffused,suggestingthatconductorshaveaverydarkdiffusecomponent.Insulators,conversely,havealowreflectance(4%);therestofthelightisscatteredonthesurface,contributingtotheirdiffusedlooks.
IntheStandardShader,purelymetallicmaterialshavedarkdiffusecomponentsandthecoloroftheirspecularreflectionsisdeterminedbytheAlbedomap.Conversely,thediffusecomponentofpurelynon-metallicmaterialsisdeterminedbytheAlbedomap;thecoloroftheirspecularhighlightsisdeterminedbythecoloroftheincominglight.FollowingtheseprinciplesallowsthemetallicworkflowtocombinethealbedoandspecularintotheAlbedomap,enforcingphysically-accuratebehaviors.Thisalsoallowssavingmorespace,resultinginasignificantspeedupattheexpensesofreducedcontroloverthelookofyourmaterials.
SeealsoFormoreinformationaboutthemetallicsetup,youcanrefertotheselinks:
Calibrationchart:Howtocalibrateametallicmaterial(http://blogs.unity3d.com/wp-content/uploads/2014/11/UnityMetallicChart.png)Materialchart:HowtoinitializetheStandardShaderparametersforcommonmaterials(http://docs.unity3d.com/Manual/StandardShaderMaterialCharts.html)QuixelMEGASCANS:Avastlibraryofmaterials,includingtexturesandPBRparameters(http://quixel.se/megascans)PBRTextureConversion:HowtraditionalshaderscanbeconvertedtoPBRshaders(http://www.marmoset.co/toolbag/learn/pbr-conversion)SubstanceDesigner:Anode-basedsoftwaretoworkwithPBR(https://www.allegorithmic.com/products/substance-designer)TheTheoryofPhysically-basedRendering:AcompleteguideaboutPBR(https://www.allegorithmic.com/pbr-guide)
AddingtransparencytoPBRTransparencyissuchanimportantaspectingamesthattheStandardShadersupportsthreedifferentwaysofdoingit.Thisrecipeisusefulifyouneedtohaverealisticmaterialswithtransparentorsemi-transparentproperties.Glasses,bottles,windows,andcrystalsaregoodcandidatesforPBRtransparentshaders.ThisisbecauseyoucanstillhavealltherealismintroducedbyPBRwiththeadditionofatransparentortranslucenteffect.IfyouneedtransparencyforsomethingdifferentsuchasUIelementsorpixelart,therearemoreefficientalternativesthatareexploredintheCreatingatransparentmaterialrecipeinChapter2,SurfaceShadersandTextureMapping.
NoteInordertohaveatransparentStandardmaterial,changingthealphachannelofitsAlbedocolorpropertyisnotenough.UnlessyouproperlysetitsRenderingMode,yourmaterialwillnotappeartransparent.
GettingreadyThisrecipewillusetheStandardShader,sothereisnoneedtocreateanewone:
1. Createanewmaterial.2. MakesurethattheShaderpropertyissettoeitherStandardorStandard(Specular
setup)fromthematerial’sInspectortab.3. Assignthenewlycreatedmaterialtothe3Dobjectthatyouwanttobetransparent.
Howtodoit…TheStandardShaderprovidesthreedifferenttypesoftransparencies.Despitebeingverysimilar,theyhavesubtledifferencesandfitdifferentcontexts.
Semi-transparentmaterialsSomematerialssuchasclearplastics,crystal,andglassaresemi-transparent.ThismeansthattheybothrequirealltherealisticeffectsofPBR(suchasspecularhighlightsandFresnelrefractionandreflection)butallowthegeometrybehindtobeseen.Ifthisiswhatyouneed,performthefollowingsteps:
1. Fromthematerial’sInspectortab,setRenderingModetoTransparent.2. TheamountoftransparencyisdeterminedbythealphachanneloftheAlbedocolor
ortheAlbedomap(ifany).
ThefollowingpictureshowstheUnity5calibrationscenewithfourdifferenthighlypolishedplasticspheres.Fromlefttoright,theirtransparencyisincreased.Thelastsphereisfullytransparent,butretainsalltheaddedeffectsofPBR:
TheTransparentrenderingmodeisperfectforwindows,bottles,gems,andheadsets.
NoteYoushouldnoticethatmanytransparentmaterialsdon’tusuallyprojectshadows.Ontopofthis,theMetallicandSmoothnesspropertiesofamaterialcaninterferewiththetransparencyeffect.Amirror-likesurfacecanhavethealphasettozero,butifitreflectsalltheincominglight,itwon’tappeartransparent.
Fadingobjects
Sometimes,youwantanobjecttofullydisappearwithafadingeffect.Inthiscase,specularreflectionsandFresnelrefractionandreflectionshoulddisappearaswell.Whenafadingobjectisfullytransparent,itshouldalsobeinvisible.Todothis,performthefollowingsteps:
1. Fromthematerial’sInspectortab,setRenderingModetoFade.2. Asbefore,usethealphachanneloftheAlbedocolorormaptodeterminethefinal
transparency.
Thefollowingpictureshowsfadingspheres.ItisclearfromthepicturethatthePBReffectsfadewiththesphereaswell.Asyoucanseeinthefollowingimage,thelastoneontherightisalmostinvisible:
Thisrenderingmodeworksbestfornon-realisticobjects,suchasholograms,laserrays,fauxlights,ghosts,andparticleeffects.
SolidgeometrieswithholesMostofthematerialsencounteredinagamearesolid,meaningthattheydon’tallowlighttopassthroughthem.Atthesametime,manyobjectshaveaverycomplex(yetflat)geometry.Modelingleavesandgrasswith3Dobjectsisoftenoverkill.Amoreefficientapproachistouseaquad(rectangle)withaleaftexture.Whiletheleafitselfissolid,therestofthetextureshouldbefullytransparent.Ifthisiswhatyouwant,thenperformthefollowingsteps:
1. Fromthematerial’sInspectortab,setRenderingModetoCutout.2. UsetheAlphaCutoffslidertodeterminethecutoffthreshold.Allthepixelsinthe
AlbedomapwithanalphavalueequaltoorlessthanAlphaCutoffwillbehidden.
Thefollowingimage,takenfromtheUnityOfficialTutorialsonPBR(https://www.youtube.com/watch?v=fD_ho_ofY6A),showsyouhowtheeffectoftheCutoutrenderingmodecanbeusedtocreateaholeinthegeometry:
It’sworthnoticingthatCutoutdoesnotallowthebackofthegeometrytobeseen.Inthepreviousexample,youcouldnotseetheinnervolumeofthesphere.Ifyourequiresuchaneffect,youneedtocreateyourownshaderandmakesurethatthebackgeometryisnotculled.
SeealsoTheexamplesintheserecipehavebeencreatedusingtheUnity5ShaderCalibrationScene,whichisfreelyavailableintheAssetStoreathttps://www.assetstore.unity3d.com/en/#!/content/25422.Moreinformationaboutalbedoandtransparencycanbefoundathttp://docs.unity3d.com/Manual/StandardShaderMaterialParameterAlbedoColor.html.
CreatingmirrorsandreflectivesurfacesSpecularmaterialsreflectlightswhenobjectsareviewedfromcertainangles.Unfortunately,eventheFresnelreflection,whichisoneofthemostaccuratemodels,doesnotcorrectlyreflectlightsfromnearbyobjects.Thelightingmodelsexaminedinthepreviouschapterstookintoaccountonlylightsources,butignoredlightthatisreflectedfromothersurfaces.Withwhatyou’velearnedaboutshaderssofar,makingamirrorissimplynotpossible.GlobalilluminationmakesthispossiblebyprovidingPBRshaderswithinformationabouttheirsurroundings.Thisallowsobjectstohavenotjustspecularhighlights,butalsorealreflections,whichdependontheotherobjectsaroundthem.Real-timereflectionsareverycostlyandrequiremanualsettingupandtweakinginordertowork.Whendoneproperly,theycanbeusedtocreatemirror-likesurfaces,asseeninthefollowingpicture:
GettingreadyThisrecipewillnotfeatureanynewshader.Quitetheopposite;mostoftheworkisdonedirectlyintheeditor.Performthefollowingsteps:
1. Createanewscene.2. Createaquad,whichwillserveasamirror.3. Createanewmaterialandattachittothemirror.4. Placethequadinascenewithotherobjects.5. CreateanewreflectionprobefromGameObject|Light|ReflectionProbeand
placeitinfrontofthequad.
Howtodoit…Iftheprecedingstepshavebeenfollowedcorrectly,youshouldhaveaquadinthemiddleofyourscene,closetoareflectionprobe.Inordertomakeitinamirror,somechangesneedtobemade:
1. ChangetheshaderofthematerialtoStandardanditsRenderingModetoOpaque.2. ChangeitsMetallicandSmoothnesspropertiestoone.Youshouldseethematerial
reflectingtheskymoreclearly.3. SelectthereflectionprobeandchangeitsSizeandProbeOriginuntilitisinfrontof
thequadanditenclosesalltheobjectsthatyouwanttoreflect.4. Finally,changeitsTypetoRealtime.MakesurethatCullingMaskissetto
Everything.
Yourreflectionprobeshouldbeconfigured,asshowninthefollowingimage:
Ifyourprobeisusedforarealmirror,youshouldchecktheBoxProjectionflag.Ifitisusedforotherreflectivesurfaces,suchasshinypiecesofmetalorglasstables,youcanuncheckit.
Howitworks…Whenashaderwantsinformationaboutitssurroundings,itisusuallyprovidedinastructurecalledcubemaps.TheyhavebeenbrieflymentionedinChapter1,CreatingYourFirstShader,asoneoftheshaderpropertytypes,amongColor,2D,Float,andVector.Looselyspeaking,cubemapsarethe3Dequivalentof2Dtextures;theyrepresenta360-degreeviewoftheworld,asseenfromacenterpoint.Unity5previewscubemapswithasphericalprojection,asseeninthefollowingpicture:
Whencubemapsareattachedwithacamera,theyarereferredtoasskyboxesastheyareusedtoprovideawaytoreflectthesky.Theycanbeusedtoreflectgeometriesthatarenotintheactualscene,suchasnebulae,clouds,stars,andsoon.
Thereasonwhytheyarecalledcubemapsisbecauseofthewaytheyarecreated:acubemapismadeupofsixdifferenttextures,eachoneattachedtothefaceofacube.Youcancreateacubemapmanuallyordelegateittoareflectionprobe.Youcanimagineareflectionprobeasacollectionofsixcameras,creatinga360mappingofthesurroundingarea.Thisalsogivesyouanideawhyprobesaresoexpensive.Bycreatingoneinourscene,weallowUnitytoknowwhichobjectsarearoundthemirror.Ifyouneedmorereflectivesurfaces,youcanaddmultipleprobes.Youneednofurtheractionforthereflectionprobestowork.TheStandardShaderswillusethemautomatically.
YoushouldnoticethatwhentheyaresettoRealtime,theyrendertheircubemapatthebeginningofeveryframe.Thereisatricktomakethisfaster;ifyouknowthatpartofthegeometrythatyouwanttoreflectdoesnotmove,youcanbakethereflection.ThismeansthatUnitycancalculatethereflectionbeforestartingthegame,allowingmoreprecise(andcomputationallyexpensive)calculations.Inordertodothis,yourreflectionprobemustbesettoBakedandwillworkonlyforobjectsthatareflaggedasStatic.Staticobjectscannotmoveorchange,whichmakesthemperfectforterrains,buildings,andprops.Everytimeastaticobjectismoved,Unitywillregeneratethecubemapsforitsbakedreflectionprobes.Thismighttakeafewminutestoseveralhours.
YoucanmixRealtimeandBakedprobestoincreasetherealismofyourgame.Bakedprobeswillprovideveryhigh-qualityreflectionsenvironmentalreflections,whilethereal-timeonescanbeusedtomoveobjectssuchascarsormirrors.ThenextBakinglightsinyourscenerecipewillexplainindetailhowlightbakingworks.
SeealsoIfyouareinterestedinlearningmoreaboutreflectionprobes,youshouldchecktheselinks:
Unity5manualaboutReflectionProbe:http://docs.unity3d.com/Manual/class-ReflectionProbe.html
BakinglightsinyoursceneRenderinglightingisaveryexpensiveprocess.Evenwithstate-of-the-artGPUs,accuratelycalculatingthelighttransport(whichishowlightbouncesbetweensurfaces)cantakehours.Inordertomakethisprocessfeasibleforgames,real-timerenderingisessential.Modernenginescompromisebetweenrealismandefficiency;mostofthecomputationisdonebeforehandinaprocesscalledlightbaking.Thisrecipewillexplainhowlightbakingworksandhowyoucangetthemostoutofit.
GettingreadyLightbakingrequiresyoutohaveasceneready.Itshouldhavegeometriesand,obviously,lights.Forthisrecipe,wewillrelyonUnity’sstandardfeaturessothereisnoneedtocreateadditionalshadersormaterials.Forabettercontrol,youmightwanttoaccesstheLightingwindow.Ifyoudon’tseeit,selectWindow|Lightingfromthemenuanddockitwhereitismoreconvenientforyou.
Howtodoit…Lightbakingrequiressomemanualconfiguration.Therearethreeessential,yetindependent,stepsthatyouneedtotake.
ConfiguringthestaticgeometryThesestepsmustbefollowedfortheconfiguration:
1. Identifyalltheobjectsinyourscenethatdonotchangeposition,size,andmaterial.Possiblecandidatesarebuildings,walls,terrains,props,trees,andothers.
2. Selecttheseobjects,andchecktheStaticboxfromtheInspectortab,asshowninthefollowingimage.Ifanyoftheselectedobjectshaschildren,Unitywillaskifyouwantthemtobeconsideredstaticaswell.Iftheymeettherequirements(fixedposition,size,andmaterial),selectYes,changechildreninthepop-upbox:
3. Ifalightqualifiesasastaticobjectbutilluminatesnon-staticgeometry,makesurethatitsBakingpropertyissettoMixed.Ifitwillaffectonlystaticobjects,setittoBaked.
ConfiguringthelightprobesThereareobjectsinyourgamethatwillmove,suchasthemaincharacter,enemies,andtheothernon-playablecharacters(NPCs).Iftheyenterastaticregionthatisilluminated,youmightwanttosurrounditwithlightprobes.Todothis,followthegivensteps:
1. Fromthemenu,navigatetoGameObject|Light|LightProbeGroup.AnewobjectcalledLightProbeGroupwillappearinHierarchy.
2. Onceselected,fourinterconnectedsphereswillappear.Clickandmovethemaroundthescenesothattheyenclosethestaticregioninwhichyourcharacterscanenter.Thefollowingpictureshowsanexampleofhowlightprobescanbeusedtoenclosethevolumeofastaticofficespace:
3. Selectthemovingobjectsthatwillenterthelightproberegion.4. FromtheirInspector,expandtheirrenderercomponent(usuallyMeshRenderer)
andmakesurethatUseLightProbesischecked(seethefollowingimage):
Decidingwhereandwhentouselightprobesisacriticalproblem;moreinformationaboutthiscanbefoundintheHowitworks…section.
BakingthelightsTobakethelights,followthegivensteps:
1. Tofinallybakethelights,opentheLightingwindowandselectitsLightmapstab.2. IftheAutocheckboxisenabled,Unitywillautomaticallyexecutethebakingprocess
inthebackground.Ifnot,clickonBuild.
NoteLightbakingcantakeseveralhoursevenforarelativelysmallscene.Ifyouareconstantlymovingstaticobjectsorlights,Unitywillrestarttheprocessfromscratchcausingasevereslowdownintheeditor.YoucanunchecktheAutocheckboxfromtheLighting|Lightmapstabtopreventthissothatyoucandecidewhentostarttheprocessmanually.
Howitworks…Themostcomplicatedpartoftherenderingisthelighttransport.Duringthisphase,theGPUcalculateshowtheraysoflightbouncebetweenobjects.Ifanobjectanditslightsdon’tmove,thiscalculationcanbedoneonlyonceasitwillneverchangeduringthegame.FlagginganobjectasStaticishowyouaretellingUnitythatsuchanoptimizationcanbemade.
Looselyspeaking,lightbakingreferstotheprocessofcalculatingtheglobalilluminationofastaticobjectandsavingitinwhatiscalledalightmap.Oncebakingiscompleted,lightmapscanbeseenintheLightmapstaboftheLightingwindow:
Lightbakingcomesatagreatexpense:memory.Everystaticsurfaceis,infact,retexturedsothatitalreadyincludesitslightingcondition.Let’simaginethatyouhaveaforestoftrees,allsharingthesametexture.Oncetheyaremadestatic,eachtreewillhaveitsveryowntexture.Lightbakingnotonlyincreasesthesizeofyourgame,butcantakealotoftexturememoryifusedindiscriminately.
Thesecondaspectintroducedinthisrecipeislightprobing.Lightbakingproducesextremelyhigh-qualityresultsforstaticgeometriesbutdoesnotworkonmovingobjects.Ifyourcharacterisenteringinastaticregion,itcanlooksomehowdetachedfromtheenvironment.Itsshadingwillnotmatchthesurrounding,resultinginanaestheticallyunpleasantresult.Otherobjects,suchasskinnedmeshrenderers,willnotreceiveglobalilluminationevenifmadestatic.Bakinglightsinrealtimeisnotpossible,althoughlight
probesofferaneffectivealternative.Everylightprobesamplestheglobalilluminationataspecificpointinspace.Alightprobegroupcansampleseveralpointsinspace,allowingtointerpolateglobalilluminationwithinaspecificvolume.Thisallowsustocastabetterlightonmovingobjects,evendespitethefactthatglobalilluminationhasbeencalculatedonlyforafewpoints.Itisimportanttorememberthatlightprobesneedtoencloseavolumeinordertowork.Itisbesttoplacelightprobesinregionswherethereisasuddenchangeinthelightcondition.Similartolightmaps,probesconsumememoryandshouldbeplacedwisely;rememberthattheyexistonlyfornon-staticgeometry.
Evenwhileusinglightprobes,thereareafewaspectsthatUnity’sglobalilluminationcannotcapture.Non-staticobjects,forinstance,cannotreflectlightonotherobjects.
SeealsoYoucanreadmoreaboutlightprobesathttp://docs.unity3d.com/Manual/LightProbes.html.
Chapter5.VertexFunctionsThetermshaderoriginatesfromthefactthatCghasbeenusedmainlytosimulaterealisticlightingconditions(shadows)on3Dmodels.Despitethis,shadersarenowmuchmorethanthat.Theynotonlydefinethewaytheobjectsaregoingtolook,theycanalsoredefinetheirshapesentirely.Ifyouwanttolearnhowtomanipulatethegeometryofa3Dobjectviashaders,thisisthechapterforyou.
Inthischapter,youwilllearnthefollowingrecipes:
AccessingavertexcolorinaSurfaceShaderAnimatingverticesinaSurfaceShaderExtrudingyourmodelsImplementingasnowshaderImplementingavolumetricexplosion
IntroductionInChapter1,CreatingYourFirstShader,weexplainedthat3Dmodelsarenotjustacollectionoftriangles.Eachvertexcancontaindatathatisessentialtorenderthemodelitselfcorrectly.Thischapterwillexplorehowtoaccessthisinformationinordertouseitinashader.WewillalsoexploreindetailhowthegeometryofanobjectcanbedeformedsimplyusingCgcode.
AccessingavertexcolorinaSurfaceShaderLet’sbeginthischapterbytakingalookathowwecanaccesstheinformationofamodel’svertexusingthevertexfunctioninaSurfaceShader.Thiswillarmuswiththeknowledgetostartutilizingtheelementscontainedwithinamodel’svertextocreatereallyusefulandvisuallyappealingeffects.
Avertexinavertexfunctioncanreturninformationaboutitselfthatweneedtobeawareof.Youcanactuallyretrievethevertices’normaldirectionsasafloat3value,thepositionofthevertexasfloat3,andyoucanevenstorecolorvaluesineachvertexandreturnthatcolorasfloat4.Thisiswhatwewilltakealookatinthisrecipe.WeneedtoseehowtostorecolorinformationandretrievethisstoredcolorinformationinsideeachvertexofaSurfaceShader.
GettingreadyInordertowritethisshader,weneedtoprepareafewassets.ThefollowingstepswillsetusuptocreatethisVertexShader:
1. Inordertoviewthecolorsofavertex,weneedtohaveamodelthathashadcolorappliedtoitsvertices.WhileyoucoulduseUnitytoapplycolors,youwouldhavetowriteatooltoallowanindividualtoapplythecolorsorwritesomescriptstoachievethecolorapplication.Inthecaseofthisrecipe,wesimplyutilizedMayatoapplythecolorstoourmodel.Thismodelisavailableonthebook’sSupportpageathttps://www.packtpub.com/books/content/support.
2. Createanewsceneandplacetheimportedmodelinthescene.3. Createanewshaderandmaterial.Whencompleted,assigntheshadertothematerial
andthenthematerialtotheimportedmodel.
Yoursceneshouldnowlooksimilartothefollowingscreenshot:
Howtodoit…Withourscene,shader,andmaterialcreatedandreadytogo,wecanbegintowritethecodeforourshader.Launchtheshaderbydouble-clickingonitintheProjecttabintheUnityeditor.Performthefollowingsteps:
1. Aswearecreatingaverysimpleshader,wewillnotneedtoincludeanypropertiesinourPropertiesblock.Wewillstillincludeaglobaltintcolor,justtostayconsistentwiththeothershadersinthisbook.EnterthefollowingcodeinthePropertiesblockofyourshader:
Properties
{
_MainTint("GlobalColorTint",Color)=(1,1,1,1)
}
2. ThisnextsteptellsUnitythatwewillbeincludingavertexfunctioninourshader:
CGPROGRAM
#pragmasurfacesurfLambertvertex:vert
3. Asusual,ifwehaveincludedpropertiesinourPropertiesblock,wemustmakesuretocreateacorrespondingvariableinourCGPROGRAMstatement.Enterthefollowingcodejustbelowthe#pragmastatement:
float4_MainTint;
4. WenowturnourattentiontotheInputstruct.Weneedtoaddanewvariableinorderforoursurf()functiontoaccessthedatagiventousbyourvert()function:
structInput
{
float2uv_MainTex;
float4vertColor;
};
5. Now,wecanwriteoursimplevert()functiontogainaccesstothecolorsstoredineachvertexofourmesh:
voidvert(inoutappdata_fullv,outInputo)
{
o.vertColor=v.color;
}
6. Finally,wecanusethevertexcolordatafromourInputstructtobeassignedtotheo.Albedoparametersinthebuilt-inSurfaceOutputstruct:
voidsurf(InputIN,inoutSurfaceOutputo)
{
o.Albedo=IN.vertColor.rgb*_MainTint.rgb;
}
7. Withourcodecompleted,wecannowre-entertheUnityeditorandlettheshadercompile.Ifallgoeswell,youshouldseesomethingsimilartothefollowing
screenshot:
Howitworks…Unityprovidesuswithawaytoaccessthevertexinformationofthemodeltowhichashaderisattached.Thisgivesusthepowertomodifythingssuchasthevertices’positionandcolor.Withthisrecipe,wehaveimportedameshfromMaya(thoughjustaboutany3Dsoftwareapplicationcanbeused),wherevertexcolorswereaddedtoVerts.You’llnoticethatbyimportingthemodel,thedefaultmaterialwillnotdisplaythevertexcolors.Weactuallyhavetowriteashadertoextractthevertexcoloranddisplayitonthesurfaceofthemodel.Unityprovidesuswithalotofbuilt-infunctionalitywhenusingSurfaceShaders,whichmaketheprocessofextractingthisvertexinformationquickandefficient.
OurfirsttaskistotellUnitythatwewillbeusingavertexfunctionwhencreatingourshader.Wedothisbyaddingthevertex:vertparametertothe#pragmastatementofCGPROGRAM.ThisautomaticallymakesUnitylookforavertexfunctionnamedvert()whenitgoestocompiletheshader.Ifitdoesn’tfindone,Unitywillthrowacompilingerrorandaskyoutoaddavert()functiontoyourshader.
Thisbringsustoournextstep.Wehavetoactuallycodethevert()function,asseeninstep5.Byhavingthisfunction,wecanaccessthebuilt-indatastructcalledappdata_full.Thisbuilt-instructiswherethevertexinformationisstored.So,wethenextractthevertexcolorinformationbypassingittoourInputstructbyaddingthecode,o.vertColor=v.color.
TheovariablerepresentsourInputstructandthevvariableisourappdata_fullvertexdata.Inthiscase,wearesimplytakingthecolorinformationfromtheappdata_fullstructandputtingitinourInputstruct.OncethevertexcolorisinourInputstruct,wecanuseitinoursurf()function.Inthecaseofthisrecipe,wesimplyapplythecolortotheo.Albedoparametertothebuilt-inSurfaceOutputstruct.
There’smore…Onecanalsoaccessafourthcomponentfromthevertcolordata.Ifyounotice,thevertColorvariablewedeclaredintheInputstructisofthefloat4type.Thismeansthatwearealsopassingthealphavalueofthevertexcolors.Knowingthis,youcanuseittoyouradvantageforthepurposeofstoringafourthvertexcolortoperformeffectssuchastransparencyorgivingyourselfonemoremasktoblendtwotextures.It’sreallyuptoyouandyourproductiontodetermineifyoureallyneedtousethefourthcomponent,butitisworthmentioninghere.
WithUnity5,wenowhavetheabilitytotargetshaderstoDirectX11.Thisisgreat,butitmeansthatthecompilingprocessfortheshadersisnowabitpickier.Thismeansthatweneedtoincludeonemorelineofcodetoourshadertoinitializetheoutputofthevertexinformationproperly.Thefollowingcodeshowswhatthevertexfunctioncodelookslike,ifyouareusingDirectX11inyourshader:
voidvert(inoutappdata_fullv,outInputo)
{
UNITY_INITIALIZE_OUTPUT(Input,o);
o.vertColor=v.color;
}
Byincludingthislineofcode,yourVertexShaderwillnotthrowanywarnings,whichsaythatitwon’tcompiletoDirectX11appropriately.
AnimatingverticesinaSurfaceShaderNowthatweknowhowtoaccessdataonaper-vertexbasis,let’sexpandourknowledgesettoincludeothertypesofdataandpositionofavertex.
Usingavertexfunction,wecanaccessthepositionofeachvertexinamesh.Thisallowsustoactuallymodifyeachindividualvertexwhiletheshaderdoestheprocessing.
Inthisrecipe,wewillcreateashaderthatwillallowustomodifythepositionsofeachvertexonameshwithasinewave.Thistechniquecanbeusedtocreateanimationsforobjectssuchasflagsorwavesonanocean.
GettingreadyLet’sgatherourassetstogethersothatwecancreatethecodeforourVertexShader:
1. Createanewsceneandplaceaplanemeshinthecenterofthescene.2. Thencreateanewshaderandmaterial.3. Finally,assigntheshadertothematerialandthematerialtotheplanemesh.
Yoursceneshouldlooksimilartothefollowingscreenshot:
Howtodoit…Withourscenereadytogo,let’sdouble-clickonournewlycreatedshadertoopenitinMonoDevelop:
1. Let’sbeginwithourshaderbypopulatingthePropertiesblock:
Properties
{
_MainTex("Base(RGB)",2D)="white"{}
_tintAmount("TintAmount",Range(0,1))=0.5
_ColorA("ColorA",Color)=(1,1,1,1)
_ColorB("ColorB",Color)=(1,1,1,1)
_Speed("WaveSpeed",Range(0.1,80))=5
_Frequency("WaveFrequency",Range(0,5))=2
_Amplitude("WaveAmplitude",Range(-1,1))=1
}
2. WenowneedtotellUnitythatwearegoingtobeusingavertexfunctionbyaddingthefollowingtothe#pragmastatement:
CGPROGRAM
#pragmasurfacesurfLambertvertex:vert
3. Inordertoaccessthevaluesthathavebeengiventousbyourproperties,weneedtodeclareacorrespondingvariableinourCGPROGRAMblock:
sampler2D_MainTex;
float4_ColorA;
float4_ColorB;
float_tintAmount;
float_Speed;
float_Frequency;
float_Amplitude;
float_OffsetVal;
4. Wewillbeusingthevertexpositionmodificationasavertcoloraswell.Thiswillallowustotintourobject:
structInput
{
float2uv_MainTex;
float3vertColor;
}
5. Atthispoint,wecanperformourvertexmodificationusingasinewaveandvertexfunction.EnterthefollowingcodeaftertheInputstruct:
voidvert(inoutappdata_fullv,outInputo)
{
floattime=_Time*_Speed;
floatwaveValueA=sin(time+v.vertex.x*_Frequency)*_Amplitude;
v.vertex.xyz=float3(v.vertex.x,v.vertex.y+waveValueA,
v.vertex.z);
v.normal=normalize(float3(v.normal.x+waveValueA,v.normal.y,
v.normal.z));
o.vertColor=float3(waveValueA,waveValueA,waveValueA);
}
6. Finally,wecompleteourshaderbyperformingalerp()functionbetweentwocolorssothatwecantintthepeaksandvalleysofournewmesh,modifiedbyourvertexfunction:
voidsurf(InputIN,inoutSurfaceOutputo)
{
half4c=tex2D(_MainTex,IN.uv_MainTex);
float3tintColor=lerp(_ColorA,_ColorB,IN.vertColor).rgb;
o.Albedo=c.rgb*(tintColor*_tintAmount);
o.Alpha=c.a;
}
Aftercompletingthecodeforyourshader,switchbacktoUnityandlettheshadercompile.Oncecompiled,youshouldseesomethingsimilartothefollowingscreenshot:
Howitworks…Thisparticularshaderusesthesameconceptfromthelastrecipe,exceptthatthistime,wearemodifyingthepositionsoftheverticesinthemesh.Thisisreallyusefulifyoudon’twanttorigupsimpleobjects,suchasaflag,andthenanimatethemusingaskeletonstructureorhierarchyoftransforms.
Wesimplycreateasinewavevalueusingthesin()functionthatisbuiltintotheCglanguage.Aftercalculatingthisvalue,weaddittotheyvalueofeachvertexposition,creatingawave-likeeffect.
Wealsodidalittlebitofmodificationtothenormalonthemeshjusttogiveitamorerealisticshadingbasedonthesinewavevalue.
Youwillseehoweasyitistoperformmorecomplexvertexeffectsbyutilizingthebuilt-invertexparametersthatSurfaceShadersgiveus.
ExtrudingyourmodelsOneofthebiggestproblemsingamesisrepetitions.Creatingnewcontentisatime-consumingtask,andwhenyouhavetofacethousandsofenemies,chancesarethattheywillalllookthesame.Arelativelycheaptechniquetoaddvariationstoyourmodelsisusingashaderthataltersitsbasicgeometry.Thisrecipewillshowyouatechniquecallednormalextrusion,whichcanbeusedtocreateachubbierorskinnierversionofamodel,asshowninthefollowingpicturewiththesoldierfromtheUnitycampdemo:
GettingreadyForthisrecipe,weneedtohaveaccesstotheshaderusedbythemodelthatyouwanttoalter.Onceyouhaveit,weduplicateitsothatwecanedititsafely.Itcanbedoneasfollows:
1. Findtheshaderyourmodelisusingandonceselected,duplicateitbypressingCtrl+D.
2. Duplicatetheoriginalmaterialofthemodelandassigntheclonedshadertoit.3. Assignthenewmaterialtoyourmodel,andstarteditingit.
Inorderforthiseffecttowork,yourmodelshouldhavenormals.
Howtodoit…Tocreatethiseffect,startbymodifyingtheduplicatedshader:
1. Let’sstartbyaddingapropertytoourshader,whichwillbeusedtomodulateitsextrusion.Therangepresentedheregoesfrom-1to+1,butyoumighthavetoadjustthisaccordingtoyourownneeds:
_Amount("ExtrusionAmount",Range(-1,+1))=0
2. Couplethepropertywithitsrespectivevariable:
float_Amount;
3. Changethe#pragmadirectivesothatitnowusesavertexmodifier.Youcandothisbyaddingvertex:function_nameattheendofit.Inourcase,wehavecalledthefunction,vert:
#pragmasurfacesurfLambertvertex:vert
4. Addthefollowingvertexmodifier:
voidvert(inoutappdata_fullv){
v.vertex.xyz+=v.normal*_Amount;
}
5. Theshaderisnowready;youcanusetheExtrusionAmountsliderinthematerial’sInspectortabtomakeyourmodelskinnierorchubbier.
Howitworks…SurfaceShadersworksintwosteps.Inallthepreviouschapters,weonlyexploreditslastone:thesurfacefunction.Thereisanotherfunctionthatcanbeused:thevertexmodifier.Ittakesthedatastructureofavertex(whichisusuallycalledappdata_full)andappliesatransformationtoit.Thisgivesusthefreedomtodovirtuallyeverythingwiththegeometryofourmodel.Wesignalthegraphicsprocessingunit(GPU)thatsuchafunctionexistsbyaddingvertex:verttothe#pragmadirectiveoftheSurfaceShader.YoucanrefertoChapter6,FragmentShadersandGrabPasses,tolearnhowvertexmodifierscanbedefinedinaVertexandFragmentShaderinstead.
Oneofthemostsimple,yeteffective,techniquesthatcanbeusedtoalterthegeometryofamodeliscallednormalextrusion.Itworksbyprojectingavertexalongitsnormaldirection.Thisisdonebythefollowinglineofcode:
v.vertex.xyz+=v.normal*_Amount;
Thepositionofavertexisdisplacedby_Amountunitstowardthevertexnormal.If_Amountgetstoohigh,theresultscanbequiteunpleasant.Withsmallervalues,however,youcanaddalotofvariationstoyourmodels.
There’smore…Ifyouhavemultipleenemiesandwanteachonetohaveitsownweight,youhavetocreateadifferentmaterialforeachoneofthem.Thisisnecessaryasmaterialsarenormallysharedbetweenmodelsandchangingonewillchangeallofthem.Thereareseveralwaysinwhichyoucandothis;thequickestoneistocreateascriptthatautomaticallydoesitforyou.Thefollowingscript,onceattachedtoanobjectwithaRenderer,willduplicateitsfirstmaterialandsetthe_Amountpropertyautomatically:
usingUnityEngine;
publicclassNormalExtruder:MonoBehaviour{
[Range(-0.0001f,0.0001f)]
publicfloatamount=0;
//Usethisforinitialization
voidStart(){
Materialmaterial=GetComponent<Renderer>().sharedMaterial;
MaterialnewMaterial=newMaterial(material);
newMaterial.SetFloat("_Amount",amount);
GetComponent<Renderer>().material=newMaterial;
}
}
AddingextrusionmapsThistechniquecanactuallybeimprovedevenfurther.Wecanaddanextratexture(orusethealphachannelofthemainone)toindicatetheamountoftheextrusion.Thisallowsamuchbettercontroloverwhichpartsareraisedorlowered.Thefollowingcodeshowsyouhowitispossibletoachievesuchaneffect:
sampler2D_ExtrusionTex;
voidvert(inoutappdata_fullv){
float4tex=tex2Dlod(_ExtrusionTex,float4(v.texcoord.xy,0,0));
floatextrusion=tex.r*2-1;
v.vertex.xyz+=v.normal*_Amount*extrusion;
}
Theredchannelof_ExtrusionTexisusedasamultiplyingcoefficientfornormalextrusion.Avalueof0.5leavesthemodelunaffected;darkerorlightershadesareusedtoextrudeverticesinwardoroutward,respectively.Youshouldnoticethattosampleatexturewithinavertexmodifier,tex2Dlodshouldbeusedinsteadoftex2D.
NoteInshaders,colorchannelsgofrom0to1,althoughsometimesyouneedtorepresentnegativevaluesaswell(suchasinwardextrusion).Whenthisisthecase,treat0.5aszero,havingsmallervaluesconsideredasnegativeandhighervaluesaspositive.Thisisexactlywhathappenswithnormals,whichareusuallyencodedinRGBtextures.TheUnpackNormal()functionisusedtomapavalueintherange(0,1)ontherange(-1,+1).Mathematicallyspeaking,thisisequivalenttotex.r*2-1.
Extrusionmapsareperfecttozombifycharactersbyshrinkingtheskintohighlighttheshapeofthebonesunderneath.Thefollowingpictureshowsyouhowahealthysoldiercanbetransformedintoacorpseusingjustashaderandextrusionmap.Comparedtothepreviousexample,youcannoticehowtheclothingisunaffected.Theshaderusedinthefollowingpicturealsodarkenstheextrudedregionstogiveanevenmoreemaciatedlooktothesoldier:
ImplementingasnowshaderThesimulationofsnowhasalwaysbeenachallengeingames.Thevastmajorityofgamessimplyincludessnowdirectlyinthemodel’stexturessothattheirtopslookwhite.However,whatifoneoftheseobjectsstartsrotating?Snowisnotjustalickofpaintonasurface;itisaproperaccumulationofmaterialandshouldbetreatedassuch.Thisrecipeshowsyouhowtogiveasnowylooktoyourmodelsusingjustashader.
Thiseffectisachievedintwosteps.First,awhitecolorisusedforallthetrianglesfacingthesky.Second,theirverticesareextrudedtosimulatetheeffectofsnowaccumulation.Youcanseetheresultinthefollowingpicture:
NoteKeepinmindthatthisrecipedoesnotaimtocreateaphotorealisticsnoweffect.Itprovidesagoodstartingpoint,butitisuptoanartisttocreatetherighttexturesandfind
therightparameterstomakeitfityourgame.
GettingreadyThiseffectispurelybasedonshaders.Wewillneedthefollowing:
1. Createanewshaderforthesnoweffect.2. Createanewmaterialfortheshader.3. Assignthenewlycreatedmaterialtotheobjectthatyouwanttobesnowy.
Howtodoit…Tocreateasnowyeffect,openyourshaderandmakethefollowingchanges:
1. Replacethepropertiesoftheshaderwiththefollowingones:
_MainColor("MainColor",Color)=(1.0,1.0,1.0,1.0)
_MainTex("Base(RGB)",2D)="white"{}
_Bump("Bump",2D)="bump"{}
_Snow("Levelofsnow",Range(1,-1))=1
_SnowColor("Colorofsnow",Color)=(1.0,1.0,1.0,1.0)
_SnowDirection("Directionofsnow",Vector)=(0,1,0)
_SnowDepth("Depthofsnow",Range(0,1))=0
2. Completethemwiththeirrelativevariables:
sampler2D_MainTex;
sampler2D_Bump;
float_Snow;
float4_SnowColor;
float4_MainColor;
float4_SnowDirection;
float_SnowDepth;
3. ReplacetheInputstructurewiththefollowingone:
structInput{
float2uv_MainTex;
float2uv_Bump;
float3worldNormal;
INTERNAL_DATA
};
4. Replacethesurfacefunctionwiththefollowingone.Itwillcolorthesnowypartsofthemodelwhite:
voidsurf(InputIN,inoutSurfaceOutputStandardo){
half4c=tex2D(_MainTex,IN.uv_MainTex);
o.Normal=UnpackNormal(tex2D(_Bump,IN.uv_Bump));
if(dot(WorldNormalVector(IN,o.Normal),_SnowDirection.xyz)>=
_Snow)
o.Albedo=_SnowColor.rgb;
else
o.Albedo=c.rgb*_MainColor;
o.Alpha=1;
}
5. Configurethe#pragmadirectivesothatitusesvertexmodifiers:
#pragmasurfacesurfStandardvertex:vert
6. Addthefollowingvertexmodifiers,whichextrudetheverticescoveredinsnow:
voidvert(inoutappdata_fullv){
float4sn=mul(UNITY_MATRIX_IT_MV,_SnowDirection);
if(dot(v.normal,sn.xyz)>=_Snow)
v.vertex.xyz+=(sn.xyz+v.normal)*_SnowDepth*_Snow;
}
Youcannowusethematerial’sInspectortabtoselecthowmuchofyourmodelisgoingtobecoveredandhowthickthesnowshouldbe.
Howitworks…Thisshaderworksintwosteps.
ColoringthesurfaceThefirstonealtersthecolorofthetrianglesthatarefacingthesky.Itaffectsallthetriangleswithanormaldirectionsimilarto_SnowDirection.AsseenbeforeinChapter3,UnderstandingLightingModels,comparingunitvectorscanbedoneusingthedotproduct.Whentwovectorsareorthogonal,theirdotproductiszero;itisone(orminusone)whentheyareparalleltoeachother.The_Snowpropertyisusedtodecidehowalignedtheyshouldbetobeconsideredfacingthesky.
Ifyoulookcloselyatthesurfacefunction,youcanseethatwearenotdottingthenormalandsnowdirectiondirectly.Thisisbecausetheyareusuallydefinedinadifferentspace.Thesnowdirectionisexpressedinworldcoordinates,whiletheobjectnormalsareusuallyrelativetothemodelitself.Ifwerotatethemodel,itsnormalswillnotchange,whichisnotwhatwewant.Tofixthis,weneedtoconvertthenormalsfromtheirobjectcoordinatestoworldcoordinates.ThisisdonewiththeWorldNormalVector()function,asseeninthefollowingcode:
if(dot(WorldNormalVector(IN,o.Normal),_SnowDirection.xyz)>=_Snow)
o.Albedo=_SnowColor.rgb;
else
o.Albedo=c.rgb*_MainColor;
Thisshadersimplycolorsthemodelwhite;amoreadvancedoneshouldinitializetheSurfaceOutputStandardstructurewithtexturesandparametersfromarealisticsnowmaterial.
AlteringthegeometryThesecondeffectofthisshaderaltersthegeometrytosimulatetheaccumulationofsnow.Firstly,weidentifywhichtriangleshavebeencoloredwhitebytestingthesameconditionusedinthesurfacefunction.Thistime,unfortunately,wecannotrelyonWorldNormalVector()astheSurfaceOutputStandardstructureisnotyetinitializedinthevertexmodifier.Weusethisothermethodinstead,whichconverts_SnowDirectiontoobjectcoordinates:
float4sn=mul(UNITY_MATRIX_IT_MV,_SnowDirection);
Then,wecanextrudethegeometrytosimulatetheaccumulationofsnow:
if(dot(v.normal,sn.xyz)>=_Snow)
v.vertex.xyz+=(sn.xyz+v.normal)*_SnowDepth*_Snow;
Onceagain,thisisaverybasiceffect.Onecoulduseatexturemaptocontroltheaccumulationofsnowmorepreciselyorgiveapeculiar,unevenlook.
SeealsoIfyouneedhigh-qualitysnoweffectsandpropsforyourgame,youcanalsochecktheseresourcesontheUnityAssetStore:
WinterSuite($30):Amuchmoresophisticatedversionofthesnowshaderpresentedinthisrecipecanbefoundathttps://www.assetstore.unity3d.com/en/#!/content/13927WinterPack($60):Averyrealisticsetofpropsandmaterialsforsnowyenvironmentscanbefoundathttps://www.assetstore.unity3d.com/en/#!/content/13316
ImplementingavolumetricexplosionTheartofgamedevelopmentisaclevertrade-offbetweenrealismandefficiency.Thisisparticularlytrueforexplosions;theyareattheheartofmanygames,yetthephysicsbehindthemisoftenbeyondthecomputationalpowerofmodernmachines.Explosionsare,essentially,nothingmorethanveryhotballsofgas;hence,theonlywaytocorrectlysimulatethemisbyintegratingafluidsimulationintoyourgame.Asyoucanimagine,thisisinfeasibleforruntimeapplication,andmanygamessimulatethemsimplywithparticles.Whenanobjectexplodes,itiscommontosimplyinstantiatemanyfire,smoke,anddebrisparticlesthat,together,canachievebelievableresults.Thisapproach,unfortunately,isnotveryrealisticandiseasytospot.Thereisanintermediatetechniquethatcanbeusedtoachieveamuchmorerealisticeffect:volumetricexplosions.Theideabehindthisconceptisthatexplosionsarenottreatedanymorelikeabunchofparticles;theyareevolving3Dobjects,notjustflat2Dtextures.
GettingreadyStartthisrecipewiththefollowingsteps:
1. Createanewshaderforthiseffect.2. Createanewmaterialtohosttheshader.3. Attachthematerialtoasphere.Youcancreateonedirectlyfromtheeditor,
navigatingtoGameObject|3DObject|Sphere.
NoteThisrecipeworkswellwiththestandardUnitySphere,butifyouneedbigexplosions,youmightneedtouseamorehigh-polysphere.Infact,avertexfunctioncanonlymodifytheverticesofamesh.Alltheotherpointswillbeinterpolatedusingthepositionsofthenearbyvertices.Fewerverticesmeanalowerresolutionforyourexplosions.
4. Forthisrecipe,youwillalsoneedaramptexturethathas,inagradient,allthecolorsyourexplosionswillhave.YoucancreateatexturelikethefollowingimageusingGIMPorPhotoshop:
5. Onceyouhavethepicture,importittoUnity.Then,fromitsInspector,makesurethatFilterModeissettoBilinearandWrapModetoClamp.Thesetwosettingsmakesurethattheramptextureissampledsmoothly.
6. Lastly,youwillneedanoisytexture.YoucansearchontheInternetforfreelyavailablenoisetextures.ThemostcommonlyusedonesaregeneratedusingPerlinnoise.
Howtodoit…Thiseffectworksintwosteps:avertexfunctiontochangethegeometryandsurfacefunctiontogiveittherightcolor.Thestepsareasfollows:
1. Addthefollowingpropertiestotheshader:
_RampTex("ColorRamp",2D)="white"{}
_RampOffset("Rampoffset",Range(-0.5,0.5))=0
_NoiseTex("Noisetex",2D)="gray"{}
_Period("Period",Range(0,1))=0.5
_Amount("_Amount",Range(0,1.0))=0.1
_ClipRange("ClipRange",Range(0,1))=1
2. AddtheirrelativevariablessothattheCgcodeoftheshadercanactuallyaccessthem:
sampler2D_RampTex;
half_RampOffset;
sampler2D_NoiseTex;
float_Period;
half_Amount;
half_ClipRange;
3. ChangetheInputstructuresothatitreceivestheUVdataoftheramptexture:
structInput{
float2uv_NoiseTex;
};
4. Addthefollowingvertexfunction:
voidvert(inoutappdata_fullv){
float3disp=tex2Dlod(_NoiseTex,float4(v.texcoord.xy,0,0));
floattime=sin(_Time[3]*_Period+disp.r*10);
v.vertex.xyz+=v.normal*disp.r*_Amount*time;
}
5. Addthefollowingsurfacefunction:
voidsurf(InputIN,inoutSurfaceOutputo){
float3noise=tex2D(_NoiseTex,IN.uv_NoiseTex);
floatn=saturate(noise.r+_RampOffset);
clip(_ClipRange-n);
half4c=tex2D(_RampTex,float2(n,0.5));
o.Albedo=c.rgb;
o.Emission=c.rgb*c.a;
}
6. Wespecifythevertexfunctioninthe#pragmadirective,addingthenolightmapparametertopreventUnityfromaddingrealisticlightingstoourexplosion:
#pragmasurfacesurfLambertvertex:vertnolightmap
7. Thelaststepisselectingthematerial,andfromitsInspector,attachingthetwotexturesintherelativeslots.Thisisananimatedmaterial,meaningthatitevolvesovertime.YoucanwatchthematerialchangingintheeditorbyclickingonAnimatedMaterialsfromtheScenewindow:
Howitworks…Ifyouarereadingthisrecipe,youshouldalreadybefamiliarwithhowSurfaceShadersandvertexmodifierswork.Themainideabehindthiseffectistoalterthegeometryofthesphereinaseeminglychaoticway,exactlylikeithappensinarealexplosion.Thefollowingpictureshowsyouhowsuchanexplosionwilllookinsidetheeditor.Youcanseethattheoriginalmeshhasbeenheavilydeformed:
ThevertexfunctionisavariantofthetechniquecallednormalextrusionintroducedintheExtrudingyourmodelsrecipeofthischapter.Thedifferencehereisthattheamountoftheextrusionisdeterminedbothbythetimeandnoisetexture.
NoteWhenyouneedarandomnumberinUnity,youcanrelyontheRandom.Range()function.Thereisnostandardwaytogetrandomnumbersinashader,sotheeasiestwayistosampleanoisetexture.
Thereisnostandardwaytodothis,sotakethisasanexampleonly:
floattime=sin(_Time[3]*_Period+disp.r*10);
Thebuilt-in_Time[3]variableisusedtogetthecurrenttimefromwithintheshader,andtheredchannelofthenoisetexturedisp.risusedtomakesurethateachvertexmovesindependently.Thesin()functionmakestheverticesgoupanddown,simulatingthechaoticbehaviorofanexplosion.Then,thenormalextrusiontakesplace:
v.vertex.xyz+=v.normal*disp.r*_Amount*time;
Youshouldplaywiththesenumbersandvariablesuntilyoufindapatternofmovementthatyouarehappywith.
Thelastpartoftheeffectisachievedbythesurfacefunction.Here,thenoisetextureisusedtosamplearandomcolorfromtheramptexture.However,therearetwomoreaspectsthatareworthnoticing.Thefirstoneistheintroductionof_RampOffset.Itsusage
forcestheexplosiontosamplecolorsfromtheleftorrightsideofthetexture.Withpositivevalues,thesurfaceoftheexplosiontendstoshowmoregreytones;exactlywhathappenswhenitisdissolving.Youcanuse_RampOffsettodeterminehowmuchfireorsmokethereshouldbeinyourexplosion.Thesecondaspectintroducedinthesurfacefunctionistheusageofclip().Whatclip()doesisitclips(removes)pixelsfromtherenderingpipeline.Wheninvokedwithanegativevalue,thecurrentpixelisnotdrawn.Thiseffectiscontrolledby_ClipRange,whichdetermineswhichpixelsofthevolumetricexplosionsaregoingtobetransparent.
Bycontrollingboth_RampOffsetand_ClipRange,youhavefullcontroltodeterminehowtheexplosionbehavesanddissolves.
There’smore…Theshaderpresentedinthisrecipemakesaspherelooklikeanexplosion.Ifyoureallywanttouseit,youshouldcoupleitwithsomescriptsinordertogetthemostoutofit.Thebestthingtodoistocreateanexplosionobjectandmakeitintoaprefabsothatyoucanreuseiteverytimeyouneed.YoucandothisbydraggingthespherebackintotheProjectwindow.Onceitisdone,youcancreateasmanyexplosionsasyouwantusingtheInstantiate()function.
Itisworthnoticing,however,thatalltheobjectswiththesamematerialsharethesamelook.Ifyouhavemultipleexplosionsatthesametime,theyshouldnotusethesamematerial.Whenyouareinstantiatinganewexplosion,youshouldalsoduplicateitsmaterial.Youcandothiseasilywiththispieceofcode:
GameObjectexplosion=Instantiate(explosionPrefab)asGameObject;
Rendererrenderer=explosion.GetComponent<Renderer>();
Materialmaterial=newMaterial(renderer.sharedMaterial);
renderer.material=material;
Lastly,ifyouaregoingtousethisshaderinarealisticway,youshouldattachascripttoitthatchangesitssize,_RampOffset,and_ClipRangeaccordingtothetypeofexplosionthatyouwanttorecreate.
SeealsoMuchmorecanbedonetomakeexplosionsrealistic.Theapproachpresentedinthisrecipeonlycreatesanemptyshell;insideit,theexplosionisactuallyempty.Aneasytricktoimprovethisistocreateparticlesinsideit.However,youcanonlygothatfarwiththis.Theshortmovie,TheButterflyEffect(http://unity3d.com/pages/butterfly)createdbyUnityTechnologiesincollaborationwithPassionPicturesandNvidia,istheperfectexample.Itisbasedonthesameconceptofalteringthegeometryofasphere,butitrendersitwithatechniquecalledvolumeraycasting.Inanutshell,itrendersthegeometryasifit’sfull.Youcanseeanexampleinthefollowingpicture:
Ifyouarelookingforhigh-qualityexplosions,checkoutPyroTechnix(https://www.assetstore.unity3d.com/en/#!/content/16925)ontheAssetStore.Itincludesvolumetricexplosionsandcouplesthemwithrealisticshockwaves.
Chapter6.FragmentShadersandGrabPassesSofar,wehavereliedonSurfaceShaders.Theyhavebeendesignedtosimplifythewayshadercodingworks,providingmeaningfultoolsforartists.Ifwewanttopushourknowledgeofshadersfurther,weneedtoventureintotheterritoryofVertexandFragmentShaders.
Inthischapter,youwilllearnthefollowingrecipes:
UnderstandingVertexandFragmentShadersUsinggrabpassImplementingaGlassShaderImplementingaWaterShaderfor2Dgames
IntroductionComparedtoSurfaceShaders,VertexandFragmentShaderscomewithlittletonoinformationaboutthephysicalpropertiesthatdeterminehowlightreflectsonsurfaces.Whattheylackinexpressivity,theycompensatewithpower:VertexandFragmentShadersarenotlimitedbyphysicalconstraintsandareperfectfornon-photorealisticeffects.Thischapterwillfocusonatechniquecalledgrabpass,whichallowstheseshaderstosimulatedeformations.
UnderstandingVertexandFragmentShadersThebestwaytounderstandhowVertexandFragmentShadersworkisbycreatingoneyourself.Thisrecipewillshowyouhowtowriteoneoftheseshaders,whichwillsimplyapplyatexturetoamodelandmultiplyitbyagivencolor,asshowninthefollowingimage:
Theshaderpresentedhereisverysimple,anditwillbeusedasastartingbaseforalltheotherVertexandFragmentShaders.
GettingreadyForthisrecipe,wewillneedanewshader.Followthesesteps:
1. Createanewshader.2. Createanewmaterialandassigntheshadertoit.
Howtodoit…Inallthepreviouschapters,wehavealwaysbeenabletorefitSurfaceShaders.ThisisnotthecaseanymoreasSurfaceandFragmentShadersarestructurallydifferent.Wewillneedthefollowingchanges:
1. Deleteallthepropertiesoftheshader,replacingthemwiththefollowing:
_Color("Color",Color)=(1,0,0,1)//Red
_MainTex("Basetexture",2D)="white"{}
2. DeleteallthecodeintheSubShaderblockandreplaceitwiththisone:
Pass{
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
half4_Color;
sampler2D_MainTex;
structvertInput{
float4pos:POSITION;
float2texcoord:TEXCOORD0;
};
structvertOutput{
float4pos:SV_POSITION;
float2texcoord:TEXCOORD0;
};
vertOutputvert(vertInputinput){
vertOutputo;
o.pos=mul(UNITY_MATRIX_MVP,input.pos);
o.texcoord=input.texcoord;
returno;
}
half4frag(vertOutputoutput):COLOR{
half4mainColour=tex2D(_MainTex,output.texcoord);
returnmainColour*_Color;
}
ENDCG
}
ThiswillalsobethebaseforallfutureVertexandFragmentShaders.
Howitworks…Asthenamesuggests,VertexandFragmentShadersworkintwosteps.Themodelisfirstpassedthroughavertexfunction;theresultistheninputtedtoafragmentfunction.Boththesefunctionsareassignedusingpragmadirectives:
#pragmavertexvert
#pragmafragmentfrag
Inthiscase,theyaresimplycalledvertandfrag.
Conceptuallyspeaking,fragmentsarecloselyrelatedtopixels;thetermfragmentisoftenusedtorefertothecollectionofdatanecessarytodrawapixel.ThisisalsowhyVertexandFragmentShadersareoftencalledPixelShaders.
ThevertexfunctiontakestheinputdatainastructurethatisdefinedasvertInputintheshader:
structvertInput{
float4pos:POSITION;
float2texcoord:TEXCOORD0;
};
Itsnameistotallyarbitrary,butitscontentisnot.Eachfieldofstructmustbedecoratedwithabindingsemantic.ThisisafeatureofCgthatallowsustomarkvariablessothattheywillbeinitializedwithcertaindata,suchasnormalvectorsandvertexposition.ThebindingsemanticPOSITIONindicatesthatwhenvertInputisinputtedtothevertexfunction,poswillcontainthepositionofthecurrentvertex.Thisissimilartothevertexfieldoftheappdata_fullstructureinaSurfaceShader.Themaindifferenceisthatposisrepresentedinmodelcoordinates(relativetothe3Dobject),whichweneedtoconverttoviewcoordinatesmanually(relativetothepositiononthescreen).
NoteThevertexfunctioninaSurfaceShaderisusedtoalterthegeometryofthemodelonly.InaVertexandFragmentShader,instead,thevertexfunctionisnecessarytoprojectthecoordinatesofthemodeltothescreen.
Themathematicsbehindthisconversionisbeyondthescopeofthischapter.However,thistransformationcanbeachievedbymultiplyingposbyaspecialmatrixprovidedbyUnity:UNITY_MATRIX_MVP.Itisoftenreferredtoasthemodel-view-projectionmatrix,anditisessentialtofindthepositionofavertexonthescreen:
vertOutputo;
o.pos=mul(UNITY_MATRIX_MVP,input.pos);
Theotherpieceofinformationinitializedistextcoord,whichusestheTEXCOORD0bindingsemanticstogettheUVdataofthefirsttexture.Nofurtherprocessingisrequiredandthisvaluecanbepasseddirectlytothefragmentfunction:
o.texcoord=input.texcoord;
WhileUnitywillinitialisevertInputforus,weareresponsiblefortheinitializationofvertOutput.Despitethis,itsfieldsstillneedtobedecoratedwithbindingsemantics:
structvertOutput{
float4pos:SV_POSITION;
float2texcoord:TEXCOORD0;
};
OncethevertexfunctionhasinitialisedvertOutput,thestructureispassedtothefragmentfunction.Thissamplesthemaintextureofthemodelandmultipliesitbythecolorprovided.
Asyoucansee,theVertexandFragmentShaderhasnoknowledgeofthephysicalpropertiesofthematerial;comparedtoaSurfaceShader,itworksclosertothearchitectureofthegraphicsprocessingunit(GPU).
There’smore…OneofthemostconfusingaspectsofVertexandFragmentShadersisbindingsemantics.Therearemanyothersthatyoucanuseandtheirmeaningdependsonthecontext.
InputsemanticsThebindingsemanticsinthefollowingtablecanbeusedinvertInput,whichisthestructurethatUnityprovidestothevertexfunction.Thefieldsdecoratedwiththesesemanticswillbeinitializedautomatically:
Bindingsemantics Description
POSITION,SV_POSITION Thepositionofavertexinworldcoordinates(objectspace)
NORMAL Thenormalofavertex,relativetotheworld(nottothecamera)
COLOR,COLOR0,DIFFUSE,SV_TARGET Thecolorinformationstoredinthevertex
COLOR1,SPECULAR Thesecondarycolorinformationstoredinthevertex(usuallythespecular)
TEXCOORD0,TEXCOORD1,…,TEXCOORDi Thei-thUVdatastoredinthevertex
OutputsemanticsWhenbinding,semanticsareusedinvertOutput;theydonotautomaticallyguaranteethatfieldswillbeinitialized.Quitetheopposite;it’sourresponsibilitytodoso.Thecompilerwillmakeitsbesttoensurethatthefieldsareinitializedwiththerightdata:
Bindingsemantics Description
POSITION,SV_POSITION,HPOSThepositionofavertexincameracoordinates(clipspace,fromzerotooneforeachdimension)
COLOR,COLOR0,COL0,COL,
SV_TARGETThefrontprimarycolor
COLOR1,COL1 Thefrontsecondarycolor
TEXCOORD0,TEXCOORD1,…,
TEXCOORDi,TEXiThei-thUVdatastoredinthevertex
WPOS Theposition,inpixels,inthewindow(origininthelowerleftcorner)
If,foranyreason,youneedafieldthatwillcontainadifferenttypeofdata,youcandecorateitwithoneofthemanyTEXCOORDdataavailable.Thecompilerwillnotallowfieldstobeleftundecorated.
SeealsoYoucanrefertotheNVIDIAReferenceManualtochecktheotherbindingsemanticsthatareavailableinCg:
http://developer.download.nvidia.com/cg/Cg_3.1/Cg-3.1_April2012_ReferenceManual.pdf
UsinggrabpassIntheAddingtransparencytoPBRrecipeofChapter4,CreatingTestCasesandWritingScenariosforBehaviorDrivenDevelopmentinSymfony,wehaveseenhowamaterialcanbemadetransparent.Evenifatransparentmaterialcandrawoverascene,itcannotchangewhathasbeendrawnunderneathit.ThismeansthatthoseTransparentShaderscannotcreatedistortionssuchastheonestypicallyseeninglassorwater.Inordertosimulatethem,weneedtointroduceanothertechniquecalledgrabpass.Thisallowsustoaccesswhathasbeendrawnonscreensofarsothatashadercanuseit(oralterit)withnorestrictions.Tolearnhowtousegrabpasses,wewillcreateamaterialthatgrabswhat’srenderedbehinditanddrawsitagainonthescreen.It’sashaderthat,paradoxically,usesseveraloperationstoshownochangesatall.
GettingreadyThisreciperequiresthefollowingoperations:
1. Createashaderthatwewillinitializelater.2. Createamaterialtohosttheshader.3. Attachthematerialtoaflatpieceofgeometry,suchasaquad.Placeitinfrontof
someotherobjectsothatyoucannotseethroughit.Thequadwillappeartransparentassoonastheshaderiscomplete.
Howtodoit…Tousegrabpass,youneedtofollowthesesteps:
1. RemovethePropertiessection;thisshaderwillnotuseanyofthem.2. IntheSubShadersection,addgrabpass:
GrabPass{}
3. Afterthegrabpass,wewillneedtoaddthisextrapass:
Pass{
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
#include"UnityCG.cginc"
sampler2D_GrabTexture;
structvertInput{
float4vertex:POSITION;
};
structvertOutput{
float4vertex:POSITION;
float4uvgrab:TEXCOORD1;
};
//Vertexfunction
vertInputvert(vertexInputv){
vertexOutputo;
o.vertex=mul(UNITY_MATRIX_MVP,v.vertex);
o.uvgrab=ComputeGrabScreenPos(o.vertex);
returno;
}
//Fragmentfunction
half4frag(vertexOutputi):COLOR{
fixed4col=tex2Dproj(_GrabTexture,
UNITY_PROJ_COORD(i.uvgrab));
returncol+half4(0.5,0,0,0);
}
ENDCG
}
Howitworks…ThisrecipenotonlyintroducesgrabpassesbutalsoVertexandFragmentShaders;forthisreason,wehavetoanalyzetheshaderindetail.
Sofar,allthecodehasalwaysbeenplaceddirectlyintheSubShadersection.Thisisbecauseourpreviousshadersrequiredonlyasinglepass.Thistime,twopassesarerequired.Thefirstoneisthegrabpass,whichisdefinedsimplybyGrabPass{}.Therestofthecodeisplacedinthesecondpass,whichiscontainedinaPassblock.
Thesecondpassisnotstructurallydifferentfromtheshadershowninthefirstrecipeofthischapter;weusethevertexfunctionverttogetthepositionofthevertexandthenwegiveitacolorinthefragmentfunctionfrag.Thedifferenceisthatvertcalculatesanotherimportantdetail:theUVdataforthegrabpass.Thegrabpassautomaticallycreatesatexturethatcanbereferredtoasfollows:
sampler2D_GrabTexture;
Inordertosamplethistexture,weneeditsUVdata.TheComputeGrabScreenPosfunctionreturnsdatathatwecanuselatertosamplethegrabtexturecorrectly.ThisisdoneintheFragmentShaderusingthefollowingline:
fixed4col=tex2Dproj(_GrabTexture,UNITY_PROJ_COORD(i.uvgrab));
Thisisthestandardwayinwhichatextureisgrabbedandappliedtothescreeninitscorrectposition.Ifeverythinghasbeendonecorrectly,thisshaderwillsimplyclonewhathasbeenrenderedbehindthegeometry.Wewillseeinthefollowingrecipeshowthistechniquecanbeusedtocreatematerialssuchaswaterandglass.
There’smore…EverytimeyouuseamaterialwithGrabPass{},Unitywillhavetorenderthescreentoatexture.Thisoperationisveryexpensiveandlimitsthenumberofgrabpassesthatyoucanuseinagame.Cgoffersaslightlydifferentvariation:
GrabPass{"TextureName"}
Thislinenotonlyallowsyoutogiveanametothetexture,butitalsosharesthetexturewithallthematerialsthathaveagrabpasscalledTextureName.Thismeansthatifyouhavetenmaterials,Unitywillonlydoasinglegrabpassandsharethetexturetoallofthem.Themainproblemofthistechniqueisthatitdoesn’talloweffectsthatcanbestacked.Ifyouarecreatingaglasswiththistechnique,youwon’tbeabletohavetwoglassesoneaftertheother.
ImplementingaGlassShaderGlassisaverycomplicatedmaterial;itshouldnotbeasurprisethatotherchaptershavealreadycreatedshaderstosimulateitintheAddingtransparencytoPBRrecipeofChapter4,CreatingTestCasesandWritingScenariosforBehaviorDrivenDevelopmentinSymfony.However,thereisaneffectthattransparencycannotreproducedeformations.Mostglassesarenotperfect,hencetheycreatedistortionswhenwelookthroughthem.Thisrecipewillteachyouhowtodothis.TheideabehindthiseffectistouseaVertexandFragmentShaderwithagrabpass,andthensamplethegrabtexturewithalittlechangetoitsUVdatatocreateadistortion.Youcanseetheeffectinthefollowingimage,usingtheglass-stainedtexturesfromtheUnityStandardAssets:
GettingreadyThesetupforthisrecipeissimilartotheonepresentedinthepreviouschapter:
1. CreatenewVertexandFragmentShaders.Youcanstartbycopyingtheoneusedinthepreviousrecipe,Usinggrabpass,asabase.
2. Createamaterialthatwillusetheshader.3. Assignthematerialtoaquadoranotherflatgeometrythatwillsimulateyourglass.4. Placesomeobjectsbehinditsothatyoucanseethedistortioneffect.
Howtodoit…Let’sstartbyeditingtheVertexandFragmentShaders:
1. AddthesetwopropertiestothePropertiesblock:
_MainTex("Base(RGB)Trans(A)",2D)="white"{}
_BumpMap("Noisetext",2D)="bump"{}
_Magnitude("Magnitude",Range(0,1))=0.05
2. Addtheirvariablesinthesecondpass:
sampler2D_MainTex;
sampler2D_BumpMap;
float_Magnitude;
3. Addthetextureinformationintheinputandoutputstructures:
float2texcoord:TEXCOORD0;
4. TransfertheUVdatafromtheinputtotheoutputstructure:
o.texcoord=v.texcoord;
5. Usethefollowingfragmentfunction:
half4frag(vertOutputi):COLOR{
half4mainColour=tex2D(_MainTex,i.texcoord);
half4bump=tex2D(_BumpMap,i.texcoord);
half2distortion=UnpackNormal(bump).rg;
i.uvgrab.xy+=distortion*_Magnitude;
fixed4col=tex2Dproj(_GrabTexture,UNITY_PROJ_COORD(i.uvgrab));
returncol*mainColour*_Colour;
}
6. ThismaterialistransparentsoitchangesitstagsintheSubShaderblock:
Tags{"Queue"="Transparent""IgnoreProjector"="True""RenderType"=
"Opaque"}
7. What’sleftnowistosetthetexturefortheglassandanormalmaptodisplacethegrabtexture.
Howitworks…Thecorethatthisshaderusesisagrabpasstotakewhathasalreadybeenrenderedonthescreen.Thepartwherethedistortiontakesplaceisinthefragmentfunction.Here,anormalmapisunpackedandusedtooffsettheUVdataofthegrabtexture:
half4bump=tex2D(_BumpMap,i.texcoord);
half2distortion=UnpackNormal(bump).rg;
i.uvgrab.xy+=distortion*_Magnitude;
The_Magnitudeslideisusedtodeterminehowstrongtheeffectis.
There’smore…Thiseffectisverygeneric;itgrabsthescreenandcreatesadistortionbasedonanormalmap.Thereisnoreasonwhyitshouldn’tbeusedtosimulatemoreinterestingthings.Manygamesusedistortionsaroundexplosionsorothersci-fidevices.Thismaterialcanbeappliedtoasphereand,withadifferentnormalmap,itwouldsimulatetheheatwaveofanexplosionperfectly.
ImplementingaWaterShaderfor2DgamesTheGlassShaderintroducedinthepreviousrecipeisstatic;itsdistortionneverchanges.Ittakesjustafewchangestoconvertittoananimatedmaterial,makingitperfectfor2Dgames,whichfeaturewater.ThisrecipeusesasimilartechniquetotheoneshowninChapter5,AnimatingVerticesinaSurfaceShader:
GettingreadyThisrecipeisbasedontheVertexandFragmentShadersdescribedintheUsinggrabpassrecipeasitwillrelyheavilyongrabpass.
1. Createanewgrabpassshader;youcanwriteyourownorstartwiththeonepresentedintheUsinggrabpassrecipe.
2. Createanewmaterialforyourshader.3. Assignthematerialtoaflatgeometrythatwillrepresentyour2Dwater.Inorderfor
thiseffecttowork,youshouldhavesomethingrenderedbehinditsothatyoucanseethewater-likedisplacement.
4. Thisreciperequiresanoisetexture,whichisusedtogetpseudo-randomvalues.Itisimportantthatyouchooseaseamlessnoisetexture,suchastheonesgeneratedbytileable2DPerlinnoise,asshowninthefollowingimage.Thisensuresthatwhenthematerialisappliedtoalargeobject,youwillnotseeanydiscontinuity.Inorderforthiseffecttowork,thetexturehastobeimportedintheRepeatmode.Ifyouwantasmoothandcontinuouslookforyourwater,youshouldalsosetittoBilinearfromInspector.Thesesettingsensurethatthetextureissampledcorrectlyfromtheshader:
Howtodoit…Tocreatethisanimatedeffect,youcanstartbyrefittingtheshader.Followthesesteps:
1. Addthefollowingproperties:
_NoiseTex("Noisetext",2D)="white"{}
_Colour("Colour",Color)=(1,1,1,1)
_Period("Period",Range(0,50))=1
_Magnitude("Magnitude",Range(0,0.5))=0.05
_Scale("Scale",Range(0,10))=1
2. Addtheirrespectivevariablestothesecondpassoftheshader:
sampler2D_NoiseTex;
fixed4_Colour;
float_Period;
float_Magnitude;
float_Scale;
3. Definethefollowingoutputstructureforthevertexfunction:
structvertInput{
float4vertex:POSITION;
fixed4color:COLOR;
float2texcoord:TEXCOORD0;
float4worldPos:TEXCOORD1;
float4uvgrab:TEXCOORD2;
};
4. Thisshaderneedstoknowtheexactpositionofthespaceofeveryfragment.Todothis,addthefollowinglinetothevertexfunction:
o.worldPos=mul(_Object2World,v.vertex);
5. Usethefollowingfragmentfunction:
fixed4frag(vertInputi):COLOR{
floatsinT=sin(_Time.w/_Period);
float2distortion=float2(
tex2D(_NoiseTex,i.worldPos.xy/_Scale+float2(sinT,0)).r-0.5,
tex2D(_NoiseTex,i.worldPos.xy/_Scale+float2(0,sinT)).r-
0.5
);
i.uvgrab.xy+=distortion*_Magnitude;
fixed4col=tex2Dproj(_GrabTexture,UNITY_PROJ_COORD(i.uvgrab));
returncol*_Colour;
}
Howitworks…ThisshaderisverysimilartotheoneintroducedintheImplementingaGlassShaderrecipe.Themajordifferenceisthatthisisananimatedmaterial;thedisplacementisnotgeneratedfromanormalmapbuttakesintoaccountthecurrenttimeinordertocreateaconstantanimation.ThecodethatdisplacestheUVdataofthegrabtextureseemsquitecomplicated;let’strytounderstandhowithasbeengenerated.Theideabehinditisthatasinusoidfunctionisusedtomakethewateroscillate.Thiseffectneedstoevolveovertime;toachievethiseffect,thedistortiongeneratedbytheshaderdependsonthecurrenttimethatisretrievedwiththebuilt-invariable,_Time.The_Periodvariabledeterminestheperiodofthesinusoid,whichmeanshowfastthewavesappear:
float2distortion=float2(sin(_Time.w/_Period),sin(_Time.w/_Period))–
0.5;
TheproblemwiththiscodeisthatyouhavethesamedisplacementontheXandYaxes;asaresult,theentiregrabtexturewillrotateinacircularmotion,whichlooksnothinglikewater.Weobviouslyneedtoaddsomerandomnesstothis.
Themostcommonwaytoaddrandombehaviorstoshadersisbyincludinganoisetexture.Theproblemnowistofindawaytosamplethetextureatseeminglyrandompositions.ThebestwaytoavoidseeinganobvioussinusoidpatternistousethesinewavesasanoffsetintheUVdataofthenoisetexture:
floatsinT=sin(_Time.w/_Period);
float2distortion=float2
(tex2D(_NoiseTex,i.texcoord/_Scale+float2(sinT,0)).r-0.5,
tex2D(_NoiseTex,i.texcoord/_Scale+float2(0,sinT)).r-0.5
);
The_Scalevariabledeterminesthesizeofthewaves.Thissolutionisclosertothefinalversion,buthasasevereissue—ifthewaterquadmoves,theUVdatafollowsitandyoucanseethewaterwavesfollowingthematerialratherthanbeinganchoredtothebackground.Tosolvethis,weneedtousetheworldpositionofthecurrentfragmentastheinitialpositionfortheUVdata:
floatsinT=sin(_Time.w/_Period);
float2distortion=float2
(tex2D(_NoiseTex,i.worldPos.xy/_Scale+float2(sinT,0)).r-0.5,
tex2D(_NoiseTex,i.worldPos.xy/_Scale+float2(0,sinT)).r-0.5
);
i.uvgrab.xy+=distortion*_Magnitude;
Theresultisapleasant,seamlessdistortion,whichdoesn’tmoveinanycleardirection.
NoteAsithappenswithallthesespecialeffects,thereisnoperfectsolution.Thisrecipeshowsyouatechniquetocreatewater-likedistortion,butyouareencouragedtoplaywithituntilyoufindaneffectthatfitstheaestheticsofyourgame.
Chapter7.MobileShaderAdjustmentInthenexttwochapters,wearegoingtotakealookatmakingtheshadersthatwewriteperformance-friendlyfordifferentplatforms.Wewon’tbetalkingaboutanyoneplatformspecifically,butwearegoingtobreakdowntheelementsofshaderswecanadjusttomakethemmoreoptimizedformobilesandefficientonanyplatformingeneral.ThesetechniquesrangefromunderstandingwhatUnityoffersintermsofbuilt-invariablesthatreducetheoverheadoftheshadersmemorytolearningaboutwaysinwhichwecanmakeourownshadercodemoreefficient.Thischapterwillcoverthefollowingrecipes:
WhatisacheapshaderProfilingyourshadersModifyingourshadersformobile
IntroductionLearningtheartofoptimizingyourshaderswillcomeupinjustaboutanygameprojectthatyouworkon.Therewillalwayscomeapointinanyproductionwhereashaderneedstobeoptimized,ormaybeitneedstouselesstexturesbutproducethesameeffect.Asatechnicalartistorshaderprogrammer,youhavetounderstandthesecorefundamentalstooptimizeyourshaderssothatyoucanincreasetheperformanceofyourgamewhilestillachievingthesamevisualfidelity.Havingthisknowledgecanalsohelpinsettingthewayinwhichyouwriteyourshaderfromthestart.Forinstance,byknowingthatthegamebuiltusingyourshaderwillbeplayedonamobiledevice,wecanautomaticallysetallourlightingfunctionstouseahalfvectorastheviewdirectionorsetallofourfloatvariabletypestofixedorhalf.These,andmanyothertechniques,allcontributetoyourshadersrunningefficientlyonyourtargethardware.Let’sbeginourjourneyandstartlearninghowtooptimizeourshaders.
Whatisacheapshader?Whenfirstaskedthequestion,whatisacheapshader,itmightbealittletoughtoanswerastherearemanyelementsthatgointomakingamoreefficientshader.Itcouldbetheamountofmemoryusedupbyyourvariables.Itcouldbetheamountoftexturestheshaderisusing.Itcouldalsobethatourshaderisworkingfine,butwecanactuallyproducethesamevisualeffectwithhalftheamountofdatabyreducingtheamountofcodeweareusingordatawearecreating.Wearegoingtoexploreafewofthesetechniquesinthisrecipeandshowhowtheycanbecombinedtomakeyourshaderfastandefficientbutstillproducethehigh-qualityvisualseveryoneexpectsfromgamestoday,whetheronamobileorPC.
GettingreadyInordertogetthisrecipestarted,weneedtogatherafewresourcestogether.Solet’sperformthefollowingtasks:
1. Createanewsceneandfillitwithasimplesphereobjectandsingledirectionallight.2. Createanewshaderandmaterialandassigntheshadertothematerial.3. Wethenneedtoassignthematerialwejustcreatedtooursphereobjectinournew
scene.4. Finally,modifytheshadersothatitusesadiffusetextureandnormalmapand
includesyourowncustomlightingfunction.Thefollowingimageshowstheresultofmodifyingourdefaultshaderthatwecreatedinstep1:
Youshouldnowhaveasetupsimilartothefollowingimage.Thissetupwillallowusto
takealookatsomeofthebasicconceptsthatgointooptimizingshadersusingSurfaceShadersinUnity:
Howtodoit…WearegoingtobuildasimpleDiffuseshadertotakealookatafewwaysinwhichyoucanoptimizeyourshadersingeneral.
First,we’lloptimizeourvariabletypessothattheyuselessmemorywhentheyareprocessingdata:
1. Let’sbeginwiththestructInputinourshader.Currently,ourUVsarebeingstoredinavariableofthefloat2type.Weneedtochangethistousehalf2instead:
2. Wecanthenmovetoourlightingfunctionandreducethevariable’smemoryfootprintbychangingtheirtypestothefollowing:
3. Finally,wecancompletethisoptimizationpassbyupdatingthevariablesinoursurf()function:
Nowthatwehaveourvariablesoptimized,wearegoingtotakeadvantageofabuilt-inlightingfunctionvariablesothatwecancontrolhowlightsareprocessedbythisshader.Bydoingthis,wecangreatlyreducetheamountoflightstheshaderprocesses.Modifythe#pragmastatementinyourshaderwiththefollowingcode:
WecanoptimizethisfurtherbysharingUVsbetweenthenormalmapanddiffusetexture.Todothis,wesimplychangetheUVlookupinourUnpackNormal()functiontouse_MainTexUVsinsteadoftheUVsof_NormalMap:
4. AswehaveremovedtheneedforthenormalmapUVs,weneedtomakesurethatweremovethenormalmapUVcodefromtheInputstruct:
5. Finally,wecanfurtheroptimizethisshaderbytellingtheshaderthatitonlyworkswithcertainrenderers:
Theresultofouroptimizationpassesshowusthatwereallydon’tnoticeadifferenceinthevisualquality,butwehavereducedtheamountoftimeittakesforthisshadertobedrawntothescreen.Youwilllearnaboutfindingouthowmuchtimeittakesforashadertorenderinthenextrecipe,buttheideatofocusonhereisthatweachievethesameresultwithlessdata.Sokeepthisinmindwhencreatingyourshaders.Thefollowingimageshowsusthefinalresultofourshader:
Howitworks…Nowthatwehaveseenthewaysinwhichwecanoptimizeourshaders,let’sdiveinabitdeeperandreallyunderstandwhyallofthesetechniquesareworkingandlookatacoupleofothertechniquesthatyoucantryforyourself.
Let’sfirstfocusourattentiononthesizeofthedataeachofourvariablesisstoringwhenwedeclarethem.Ifyouarefamiliarwithprogramming,thenyouwillunderstandthatyoucandeclarevaluesorvariableswithdifferentsizesoftypes.Thismeansthatafloatactuallyhasamaximumsizeinmemory.Thefollowingdescriptionwilldescribethesevariabletypesinmuchmoredetail:
Float:Afloatisafull32-bitprecisionvalueandistheslowestofthethreedifferenttypesweseehere.Italsohasitscorrespondingvaluesoffloat2,float3,andfloat4.Half:Thehalfvariabletypeisareduced16-bitfloatingpointvalueandissuitabletostoreUVvaluesandcolorvaluesandismuchfasterthanusingafloatvalue.Ithasitscorrespondingvalueslikethefloattype,whicharehalf2,half3,andhalf4.Fixed:Afixedvalueisthesmallestinsizeofthethreetypes,butcanbeusedforlightingcalculationsandcolorsandhasthecorrespondingvaluesoffixed2,fixed3,andfixed4.
Oursecondphaseofoptimizingoursimpleshaderwastodeclarethenoforwardaddvaluetoour#pragmastatement.ThisisbasicallyaswitchthatautomaticallytellsUnitythatanyobjectwiththisparticularshaderreceivesonlyper-pixellightfromasingledirectionallight.Anyotherlightsthatarecalculatedbythisshaderwillbeforcedtobeprocessedasper-vertexlightsusingSphericalHarmonicvaluesproducedinternallybyUnity.Thisisespeciallyobviouswhenweplaceanotherlightinthescenetolightoursphereobjectbecauseourshaderisdoingaper-pixeloperationusingthenormalmap.
Thisisgreat,butwhatifyouwantedtohaveabunchofdirectionallightsinthesceneandcontroloverwhichoftheselightsisusedforthemainper-pixellight?Well,ifyounotice,eachlighthasaRenderModedrop-down.Ifyouclickonthisdrop-down,youwillseeacoupleofflagsthatcanbeset.TheseareAuto,Important,andNotImportant.Byselectingalight,youcantellUnitythatalightshouldbeconsideredmoreasaper-pixellightthanaper-vertexlight,bysettingitsrendermodetoImportantandviceversa.IfyouleavealightsettoAuto,thenyouwillletUnitydecidethebestcourseofaction.
Placeanotherlightinyoursceneandremovethetexturethatiscurrentlyinthemaintextureforourshader.Youwillnoticethatthesecondpointlightdoesnotreactwiththenormalmap,onlythedirectionallightthatwecreatedfirst.Theconcepthereisthatyousaveonper-pixeloperationsbyjustcalculatingallextralightsasvertexlights,andsaveperformancebyjustcalculatingthemaindirectionallightasaper-pixellight.Thefollowingimagevisuallydemonstratesthisconceptasthepointlightisnotreactingwiththenormalmap:
Finally,wedidabitofcleaningupandsimplytoldthenormalmaptexturetousethemaintexture’sUVvalues,andwegotridofthelineofcodethatpulledinaseparatesetofUVvaluesspecificallyforthenormalmap.Thisisalwaysanicewaytosimplifyyourcodeandcleanupanyunwanteddata.
Wealsodeclaredexclude_pass:prepassinour#pragmastatementsothatthisshaderwouldn’tacceptanycustomlightingfromthedeferredrenderer.Thismeansthatwecanreallyusethisshadereffectivelyintheforwardrendereronly,whichissetinthemaincamera’ssettings.
Bytakingabitoftime,youwillbeamazedathowmuchashadercanbeoptimized.YouhaveseenhowwecanpackgrayscaletexturesintoasingleRGBAtextureaswellasuselookuptexturestofakelighting.Therearemanywaysinwhichashadercanbeoptimized,whichiswhyitisalwaysanambiguousquestiontoaskinthefirstplace,butknowingthesedifferentoptimizationtechniques,youcancateryourshaderstoyourgameandtargetplatform,ultimatelyresultinginverystreamlinedshadersandanicesteadyframerate.
ProfilingyourshadersNowthatweknowhowwecanreducetheoverheadthatourshadersmighttake,let’stakealookathowtofindproblematicshadersinascenewhereyoumighthavealotofshadersoratonofobjects,shaders,andscripts,allrunningatthesametime.Tofindasingleobjectorshaderamongawholegamecanbequitedaunting,butUnityprovidesuswithitsbuilt-inProfiler.Thisallowsustoactuallysee,onaframe-by-framebasis,whatishappeninginthegameandeachitembeingusedbytheGPUandCPU.
UsingtheProfiler,wecanisolateitemssuchasshaders,geometry,andgeneralrenderingitemsusingitsinterfacetocreateblocksofprofilingjobs.Wecanfilteroutitemstillwearelookingattheperformanceofjustasingleobject.ThisthenletsusseetheeffectsontheCPUandGPUthattheobjecthaswhileitisperformingitsfunctionsatruntime.
Let’stakealookthroughthedifferentsectionsoftheProfilerandlearnhowtodebugourscenesand,mostimportantly,ourshaders.
GettingreadyLet’suseourProfilerbygettingafewassetsreadyandlaunchingtheProfilerwindow:
1. Let’susethescenefromthelastrecipeandlaunchtheUnityProfilerfromWindow|ProfilerorCtrl+7.
2. Let’salsoduplicateoursphereacouplemoretimestoseehowthataffectsourrendering.
Youshouldseesomethingsimilartothefollowingimage:
Howtodoit…TousetheProfiler,wewilltakealookatsomeoftheUIelementsofthiswindow.Beforewehitplay,let’stakealookathowtogettheinformationweneedfromtheprofiler:
1. First,clickonthelargerblocksintheProfilerwindowcalledGPUUsage,CPUUsage,andRendering.Youwillfindtheseblocksontheleft-handsideoftheupperwindow:
Usingtheseblocks,wecanseedifferentdataspecifictothosemajorfunctionsofourgame.TheCPUUsageisshowinguswhatmostofourscriptsaredoingaswellasphysicsandoverallrendering.TheGPUUsageblockisgivingusdetailedinformationabouttheelementsthatarespecifictoourlighting,shadows,andrenderqueues.Finally,theRenderingblockisgivingusinformationaboutthedrawcallsandamountofgeometrywehaveinoursceneatanyoneframe.
Byclickingoneachoftheseblocks,wecanisolatethetypeofdataweseeduringourprofilingsession.
2. Now,clickonthetinycoloredblocksinoneoftheseProfileblocksandhitplayorCtrl+Ptorunthescene.
Thisletsusdivedownevendeeperintoourprofilingsessionsothatwecanfilteroutwhatisbeingreportedbackforus.Whilethesceneisrunning,uncheckalloftheboxes,exceptforOpaqueintheGPUUsageblock.NoticethatwecannowseejusthowmuchtimeisbeingusedtorendertheobjectsthataresettotheRenderQueueof
Opaque:
3. AnothergreatfunctionoftheProfilerwindowistheactionofclickinganddragginginthegraphview.Thiswillautomaticallypauseyourgamesothatyoucanfurtheranalyzeacertainspikeinthegraphtofindoutexactlywhichitemiscausingtheperformanceproblem.Clickanddragaroundinthegraphviewtopausethegameandseetheeffectofusingthisfunctionality:
4. TurningourattentionnowtowardsthelowerhalfoftheProfilerwindow,youwillnoticethatthereisadrop-downitemavailablewhenwehavetheGPUBlockselected.Wecanexpandthistogetevenmoredetailedinformationaboutthecurrentactiveprofilingsessionand,inthiscase,moreinformationaboutwhatthecameraiscurrentlyrenderingandhowmuchtimeitistakingup:
ThisgivesusacompletelookattheinnerworkingsofwhatUnityisprocessinginthisparticularframe.Inthiscase,wecanseethatourthreesphereswithouroptimizedshaderaretakingroughly0.14millisecondstodrawtothescreen,theyaretakingupsevendrawcalls,andthisprocessistaking3.1percentoftheGPU’stimeineveryframe.It’sthistypeofinformationwecanusetodiagnoseandsolveperformanceissueswithregardtoshaders.Let’sconductatesttoseetheeffectsofaddingonemoretexturetoourshaderandblendingtwodiffusetexturestogetherusingalerpfunction.Youwillseetheeffectsintheprofilerprettyclearly.
5. ModifythePropertiesblockofyourshaderwiththefollowingcodetogiveusanothertexturetouse:
6. Thenlet’sfeedourtexturetoCGPROGRAM:
7. Nowit’stimetoupdateoursurf()functionaccordinglysothatweblendourtexturediffusetexturestogether:
OnceyousaveyourmodificationsinyourshaderandreturntoUnity’seditor,wecanrunourgameandseetheincreaseinmillisecondsofournewshader.PressplayonceyouhavereturnedtoUnityandlet’stakealookattheresultsinourprofiler:
YoucanseenowthattheamountoftimetorenderourOpaqueShadersinthissceneistaking0.179milliseconds,upfrom0.140milliseconds.Byaddinganothertextureandusingthelerp()function,weincreasedtherendertimeforourspheres.Whileit’sasmall
change,imaginehaving20shadersallworkingindifferentwaysondifferentobjects.
Usingtheinformationgivenhere,youcanpinpointareasthatarecausingperformancedecreasesmorequicklyandsolvetheseissuesusingthetechniquesfromthepreviousrecipe.
Howitworks…Whileit’scompletelyoutofscopeofthisbooktodescribehowthistoolactuallyworksinternally,wecansurmisethatUnityhasgivenusawaytoviewthecomputer’sperformancewhileourgameisrunning.Basically,thiswindowistiedverytightlytotheCPUandGPUtogiveusreal-timefeedbackofhowmuchtimeisbeingtakenforeachofourscripts,objects,andrenderqueues.Usingthisinformation,wehaveseenthatwecantracktheefficiencyofourshaderwritingtoeliminateproblematicareasandcode.
There’smore…Itisalsopossibletoprofilespecificallyformobileplatforms.UnityprovidesuswithacoupleofextrafeatureswhentheAndroidorIOSbuildtargetissetintheBuildSettings.Wecanactuallygetreal-timeinformationfromourmobiledeviceswhilethegameisrunning.Thisbecomesveryusefulbecauseyouareabletoprofiledirectlyonthedeviceitselfinsteadofprofilingdirectlyinyoureditor.Tofindoutmoreaboutthisprocess,refertoUnity’sdocumentationatthefollowinglink:
http://docs.unity3d.com/Documentation/Manual/MobileProfiling.html
ModifyingourshadersformobileNowthatwehaveseenquiteabroadsetoftechniquestomakereallyoptimizedshaders,let’stakealookatwritinganice,high-qualityshadertargetedforamobiledevice.Itisactuallyquiteeasytomakeafewadjustmentstotheshaderswehavewrittensothattheyrunfasteronamobiledevice.Thisincludeselementssuchasusingtheapproxvieworhalfasviewlightingfunctionvariables.Wecanalsoreducetheamountoftexturesweneedandevenapplybettercompressionforthetexturesweareusing.Bytheendofthisrecipe,wewillhaveanicelyoptimizednormal-mapped,Specularshaderforuseinourmobilegames.
GettingreadyBeforewebegin,let’sgetafreshnewsceneandfillitwithsomeobjectstoapplyourMobileshader:
1. Createanewsceneandfillitwithadefaultsphereandsingledirectionallight.2. Createanewmaterialandshader,andassigntheshadertothematerial.3. Finally,assignthematerialtooursphereobjectinourscene.
Whencompleted,youshouldhaveascenesimilartotheoneinthefollowingimage:
Howtodoit…Forthisrecipe,wewillwriteamobile-friendlyshaderfromscratchanddiscusstheelementsthatmakeitmoremobile-friendly:
1. Let’sfirstpopulateourPropertiesblockwiththeneededtextures.Inthiscase,wearegoingtouseasingleDiffusetexturewiththeglossmapinitsalphachannel,normalmap,andsliderforspecularintensity:
2. Ournexttaskistosetupour#pragmadeclarations.ThiswillsimplyturncertainfeaturesoftheSurfaceShaderonandoff,ultimatelymakingtheshadercheaperormoreexpensive:
3. WethenneedtomaketheconnectionbetweenourPropertiesblockandCGPROGRAM.Thistime,wearegoingtousethefixedvariabletypeforourspecularintensityslidertoreduceitsmemoryusage:
4. Inorderforustomapourtexturestothesurfaceofourobject,weneedtogetsomeUVs.Inthiscase,wearegoingtogetonlyonesetofUVstokeeptheamountofdatainourshaderdowntoaminimum:
5. Thenextstepistofillinourlightingfunctionusingafewnewinputvariablesthatareavailabletoususingthenew#pragmadeclarations:
6. Finally,wecompletetheshaderbycreatingthesurf()functionandprocessingthefinalcolorofoursurface:
Whencompletedwiththecodeportionofthisrecipe,saveyourshaderandreturntotheUnityeditortolettheshadercompile.Ifnoerrorsoccurred,youshouldseearesultsimilartothefollowingimage:
Howitworks…So,let’sbeginthedescriptionofthisshaderbyexplainingwhatitdoesanddoesn’tdo.First,itexcludesthedeferredlightingpass.Thismeansthatifyoucreatedalightingfunctionthatwasconnectedtothedeferredrenderer’sprepass,itwouldn’tusethatparticularlightingfunctionandwouldlookforthedefaultlightingfunctionliketheonesthatwehavebeencreatingthusfarinthisbook.
ThisparticularshaderdoesnotsupportLightmappingbyUnity’sinternallight-mappingsystem.Thisjustkeepstheshaderfromtryingtofindlightmapsfortheobjectthattheshaderisattachedto,makingtheshadermoreperformancefriendlybecauseitisnothavingtoperformthelightmappingcheck.
Weincludedthenoforwardadddeclarationsothatweprocessonlyper-pixeltextureswithasingledirectionallight.Allotherlightsareforcedtobecomeper-vertexlightsandwillnotbeincludedinanyper-pixeloperationsyoumightdointhesurf()function.
Finally,weareusingthehalfasviewdeclarationtotellUnitythatwearen’tgoingtousethemainviewDirparameterfoundinanormallightingfunction.Instead,wearegoingtousethehalfvectorastheviewdirectionandprocessourspecularwiththis.Thisbecomesmuchfasterfortheshadertoprocessasitwillbedoneonaper-vertexbasis.Itisn’tcompletelyaccuratewhenitcomestosimulatingspecularintherealworld,butvisuallyonamobiledevice,itlooksjustfineandtheshaderismoreoptimized.
Itstechniqueslikethesethatmakeashadermoreefficientandcleaner,codewise.Alwaysmakesurethatyouareusingonlythedatayouneedwhileweighingthisagainstyourtargethardwareandthevisualqualitythatthegamerequires.Intheend,itbecomesacocktailofthesetechniquesthatultimatelymakeupyourshadersforyourgames.
Chapter8.ScreenEffectswithUnityRenderTexturesInthischapter,youwilllearnthefollowingrecipes:
SettingupthescreeneffectsscriptsystemUsingbrightness,saturation,andcontrastwithscreeneffectsUsingbasicPhotoshop-likeBlendmodeswithscreeneffectsUsingtheOverlayBlendmodewithscreeneffects
IntroductionOneofthemostimpressiveaspectsoflearningtowriteshadersistheprocessofcreatingyourownscreeneffects,alsoknownasposteffects.Withthesescreeneffects,wecancreatestunningreal-timeimageswithBloom,MotionBlur,HDReffects,andsoon.MostmoderngamesoutinthemarkettodaymakeheavyuseoftheseScreeneffectsfortheirdepthoffieldeffects,bloomeffects,andevencolorcorrectioneffects.
Throughoutthischapter,youwilllearnhowtobuildupthescriptsystemthatgivesusthecontroltocreatethesescreeneffects.WewillcoverRenderTextures,whatthedepthbufferis,andhowtocreateeffectsthatgiveyouPhotoshop-likecontroloverthefinalrenderedimageofyourgame.Byutilizingscreeneffectsforyourgames,younotonlyroundoutyourshaderwritingknowledge,butyouwillalsohavethepowertocreateyourownincrediblereal-timerenderswithUnity.
SettingupthescreeneffectsscriptsystemTheprocessofcreatingscreeneffectsisoneinwhichwegrabafullscreenimage(ortexture),useashadertoprocessitspixelsontheGPU,andthensenditbacktoUnity’srenderertoapplyittothewholerenderedimageofthegame.Thisallowsustoperformper-pixeloperationsontherenderedimageofthegameinrealtime,givingusamoreglobalartisticcontrol.
Imagineifyouhadtogothroughandadjusteachmaterialoneachobjectinyourgametojustadjustthecontrastofthefinallookofyourgame.Whilenotimpossible,thiswouldtakeabitoflabortoperform.Byutilizingascreeneffect,wecanadjustthescreen’sfinallookasawhole,therebygivingusamorePhotoshop-likecontroloverourgame’sfinalappearance.
InordertogetaScreeneffectsystemupandrunning,wehavetosetupasinglescripttoactasthecourierofthegame’scurrentrenderedimageor,whatUnitycalls,theRenderTexture.ByutilizingthisscripttopasstheRenderTexturetoashader,wecancreateaflexiblesystemtocreatescreeneffects.Forourfirstscreeneffect,wearegoingtocreateaverysimplegrayscaleeffect,wherewecanmakeourgamelookblackandwhite.Let’stakealookathowthisisdone.
GettingreadyInordertogetourScreenEffectssystemupandrunning,weneedtocreateafewassetsforourcurrentUnityproject.Bydoingthis,wewillsetourselvesupforthestepsinthefollowingsections:
1. Inthecurrentproject,weneedtocreateanewC#scriptandcallitTestRenderImage.cs.
2. CreateanewshaderandcallitImageEffect.shader.3. Createasimplesphereinthesceneandassignitanewmaterial.Thisnewmaterial
canbeanything,butforourexample,wewillmakeasimplered,specularmaterial.4. Finally,createanewdirectionallightandsavethescene.
Withallofourassetsready,youshouldhaveasimplescenesetup,whichlookssimilartothefollowingimage:
Howtodoit…Inordertomakeourgrayscalescreeneffectwork,weneedascriptandshader.So,wewillcompletethesetwonewitemshereandfilltheminwiththeappropriatecodetoproduceourfirstscreeneffect.OurfirsttaskistocompletetheC#script.Thiswillgetthewholesystemrunning.Afterthis,wewillcompletetheshaderandseetheresultsofourScreenEffect.Let’scompleteourscriptandshaderwiththefollowingsteps:
1. OpentheTestRenderImage.csC#scriptandlet’sbeginbyenteringafewvariablesthatwewillneedtostoreimportantobjectsanddata.EnterthefollowingcodeattheverytopoftheTestRenderImageclass:
2. InorderforustoedittheScreenEffectinrealtime,whentheUnityeditorisn’tplaying,weneedtoenterthefollowinglineofcodejustabovethedeclarationoftheTestRenderImageclass:
3. AsourScreenEffectisusingashadertoperformthepixeloperationsonourScreenimage,wehavetocreateamaterialtoruntheshader.Withoutthis,wecan’taccessthepropertiesoftheshader.Forthis,wewillcreateaC#propertytocheckforamaterial,andcreateoneifitdoesn’tfindone.Enterthefollowingcodejustafterthedeclarationofthevariablesfromstep1:
4. WenowwanttosetupsomechecksinourscripttoseeifthecurrenttargetplatformthatwearebuildingtheUnitygameonactuallysupportsimageeffects.Ifitdoesn’tfindanythingatthestartofthisscript,thenthescriptwilldisableitself:
5. ToactuallygrabtheRenderedImagefromtheUnityRenderer,weneedtomakeuseofthefollowingbuilt-infunctionthatUnityprovidesus,calledOnRenderImage().EnterthefollowingcodesothatwecanhaveaccesstothecurrentRenderTexture:
6. OurScreeneffecthasavariablecalledgrayScaleAmountwithwhichwecancontrolhowmuchgrayscalewewantforourfinalScreenEffect.So,inthiscase,weneedtomakethevaluegofrom0–1,where0isnograyscaleeffectand1isfullgrayscaleeffect.WewillperformthisoperationintheUpdate()functionsothatitsetseveryframethisscriptisrunning:
7. Finally,wecompleteourscriptbydoingalittlebitofcleanuponobjectswecreatedwhenthescriptstarted:
Atthispoint,wecannowapplythisscripttothecamera,ifitcompiledwithouterrors,inUnity.Let’sapplytheTestRenderImage.csscripttoourmaincamerainourscene.YoushouldseethegrayScaleAmountvalueandafieldforashader,butthescriptthrowsanerrortotheconsolewindow.Itsaysthatitismissinganinstancetoanobjectandsowon’tprocessappropriately.Ifyourecallfromstep4,wearedoingsomecheckstoseewhetherwehaveashaderandthecurrentplatformsupportstheshader.Aswehaven’tgiventheScreenEffectscriptashadertoworkwith,thenthecurShadervariableisjustnull,whichthrowstheerror.Let’scontinueourScreenEffectssystembycompletingtheshader.
8. Tobeginourshader,wewillpopulateourpropertieswithsomevariablessothatwecansenddatatothisshader:
9. OurshaderisnowgoingtoutilizepureCGshadercodeinsteadofutilizingUnity’sbuilt-inSurfaceShadercode.ThiswillmakeourScreenEffectmoreoptimizedasweneedtoworkonlywiththepixelsoftheRenderTexture.So,wewillcreateanewPassblockinourshaderandfillitwithsomenew#pragmastatementsthatwehaven’tseenbefore:
10. InordertoaccessthedatabeingsenttotheshaderfromtheUnityeditor,weneedtocreatethecorrespondingvariablesinourCGPROGRAM:
11. Finally,allweneedtodoissetupourpixelfunction,inthiscase,calledfrag().ThisiswherethemeatoftheScreenEffectis.ThisfunctionwillprocesseachpixeloftheRenderTextureandreturnanewimagetoourTestRenderImage.csscript:
Oncetheshaderiscomplete,returntoUnityandletitcompiletoseeifanyerrorsoccurred.Ifnot,assignthenewshadertotheTestRenderImage.csscriptandchangethevalueofthegrayscaleamountvariable.Youshouldseethegameviewgofromacoloredversionofthegametoagrayscaleversionofthegame.ThefollowingimagedemonstratesthisScreenEffect:
Withthiscomplete,wenowhaveaneasywaytotestoutnewScreenEffectshaderswithouthavingtowriteourwholeScreenEffectsystemoverandoveragain.Let’sdiveinalittledeeperandlearnaboutwhat’sgoingonwiththeRenderTextureandhowitisprocessedthroughoutitsexistence.
Howitworks…TogetascreeneffectupandrunninginsideofUnity,weneedtocreateascriptandshader.Thescriptdrivesthereal-timeupdateintheeditorandisalsoresponsibleforcapturingtheRenderTexturefromthemaincameraandpassingittotheshader.Oncetherendertexturegetstotheshader,wecanusetheshadertoperformper-pixeloperations.
Atthestartofthescript,weperformafewcheckstomakesurethatthecurrentselectedbuildplatformactuallysupportsscreeneffectsandtheshaderitself.ThereareinstanceswhereacurrentplatformwillnotsupportScreenEffectsortheshaderthatweareusing.SothechecksthatwedointheStart()functionmakesurewedon’tgetanyerrorsiftheplatformdoesn’tsupportthescreensystem.
Oncethescriptpassesthesechecks,weinitiatetheScreenEffectssystembycallingthebuilt-infunction,OnRenderImage().ThisfunctionisresponsibleforgrabbingtherenderTexture,givingittotheshaderusingtheGraphics.Blit()function,andreturningtheprocessedimagetotheUnityrenderer.YoucanfindmoreinformationonthesetwofunctionsatthefollowingURLs:
OnRenderImage:http://docs.unity3d.com/Documentation/ScriptReference/MonoBehaviour.OnRenderImage.htmlGraphics.Blit:http://docs.unity3d.com/Documentation/ScriptReference/Graphics.Blit.html
Oncethecurrentrendertexturereachestheshader,theshadertakesit,processesitthroughthefrag()function,andreturnsthefinalcolorforeachpixel.
YoucanseehowpowerfulthisbecomesasitgivesusPhotoshop-likecontroloverthefinalrenderedimageofourgame.ThesescreeneffectsworksequentiallylikePhotoshoplayersinthecamera.Whenyouplacethesescreeneffectsoneaftertheother,theywillbeprocessedinthatorder.Thesearejustthebarebonesstepstogetascreeneffectworking,butitisthecoreofhowthescreeneffectssystemworks.
There’smore…NowthatwehaveoursimpleScreenEffectsystemupandrunning,let’stakealookatsomeoftheotherusefulinformationwecanobtainfromUnity’srenderer:
WecanactuallygetthedepthofeverythinginourcurrentgamebyturningonUnity’sbuilt-inDepthmode.Oncethisisturnedon,wecanusethedepthinformationforatonofdifferenteffects.Let’stakealookathowthisisdone:
1. CreateanewshaderandcallitSceneDepth_Effect.Thendouble-clickonthisshadertoopenitintheMonoDevelopeditor.
2. WewillcreatetheMainTexturepropertyandapropertytocontrolthepowerofthescenedeptheffect.Enterthefollowingcodeinyourshader:
3. NowweneedtocreatethecorrespondingvariablesinourCGPROGRAM.Wearegoingtoaddonemorevariablecalled_CameraDepthTexture.Thisisabuilt-invariablethatUnityhasprovideduswiththroughtheuseoftheUnityCGcgincludefile.Itgivesusthedepthinformationfromthecamera:
4. Wewillcompleteourdepthshaderbyutilizingacoupleofbuilt-infunctionsthatUnityprovidesuswith,theUNITY_SAMPLE_DEPTH()andlinear01Depth()functions.Thefirstfunctionactuallygetsthedepthinformationfromour_CameraDepthTextureandproducesasinglefloatvalueforeachpixel.TheLinear01Depth()functionthenmakessurethatthevaluesarewithinthe0-1rangebytakingthisfinaldepthvaluetoapowerwecancontrol,wherethemid-valueonthe0-1rangesitsinthescenebasedoffofthecameraposition:
5. Withourshadercomplete,let’sturnourattentiontoourScreenEffectsscript.WeneedtoaddthedepthPowervariabletothescriptsothatwecanletuserschangethevalueintheeditor:
6. OurOnRenderImage()functionthenneedstobeupdatedsothatitispassingtherightvaluetoourshader:
7. TocompleteourdepthScreeneffect,weneedtotellUnitytoturnonthedepthrenderinginthecurrentcamera.Thisisdonebysimplysettingthemaincamera’sdepthTextureMode:
Withallthecodesetup,saveyourscriptandshaderandreturntoUnitytoletthembothcompile.Ifnoerrorsareencountered,youshouldseearesultsimilartothefollowingimage:
Usingbrightness,saturation,andcontrastwithscreeneffectsNowthatwehaveourscreeneffectssystemupandrunning,wecanexplorehowtocreatemoreinvolvedpixeloperationstoperformsomeofthemorecommonScreenEffectsfoundingamestoday.
Tobegin,usingascreeneffecttoadjusttheoverallfinalcolorsofyourgameiscrucialingivingartistsaglobalcontroloverthefinallookofthegame.Techniquessuchascoloradjustmentsliderstoadjusttheintensityforthereds,blues,andgreensofthefinalrenderedgameortechniqueslikeputtingacertaintoneofcoloroverthewholescreenasseeninsomethinglikeasepiafilmeffect.
Forthisparticularrecipe,wearegoingtocoversomeofthemorecorecoloradjustmentoperationswecanperformonanimage.Thesearebrightness,saturation,andcontrast.Learninghowtocodethesecoloradjustmentsgivesusanicebasetolearntheartofscreeneffects.
GettingreadyWewillneedtocreateacoupleofnewassets.Wecanutilizethesamesceneasourtestscene,butwewillneedanewscriptandshader:
1. CreateanewscriptandcallitBSC_ImageEffect.2. CreateanewshadercalledBSC_Effect.3. NowwesimplyneedtocopythecodewehadfromtheC#scriptintheprevious
recipetoournewC#script.Thiswillallowustofocusjustonthemathematicsforthebrightness,saturation,andcontrasteffect.
4. Copythecodefromtheshaderinthepreviousrecipetoournewshader.5. Createacoupleofnewobjectsinthescene,setupsomedifferentcoloreddiffuse
materials,andrandomlyassignthemtothenewobjectsinthescene.Thiswillgiveusagoodrangeofcolorstotestwithournewscreeneffect.
Whencompleted,youshouldhaveascenesimilartothefollowingimage:
Howtodoit…Nowthatwehavecompletedourscenesetupandcreatedournewscriptandshader,wecanbegintofillinthecodenecessarytoachievethebrightness,saturation,andcontrastScreenEffect.Wewillbefocusingonjustthepixeloperationandvariablesetupforourscriptandshader,asgettingaScreenEffectsystemupandrunningisdescribedintheSettingupthescreeneffectsscriptsystemrecipe:
1. Let’sbeginbylaunchingournewshaderandscriptinMonoDevelop.Simplydouble-clickonthetwofilesintheprojectviewtoperformthisaction.
2. EditingtheshaderfirstmakesmoresensesothatweknowwhatkindofvariableswewillneedforourC#script.Let’sbeginthisbyenteringtheappropriatepropertiesforourbrightness,saturation,andcontrasteffect.Remember,weneedtokeepthe_MainTexpropertyinourshaderasthisisthepropertythattheRenderTexturetargetswhencreatingScreenEffects:
3. Asusual,inorderforustoaccessthedatacominginfromourpropertiesinourCGPROGRAM,weneedtocreatethecorrespondingvariablesintheCGPROGRAM:
4. Nowweneedtocreatetheoperationsthatwillperformthebrightness,saturation,andcontrasteffects.Enterthefollowingnewfunctioninourshader,justabovethefrag()function.Don’tworryifitdoesn’tmakesensejustyet;allthecodewillbeexplainedinthenextrecipe:
5. Finally,wejustneedtoupdateourfrag()functiontoactuallyusetheContrastSaturationBrightness()function.ThiswillprocessallthepixelsofourRenderTextureandpassitbacktoourscript:
Withthecodeenteredintheshader,returntotheUnityeditortoletthenewshadercompile.Iftherearenoerrors,wecanreturntoMonoDeveloptoworkonourscript.Let’sbeginthisbycreatingacoupleofnewlinesofcodethatwillsendtheproperdatatoourshader:
1. OurfirststepinmodifyingourscriptistoaddthepropervariablesthatwilldrivethevaluesofourScreenEffect.Inthiscase,wewillneedasliderforbrightness,asliderforsaturation,andasliderforcontrast:
2. Withourvariablessetup,wenowneedtotellthescripttopasstheirdatatotheshader.WedothisintheOnRenderImage()function:
3. Finally,allweneedtodoisclampthevaluesofthevariableswithinarangethatisreasonable.Theseclampvaluesareentirelypreferential,soyoucanusewhichevervaluesyouseefit:
Withthescriptcompletedandshaderfinished,wesimplyassignourscripttoourmaincameraandourshadertothescript,andyoushouldseetheeffectsofbrightness,saturation,andcontrastbymanipulatingtheslidervalues.Thefollowingimageshowsaresultyoucanachievewiththisscreeneffect:
Thefollowingimageshowsanotherexampleofwhatcanbedonebyadjustingthecolorsoftherenderimage:
Howitworks…SincewenowknowhowthebasicScreenEffectssystemworks,let’sjustcovertheper-pixeloperationswecreatedintheContrastSaturationBrightness()function.
Thefunctionstartsbytakingafewarguments.Thefirstandmostimportantisthecurrentrendertexture.Theotherargumentssimplyadjusttheoveralleffectofthescreeneffectandarerepresentedbyslidersinthescreeneffects’Inspectortab.Oncethefunctionreceivestherendertextureandtheadjustmentvalues,itdeclaresafewconstantvaluesthatweusetomodifyandcompareagainsttheoriginalrendertexture.
TheluminanceCoeffvariablestoresthevaluesthatwillgiveustheoverallbrightnessofthecurrentimage.ThesecoefficientsarebasedontheCIEcolormatchingfunctionsandareprettystandardthroughouttheindustry.Wecanfindtheoverallbrightnessoftheimagebygettingthedotproductofthecurrentimagedottedwiththeseluminancecoefficients.Oncewehavethebrightness,wesimplyuseacoupleoflerpfunctionstoblendfromthegrayscaleversionofthebrightnessoperationandtheoriginalimagemultipliedbythebrightnessvalue,beingpassedintothefunction.
Thescreeneffects,likethisone,arecrucialtoachievehigh-qualitygraphicsforyourgamesasitletsyoutweakthefinallookofyourgamewithouthavingtoediteachmaterialinyourcurrentgamescene.
UsingbasicPhotoshop-likeBlendmodeswithscreeneffectsThescreeneffectsaren’tjustlimitedtoadjustingthecolorsofarenderedimagefromourgame.WecanalsousethemtocombineotherimageswithourRenderTexture.ThistechniqueisnodifferentthancreatinganewlayerinPhotoshopandchoosingablendmodetoblendtwoimagestogetheror,inourcase,atexturewithaRenderTexture.ThisbecomesaverypowerfultechniqueasitgivestheartistsinaproductionenvironmentawaytosimulatetheirblendingmodesinthegameratherthanjustinPhotoshop.
Forthisparticularrecipe,wearegoingtotakealookatsomeofthemorecommonblendmodes,suchasMultiply,Add,andOverlay.YouwillseehowsimpleitistohavethepowerofPhotoshopBlendmodesinyourgame.
GettingreadyTobegin,wehavetogetourassetsready.Solet’sfollowthenextfewstepstogetourscreeneffectssystemupandrunningforournewBlendmodescreeneffect:
1. CreateanewscriptandcallitBlendMode_ImageEffect.2. CreateanewshadercalledBlendMode_Effect.3. NowwesimplyneedtocopythecodewehadfromtheC#scriptinthefirstrecipeof
thischaptertoournewC#script.Thiswillallowustofocusonjustthemathematicsforthebrightness,saturation,andcontrasteffect.
4. Copythecodefromtheshaderinthefirstrecipeinthischaptertoournewshader.5. Finally,wewillneedanothertexturetoperformourblendmodeeffect.Inthisrecipe,
wewilluseagrungetypetexture.Thiswillmaketheeffectveryobviouswhenwearetestingitout.
Thefollowingimageisthegrungemapusedinthemakingofthiseffect.Findingatexturewithenoughdetailandanicerangeofgrayscalevalueswillmakeforanicetexturetotestourneweffect:
Howtodoit…OurfirstblendmodethatwewillimplementistheMultiplyblendmodeasseeninPhotoshop.Let’sbeginbymodifyingthecodeinourshaderfirst.
1. LaunchtheshaderinMonoDevelopbydouble-clickingonitinUnity’sprojectview.2. Weneedtoaddsomenewpropertiessothatwehaveatexturetoblendwithanda
sliderforanopacityvalue.Enterthefollowingcodeinyournewshader:
3. EnterthecorrespondingvariablesinourCGPROGRAMsothatwecanaccessthedatafromourPropertiesblock:
4. Finally,wemodifyourfrag()functionsothatitperformsthemultiplyoperationonourtwotextures:
5. SavetheshaderandreturntotheUnityeditortoletthenewshadercodecompileandcheckforerrors.Ifnoerrorsoccurred,thendouble-clickontheC#scriptfiletolaunchitintheMonoDevelopeditor.
6. Inourscriptfileaswell,weneedtocreatethecorrespondingvariables.Sowewillneedatexturesothatwecanassignonetotheshaderandaslidertoadjustthefinalamountoftheblendmodewewanttouse:
7. WethenneedtosendourvariabledatatotheshaderthroughtheOnRenderImage()function:
8. Tocompletethescript,wesimplyfillinourUpdate()functionsothatwecanclampthevalueoftheblendOpacityvariablebetweenavalueof0.0and1.0:
Withthiscomplete,weassignthescreeneffectscripttoourmaincameraandourscreeneffectshadertoourscriptsothatithasashadertousefortheper-pixeloperations.Finally,inorderfortheeffecttobefullyfunctional,thescriptandshaderislookingforatexture.YoucanassignanytexturetothetexturefieldintheInspectorforthescreeneffectscript.Oncethistextureisinplace,youwillseetheeffectofmultiplyingthistextureoverthegame’srenderedimage.Thefollowingimagedemonstratesthescreeneffect:
Thefollowingimagedemonstratesahigherintensityofopacity,makingthemultipliedimagemuchmoreapparentoverourrenderimage:
Withourfirstblendmodesetup,wecanbegintoaddacoupleofsimplerblendmodestogetabetterunderstandingofhoweasyitistoaddmoreeffectsandreallyfine-tunethefinalresultinyourgame.However,firstlet’sbreakdownwhatishappeninghere.
Howitworks…NowwearestartingtogainatonofpowerandflexibilityinourScreenEffectsprogramming.IamsurethatyouarenowstartingtounderstandhowmuchonecandowiththissimplesysteminUnity.WecanliterallyreplicatetheeffectsofPhotoshoplayerblendingmodesinourgametogiveartiststheflexibilitytheyneedtoachievehigh-qualitygraphicsinashortamountoftime.
Withthisparticularrecipe,welookedathowtomultiplytwoimagestogether,addtwoimagestogether,andperformascreenblendingmode,usingjustalittlebitofmathematics.Whenworkingwithblendmodes,onehastothinkonaper-pixellevel.Forinstance,whenweareusingamultiplyblendmode,weliterallytakeeachpixelfromtheoriginalrendertextureandmultiplythemwitheachpixeloftheblendtexture.Thesamegoesfortheaddblendmode.Itisjustasimplemathematicaloperationofaddingeachpixelfromthesourcetexture,orrendertexture,totheblendtexture.
Thescreenblendmodeisdefinitelyabitmoreinvolved,butitisactuallydoingthesamething.Ittakeseachimage,rendertexture,andblendtexture,invertsthem,thenmultipliesthemtogether,andinvertsthemagaintoachievethefinallook.JustlikePhotoshopblendsitstexturestogetherusingblendmodes,wecandothesamewithscreeneffects.
There’smore…Let’scontinuethisrecipebyaddingacoupleofmoreblendmodestoourscreeneffect.
Inthescreeneffectshader,let’saddthefollowingcodetoourfrag()functionandchangethevaluewearereturningtoourscript.Wewillalsoneedtocommentoutthemultiplyblendsothatwedon’treturnthataswell:
1. SavetheshaderfileinMonoDevelopandreturntotheUnityeditortolettheshadercompile.Ifnoerrorsoccurred,youshouldseearesultsimilartothefollowingimage.Thisisasimpleaddblendingmode:
Asyoucansee,thishastheoppositeeffectofmultiplybecauseweareaddingthetwoimagestogether.
2. Finally,let’saddonemoreblendmodecalledaScreenBlend.Thisoneisalittlebit
moreinvolved,fromamathematicalstandpoint,butstillsimpletoimplement.Enterthefollowingcodeinthefrag()functionofourshader:
ThefollowingimagedemonstratestheresultsofusingaScreentypeblendmodetoblendtwoimagestogetherinascreeneffect:
UsingtheOverlayBlendmodewithscreeneffectsForourfinalrecipe,wearegoingtotakealookatanothertypeofblendmode,theOverlayBlendmode.Thisblendingactuallymakesuseofsomeconditionalstatementsthatdeterminethefinalcolorofeachpixelineachchannel.So,theprocessofusingthistypeofblendmodeneedsabitmorecodingtowork.Let’stakealookathowthisisdoneinthenextfewrecipes.
GettingreadyForthislastScreenEffect,wewillneedtosetupourtwoscriptsaswehaveinthepreviousrecipesinthischapter.Forthisrecipe,wewillbeusingthesamescenewehavebeenusing,sowedon’thavetocreateanewone:
1. CreateanewscriptfilecalledOverlay_ImageEffectandshaderfilecalledOverlay_Effect.
2. CopythecodefromthepreviousC#scriptfiletoournewscriptfile.3. Copythecodefromthepreviousshaderfiletoournewshaderfile.4. AssigntheOverlay_ImageEffectscripttothemaincameraandOverlay_Effectto
thescriptcomponentintheInspector.5. Finally,double-clickonthescriptandshaderfilestoopenthemintheMonoDevelop
editor.
Howtodoit…TobeginourOverlayScreenEffect,wewillneedtogetthecodeofourshaderupandrunningwithouterrors.Wecanthenmodifyourscriptfiletofeedthecorrectdatatotheshader.
1. WefirstneedtosetupourpropertiesinourPropertiesblock.Wewillusethesamepropertiesfromthepreviousfewrecipesinthischapter:
2. WethenneedtocreatethecorrespondingvariablesinourCGPROGRAM:
3. InorderfortheOverlayBlendeffecttowork,wewillhavetoprocesseachpixelfromeachchannelindividually.Todothisinashader,wehavetowriteacustomfunctionthatwilltakeinasinglechannel,forinstance,theredchannel,andperformtheOverlayoperation.Enterthefollowingcodeintheshaderjustbelowthevariabledeclarations:
4. Finally,weneedtoupdateourfrag()functiontoprocesseachchannelofourtexturestoperformtheblending:
5. Withthecodecompletedintheshader,oureffectshouldbeworking.SavetheshaderandreturntotheUnityeditortolettheshadercompile.Ourscriptisalreadysetup,sowedon’thavetomodifyitanyfurther.Oncetheshadercompiles,youshouldseearesultsimilartothefollowingimage:
Howitworks…OurOverlayblendmodeisdefinitelyalotmoreinvolved,butifyoureallybreakdownthefunction,youwillnoticethatitissimplyamultiplyblendmodeandscreenblendmode.It’sjustthat,inthiscase,wearedoingaconditionalchecktoapplyoneortheotherblendmodetoapixel.
WiththisparticularScreenEffect,whentheOverlayfunctionreceivesapixel,itcheckstoseewhetheritislessthan0.5.Ifitis,thenweapplyamodifiedmultiplyblendmodetothatpixel;ifit’snot,thenweapplyamodifiedscreenblendmodetothepixel.Wedothisforeachpixelforeachchannel,givingusthefinalRGBpixelvaluesforourScreeneffect.
Asyoucansee,therearemanythingsthatcanbedonewithscreeneffects.Itreallyjustdependsontheplatformandamountofmemoryyouhaveallocatedforscreeneffects.Usually,thisisdeterminedthroughoutthecourseofagameproject,sohavefunandgetcreativewithyourscreeneffects.
Chapter9.GameplayandScreenEffectsWhenitcomestocreatingbelievableandimmersivegames,materialdesignisnottheonlyaspectthatweneedtotakeintoaccount.Theoverallfeelingcanbealteredusingscreeneffects.Thisisverycommoninmovies,forinstance,whencolorsarecorrectedinthepost-productionphase.Youcanimplementthesetechniquesinyourgamestoo,usingtheknowledgefromChapter8,ScreenEffectswithUnityRenderTexture.Twointerestingeffectsarepresentedinthischapter;youcan,however,adaptthemtofityourneedsandcreateyourveryownscreeneffect.
Inthischapter,youwilllearnthefollowingrecipes:
CreatinganoldmoviescreeneffectCreatinganightvisionscreeneffect
IntroductionIfyouarereadingthisbook,youaremostlikelyapersonwhohasplayedagameortwoinyourtime.Oneoftheaspectsofreal-timegamesistheeffectofimmersingaplayerintoaworldtomakeitfeelasiftheywereactuallyplayingintherealworld.Themoremoderngamesmakeheavyuseofscreeneffectstoachievethisimmersion.
Withscreeneffects,wecanturnthemoodofacertainenvironmentfromcalmtoscary,justbychangingthelookofthescreen.Imaginewalkingintoaroomthatiscontainedwithinalevel,thenthegametakesoverandgoesintoacinematicmoment.Manymoderngameswillturnondifferentscreeneffectstochangethemoodofthecurrentmoment.Understandinghowtocreateeffectstriggeredbygameplayisnextinourjourneyofshaderwriting.
Inthischapter,wearegoingtotakealookatsomeofthemorecommongameplayscreeneffects.Youaregoingtolearnhowtochangethelookofthegamefromnormaltoanoldmovieeffect,andwearegoingtotakealookathowmanyfirst-personshootergamesapplytheirnightvisioneffectstothescreen.Witheachoftheserecipes,wearegoingtolookathowtohooktheseuptogameeventssothattheyareturnedonandoffasthegame’scurrentpresentationneeds.
CreatinganoldmoviescreeneffectManygamesaresetindifferenttimes.Sometakeplaceinfantasyworldsorfuturesci-fiworlds,andsomeeventakeplaceintheoldwest,wherefilmcameraswerejustbeingdevelopedandthemoviesthatpeoplewatchedwereblackandwhiteorsometimestintedwithwhatiscalledasepiaeffect.Thelookisverydistinct,andwearegoingtoreplicatethislookusingascreeneffectinUnity.
Thereareafewstepstoachievethislook,andjusttomakethewholescreenblackandwhiteorgrayscale,weneedtobreakdownthiseffectintoitscomponentparts.Ifweanalyzesomereferencefootageofanoldmovie,wecanbegintodothis.Let’stakealookatthefollowingimageandbreakdowntheelementsthatmakeuptheoldmovielook:
Weconstructedthisimageusingafewreferenceimagesfoundonline.ItisalwaysagoodideatotryandutilizePhotoshoptoconstructimageslikethistoaidyouincreatingaplanforyournewscreeneffect.Performingthisprocessnotonlytellsustheelementswewillhavetocodein,butitalsogivesusaquickwaytoseewhichblendingmodesworkandhowwewillconstructthelayersofourscreeneffect.ThePhotoshopfilewecreatedforthisrecipeisincludedinthisbook’ssupportpageatwww.packtpub.com/supportandiscalledOldFilmEffect_Research_Layout.psd.
GettingreadyNowthatweknowwhatwehavetomake,let’stakealookathoweachofthelayersiscombinedtocreatethefinaleffectandgathersomeresourcesforourshaderandscreeneffectscript.
Sepiatone:Thisisarelativelysimpleeffecttoachieve,aswejustneedtobringallthepixelcolorsoftheoriginalrendertexturetoasinglecolorrange.Thisiseasilyachievedusingtheluminanceoftheoriginalimageandaddingaconstantcolor.Ourfirstlayerwilllooklikethefollowingimage:
Vignetteeffect:Wecanalwaysseesomesortofsoftborderaroundoldfilmswhentheyarebeingprojectedwithanoldmovieprojector.Thisiscausedbecausethebulbbeingusedforthemovieprojectorhasmorebrightnessinthemiddlethanitdoesattheedgesofthefilm.Thiseffectisgenerallycalledthevignetteeffectandisoursecondlayerinourscreeneffect.Wecanachievethiswithanoverlaidtextureoverthewholescreen.Thefollowingimagedemonstrateswhatthislayerlookslike,isolatedasatexture:
Dustandscratches:Thethirdandfinallayerinouroldmoviescreeneffectisdustandscratches.Thislayerwillutilizetwodifferenttiledtextures,oneforscratchesandonefordust.Thereasonisthatwewillwanttoanimatethesetwotexturesovertimeatdifferenttilingrates.Thiswillgivetheeffectthatthefilmismovingalongandtherearesmallscratchesanddustoneachframeoftheoldfilm.Thefollowingimagedemonstratesthiseffectisolatedtoitsowntexture:
Let’sgetourscreeneffectsystemreadywiththeprecedingtextures.Performthefollowingsteps:
1. Gatherupavignettetextureanddustandscratchestexture,liketheoneswejustsaw.2. CreateanewscriptcalledOldFilmEffect.csandanewshadercalled
OldFilmEffectShader.shader.3. Withournewfilescreated,fillinthecodenecessarytogetthescreeneffectsystem
upandrunning.Forreferencesonhowtodothis,seeChapter8,ScreenEffectswithUnityRenderTextures.
Finally,withourscreeneffectsystemupandrunningandourtexturesgathered,wecanbegintheprocessofrecreatingthisoldfilmeffect.
Howtodoit…Ourindividuallayersforouroldfilmscreeneffectarequitesimple,butwhencombined,wegetsomeveryvisuallystunningeffects.Let’srunthroughhowtoconstructthecodeforourscriptandshader,thenwecanstepthrougheachlineofcodeandlearnwhythingsareworkingthewaytheyare.Atthispoint,youshouldhavethescreeneffectssystemupandrunning,aswewillnotbecoveringhowtosetthisupinthisrecipe.
1. Wewillbeginbyenteringthecodeinourscript.OurfirstblockofcodethatwewillenterwilldefineourvariablethatwewanttoexposetoInspectorinordertolettheuserofthiseffectadjustitastheyseefit.Wecanalsouseourmocked-upPhotoshopfileasareferencewhendecidingwhatwewillneedtoexposetotheInspectorofthiseffect.Enterthefollowingcodeinyoureffectscript:
#regionVariables
publicShaderoldFilmShader;
publicfloatOldFilmEffectAmount=1.0f;
publicColorsepiaColor=Color.white;
publicTexture2DvignetteTexture;
publicfloatvignetteAmount=1.0f;
publicTexture2DscratchesTexture;
publicfloatscratchesYSpeed=10.0f;
publicfloatscratchesXSpeed=10.0f;
publicTexture2DdustTexture;
publicfloatdustYSpeed=10.0f;
publicfloatdustXSpeed=10.0f;
privateMaterialcurMaterial;
privatefloatrandomValue;
#endregion
2. Next,weneedtofillinthecontentsofourOnRenderImage()function.Here,wewillbepassingthedatafromourvariablestoourshadersothattheshadercanthenusethisdataintheprocessingoftherendertexture:
voidOnRenderImage(RenderTexturesourceTexture,RenderTexture
destTexture)
{
if(oldFilmShader!=null)
{
material.SetColor("_SepiaColor",sepiaColor);
material.SetFloat("_VignetteAmount",vignetteAmount);
material.SetFloat("_EffectAmount",OldFilmEffectAmount);
if(vignetteTexture)
{
material.SetTexture("_VignetteTex",vignetteTexture);
}
if(scratchesTexture)
{
material.SetTexture("_ScratchesTex",scratchesTexture);
material.SetFloat("_ScratchesYSpeed",scratchesYSpeed);
material.SetFloat("_ScratchesXSpeed",scratchesXSpeed);
}
if(dustTexture)
{
material.SetTexture("_DustTex",dustTexture);
material.SetFloat("_dustYSpeed",dustYSpeed);
material.SetFloat("_dustXSpeed",dustXSpeed);
material.SetFloat("_RandomValue",randomValue);
}
Graphics.Blit(sourceTexture,destTexture,material);
}
else
{
Graphics.Blit(sourceTexture,destTexture);
}
}
3. Tocompletethescriptportionofthiseffect,wesimplyneedtomakesurethatweclampthevaluesofthevariablesthatneedtohaveaclampedrangeinsteadofbeinganyvalue:
voidUpdate()
{
vignetteAmount=Mathf.Clamp01(vignetteAmount);
OldFilmEffectAmount=Mathf.Clamp(OldFilmEffectAmount,0f,
1.5f);
randomValue=Random.Range(-1f,1f);
}
4. Withourscriptcomplete,let’sturnourattentiontoourshaderfile.Weneedtocreatethecorrespondingvariables,whichwecreatedinourscriptinourshader.Thiswillallowthescriptandshadertocommunicatewithoneanother.EnterthefollowingcodeinthePropertiesblockoftheshader:
Properties
{
_MainTex("Base(RGB)",2D)="white"{}
_VignetteTex("VignetteTexture",2D)="white"{}
_ScratchesTex("ScartchesTexture",2D)="white"{}
_DustTex("DustTexture",2D)="white"{}
_SepiaColor("SepiaColor",Color)=(1,1,1,1)
_EffectAmount("OldFilmEffectAmount",Range(0,1))=1.0
_VignetteAmount("VignetteOpacity",Range(0,1))=1.0
_ScratchesYSpeed("ScratchesYSpeed",Float)=10.0
_ScratchesXSpeed("ScratchesXSpeed",Float)=10.0
_dustXSpeed("DustXSpeed",Float)=10.0
_dustYSpeed("DustYSpeed",Float)=10.0
_RandomValue("RandomValue",Float)=1.0
_Contrast("Contrast",Float)=3.0
}
5. Then,asusual,weneedtoaddthesesamevariablenamestoourCGPROGRAMblocksothatthePropertiesblockcancommunicatewiththeCGPROGRAMblock:
CGPROGRAM
#pragmavertexvert_img
#pragmafragmentfrag
#pragmafragmentoptionARB_precision_hint_fastest
#include"UnityCG.cginc"
uniformsampler2D_MainTex;
uniformsampler2D_VignetteTex;
uniformsampler2D_ScratchesTex;
uniformsampler2D_DustTex;
fixed4_SepiaColor;
fixed_VignetteAmount;
fixed_ScratchesYSpeed;
fixed_ScratchesXSpeed;
fixed_dustXSpeed;
fixed_dustYSpeed;
fixed_EffectAmount;
fixed_RandomValue;
fixed_Contrast;
6. Now,wesimplyfillinthegutsofourfrag()functionsothatweprocessthepixelsforourscreeneffect.Tostartwith,let’sgettherendertextureandvignettetexturepassedtousbythescript:
fixed4frag(v2f_imgi):COLOR
{
//GetthecolorsfromtheRenderTextureandtheuv's
//fromthev2f_imgstruct
half2distortedUV=barrelDistortion(i.uv);
distortedUV=half2(i.uv.x,i.uv.y+(_RandomValue*_SinTime.z*
0.005));
fixed4renderTex=tex2D(_MainTex,i.uv);
//GetthepixelsfromtheVignetteTexture
fixed4vignetteTex=tex2D(_VignetteTex,i.uv);
7. Wethenneedtoaddtheprocessforthedustandscratchesbyenteringthefollowingcode:
//ProcesstheScratchesUVandpixels
half2scratchesUV=half2(i.uv.x+(_RandomValue*_SinTime.z*
_ScratchesXSpeed),i.uv.y+(_Time.x*_ScratchesYSpeed));
fixed4scratchesTex=tex2D(_ScratchesTex,scratchesUV);
//ProcesstheDustUVandpixels
half2dustUV=half2(i.uv.x+(_RandomValue*(_SinTime.z*
_dustXSpeed)),i.uv.y+(_RandomValue*(_SinTime.z*_dustYSpeed)));
fixed4dustTex=tex2D(_DustTex,dustUV);
8. Thesepiatoneprocessisnextonourlist:
//gettheluminosityvaluesfromtherendertextureusingtheYIQ
values.
fixedlum=dot(fixed3(0.299,0.587,0.114),renderTex.rgb);
//Addtheconstantcolortothelumvalues
fixed4finalColor=lum+lerp(_SepiaColor,_SepiaColor+
fixed4(0.1f,0.1f,0.1f,1.0f),_RandomValue);
finalColor=pow(finalColor,_Contrast);
9. Finally,wecombineallofourlayersandcolorsandreturnthefinalscreeneffecttexture:
//Createaconstantwhitecolorwecanusetoadjustopacityofeffects
fixed3constantWhite=fixed3(1,1,1);
//CompositetogetherthedifferentlayerstocreatefinslScreenEffect
finalColor=lerp(finalColor,finalColor*vignetteTex,
_VignetteAmount);
finalColor.rgb*=lerp(scratchesTex,constantWhite,(_RandomValue));
finalColor.rgb*=lerp(dustTex.rgb,constantWhite,(_RandomValue*
_SinTime.z));
finalColor=lerp(renderTex,finalColor,_EffectAmount);
returnfinalColor;
10. Withallofourcodeenteredandnoerrors,youshouldhavearesultverysimilartothefollowingimage.HitplayintheUnityeditortoseetheeffectsofthedustandscratchesandtheslightimageshiftthatwegavethescreeneffect:
Howitworks…Now,let’swalkthrougheachofthelayersinthisscreeneffect,breakdownwhyeachofthelinesofcodeisworkingthewayitis,andgetmoreinsightastohowwecanaddmoretothisscreeneffect.
Nowthatouroldfilmscreeneffectisworking,let’sstepthroughthelinesofcodeinourfrag()functionasalltheothercodeshouldbeprettyself-explanatoryatthispointinthebook.
JustlikeourPhotoshoplayers,ourshaderisprocessingeachlayerandthencompositingthemtogether,sowhilewegothrougheachlayer,trytoimaginehowthelayersinPhotoshopwork.Keepingthisconceptinmindalwayshelpswhendevelopingnewscreeneffects.
Here,wehavethefirstsetoflinesofcodeinourfrag()function:
fixed4frag(v2f_imgi):COLOR
{
//GetthecolorsfromtheRenderTextureandtheuv's
//fromthev2f_imgstruct
half2distortedUV=barrelDistortion(i.uv);
fixed4renderTex=tex2D(_MainTex,i.uv);
fixed4vignetteTex=tex2D(_VignetteTex,i.uv);
Thefirstlineofcode,justafterthefrag()functiondeclaration,isthedefinitionofhowtheUVsshouldworkforourmainrendertextureortheactualrenderedframeofourgame.Aswearelookingtofaketheeffectofanoldfilmstyle,wewanttoadjusttheUVsofourrendertexture,everyframe,suchthattheyflicker.Thisflickeringsimulateshowthewindingofthefilm’sprojectorisjustabitoff.ThistellsusthatweneedtoanimatetheUVsandthisiswhatthisfirstlineofcodeisdoing.
Weusedthebuilt-in_SinTimevariable,whichUnityprovides,togetavaluebetween-1and1.Wethenmultiplythisbyaverysmallnumber,inthiscase,0.005,toreducetheintensityoftheeffect.Thefinalvalueisthenmultipliedagainbythe_RandomValuevariable,whichwegeneratedintheeffectscript.Thisvaluebouncesbackandforthbetween-1and1tobasicallyflipthedirectionofthemotionbackandforth.
OnceourUVsarebuiltandstoredintherenderTexUVvariable,wecansampletherendertextureusingatex2D()function.Thisoperationthengivesusourfinalrendertexture,whichwecanusetoprocessfurtherintherestoftheshader.
Movingontothelastlineinthepreviousimage,wesimplydoastraightsampleofthevignettetextureusingthetex2D()function.Wedon’tneedtousetheanimatedUVswealreadycreated,asthevignettetexturewillbetiedtothemotionofthecameraitselfandnottotheflickeringofthecamerafilm.
Thefollowingcodesnippetillustratesthesecondsetoflinesofcodeinourfrag()function:
//ProcesstheScratchesUVandpixels
half2scratchesUV=half2(i.uv.x+(_RandomValue*_SinTime.z*
_ScratchesXSpeed),
i.uv.y+(_Time.x*_ScratchesYSpeed));
fixed4scratchesTex=tex2D(_ScratchesTex,scratchesUV);
//ProcesstheDustUVandpixels
half2dustUV=half2(i.uv.x+(_RandomValue*(_SinTime.z*_dustXSpeed)),
i.uv.y+(_RandomValue*(_SinTime.z*_dustYSpeed)));
fixed4dustTex=tex2D(_DustTex,dustUV);
TheselinesofcodearealmostexactlylikethepreviouslinesofcodeinwhichweneedtogenerateuniqueanimatedUVvaluestomodifythepositionofourscreeneffectlayers.Wesimplyusethebuilt-in_SinTimevaluetogetavaluebetween-1and1,multiplyitbyourrandomvalue,andthenbyanothermultipliertoadjusttheoverallspeedoftheanimation.OncetheseUVvaluesaregenerated,wecanthensampleourdustandscratchestextureusingthesenewanimatedvalues.
Ournextsetofcodehandlesthecreationofthecolorizingeffectforouroldfilmscreeneffect.Thefollowingcodesnippetdemonstratestheselines:
//gettheluminosityvaluesfromtherendertextureusingtheYIQvalues.
fixedlum=dot(fixed3(0.299,0.587,0.114),renderTex.rgb);
//Addtheconstantcolortothelumvalues
fixed4finalColor=lum+lerp(_SepiaColor,_SepiaColor
+fixed4(0.1f,0.1f,0.1f,1.0f),_RandomValue);
Withthissetofcode,wearecreatingtheactualcolortintingoftheentirerendertexture.Toaccomplishthis,wefirstneedtoturntherendertextureintothegrayscaleversionofitself.Todothis,wecanusetheluminosityvaluesgiventousbytheYIQvalues.YIQvaluesarethecolorspaceusedbytheNTSCcolorTVsystem.EachletterinYIQactuallystorescolorconstantsthatareusedbyTVstoadjustthecolorforreadability.
Whileitisnotnecessarytoactuallyknowthereasonsforthiscolorscale,itshouldbeknownthattheYvalueinYIQistheconstantluminancevalueforanyimage.So,wecangenerateagrayscaleimageofourrendertexturebytakingeachpixeloftherendertextureanddottingitwithourluminancevalues.Thisiswhatthefirstlineinthissetisdoing.
Oncewehavetheluminancevalues,wecansimplyaddthecolorwewanttotinttheimagewith.Thiscolorispassedfromourscripttoourshader,thentoourCGPROGRAMblock,wherewecanaddittoourgrayscalerendertexture.Oncecompleted,wewillhaveaperfectlytintedimage.
Finally,wecreatetheblendingbetweeneachofourlayersinourscreeneffect.Thefollowingcodesnippetshowsthesetofcodewearelookingat:
//Createaconstantwhitecolorwecanusetoadjustopacityofeffects
fixed3constantWhite=fixed3(1,1,1);
//CompositetogetherthedifferentlayerstocreatefinslScreenEffect
finalColor=lerp(finalColor,finalColor*vignetteTex,_VignetteAmount);
finalColor.rgb*=lerp(scratchesTex,constantWhite,(_RandomValue));
finalColor.rgb*=lerp(dustTex.rgb,constantWhite,(_RandomValue*
_SinTime.z));
finalColor=lerp(renderTex,finalColor,_EffectAmount);
returnfinalColor
Ourlastsetofcodeisrelativelysimpleanddoesn’treallyneedatonofexplanation.Inshort,itissimplymultiplyingallthelayerstogethertoreachourfinalresult.JustlikewemultipliedourlayerstogetherinPhotoshop,wemultiplythemtogetherinourshader.Eachlayerisprocessedthroughalerp()functionsothatwecanadjusttheopacityofeachlayer,whichgivesmoreartisticcontroloverthefinaleffect.Themoretweaksonecanoffer,thebetterwhenitcomestoscreeneffects.
SeealsoFormoreinformationontheYIQvalues,refertothefollowinglinks:
http://en.wikipedia.org/wiki/YIQhttp://www.blackice.com/colorspaceYIQ.htm
CreatinganightvisionscreeneffectOurnextscreeneffectisdefinitelyamorepopularone.ThenightvisionscreeneffectisseeninCallofDutyModernWarfare,Halo,andjustaboutanyfirst-personshooteroutinthemarkettoday.Itistheeffectofbrighteningthewholeimageusingthatverydistinctlimegreencolor.
Inordertoachieveournightvisioneffect,weneedtobreakdownoureffectusingPhotoshop.Itisasimpleprocessoffindingsomereferenceimagesonlineandcomposingalayeredimagetoseewhatkindofblendingmodesyouwillneedorinwhichorderwewillneedtocombineourlayers.ThefollowingimageshowstheresultofperformingjustthisprocessinPhotoshop:
Let’sbegintobreakdownourroughPhotoshopcompositeimageintoitscomponentpartssothatwecanbetterunderstandtheassetswewillhavetogather.Inthenextrecipe,wewillcovertheprocessofdoingthis.
GettingreadyLet’sbeginthisscreeneffectbyagainbreakingdownoureffectintoitscomponentlayers.UsingPhotoshop,wecanconstructalayeredimagetobetterillustratehowwecangoaboutcapturingtheeffectofnightvision:
Tintedgreen:Ourfirstlayerinourscreeneffectistheiconicgreencolor,foundinjustabouteverynightvisionimage.Thiswillgiveoureffectthatsignaturenightvisionlook,asshowninthefollowingimage:
Scanlines:Toincreasetheeffectofthisbeinganewtypeofdisplayfortheplayer,weincludescanlinesoverthetopofourtintedlayer.Forthis,wewilluseatexturecreatedinPhotoshopandlettheusertileitsothatthescanlinescanbebiggerorsmaller.Noise:Ournextlayerisasimplenoisetexturethatwetileoverthetintedimageandscanlinestobreakuptheimageandaddevenmoredetailtooureffect.Thislayersimplyemphasizesthatdigitalread-outlook:
Vignette:Thelastlayerinournightvisioneffectisthevignette.IfyoulookatthenightvisioneffectinCallofDutyModernWarfare,youwillnoticethatitusesavignettethatfakestheeffectoflookingdownascope.Wewilldothatforthisscreeneffect:
Let’screateascreeneffectsystembygatheringourtextures.Performthefollowingsteps:
1. Gatherupavignettetexture,noisetexture,andscanlinetexture,liketheoneswejustsaw.
2. CreateanewscriptcalledNightVisionEffect.csandanewshadercalledNightVisionEffectShader.shader.
3. Withournewfilescreated,fillinthecodenecessarytogetthescreeneffectsystemupandrunning.Forinstructionsonhowtodothis,refertoChapter8,ScreenEffectswithUnityRenderTextures.
Finally,withourscreeneffectsystemupandrunningandourtexturesgathered,wecanbegintheprocessofrecreatingthisoldfilmeffect.
Howtodoit…Withallofourassetsgatheredandscreeneffectsystemrunningsmoothly,let’sbegintoaddthecodenecessarytoboththescriptandshader.WewillbeginourcodingwiththeNightVisionEffect.csscript,sodouble-clickonthisfilenowtoopenitinMonoDevelop.
1. Weneedtocreateafewvariablesthatwillallowtheuserofthiseffecttoadjustitinthescript’sInspector.EnterthefollowingcodeintheNightVisionEffect.csscript:
#regionVariables
publicShadernightVisionShader;
publicfloatcontrast=2.0f;
publicfloatbrightness=1.0f;
publicColornightVisionColor=Color.white;
publicTexture2DvignetteTexture;
publicTexture2DscanLineTexture;
publicfloatscanLineTileAmount=4.0f;
publicTexture2DnightVisionNoise;
publicfloatnoiseXSpeed=100.0f;
publicfloatnoiseYSpeed=100.0f;
publicfloatdistortion=0.2f;
publicfloatscale=0.8f;
privatefloatrandomValue=0.0f;
privateMaterialcurMaterial;
#endregion
2. Next,weneedtocompleteourOnRenderImage()functionsothatwearepassingtherightdatatotheshaderinorderfortheshadertoprocessthescreeneffectproperly.CompletetheOnRenderImage()functionwiththefollowingcode:
voidOnRenderImage(RenderTexturesourceTexture,RenderTexture
destTexture)
{
if(nightVisionShader!=null)
{
material.SetFloat("_Contrast",contrast);
material.SetFloat("_Brightness",brightness);
material.SetColor("_NightVisionColor",nightVisionColor);
material.SetFloat("_RandomValue",randomValue);
material.SetFloat("_distortion",distortion);
material.SetFloat("_scale",scale);
if(vignetteTexture)
{
material.SetTexture("_VignetteTex",vignetteTexture);
}
if(scanLineTexture)
{
material.SetTexture("_ScanLineTex",scanLineTexture);
material.SetFloat("_ScanLineTileAmount",
scanLineTileAmount);
}
if(nightVisionNoise)
{
material.SetTexture("_NoiseTex",nightVisionNoise);
material.SetFloat("_NoiseXSpeed",noiseXSpeed);
material.SetFloat("_NoiseYSpeed",noiseYSpeed);
}
Graphics.Blit(sourceTexture,destTexture,material);
}
else
{
Graphics.Blit(sourceTexture,destTexture);
}
}
3. TocompletetheNightVisionEffect.csscript,wesimplyneedtomakesurethatweclampcertainvariablessothattheystaywithinarange.Theserangesarearbitraryandcanbechangedatalatertime.Thesearejustvaluesthatworkedwell:
voidUpdate()
{
contrast=Mathf.Clamp(contrast,0f,4f);
brightness=Mathf.Clamp(brightness,0f,2f);
randomValue=Random.Range(-1f,1f);
distortion=Mathf.Clamp(distortion,-1f,1f);
scale=Mathf.Clamp(scale,0f,3f);
}
4. Wecannowturnourattentionovertotheshaderportionofthisscreeneffect.Opentheshader,ifyouhaven’talready,andbeginbyenteringthefollowingpropertiesinthePropertiesblock:
Properties
{
_MainTex("Base(RGB)",2D)="white"{}
_VignetteTex("VignetteTexture",2D)="white"{}
_ScanLineTex("ScanLineTexture",2D)="white"{}
_NoiseTex("NoiseTexture",2D)="white"{}
_NoiseXSpeed("NoiseXSpeed",Float)=100.0
_NoiseYSpeed("NoiseYSpeed",Float)=100.0
_ScanLineTileAmount("ScanLineTileAmount",Float)=4.0
_NightVisionColor("NightVisionColor",Color)=(1,1,1,1)
_Contrast("Contrast",Range(0,4))=2
_Brightness("Brightness",Range(0,2))=1
_RandomValue("RandomValue",Float)=0
_distortion("Distortion",Float)=0.2
_scale("Scale(Zoom)",Float)=0.8
}
5. TomakesurethatwearepassingthedatafromourPropertiesblocktoourCGPROGRAMblock,weneedtomakesuretodeclarethemwiththesamenameintheCGPROGRAMblock:
CGPROGRAM
#pragmavertexvert_img
#pragmafragmentfrag
#pragmafragmentoptionARB_precision_hint_fastest
#include"UnityCG.cginc"
uniformsampler2D_MainTex;
uniformsampler2D_VignetteTex;
uniformsampler2D_ScanLineTex;
uniformsampler2D_NoiseTex;
fixed4_NightVisionColor;
fixed_Contrast;
fixed_ScanLineTileAmount;
fixed_Brightness;
fixed_RandomValue;
fixed_NoiseXSpeed;
fixed_NoiseYSpeed;
fixed_distortion;
fixed_scale;
6. Oureffectisalsogoingtoincludealensdistortiontofurtherconveytheeffectthatwearelookingthroughalensandtheedgesoftheimagearebeingdistortedbytheangleofthelens.EnterthefollowingfunctionjustafterthevariabledeclarationsintheCGPROGRAMblock:
float2barrelDistortion(float2coord)
{
//lensdistortionalgorithm
//Seehttp://www.ssontech.com/content/lensalg.htm
float2h=coord.xy-float2(0.5,0.5);
floatr2=h.x*h.x+h.y*h.y;
floatf=1.0+r2*(_distortion*sqrt(r2));
returnf*_scale*h+0.5;
}
7. WecannowconcentrateonthemeatofourNightVisionEffectshader.Let’sstartthisbyenteringthecodethatisnecessarytogettherendertextureandvignettetexture.Enterthefollowingcodeinthefrag()functionofourshader:
fixed4frag(v2f_imgi):COLOR
{
//GetthecolorsfromtheRenderTextureandtheuv's
//fromthev2f_imgstruct
half2distortedUV=barrelDistortion(i.uv);
fixed4renderTex=tex2D(_MainTex,distortedUV);
fixed4vignetteTex=tex2D(_VignetteTex,i.uv);
8. Thenextstepinourfrag()functionistoprocessthescanlinesandnoisetexturesandapplytheproperanimatedUVstothem:
//Processscanlinesandnoise
half2scanLinesUV=half2(i.uv.x*_ScanLineTileAmount,i.uv.y
*_ScanLineTileAmount);
fixed4scanLineTex=tex2D(_ScanLineTex,scanLinesUV);
half2noiseUV=half2(i.uv.x+(_RandomValue*_SinTime.z*
_NoiseXSpeed),
i.uv.y+(_Time.x*
_NoiseYSpeed));
fixed4noiseTex=tex2D(_NoiseTex,noiseUV);
9. Tocompleteallofourlayersinthescreeneffect,wesimplyneedtoprocesstheluminancevalueofourrendertexture,andthenapplythenightvisioncolortoittoachievethaticonicnightvisionlook:
//gettheluminosityvaluesfromtherendertextureusingtheYIQ
values.
fixedlum=dot(fixed3(0.299,0.587,0.114),renderTex.rgb);
lum+=_Brightness;
fixed4finalColor=(lum*2)+_NightVisionColor;
10. Lastly,wewillcombineallthelayerstogetherandreturnthefinalcolorofournightvisioneffect:
//Finaloutput
finalColor=pow(finalColor,_Contrast);
finalColor*=vignetteTex;
finalColor*=scanLineTex*noiseTex;
returnfinalColor;
Whenyouhavefinishedenteringthecode,returntotheUnityeditortoletthescriptandshadercompile.Iftherearenoerrors,hitplayintheeditortoseetheresults.Youshouldseesomethingsimilartothefollowingimage:
Howitworks…Thenightvisioneffectisactuallyverysimilartotheoldfilmscreeneffect,whichshowsusjusthowmodularwecanmakethesecomponents.Justbysimplyswappingthetexturesthatweareusingforoverlaysandchangingthespeedatwhichourtilingratesarebeingcalculated,wecanachieveverydifferentresultsusingthesamecode.
Theonlydifferencewiththiseffectisthefactthatweareincludingalensdistortiontoourscreeneffect.Solet’sbreakthisdownsothatwecangetabetterunderstandingofhowitworks.
Thefollowingcodesnippetillustratesthecodeusedinprocessingourlensdistortion.ItisasnippetofcodeprovidedtousbythemakersofSynthEyes,andthecodeisfreelyavailabletouseinyourowneffects:
float2barrelDistortion(float2coord)
{
//lensdistortionalgorithm
//Seehttp://www.ssontech.com/content/lensalg.htm
float2h=coord.xy-float2(0.5,0.5);
floatr2=h.x*h.x+h.y*h.y;
floatf=1.0+r2*(_distortion*sqrt(r2));
returnf*_scale*h+0.5;
}
There’smore…Itisnotuncommoninvideogamestohavetheneedtohighlightcertainobjects.Forinstance,athermalvisorshouldapplyapost-processingeffectonlytopeopleandothersourcesofheat.Doingthisisalreadypossiblewiththeknowledgegatheredsofarinthisbook;youcan,infact,changetheshaderormaterialofanobjectbycode.However,thisisoftenlaboriousandhastobereplicatedonalltheobjects.
Amoreeffectivewayisusingreplacedshaders.EachshaderhasatagcalledRenderTypethathasneverbeenusedsofar.Thispropertycanbeusedtoforceacameratoapplyashaderonlytocertainobjects.Youcandothisbyattachingthefollowingscripttothecamera:
usingUnityEngine;
publicclassReplacedShader:MonoBehaviour{
publicShadershader;
voidStart(){
GetComponent<Camera>().SetReplacementShader(shader,"Heat");
}
}
Afterenteringtheplaymode,thecamerawillqueryalltheobjectsthatithastorender.Iftheydon’thaveashaderdecoratedwithRenderType="Heat",theywillnotberendered.Objectswithsuchatagwillberenderedwiththeshaderattachedtothescript.
Chapter10.AdvancedShadingTechniquesInthischapter,youwilllearnthefollowingrecipes:
UsingCgIncludefilesthatarebuiltintoUnityMakingyourshaderworldmodularwithCgIncludeImplementingaFurShaderImplementingheatmapswitharrays
IntroductionThisfinalchaptercoverssomeadvancedshadertechniquesthatyoucanuseforyourgame.Youshouldrememberthatmanyofthemosteye-catchingeffectsyoucanseeingamesaremadebytestingthelimitofwhatshaderscando.Thisbookprovidesyouwiththetechnicalbasistomodifyandcreateshaders,butyouarestronglyencouragedtoplayandexperimentwiththemasmuchasyoucan.Makingagoodgameisnotaquestforphotorealism;youshouldnotapproachshaderswiththeintentionofreplicatingrealitybecausethisisunlikelytohappen.Instead,youshouldtrytouseshadersasatooltomakeyourgametrulyunique.Withtheknowledgeofthisfinalchapter,youwillbeabletocreatethematerialsthatyouwant.
UsingCgIncludefilesthatarebuiltintoUnityOurfirststepinwritingourownCgIncludefilesistounderstandwhatUnityisalreadyprovidinguswithforshaders.BywritingSurfaceShaders,thereisalothappeningunderthehood,whichmakestheprocessofwritingSurfaceShaderssoefficient.WecanseethiscodeintheincludedCgIncludefilesfoundinyourUnityinstallfolderatEditor|Data|CGIncludes.Allthefilescontainedwithinthisfolderdotheirparttorenderourobjectswithourshaderstothescreen.Someofthesefilestakecareofshadowsandlighting,sometakecareofhelperfunctions,andsomemanageplatformdependencies.Withoutthem,ourshaderwritingexperiencewouldbemuchmorelaborious.
YoucanfindalistofinformationthatUnityhasprovideduswithatthefollowinglink:http://docs.unity3d.com/Documentation/Components/SL-BuiltinIncludes.html
Let’sbegintheprocessofunderstandingthesebuilt-inCgIncludefiles,usingsomeofthebuilt-inhelperfunctionsfromtheUnityCG.cgincfile.
GettingreadyBeforewestartdivingintothemeatofwritingtheshader,weneedtogetafewitemssetupinourscene.Let’screatethefollowingandthenopentheshaderinMonoDevelop:
1. Createanewsceneandfillitwithasimplespheremodel.2. Createanewshaderandmaterial.3. Attachthenewshadertothenewmaterialandassignthematerialtothesphere.4. Then,let’screateadirectionallightandpositionitaboveoursphere.5. Finally,wearegoingtowanttoopentheUnityCG.cgincfilefromUnity’s
CgIncludefolderlocatedinUnity’sinstalldirectory.Thiswillletusanalyzesomeofthehelperfunction’scodesothatwecanunderstandbetterwhatishappeningwhenweusethem.
6. Youshouldhaveasimplescenesetuptoworkontheshader.Refertothefollowingscreenshotasanexample:
Howtodoit…Withthesceneprepared,wecannowbegintheprocessofexperimentingwithsomeofthebuilt-inhelperfunctionsincludedwiththeUnityCG.cgincfile.Double-clickontheshaderthatwascreatedforthissceneinordertoopenitinMonoDevelopandinsertthecodegiveninthefollowingsteps:
1. AddthefollowingcodetothePropertiesblockofthenewshaderfile.Wewillneedasingletextureandslideforourexampleshader:
Properties
{
_MainTex("Base(RGB)",2D)="white"{}
_DesatValue("Desaturate",Range(0,1))=0.5
}
2. WethenneedtomakesurethatwecreatethedataconnectionbetweenourPropertiesandCGPROGRAMblocks,withthefollowingcodeplacedaftertheCGPROGRAMdeclarationand#pragmadirectives:
sampler2D_MainTex;
fixed_DesatValue;
3. Finally,wejusthavetoupdateoursurf()functiontoincludethefollowingcode.Weintroduceanewfunctionthatwehaven’tseenyet,whichisbuiltintoUnity’sUnityCG.cgincfile:
voidsurf(InputIN,inoutSurfaceOutputo)
{
half4c=tex2D(_MainTex,IV.uv_MainTex);
c.rgb=lerp(c.rgb,Luminance(r.rgb),_DesatValue);
o.Albedo=c.rgb;
o.Alpha=c.a;
}
Withtheshadercodemodified,youshouldseesomethingsimilartothefollowingscreenshot.Wehavesimplyusedahelperfunction,builtintoUnity’sCgIncludefile,togiveusaneffectofdesaturatingthemaintextureofourshader:
Howitworks…Usingthebuilt-inhelperfunctionnamedLuminance(),weareabletoquicklygetadesaturationorgrayscaleeffectonourshaders.ThisisallpossiblebecausetheUnityCG.cgincfileisbroughtautomaticallytoourshaderasweareusingaSurfaceshader.
IfyousearchthroughtheUnityCG.cgincfile,openedinMonoDevelop,youwillfindtheimplementationofthisfunctionatline276.Thefollowingsnippetistakenfromthefile:
inlinefixedLuminance(fixed3c)
{
returndot(c,fixed3(0.22,0.707,0.071));
}
AsthisfunctionisincludedinthefileandUnityautomaticallycompileswiththisfile,wecanusethefunctioninourcodeaswell,therebyreducingtheamountofcodethatwehavetowriteoverandoveragain.
IfyounoticethereisalsoaLighting.cgincfilethatUnitycomeswith.Thisfilehousesallthelightingmodelsthatweusewhenwedeclaresomethinglike#pragmaSurfacesurfLambert.Siftingthroughthisfilerevealsthatallthebuilt-inlightingmodelsaredefinedhereforreuseandmodularity.
MakingyourshaderworldmodularwithCgIncludeKnowingaboutthebuilt-inCgIncludefilesisgreat,butwhatifwewantedtobuildourownCgIncludefilestostoreourownlightingmodelsandhelperfunctions?Wecan,infact,createourownCgIncludefiles,butweneedtolearnalittlemorecodesyntaxbeforewecanstartusingthemefficientlyinourshaderwritingpipelines.Let’stakealookattheprocessofcreatinganewCgIncludefilefromscratch.
GettingreadyLet’swalkthroughtheprocessofgeneratinganewitemforthisrecipe.
1. BeginbycreatinganewtextfileandcallitsomethinglikeMyCgInclude.txt.2. Thenchangeitsfileextensionto.cginc.Windowswillgiveyouawarningmessage
sayingthatthefilemaybecomeunusable,butitwillstillwork.3. Importthisnew.cgincfiletoyourUnityprojectandletitcompile.Ifallgoeswell,
youwillseethatUnityknewtocompileittoaCgIncludefile.
WearenowreadytobegincreatingourowncustomCgIncludecode.Simplydouble-clickontheCgIncludefilethatyoucreatedinordertoopenitinMonoDevelop.
Howtodoit…WithourCgIncludefileopen,wecanbegintoenterthecodethatwillgetitworkingwithourSurfaceShaders.ThefollowingcodewillgetourCgIncludefilereadyforusewithinourSurfaceShadersandallowustocontinuallyaddmorecodetoitaswedevelopmoreshaders:
1. WebeginourCgIncludefilewithwhatiscalledapreprocessordirective.Thesearestatementssuchas#pragmaand#include.Inthiscase,wewanttodefineanewsetofcodethatwillbeexecutedifourshaderincludesthisfileinitscompilerdirectives.EnterthefollowingcodeatthetopofyourCgIncludefile:
#ifndefMY_CG_INCLUDE
#defineMY_CG_INCLUDE
2. Wealwaysneedtomakesurethatweclose#ifndefor#ifdefwith#endiftoclosethedefinitioncheck,justlikeanifstatementneedstobeclosedwithtwobracketsinC#.Enterthefollowingcodejustafterthe#definedirective:
#endif
3. Atthispoint,wejustneedtofillinthegutsoftheCgIncludefile.SowefinishoffourCgIncludefilebyenteringthefollowingcode:
fixed4_MyColor;
inlinefixed4LightingHalfLamber(SurfaceOutputs,fixed3lightDir,
fixedatten)
{
fixeddiff=max(0,dot(s.Normal,lightDir));
diff=(diff+0.5)*0.5;
fixedc;
c.rgb=s.Albedo*_LightColor0.rgb*((diff*_MyColor.rgb)*
atten);
c.a=s.Alpha;
returnc;
}
#endif
4. Withthiscompleted,younowhaveyourveryfirstCgIncludefile.Withjustthislittlebitofcode,wecangreatlyreducetheamountofcodethatwehavetorewrite,andwecanbegintostorelightingmodelsthatweuseallthetimeheresothatweneverlosethem.YourCgIncludefileshouldlooksimilartothefollowingcodeshown:
#ifndefMY_CG_INCLUDE
#defineMY_CG_INCLUDE
fixed4_MyColor;
inlinefixed4LightingHalfLamber(SurfaceOutputs,fixed3lightDir,
fixedatten)
{
fixeddiff=max(0,dot(s.Normal,lightDir));
diff=(diff+0.5)*0.5;
fixedc;
c.rgb=s.Albedo*_LightColor0.rgb*((diff*_MyColor.rgb)*
atten);
c.a=s.Alpha;
returnc;
}
#endif
ThereareacouplemorestepsthatweneedtocompletebeforewecanfullyutilizethisCgIncludefile.Wesimplyneedtotellthecurrentshaderweareworkingwithtousethisfileanditscode.TocompletetheprocessofcreatingandusingCgIncludefiles,let’scompletethenextsetofsteps:
1. Ifweturnourattentiontoourshader,weneedtotellourCGPROGRAMblocktoincludeournewCgIncludefilesothatwecanaccessthecodeitcontains.ModifythedirectivesofourCGPROGRAMblocktoincludethefollowingcode:
CGPROGRAM
#include"MyCGInclude.cginc"
#pragmasurfacesurfLambert
2. Ourcurrentshaderiscurrentlyusingthebuilt-inLambertlightingmodel,butwewanttousetheHalfLambertlightingmodelthatwecreatedinourCgInclude.AsweincludedthecodefromourCgIncludefile,wecanusetheHalfLambertlightingmodelwiththefollowingcode:
CGPROGRAM
#include"MyCGInclude.cginc"
#pragmasurfacesurfHalfLambert
3. Finally,wehavealsodeclaredacustomvariableinourCgIncludefiletoshowthatwecansetupdefaultvariablesforourshaderstouse.Toseethisinaction,enterthefollowingcodeinthePropertiesblockofyourshader:
Properties
{
_MainTex("Base(RGB)",2D)="white"{}
_DesatValue("Desaturate",Range(0,1))=0.5
_MyColor("MyColor",Color)=(1,1,1,1)
}
4. WhenwereturntoUnity,theshaderandCgIncludefilewillcompile,andifyoudonotseeanyerrors,youwillnoticethatinfactweareusingournewHalfLambertlightingmodelandanewcolorswatchappearsinourmaterial’sInspector.ThefollowingscreenshotshowstheresultofusingourCgIncludefile:
Howitworks…Whenusingshaders,wecanincludeothersetsofcodeusingthe#includepreprocessordirective.ThistellsUnitythatwewanttoletthecurrentshaderusethecodefromwithintheincludedfileintheshader;thisisthereasonwhythesefilesarecalledCgIncludefiles.WeareincludingsnippetsofCgcodeusingthe#includedirective.
Oncewedeclarethe#includedirectiveandUnityisabletofindthefileintheproject,Unitywillthenlookforcodesnippetsthathavebeendefined.Thisiswherewestarttousethe#ifndefand#endifdirectives.Whenwedeclarethe#ifndefdirective,wearesimplysaying,ifnotdefined,definesomethingwithaname.Inthisrecipe’scase,wesaidwewantedto#defineMY_CG_INCLUDE.SoifUnitydoesn’tfindadefinitioncalledMY_CG_INCLUDE,itgoesandcreatesitwhentheCgIncludefileiscompiled,therebygivingusaccesstothecodethatfollows.The#endifmethodsimplysaysthatthisistheendofthisdefinition,sostoplookingformorecode.
Youcannowseehowpowerfulthisbecomesaswecannowstoreallofourlightingmodelsandcustomvariablesinonefileandgreatlyreducetheamountofcodethatwehavetowrite.TherealpoweriswhenyoucanbegintogiveyourshaderstheflexibilitybydefiningmultiplestatesoffunctionsintheCgIncludefiles.
ImplementingaFurShaderThelookofamaterialdependsonitsphysicalstructure.Theshadersattempttosimulatethem,butindoingso,theyoversimplifythewaylightbehaves.Materialswithacomplexmacroscopicstructureareparticularlyhardtorender.Thisisthecaseformanytextilefabricsandanimalfurs.Thisrecipewillshowyouhowitispossibletosimulatefurandothermaterials(suchasgrass)thataremorethanjustaflatsurface.Inordertodothis,thesamematerialisdrawnmultipletimesoverandover,increasingitssizeeverytime.Thiscreatestheillusionoffur.
TheshaderpresentedhereisbasedontheworkofJonathanCzeckandArasPranckevičius:
GettingreadyInorderforthisrecipetowork,youwillneedtwothings.Thefirstoneisthetextureofthefurasitappearsfromtheoutside.Thesecondtexturewillbeusedtocontrolthedistributionofthefurandisdeeplyconnectedtotheoriginalone.Thefollowingimageshowsaleopardfur(left)andpossiblecontrolmask(right):
Thewhitepixelsinthecontrolmaskwillbeextrudedfromtheoriginalmaterial,simulatingafur.Itisimportantthatthedistributionofthesewhitepixelsissparseinordertogiveanillusionthatthematerialismadeoutofmanysmallhairstrands.Aloosewaytocreatesuchatextureisasfollows:
1. Applyathresholdtoyouroriginaltexturetobettercapturepatcheswherethefurislessdense.
2. Applyanoisefilterthatpixelatestheimage.TheRGBchannelsofnoisemustnotbedependentinordertoproduceablackandwhiteresult.
3. Foramorerealisticlook,overlayaPerlinnoisefilterthataddstothevariabilityofthefur.
4. Finally,applyathresholdfilteragaintobetterseparatethepixelsinyourtexture.
Likealltheothershadersbefore,youwillneedtocreateanewstandardshaderandmaterialtohostit.
Howtodoit…Forthisrecipe,wecanstartmodifyingaStandardshader:
1. AddthefollowingProperties:
_FurLength("FurLength",Range(.0002,1))=.25
_Cutoff("Alphacutoff",Range(0,1))=0.5
_CutoffEnd("Alphacutoffend",Range(0,1))=0.5
_EdgeFade("EdgeFade",Range(0,1))=0.4
_Gravity("Gravitydirection",Vector)=(0,0,1,0)
_GravityStrength("Gstrenght",Range(0,1))=0.25
2. Thisshaderrequiresyoutorepeatthesamepassseveraltimes.WewillusethetechniqueintroducedintheMakingyourshaderworldmodularwithCgIncludessectiontogroupallthecodenecessaryfromasinglepassinanexternalfile.Let’sstartcreatinganewCgIncludefilecalledFurPass.cgincwiththefollowingcode:
#pragmatarget3.0
fixed4_Color;
sampler2D_MainTex;
half_Glossiness;
half_Metallic;
uniformfloat_FurLength;
uniformfloat_Cutoff;
uniformfloat_CutoffEnd;
uniformfloat_EdgeFade;
uniformfixed3_Gravity;
uniformfixed_GravityStrength;
voidvert(inoutappdata_fullv)
{
fixed3direction=lerp(v.normal,_Gravity*_GravityStrength+
v.normal*(1-_GravityStrength),FUR_MULTIPLIER);
v.vertex.xyz+=direction*_FurLength*FUR_MULTIPLIER*
v.color.a;
}
structInput{
float2uv_MainTex;
float3viewDir;
};
voidsurf(InputIN,inoutSurfaceOutputStandardo){
fixed4c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
o.Albedo=c.rgb;
o.Metallic=_Metallic;
o.Smoothness=_Glossiness;
//o.Alpha=step(_Cutoff,c.a);
o.Alpha=step(lerp(_Cutoff,_CutoffEnd,FUR_MULTIPLIER),c.a);
floatalpha=1-(FUR_MULTIPLIER*FUR_MULTIPLIER);
alpha+=dot(IN.viewDir,o.Normal)-_EdgeFade;
o.Alpha*=alpha;
}
3. GetbacktoyouroriginalshaderandaddthisextrapassaftertheENDCGsection:
CGPROGRAM
#pragmasurfacesurfStandardfullforwardshadowsalpha:blend
vertex:vert
#defineFUR_MULTIPLIER0.05
#include"FurPass.cginc"
ENDCG
4. Addmorepasses,progressivelyincreasingFUR_MULTIPLIER.Youcangetdecentresultswith20passes,from0.05to0.95.
Oncetheshaderiscompiledandattachedtoamaterial,youcanchangeitsappearancefromtheInspector.TheFurLengthpropertydeterminesthespacebetweenthefurshells,whichwillbealteringthelengthofthefur.Alongerfurmightrequiremorepassestolookrealistic.AlphaCutoffandAlphaCutoffEndareusedtocontrolthedensityofthefurandhowitgetsprogressivelythinner.EdgeFadedeterminesthefinaltransparencyofthefur,resultinginafuzzierlook.SoftermaterialsshouldhaveahighEdgeFade.Finally,GravityDirectionandGravityStrengthcurvethefurshellstosimulatetheeffectofgravity.
Howitworks…ThetechniquepresentedinthisrecipeisknownasLengyel’sconcentricfurshelltechniqueor,simply,shelltechnique.Itworksbycreatingprogressivelybiggercopiesofthegeometrythatneedstoberendered.Withtherighttransparency,itgivestheillusionofacontinuousthreadofhair:
Theshelltechniqueisextremelyversatileandrelativelyeasytoimplement.Realistic,realfurrequiresnotonlyextrudingthegeometryofthemodel,butalsoalteringitsvertices.Thisispossiblewithtessellationshaders,whicharemuchmoreadvancedandnotcoveredinthisbook.
EachpassinthisFurShaderiscontainedinFurPass.cginc.Thevertexfunctioncreatesaslightlybiggerversionofthemodel,whichisbasedontheprincipleofnormalextrusion.Additionally,theeffectofgravityistakenintoaccountsothatitgetsmoreintensethefurtherwearefromthecentre:
voidvert(inoutappdata_fullv)
{
fixed3direction=lerp(v.normal,_Gravity*_GravityStrength+
v.normal*(1-_GravityStrength),FUR_MULTIPLIER);
v.vertex.xyz+=direction*_FurLength*FUR_MULTIPLIER*v.color.a;
}
Inthisexample,thealphachannelisusedtodeterminethefinallengthofthefur.Thisallowsforamoreprecisecontrol.
Finally,thesurfacefunctionreadsthecontrolmaskfromthealphachannel.Itusesthecutoffvaluetodeterminewhichpixelstoshowandwhichonestohide.ThisvaluechangesfromthefirsttothefinalfurshelltomatchAlphaCutoffandAlphaCutoffEnd:
o.Alpha=step(lerp(_Cutoff,_CutoffEnd,FUR_MULTIPLIER),c.a);
floatalpha=1-(FUR_MULTIPLIER*FUR_MULTIPLIER);
alpha+=dot(IN.viewDir,o.Normal)-_EdgeFade;
o.Alpha*=alpha;
Thefinalalphavalueofthefuralsodependsonitsanglefromthecamera,givingitasofterlook.
There’smore…TheFurShaderhasbeenusedtosimulatefur.However,itcanbeusedforavarietyofothermaterials.Itworksverywellformaterialsthatarenaturallymadeofmultiplelayers,suchasforestcanopies,fuzzyclouds,humanhair,andevengrass.
Therearemanyotherimprovementsthatcandramaticallyincreaseitsrealism.Youcanaddaverysimplewindanimationbychangingthedirectionofthegravitydependingonthecurrenttime.Ifcalibratedcorrectly,thiscangivetheimpressionthatthefurismovingbecauseofthewind.
Additionally,youcanmakeyourfurmovewhenthecharacterismoving.Alltheselittletweakscontributetothebelievabilityofyourfur,givingtheillusionthatitisnotjustastaticmaterialdrawnonthesurface.Unfortunately,thisshadercomesataprice:20passesareveryheavytocompute.Thenumberofpassesroughlydetermineshowbelievablethematerialis.Youshouldplaywithfurlengthandpassesinordertogettheeffectthatworksbestforyou.Giventheperformanceimpactofthisshader,itisadvisabletohaveseveralmaterialswithdifferentnumbersofpasses;youcanusethematdifferentdistancesandsavealotofcomputation.
ImplementingheatmapswitharraysOnecharacteristicthatmakesshadershardtomasteristhelackofaproperdocumentation.Mostdeveloperslearnshadersbymessingupwiththecode,withouthavingadeepknowledgeofwhat’sgoingon.TheproblemisamplifiedbythefactthatCg/HLSLmakesalotofassumptions,someofwhicharenotproperlyadvertised.Unity3DallowsC#scriptstocommunicatewithshadersusingmethodssuchasSetFloat,SetInt,SetVector,andsoon.Unfortunately,Unity3Ddoesn’thaveaSetArraymethod,whichledmanydeveloperstobelievethatCg/HLSLdoesn’tsupportarrayseither.Thisisnottrue.Thispostwillshowyouhowit’spossibletopassarraystoshaders.JustrememberthatGPUsarehighlyoptimizedforparallelcomputations,andusingforloopsinashaderwilldramaticallydropitsperformance.
Forthisrecipe,wewillimplementaheatmap,asshowninthefollowingimage:
GettingreadyTheeffectinthisrecipecreatesaheatmapfromasetofpoints.Thisheatmapcanbeoverlaidontopofanotherpicture,likeintheprecedingimage.Thefollowingstepsarenecessary:
1. Createaquadwiththetexturethatyouwanttousefortheheatmap.Inthisexample,amapofLondonhasbeenused.
2. Createanotherquad,andplaceitontopofthepreviousone.Ourheatmapwillappearonthisquad.
3. Attachanewmaterialandshadertothesecondquad.
Howtodoit…Thisshaderisquitedifferentfromtheonescreatedbefore,yetitisrelativelyshort.Forthisreason,theentirecodeisprovidedinthefollowingpoints:
1. Copythiscodetothenewlycreatedshader:
shader"Heatmap"{
Properties{
_HeatTex("Texture",2D)="white"{}
}
Subshader{
Tags{"Queue"="Transparent"}
BlendSrcAlphaOneMinusSrcAlpha//Alphablend
Pass{
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
structvertInput{
float4pos:POSITION;
};
structvertOutput{
float4pos:POSITION;
fixed3worldPos:TEXCOORD1;
};
vertOutputvert(vertInputinput){
vertOutputo;
o.pos=mul(UNITY_MATRIX_MVP,input.pos);
o.worldPos=mul(_Object2World,input.pos).xyz;
returno;
}
uniformint_Points_Length=0;
uniformfloat3_Points[20];//(x,y,z)=position
uniformfloat2_Properties[20];//x=radius,y=
intensity
sampler2D_HeatTex;
half4frag(vertOutputoutput):COLOR{
//Loopsoverallthepoints
halfh=0;
for(inti=0;i<_Points_Length;i++)
{
//Calculatesthecontributionofeachpoint
halfdi=distance(output.worldPos,
_Points[i].xyz);
halfri=_Properties[i].x;
halfhi=1-saturate(di/ri);
h+=hi*_Properties[i].y;
}
//Converts(0-1)accordingtotheheattexture
h=saturate(h);
half4color=tex2D(_HeatTex,fixed2(h,0.5));
returncolor;
}
ENDCG
}
}
Fallback"Diffuse"
}
2. Onceyouhaveattachedthisscripttoyourmaterial,youshouldprovidearamptexturefortheheatmap.It’simportanttoconfigureitsothatitsWrapModeissettoClamp.Thefollowingonehasbeenusedforthisexample:
NoteIfyourheatmapisgoingtobeusedasanoverlay,thenmakesurethattheramptexturehasanalphachannelandthetextureisimportedwiththeoption,AlphaisTransparency.
3. CreateanewscriptcalledHeatmapsusingthefollowingcode:
usingUnityEngine;
usingSystem.Collections;
publicclassHeatmap:MonoBehaviour{
publicVector3[]positions;
publicfloat[]radiuses;
publicfloat[]intensities;
publicmaterialmaterial;
voidStart()
{
material.SetInt("_Points_Length",positions.Length);
for(inti=0;i<positions.Length;i++)
{
material.SetVector("_Points"+i.ToString(),positions[i]);
Vector2properties=newVector2(radiuses[i],
intensities[i]);
material.SetVector("_Properties"+i.ToString(),
properties);
}
}
}
4. Attachthescripttoanobjectinyourscene,preferablytothequad.Then,dragthematerialcreatedforthiseffecttothematerialslotofthescript.Bydoingthis,thescriptwillbeabletoaccessthematerialandinitializeit.
5. Lastly,expandthepositions,radiuses,andintensitiesfieldsofyourscriptandfillthemwiththevaluesofyourheatmap.Positionsindicatethepoints(inworldcoordinates)ofyourheatmaps,radiiindicatetheirsize,andintensitiesindicatehowstronglytheyaffectthesurroundingarea:
Howitworks…Thisshaderreliesonthingsthathaveneverbeenintroducedbeforeinthisbook;thefirstoneisarrays.Cgallowsarraysthatcanbecreatedwiththefollowingsyntax:
uniformfloat3_Points[20];
Cgdoesn’tsupportarrayswithanunknownsize:youmustpreallocateallthespacethatyouneedbeforehand.Theprecedinglineofcodecreatesanarrayof20elements.
Unitydoesnotexposeanymethodtoinitializethesearraysdirectly.However,singleelementsareaccessibleusingthenameofthearray(_Points)followedbytheposition,suchas_Points0or_Points10.Thiscurrentlyworksonlyforcertaintypesofarrays,suchasfloat3andfloat2.Thescriptattachedtothequadinitializestheshader’sarrays,elementbyelement.
Inthefragmentfunctionoftheshader,thereisasimilarforloopthat,foreachpixelofthematerial,queriesallthepointstofindtheircontributiontotheheatmap:
halfh=0;
for(inti=0;i<_Points_Length;i++)
{
//Calculatesthecontributionofeachpoint
halfdi=distance(output.worldPos,_Points[i].xyz);
halfri=_Properties[i].x;
halfhi=1-saturate(di/ri);
h+=hi*_Properties[i].y;
}
Thehvariablestorestheheatfromallthepoints,giventheirradiiandintensities.Itisthenusedtolookupwhichcolortousefromtheramptexture.
Theshadersandarraysareawinningcombination,especiallyasveryfewgamesareusingthemattheirfullpotential.However,theyintroduceasignificancebottleneckasforeachpixel,theshaderhastoloopthroughallthepoints.
IndexA
albedoandtransparencyURL/Seealso
AnisotropicSpeculartypecreating/CreatinganAnisotropicSpeculartype,Gettingready,Howtodoit…,Howitworks…URL/CreatinganAnisotropicSpeculartype
arraysheatmaps,implementingwith/Implementingheatmapswitharrays,Gettingready,Howtodoit…,Howitworks…
assets/Howitworks…AUTODESK
URL/Normalmapping
BbasicStandardShader
creating/CreatingabasicStandardShader,Howtodoit…,Howitworks…,Seealso
bindingsemantic/Howitworks…bindingsemantics
URL/SeealsoBlinn/CreatingaBlinnPhongSpeculartypeBlinnPhongSpeculartype
creating/CreatingaBlinnPhongSpeculartype,Howtodoit…,Howitworks…,Seealso
ButterflyEffectURL/Seealso
Ccalibrationchart
URL/SeealsoCelShading/CreatingaToonShaderCgInclude
used,formakingshaderworldmodular/MakingyourshaderworldmodularwithCgInclude,Howtodoit…,Howitworks…
CgIncludefilesbuiltintoUnity,using/UsingCgIncludefilesthatarebuiltintoUnity,Gettingready,Howtodoit…,Howitworks…
CgshadinglanguageURL/Howtodoit…
cheapshaderabout/Whatisacheapshader?,Gettingready,Howtodoit…,Howitworks…
circlecreating,aroundterrain/Creatingacirclearoundyourterrain,Gettingready,Howtodoit…moving/Movingthecircle
component/CreatingabasicStandardShaderCrazyBump
URL/Normalmappingcubemaps/Howitworks…culling/Creatingatransparentmaterialcustomdiffuselightingmodel
creating/Creatingacustomdiffuselightingmodel,Gettingready,Howitworks…
customshadersmigrating/Migratingcustomshaders
D2Dgames
waterShader,implementingfor/ImplementingaWaterShaderfor2Dgames,Gettingready,Howtodoit…,Howitworks…
2DtextureURL/Seealso
3DsurfaceURL/Seealso
debugging/There’smore…DefaultValue/Howitworks…Diffuseshader/MigratingLegacyShadersfromUnity4toUnity5diffuseshader
about/Howtodoit…,Howitworks…Diffuseshading
about/Diffuseshading,Howtodoit…,Howitworks…dotproduct/Howitworks…,Howitworks…,Coloringthesurface
Eextrusionmaps
adding/Addingextrusionmaps
Ffurshader
implementing/ImplementingaFurShader,Gettingready,Howtodoit…,Howitworks…,There’smore…
GGIMP/GettingreadyGimp/GettingreadyglassShader
implementing/ImplementingaGlassShader,Gettingready,Howtodoit…,There’smore…
GlobalIllumination(GI)/Introductiongrabpass
about/Introductionusing/Usinggrabpass,Howtodoit…,Howitworks…,There’smore…
Graphicalprocessingunit(GPU)/Howitworks…Graphics.Blit
URL/Howitworks…graphicsprocessingunit(GPU)/Howitworks…,Introduction,Howitworks…
Hheatmaps
implementing,witharrays/Implementingheatmapswitharrays,Gettingready,Howtodoit…,Howitworks…
holographicshadercreating/CreatingaHolographicShader,Howtodoit…,Seealso
Iindividualtimevalues
URL/Howitworks…InspectorGUIName/Howitworks…insulators/Howitworks…
LLambertianreflectance/Howtodoit…,Howtodoit…,Howitworks…
about/CreatingacustomdiffuselightingmodelLegacyShaders
migrating,fromUnity4toUnity5/MigratingLegacyShadersfromUnity4toUnity5automaticupgradeoption/UpgradingautomaticallyStandardShaders,using/UsingStandardShaderscustomshaders,migrating/Migratingcustomshaders
lightbaking/Bakinglightsinyourscenelightingfunctions
URL/Howitworks…lightingmodel/Introductionlightmap/Howitworks…Lightmapping/Howitworks…lightprobes
configuring/ConfiguringthelightprobesURL/Seealso
lightprobing/Howitworks…lights
baking,inscene/Bakinglightsinyourscene,Configuringthestaticgeometrystaticgeometry,configuring/Configuringthestaticgeometrylightprobes,configuring/Configuringthelightprobesbaking/Bakingthelights,Howitworks…
lighttransport/Bakinglightsinyourscene
Mmasking/Howtodoit…materialchart
URL/Seealsomaterials/CreatingabasicStandardShaderMaya/Gettingreadymetallicsetup
about/Understandingthemetallicsetup,Gettingready,Howitworks…mirrors
creating/Creatingmirrorsandreflectivesurfaces,Gettingreadymodel-view-projectionmatrix/Howitworks…models
extruding/Extrudingyourmodels,Howtodoit…,There’smore…extrusionmaps,adding/Addingextrusionmaps
MonoDevelop/Howtodoit…
NNDOPainter
URL/Normalmappingnightvisionscreeneffect
creating/Creatinganightvisionscreeneffect,Howtodoit…,Howitworks…,There’smore…tintedgreen/Gettingreadyscanlines/Gettingreadynoisetexture/Gettingreadyvignetteeffect/Gettingready
noisetextures/Gettingreadynon-playablecharacters(NPCs)/Configuringthelightprobesnormalextrusion/Extrudingyourmodels,Howitworks…normalmapping
about/Normalmapping,Howtodoit…,Howitworks…,There’smore…normals/GettingreadyNvidia/Seealso
Ooldmoviescreeneffect
creating/Creatinganoldmoviescreeneffect,Gettingready,Howtodoit…,Howitworks…sepiatone/Gettingreadyvignetteeffect/Gettingreadydustandscratches/Gettingready
OnRenderImageURL/Howitworks…
Oren-NayarlightingmodelURL/Seealso
OverlayBlendmodewithscreeneffects/UsingtheOverlayBlendmodewithscreeneffects,Howtodoit…,Howitworks…
Ppackedarrays
using/Usingpackedarrays,Howtodoit…about/Howtodoit…URL/Seealso
packedmatricesabout/Packedmatrices,Seealso
PassionPictures/SeealsoPBRTextureConversion
URL/SeealsoPerlinnoise/GettingreadyPhongSpeculartype
creating/CreatingaPhongSpeculartype,Howtodoit…,Howitworks…Photoshop/Gettingready,Gettingreadyphysically-basedrendering/Howtodoit…physically-basedrendering(PBR)
URL/Seealsotransparency,adding/AddingtransparencytoPBR,Howtodoit…
pixelShaders/Howitworks…posteffects/IntroductionProfiler
using/Gettingready,Howtodoit…URL/There’smore…
propertiesadding,toshader/Addingpropertiestoashader,Howtodoit…,Howitworks…URL/Seealsousing,inSurfaceShader/UsingpropertiesinaSurfaceShader,Howtodoit…,Howitworks…,There’smore…,Seealso
PyroTechnixURL/Seealso
QQuixelMEGASCANS
URL/Seealso
Rrampmap/Gettingreadyreal-timeshading/Introductionreflectionprobe
URL/Gettingready,Seealso/Howitworks…reflectivesurfaces
creating/Creatingmirrorsandreflectivesurfaces,Gettingreadyrenderercomponent/Configuringthelightprobesrenderers/CreatingabasicStandardShaderrenderqueues/Howitworks…RGBchannels/Gettingready
Sscene
lights,baking/Bakinglightsinyourscene,Configuringthestaticgeometryscreeneffects
brightness/Usingbrightness,saturation,andcontrastwithscreeneffects,Howtodoit…,Howitworks…saturation/Usingbrightness,saturation,andcontrastwithscreeneffects,Howtodoit…,Howitworks…contrast/Usingbrightness,saturation,andcontrastwithscreeneffects,Howtodoit…,Howitworks…blendmodes,basicPhotoshoplike/UsingbasicPhotoshop-likeBlendmodeswithscreeneffects,Howtodoit…,Howitworks…,There’smore…overlayBlendmodewith/UsingtheOverlayBlendmodewithscreeneffects,Howtodoit…,Howitworks…
screeneffectsscriptsystemsettingup/Settingupthescreeneffectsscriptsystem,Howtodoit…,Howitworks…,There’smore…
scripts/CreatingabasicStandardShadershader
URL/Migratingcustomshadersproperties,adding/Addingpropertiestoashader,Howtodoit…,Howitworks…textures,adding/Addingatexturetoashader,Gettingready,Howitworks…,There’smore…,Seealsomakingmodular,CgIncludeused/MakingyourshaderworldmodularwithCgInclude,Howtodoit…,Howitworks…furshader,implenenting/ImplementingaFurShader,Gettingready,Howtodoit…,Howitworks…,There’smore…
ShaderCalibrationSceneURL/Seealso
Shaderreplacement/Howitworks…shaders/Introduction
profiling/Profilingyourshaders,Howtodoit…,There’smore…modifying,formobile/Modifyingourshadersformobile,Howtodoit…,Howitworks…
skinnedmeshrenderers/Howitworks…skyboxes/Howitworks…smearing/Howtodoit…snowshader
implementing/Implementingasnowshader,Howtodoit…surface,coloring/Coloringthesurfacegeometry,altering/Alteringthegeometry
Specularshader/MigratingLegacyShadersfromUnity4toUnity5
standard/IntroductionStandardDiffuse/Howtodoit…StandardShaders
using/UsingStandardShadersstaticgeometry
configuring/Configuringthestaticgeometrysubstancedesigner
URL/Seealsosurfacefunction/Introductionsurfaceoutput/IntroductionSurfaceOutputStandardSpecularstruct
properties/Howitworks…SurfaceOutputStandardstruct
properties/Howitworks…SurfaceOutputstruct
properties/Howitworks…SurfaceShader
about/Howtodoit…properties,using/UsingpropertiesinaSurfaceShader,Howtodoit…,Howitworks…,There’smore…,Seealsoworking/Introductionvertexcolor,accessing/AccessingavertexcolorinaSurfaceShader,Gettingready,Howtodoit…,Howitworks…vertices,animating/AnimatingverticesinaSurfaceShader,Howtodoit…,Howitworks…
swizzling/Howtodoit…
Tterrain
circle,creatingaround/Creatingacirclearoundyourterrain,GettingreadytextureGUIelement/Addingpropertiestoashadertexturemapping/Addingatexturetoashadertextures
adding,toshader/Addingatexturetoashader,Gettingready,Howitworks…,There’smore…,Seealsoscrolling,bymodifyingUVvalues/ScrollingtexturesbymodifyingUVvalues,Howtodoit…,Howitworks…packing/Packingandblendingtextures,Gettingready,Howtodoit…,Howitworks…blending/Packingandblendingtextures,Gettingready,Howtodoit…,Howitworks…
toonshadercreating/CreatingaToonShader,Gettingready,Howitworks…,There’smore…
toonshading/CreatingaToonShadertransparency
adding,toPBR/AddingtransparencytoPBR,Howtodoit…semi-transparentmaterials/Semi-transparentmaterialsobjects,fading/Fadingobjectssolidgeometries,withholes/Solidgeometrieswithholes
transparentmaterialcreating/Creatingatransparentmaterial,Gettingready,Howtodoit…,Howitworks…
Type/Howitworks…
UUnity
documentation,URL/UnderstandingthemetallicsetupURL/UsingCgIncludefilesthatarebuiltintoUnity
Unity4toUnity5,LegacyShadersmigratingfrom/MigratingLegacyShadersfromUnity4toUnity5
UnityAssetStoreURL/Seealso
UNITYDOWNLOADARCHIVEURL/Seealso
UnityOfficialTutorialsURL/Solidgeometrieswithholes
UVdataabout/Addingatexturetoashader
UVvaluesmodifying,toscrolltextures/ScrollingtexturesbymodifyingUVvalues,Howtodoit…,Howitworks…
VVariableName/Howitworks…VertexandFragmentShaders
about/UnderstandingVertexandFragmentShaders,Howtodoit…,Howitworks…fragmentfunction/Howitworks…fragment/Howitworks…pixelShaders/Howitworks…bindingsemantic/Howitworks…model-view-projectionmatrix/Howitworks…Graphicalprocessingunit(GPU)/Howitworks…bindingsemantics/There’smore…,Outputsemanticsinputsemantics/Inputsemanticsoutputsemantics/Outputsemantics
vertexcolorinSurfaceShader,accessing/AccessingavertexcolorinaSurfaceShader,Howtodoit…,Howitworks…
vertexmodifier/Howitworks…vertices
inSurfaceShader,animating/AnimatingverticesinaSurfaceShader,Gettingready,Howtodoit…,Howitworks…
volumeraycasting/Seealsovolumetricexplosion
implementing/Implementingavolumetricexplosion,Gettingready,Howtodoit…,Howitworks…,Seealso
volumetricexplosionsabout/Implementingavolumetricexplosion
WwaterShader
implementing,for2Dgames/ImplementingaWaterShaderfor2Dgames,Howtodoit…,Howitworks…
YYIQvalues
URL/Seealso
ZZbrush4R7
URL/NormalmappingZBuffering/Howitworks…Zordering/Creatingatransparentmaterial
