uniforms - The Book of Shaders

These inputs are called uniform and come in most of the supported types: float ... In the same way GLSL gives us a default output, vec4 gl_FragColor ... Uniforms SofarwehaveseenhowtheGPUmanageslargenumbersofparallelthreads,eachoneresponsibleforassigningthecolortoafractionofthetotalimage.Althougheachparallelthreadisblindtotheothers,weneedtobeabletosendsomeinputsfromtheCPUtoallthethreads.Becauseofthearchitectureofthegraphicscardthoseinputsaregoingtobeequal(uniform)toallthethreadsandnecessarilysetasreadonly.Inotherwords,eachthreadreceivesthesamedatawhichitcanreadbutcannotchange. Theseinputsarecalleduniformandcomeinmostofthesupportedtypes:float,vec2,vec3,vec4,mat2,mat3,mat4,sampler2DandsamplerCube.Uniformsaredefinedwiththecorrespondingtypeatthetopoftheshaderrightafterassigningthedefaultfloatingpointprecision. #ifdefGL_ES precisionmediumpfloat; #endif uniformvec2u_resolution;//Canvassize(width,height) uniformvec2u_mouse;//mousepositioninscreenpixels uniformfloatu_time;//Timeinsecondssinceload YoucanpicturetheuniformslikelittlebridgesbetweentheCPUandtheGPU.ThenameswillvaryfromimplementationtoimplementationbutinthisseriesofexamplesI’malwayspassing:u_time(timeinsecondssincetheshaderstarted),u_resolution(billboardsizewheretheshaderisbeingdrawn)andu_mouse(mousepositioninsidethebillboardinpixels).I’mfollowingtheconventionofputtingu_beforetheuniformnametobeexplicitaboutthenatureofthisvariablebutyouwillfindallkindsofnamesforuniforms.ForexampleShaderToy.comusesthesameuniformsbutwiththefollowingnames: uniformvec3iResolution;//viewportresolution(inpixels) uniformvec4iMouse;//mousepixelcoords.xy:current,zw:click uniformfloatiTime;//shaderplaybacktime(inseconds) Enoughtalking,let'sseetheuniformsinaction.Inthefollowingcodeweuseu_time-thenumberofsecondssincetheshaderstartedrunning-togetherwithasinefunctiontoanimatethetransitionoftheamountofredinthebillboard. AsyoucanseeGLSLhasmoresurprises.TheGPUhashardwareacceleratedangle,trigonometricandexponentialfunctions.Someofthosefunctionsare:sin(),cos(),tan(),asin(),acos(),atan(),pow(),exp(),log(),sqrt(),abs(),sign(),floor(),ceil(),fract(),mod(),min(),max()andclamp(). Nowitistimeagaintoplaywiththeabovecode. Slowdownthefrequencyuntilthecolorchangebecomesalmostimperceptible. Speeditupuntilyouseeasinglecolorwithoutflickering. Playwiththethreechannels(RGB)indifferentfrequenciestogetinterestingpatternsandbehaviors. gl_FragCoord InthesamewayGLSLgivesusadefaultoutput,vec4gl_FragColor,italsogivesusadefaultinput,vec4gl_FragCoord,whichholdsthescreencoordinatesofthepixelorscreenfragmentthattheactivethreadisworkingon.Withvec4gl_FragCoord,weknowwhereathreadisworkinginsidethebillboard.Inthiscasewedon'tcallituniformbecauseitwillbedifferentfromthreadtothread,insteadgl_FragCoordiscalledavarying. Intheabovecodewenormalizethecoordinateofthefragmentbydividingitbythetotalresolutionofthebillboard.Bydoingthisthevalueswillgobetween0.0and1.0,whichmakesiteasytomaptheXandYvaluestotheREDandGREENchannel. Inshader-landwedon’thavetoomanyresourcesfordebuggingbesidesassigningstrongcolorstovariablesandtryingtomakesenseofthem.YouwilldiscoverthatsometimescodinginGLSLisverysimilartoputtingshipsinsidebottles.Isequallyhard,beautifulandgratifying. Nowitistimetotryandchallengeourunderstandingofthiscode. Canyoutellwherethecoordinate(0.0,0.0)isinourcanvas? Whatabout(1.0,0.0),(0.0,1.0),(0.5,0.5)and(1.0,1.0)? Canyoufigureouthowtouseu_mouseknowingthatthevaluesareinpixelsandNOTnormalizedvalues?Canyouuseittomovecolorsaround? Canyouimagineaninterestingwayofchangingthiscolorpatternusingu_timeandu_mousecoordinates? Afterdoingtheseexercisesyoumightwonderwhereelseyoucantryyournewshader-powers.Inthefollowingchapterwewillseehowtomakeyourownshadertoolsinthree.js,Processing,andopenFrameworks. <>