Flutter Shaders - Flying High with Flutter #92

[Music] thank you so hello and welcome to another episode of flying high with flutter I'm your host Alan weima today I'm with Kanan I didn't ask you how to say the last name uh is it let me have a try I want to say it in a Spanish way but I'm sure that will probably be wrong am I guessing Okay yeah we will be wrong because it supports kids way but anyhow oh wow uh of course I want to say aruho but that's definitely wrong because you said it's totally different oh my goodness I don't think I could have gotten that the first time I I appreciate you stretching stretching the imagination you know sometimes I think in English it's similar like you look at it and you're like okay I think I know how to say that and it's like totally different like the word like Colonel oh it's spelled like Colonial you know this it's like totally different than the way you write it absolutely nuts usually those ones are like French but uh sorry anyways enough French passing for once uh again uh welcome to the show um we're here to talk about shaders right what I understand is that you're the guy who knows about shaders okay I am a guy the most something about shaders uh it's uh in the by saying shaders I mean fragment shaders on flutter that's still an upcoming feature uh in the framework and the engine so for example yeah you have some people that's uh been working or experiments with uh with fragment shaders uh for some time now and uh what happened is in the last few months the support for fragment share days and flutter in the master Channel has went like into a Evolution and it's fantastic right now but it's still only development so you just have to um keep watching on those and uh going using the imagination to to see how uh what's the possibilities this new feature will unlock to the day-to-day app development I usually like to kind of go back in time and then kind of catch up to the the topic that we're at today right so you're you're based out of Portugal but you're working for very good Ventures isn't that true yes yes it's a kind of a long story but I'm Brazilian and I move it to Portugal uh some uh some years ago I guess it's already three and a half years and I started working um messing with flutter since I was back in Brazil 2018. uh but I started working professionally professionally with flutter uh 2021 beginning of 2021 oh it's that's very recent yes I before that I just uh I just like did things in the sides also some Community work uh organize it some events like the heck 19 the hackathon in 2019 in the city of Campinas Brazil and I also started working immediately with uh officer stuff packages and libraries for flutter since 2018 so the oldest one I have is uh photovio which is a widget that you can display images in a fashion like uh uh image image gallery where you can zoom in doing the pinch gesture rotate and stuff like that and uh I also been uh involved since the very beginning with the with something that we call the blue fire which is a collective of people that do some open source maintain some open source projects and I also organize some events around the open some open source projects that we have the most famous one is the flame engine the game engine for flutter and um yeah so this is like my my my nightlife in flutter where I do like between uh between uh professional work and uh professionally I started I started working at this company called Rose uh which is a spreadsheet company and we we ship it one of one of the first uh desktop apps last year I don't know if it can be used right now but uh at that moment at that time it was a huge case for flutter uh if we remember the flutter uh release on Windows featured our app it was awesome that moment was awesome to see our our products being featured on the on official flutter event and uh after that I joined uh vgv in 20 in this year and I joined the team that maintains the open source projects for very good Ventures so this team is me Felix Angelov and uh buffering and we might think projects like very good salary flame behaviors we just released something that adds completion to command line applications among others for example we help two mountain also things are not from pgv but are from us personally like block Mason and other small packages okay yeah I didn't know you worked on Rose I mean Rose yeah I do remember that came out it was huge right and it kind of came out and then I never heard anything back from it again and you're saying it it may not even be out uh like publicly yet yeah yeah as far as I know the they're not developing the the desktop app is not under development anymore at this moment so I don't know what's going on but uh yeah let's see what happens at least the uh the engine for the spreadsheet the visual engine for the spreadsheet and uh some other small packages are open source there's uh this package called sways that's actually the payable engine that allows that huge thing to run and it's a hundred percent open source there's some shards some plugins I guess I guess we didn't lose a lot from that as a community speaking yeah I like I said I do remember that that was pretty huge uh I remember I think somebody came out on stage to talk about it and that was me um yeah I did it was that you actually that came on stage yes I was in the video say yeah we developed this this I think I think you had less hair at the time I'm trying to remember I think it was a shorter haired guy it was that than James shorter Harem I remember wrong oh yeah probably so you have the coven hair right now right yes if you can call like that yes okay yeah I do remember somebody coming out and and explaining about I thought that was really cool um no no I want to ask a question how come you got chosen is it just uh is it your good looks is that what got you on stage or what was it that got you up there man look at my face of course not of course that's not well that's uh What uh what happened actually what what called the flutter team attention was one gift that I posted as a comment on uh Twitter post the the Twitter post was uh from a fella here from the Florida report uh the Flair Portugal community and he just asked it what you were working on and I answered with the GIF showing the table and the selection and that caused some attention and the flare team contacted us and then we started to uh to do some monthly checkups on how was the project going and uh at this moment they said that we had we have this event going on do they want to be featured we are going to release flutter windows it's going to be published everywhere yeah so we went through we started to record a video immediately and I wrote a small script we went to some uh layers of approval and after that we just recorded a video and also after it was approved you just waited and was published it was quite fun very fun experience oh yeah I'm looking at your I'm actually looking at your your uh your video right now I pulled it up no I was wrong your hair is not less it's about the same as now I just remember uh yeah okay did you get to keep this the nice sweatshirt because that's a pretty cool sweatshirt oh yeah I have that I have that just not wearing right now I love sweatshirt from getting sweatshirt and swag from where I work because it's like free clutches right yeah it's free advertising for them too right so I have some vgvs too you got vgv stuff how come they never sent me any bgb stuff I'm sad now oh you can uh oh man let's change that let's change that let's give you some Swag yeah see if you can if it could be some swag I can send some swag your way I actually have some T-shirts um if anybody at home is listening to the podcast and you guys are interested in some swag I've got stickers and t-shirts and if there's anything else you guys are looking for let me know I got China right across the border I can get made basically everything's made in China and that's right across the border from me so it's easy for me to get stuff uh but yeah I do have some swag I want to give out if anybody's interested um but kind of back to the show yeah so you're working at Rose I mean you're working this app you got the exposure you were on you were you know you were you had your 15 minutes of fame right you were out there yeah people didn't remember how tall your hair was uh but you know at least they they remember about Rose and uh you worked on that but what made you want to to change right you went from Rose to vgv or you did something in between no I just went straight from Rose to Virgo Ventures uh especially because the bro I'm playing there it's uh as an open source engineer so as I was working working not professionally with flutter since 2018 maintaining packages and stuff I already did lots of Open Source just this includes like the flame Engine with huge photo view is huge so this kind of stuff everybody's already involving in and I I wanted to to try something out try something different and this world happens to be like something unique so open searching so it just it will not work on uh we don't work on Commercial products we work only on open source uh open search stuff and also this involves also lots of community work too and some kind of relations we go through uh events like for Vikings for example to talk about stuff and um it's really nice to to have this ability to do this professionally to receive money to work on something that previously I just used it like my free time to work on and that was the biggest uh factor to it that made me to try out uh very good dangerous yeah [Music] um I'm always very curious about this kind of Dev role in um kind of like well I I guess the the biggest question I have is um I mean it's easy to figure out okay if you're working on client projects obviously that's that's how they can say well obviously you're you're you have really good value for us because you're helping to bring in Revenue now working on open source projects that necessarily doesn't have direct Revenue I'm just kind of curious about how this kind of role has has value to it is it just that you guys want to give something back to the community or I'm you know it's not like I'm saying it's not that your role is not useful right I'm always kind of curious about what's the business justification because a lot of old style thinking is always like well is this guy actually making me money well you can't say that about your kind of role directly right so maybe you can explain more about that because that's very interesting wow that that that Vision it's um the vision of having an open source team is kind of an interesting Vision because you have to look into uh how the indirect uh influence that these projects have uh in the ways that we can bring Revenue to to Value Venture so the biggest way of bringing Revenue to companies like uh like very good Rangers that uh have uh software Services is I guess the the one we can see like uh almost time to time is when you're building the open you have uh you are your code is visible so this intrinsically drives some kind of um a pressure on having a good code quality in this case very good code quality and this affects all the projects even if it will not be open source if you have standards like uh that's one thing that's very interesting on video views they are very strong on it it's standards and uh we have lots of projects lots of clients and now have a standard so if someone has to change between projects for example will not face a code base totally different and we always can rely on code equality on tests and good practices and this all comes from this kind of projects so we have this direct impact so on uh on internal projects and even though we have the open source team um the entire company has has this kind of Open Source culture even uh like Engineers working on uh on the commercial projects they may have ideas for open source uh projects and they may work on it so this what happened with uh r13n it's a package we launched it some months ago that's just for regionalization of rules and uh this this came from a project in the commercial side so it's like a two-way street where we can we collaborate with the uh the commercial projects and the also the commercial projects collaborate on open source too and there's also all the obvious uh indirect uh gains that very good Ventures can have from uh from having some kind of uh uh having these standards applied internally uh visible and being adopted externally so for example EOS uh it was very good analysis or very good workflows is being used in several other projects uh around the uh around the community and I guess I guess it's very very positive for everybody and even though we have like this commercial side of agriculture in the open source side of very good Ventures the open source projects are not uh does not tie anyone using it two variable Ventures like you are not owing us anything if you're using very good CLI for example and I guess that's a big win for the community too so having a big impact in the communities there's also that big impact on uh on The View that people have on the company so I guess uh I heard this a lot on events for example on Vikings the very good Ventures it's a Well seen among the community and I'm really glad it's worked there because of that and this helps a lot when people when we want for example to hire the best people these people will know very good dangers so this kind of stuff you know so then now we can say that you're the best one of the best people now yes I full then on on the interview quite well yeah oh that that speaks for your town I think yeah I think working on a very Adventures is something a lot of people kind of aspire to um which is which is good so it's interesting to hear that somebody who just stood up in 2021 if I remember correctly is already at vgv come here yeah yeah so that that must speak to your dedication and passion within flutter right now now what we're actually doing before we got into flutter because we didn't actually really talk too much about that yeah Dark Ages I was doing JavaScript to math uh I worked on um I started as a frontier developer so I just love and to this day I just love CSS more than almost anything not not including people I love people more some people anyhow um I I just love CSS until this day so I started like back in 2015 yeah just working mainly with HTML and CSS because it just this is a this one thing you'll see from my projects I love design stuff and I love visual stuff I love user interfaces um and um after that I got into the board of JavaScript react where could we've react lots of projects back in Brazil on a company called dextra and there was this project that was a mobile app that needed modulus and then I joined the world of mobile with react native back into any 17. until 2018 and in 2018 it's covered the flutter so it was until 2018 and 2019 I was just working with uh on my day on on my day job work with Rex native and at night I turned the intro flutter and started playing out and learning and uh creating open source stuff and then I move it to to Portugal work to work at Rose starting with react and that there was this moment that they needed a desktop app so there was this option between creating one with electron or create one-way flutter we went to flutter and there was his history so what was your first uh kind of experience when you started working with flutter I mean because you came from JavaScript right JavaScript you can do a lot of stuff and you've seen have you ever seen the Wetland before no the what I'll have to I have to share it with you after this call okay so there's this guy named Gary Bernhardt who does this video called wet man so did you ever hear the term wet w-a-t it's basically like saying what but it's like what what is that ah oh all right all right yes have you seen this this wet man thing or no no the white man thing no okay well when you watch the video you understand why it's called wet man but he basically is saying okay uh let me show you something about JavaScript and you start doing weird things like saying like array plus object what does that equal and you get weird stuff and uh but like coming from JavaScript interestingness to kind of more standard Dart like do you feel like there's what do you feel what do you feel when you go from like that kind of style yeah I wasn't the reality of working with typescript I was barely touching pure JavaScript at that moment so some stuff from typescript to show the artists so quite straightforward straightforward way or some punctual differences but it's mostly it's always improvements everything you learned from typescript to Dart and um it was it was okay uh when I started it we were on the darch one yet so typing was not that strict uh so some stuff is just far home instantly but when it came dark too well now things got interesting and um the the strong typing came with that was just awesome awesome so my experience was mostly um positive like mostly nine percent positive and also that helped affect the help is that was I was working with react and react uh the way react Works using components you can translate that to widgets so there's there's some stuff you can translate from a reacts developer to a gif letter that's very straightforward and if you go learn compose and Swift UI there's some stuff that quite uh some concepts are quite transferable between those platforms yeah yeah definitely right like especially the ideas of composition I think compositions is something that's yes quite new otherwise I think most things were like uh class based right even even now if you work around with react like they stop basically most class-based components if I remember correctly like everybody's using functional base which I thought was very interesting I mean we we don't use inheritance a lot on widgets right yes I do find that strange but it does work but this is the the the thing about the clarity view eyes you know you can uh you can the collective UI is just a way of it's just a description a prescription show uh the framework whatever it is to build a screen you're not actually building your screen I'm not actually dealing with the objects that will be alive during uh during the interaction of the user we are just writing a description of it so widgets are just a recite uh so how can you can you um declare UI is given that condition that we are not actually dealing with the things that we will go live uh there will be alive during the update Cycles composition so you just need a method or somewhere that uh described that composition so since we're not messing with things like all the time and not messing with things like hinder objects for example or uh more advances Concepts it's quite straightforward just compose compose and compose now I think we've gotten quite a bit of your background and yeah we know that you're a superstar being on the on the rose team let's talk about shaders a little bit right so why why don't we kind of go into a little bit about why you dug into shaders right because people don't usually dig so much into certain topics but what what got you into getting more into shaders uh if you see like how things are how things aren't uh connected to each other so uh I was working at uh Rose and uh while doing that projects with tables I learned it a lot about scrollable stuff like a lot like everything scrollable is levers and everything it just just was there in my mind and I submitted uh for a talk on flare Vikings about scroll and the scrolling scrollable API is kind of an unknownly scrollable API that people can take advantage of and uh I was doing these lights and working on how the subject was going to talk said okay we we know that uh the apis we have right now are awesome and you have this all these values we can access but how can we make this even more epic so in the end I decided to experiment with Umbra which is this package that my co-worker of offering created around shaders at that time that simplifies the creation of uh fragment shaders on flatter and at that time the using shaders on flutter was really really difficult there was lots of limitations some stuff that I didn't want to put the hands on I just wanted to demonstrate scroll so my idea for a Shader was a motion blur as you scroll so if you scroll fast you have a motion blur the best way of doing that is having a fragment Shader since the fragment shader's support was experiment it's two experiment but was even more experimental at that time I just wanted to do some kind of a gimmick in the end of the presentation so I just wrote a fast Shader there used an umbra and then demonstrate it and it was quite fun everybody loved the demonstration and I was like okay shaders are quite quite powerful and quite uh fast and we have lots of runtime values that we can use as parameters for shaders especially on flutter so let's let's run let's allow the imagination go uh at Infinity so I last week last week ish two weeks ago I don't know I went back and checked what was going on uh with um with shaders and the support was just something else it was quite easy and way more powerful some shaders we some some features we wanted to use back in September was not possible it was possible now so we just okay let's go let's go for for trying out the stuff and then I came out I came up with uh this idea of having this shining Shader and then I shared on Twitter in the it blew up it was quite awesome to see and it was also quite awesome to see how fast you can post process a Wii uh flutter UI with shaders but I guess I'm getting ahead of myself here because uh if someone that's uh listening and doesn't know what to a Shader is basically uh in this case I'm talking on a specific type of Shader that's a fragment Shader and that's a kind of a function uh that runs for every pixel of uh of this of the screen or of the canvas we're putting the Shader on and uh for we run this forever pixel and the Shader doesn't know this the results of the other pixels and I also it depends on every frame you repaint so it's quite powerful but the most important thing is it runs on the graphics processes unit not on the CPU so it's quite fast for for uh graphical processing and you can pass several parameters several different types of parameters to um to shaders for example any double value you have on runtime uh for example how much we scroll the page or the results of a drag gesture I don't know all of this kind of stuff even a caller for example and it can also pass because we called textures it's basically an image an image at the direct UI image that cannot can be the result of the processing of of a region of a widget tree so for example you can post process uh the image of the entire of your entire app we found Shader and apply some kind of a sapier contrast or make everything black and white if you want to and yeah so this is basically a a summary of what's a Shader and the the supports on on the master channel is quite fun you can do lots of of course stuff here now so you're saying that on Master Channel you can do some stuff that you cannot do obviously unstable right yeah I mean the I don't know if you can use fragment tutors at all why is that exactly um yeah they have been working a lot on the on the support and there's this new um Graphics backend I don't know if that's the correct term uh called Impaler that is being developed under development for some time now and it's basically an alternative to his Kia and since it's maintained by the flare team I guess it's more uh tied to the needs of flutter and uh impellers I guess you can run by default uh it's a default uh graphics backends on Macos on iOS in the master Channel and I'm I'm not sure maybe talking Bonkers here but I'm not sure if it's usable on this table Channel or better I have to test it out didn't test that and uh yeah I can I'm gonna drop here in the chat the link for impeller and yeah yeah this the support of uh of Friedman cheaters is a little bit better now because of all of the all the developments uh in the engine around this kind of support you know so what what's what is better in the master Channel when it comes to shaders that that you don't get unstable or maybe the beta channels okay um can I share my screen I'm willing to share this game like him yeah please please go ahead this window here and sure so this is the documentation that's just just got added to their website so it's writing using fragment shaders so this is the title in the docs site uh flutter so what but basically we have on on Master you can write the Shader file somewhere in this case the person puts under shaders in the name of the file and loads as an asset so since you have the what we call the fragments program which is basically your Shader compiled you can create uh the actual Shader from that and use on a canvas this is the basic usage usage that we have on on master and there's this package let me see if I can find it it's called flare shaders from General Williams that provides some apis that makes even easier to use shaders so for example here if you go to the example app which is a flutter app and you have a Shader file so for example I have this Shader nice this is not darts you're going to explain a bit um we have the Shader file and we just load in a similar fashion as we load Assets in this case we have the special key in the public spec yml that's for shaders and then we have some apis to use them dynamically and try to apply them on on flutter apps on the actual user interface of the of the apiary building so I I got some examples here I guess I can go for this one it's the same from the tweet this is a flare app you're running on on Mac OS and it's shiny so as I move my mouse there is some kind of a light effect on the letters that uh uh that's applied to the the canvas of the image so what's happening here is let me go for f so this is just a memo flutter app I have a page that contains um just widgets you know everything you know about there's some examples so every part of the screen here is some kind of example there's a text editable there is a long test in this case this example here and also the image and also a Rive animation just like this one um Okay so what's the intention with this is to show how how all the values that we have on the on a flare runtime can affect a Shader which can affect a way you can customize the Shader so for example here with the Shader has a light source parameter it's because other social services and school fractions so this is kind of a uh the coordinates of where in the screen the light source is and that is customized by different parameters uh I have in my app and it's all just a flutter so I can Edge this test just a flatter URL as like any other but I'm post processing it with the Shader how that's done that's done by some um helpful widgets that we have on the flutter shaders package there's the animated sampler which is it receives a child receives a widget and uh builds runs this function with the image that's resulting of this widget it renders the widget takes the image of that and then you can process it using the Shader and that's it and you can pass the image as a parameter to the Shader and then the Shader will do the the actual job of uh painting every pixel of this part and yeah as long as it's not a platform view it will work with any any widget in in below so this is basically a photo view if an image and I'm just applying this as I move my cursor this is one parameter passenger Shader and the other is how much I'm scrolling and uh it's another parameter that I passed to the to the Shader so this is quite a rather complex example but shows how first how fast it is right now I I cannot share about I'm not sure about like memory footprint or impact on battery but um it's quite fast to apply this uh these changes and without the flexibility we have on flutter the sky's the limit so I even have uh for example this was the demonstration I I added on the on the flare Vikings example so it's updated to use the new stuff it applies a motion blur as the velocity of my scroll uh changes so if I'm scrolling fast it will apply I guess the my screen share is probably not the best if I'm looking here but once you have like a hundred uh frames per second 60 frames per second as you can see here even on the bug you you can see that this is it's quite quite cool so this is just another example and there are some uh some other smart stuff we can do with images and this is my like my playground where I just pass out uh some some shaders so I have some photos I took the player Vikings here like this one this one and this one and they just apply shaders on them so you can apply shades on images or even on uh use interfaces this in this case I'm applying a brightness Shader so this image so how this is happening I have I log this image from the assets passage to the so this widget here that applies the Shader to a custom pointer custom painter passing the image side the images sample and also its size to the Shader and there's this lighter value that's the value from this little material is lighter here in the bottom I pass out I pass also to the Shader and then the Shader file which is oops uh in something it's not dark it's a language that we call Jewella cell which is a specification of a language for changing so it's like opengl shading language and that's quite like it's quite familiar to see to see and it's a c like language and uh but it is it's just a function that runs as I said to every pixel and have some parameters uh the only parameter that we have uh on this case for flutter for sure just supported by flutter is the coordinates of the pixel that we are we are painting and everything else we can pass as we call uniforms uniforms are parameters that we pass uh to the Shader in this case we are passing here and uh on flutter they can be two types images in this case an image is simpler and uh floats float values basically translate should double in diet uh in this case here there's the first uniform we're passing so the order of the uniforms are quite important in this case it's a vector two so it's basically a vector of two Dimensions so it receives two values it just passes in sequence there the X and the Y of the vector and after that we have just a float so it's just one value here that we pass here and after that you you have to pass the image that's basically the texture that in this case would be of type sampler 2D and uh you can have other types here for example if I pass uh here a vector four for example I have to pass I I have to pass this this this and this for uh for the Shader and also I have to mounting these numbers in order the order of the uniforms are very important so yeah you can pass basically anything so here we are passing this parameter here and the size the size is basically the size of the canvas or the image sorry which is I guess the same and uh the actual value of the slider that here is called your delt I'm calling I'm starting with you this is something I'd like to do is to name uniforms starting with you it's your name uniforms that are textured with tea and the output of this Shader is the color of the pixel color is a vector 4 so it's four uh numbers r g b and a so the channels of the color and it's called frag color here it's indicated by Alt because this will go out of the of the Shader and we just specified this in our main function what we're doing here we get the coordinate the raw coordinate the number coordinate of the of the pizzeria painting and we get that in a relative number of uh of the actual size of the canvas so if you have a canvas of a 100 by 100 and I am the pixel 50 50. this will be in the middle of the screen so the value of this that we call the UV is 0.5.5 so Vector 2 in the middle of the screen this is like a relative number of the of the the coordinates that we are painting on and from that we can call this a special function here that exists on Java cell that uh the first parameter is the image that we're passing down from the from flutter and the other is the UV that we just created here and from that you can I can grab the color of this specific pixel in the image and with the color we can do anything and then set that as the output so this is a very basic Shader that we're just adding some brightness so this brightness function is very simple just get a number between zero and one I I am adding one here for um to make the vendors a little bit more visually appealing and I multiply RGB with that value so I get the amount of r that we have and we multiply by the amount of brightness we have and this makes color the color my bright bright or not or I can just uh let's just uh kids around so I'm gonna make RGB here be like of vector 3 1.0 I know just 1.0 the typical Pilots gave me a break thanks it's just making it completely white because it's painting every pixel as white or can try around and make um the red Channel always zero so we're just removing red from the from the collar at all so we can toy around with the colors a lot and it's quite quite fast um yeah that's like a summary of how a fragment what's a fragment Shader is and uh my intention now is to show like how the the daily basis of the daily work with flutter can be impacted by this kind of uh of uh technique uh we have uh one thing in the in the framework that I don't know if I have here is the over scroll Behavior do you know the office create office scroll behavior on uh much on flutter 12 what it is um wow I think I think I had somebody in an episode talk about this one recently um it's changed with Android 12. yeah yeah there's used to be very well but now I don't know sorry there's a stretch right there's it's a stretch it's a stretch so uh let me just uh Google here because I don't have the tab open material 12 stretch I guess mature 12 overs row oof first link here it's flutter but I guess I have an animation over here now if you can see you as the user over scroll it stretches but it's very important to notice that the edge of the screen it doesn't stretch much but gradually as you're approaching the other edge of the screen they stretch is more visible so if you use something like a scale transforming the sk1 flutter you will stretch the entire UI that's what's uh I guess it's implemented on on the master on the stable channel for over scroll mature 12. yes it's uh somewhere over here and this is a feature tracking show choose should be solve it with fragment shaders in this case so I hope I I thought like some minutes before this talk I thought wow what we can write live uh as a Shader I guess this would be could be like a very simple type of um of Shader that we can make what do you think yeah I think I think you you you should be able to um I would like to see how you how you do this all right I'm guessing you already did the work okay so oh you just gotta Live code everything from the beginning uh I did no not everything from the beginning I cheated a little bit so I have this playground that's just editing an image I have another playground that's a scrollable so it's just this scrollville okay but this uh it's uh not uh very uh simply scroll field it's a scroll field that I have my own over scroll Behavior so in this case let me just show the source code here we have this list view Builder that's us shows an Oslo photo and this title in the beginning and I have 10 000 items I don't know I can change that I have a huge cash extent because I don't want to scroll and load the images dynamically it's not visually appealing for this demonstration and I have wrapping this scroll view this list scroll field first a scroll configuration which is from flutter something that we can customize the working office review so in this case I'm forcing that touch wheel drag the scroll so I can like with my mouse I can scroll like by dragging so I can emulate some um mobile behavior and then you can drag with the touchscreen also touch mouse and trackpad so trackpad too and I guess that's it I'm gonna just remove the default over scroll um Behavior on this and I'm wrapping with this whoo special widget here this is the secret sauce this is special uh widget which is the apply Shader theme it wraps wraps the children with the two things that I just showed one uh the thing I just showed is that which which is the Shader Builder and also this special other widgets from uh flutter widget flutter shaders that is an animated sampler that creates the image of the child and here I'm just disabling this this whole Shader Behavior if I don't have over scroll and yeah just passing the image to the Shader also the size of it and also the over scroll mounted over scroll Mouse calculated by this special edges from the framework it's called multiplication listener that will listen to notification that is emitted from the list view this case scroll notification if it is a overscram notification I just calculates the Delta that I'm over scrolling if it's a scroll range notification so I just stop it the over scroll it will make the Delta go back to zero all right so in this case I'm just I'm using the brightness Shader here and I'm passing the over scroll amount which is the Delta based in the whole dimension of the of the screen so this is equal to the height of this uh of this list View and I'm the the over Square amount is just this ratio and then I will pass to the Shader so I'm just gonna go a little bit of a movie scroll you'll see if I as I over scroll it goes brighter I'm gonna make this a little bit a little bit more dramatic thanks GitHub Copilot see I'm over scrolling now it's making it bright I stop over scrolling it doesn't grow bright all right so we have a Shader working here but I want to stretch and I want to make it bright all right let's uh I'm gonna go back to that playground that's uh write a new Shader here so I just have this thing that I keep here it's just a boilerplate of all shaders are right what what's the details here this specifies which version of jlsl I'm working for 60 is the latest one so I make sure the latest uh uh resources are available here I can use you you use the old things for example the 100 but lots of uh data types are not available in this version so just making sure we are using the last one uh this I'm making the uh the uh specifying the Precision of floats so the other like a huge Precision here I don't need any diffused Precision here make it a little bit faster just setting as medium this is the only thing we can import right now on uh on Shader so just gives us this function that gives us the coordinates that we are shading right now independently if you're using skia or Impala and just calculating UV running the fragment function that we return the color and that's it so I have a basic uh texture as in as uniform the other uniform is the size that we're passing here so I'm just going to change our uh playground here to boilerplate I'm not going to create another one I'm just gonna check out whatever we do now okay just passing Value Place boom there's a problem because we are passing one too many uniforms so yeah this boilerplate Shader is doing exactly nothing which is but everything whatever we need right now all right let's stretch how do we stretch it's basically it comes down to getting a different coordinate that we are shading right now in the image so if I'm the middle I wanna get that not the middle coordinates of the image I want the coordinate of the of the part I want to display so if I'm stretching and I'm painting for example this which is in the middle I'll be actually painting this part of the image I don't know so this comes down to change UV so let's go for a vector 2 u v two oh nice but not this let's go for 0.5 for example so this gets like the half of the coordinates so for example from the end I'll get the middle if I'm the the ten percent of the the height of the image I will get uh we give an inch of a one percent so it's going to stretch a little bit go for this oh it's not working oh yeah I'm not texturing the yovicho whoa I guess it's too much let's go for nine nine is imprecipitable okay as I can vary this will be stretching a little bit more I don't want to stretch both um uh both coordinates just the vertical one so let's go for a vector two oh thanks Copilot u v y so we're just going to stretch vertically nice this is uh it's a value that's like hard-coded here how about you get the value from the slider so we can have another uniform float a few amounts it's a very common name that I use like muscle shaders and we have it oops oh yeah we are not passing this let's uncomment this boom I guess it's working now as I slide this we are stretching the image stop changing that value we're multiplying but this is a stretching like the whole thing as I go in the top I don't Strat much in the bottom is such a lot this is the effect we are going for so I guess this value that we multiply UI varies as uvy increases and also it's like the inverted effect like zero is applying a lot and one is a playing like nothing so we can just invert this by going for a float uh real I'm out I don't know or inverted amount inverted amounts would be better but it's too late now it's like 1.0 minus this let's just go back oh yeah not using real amounts come on man good now we're going we are applying this to the value of this slider okay and um okay let's vary this value with uvy so we can go for using pow okay let's this is a quadratic function so it's like we'll increasing the different manner but the I don't want a quadratic I wanna vary a base on uvy I guess I guess we are a little bit better right we are not stretching a lot to the top of the image and we're applying the value the effects might dramatic and the bottom of the image we can uh go for white times uvi I don't know I'm just guessing right now oh 2.0 yeah thanks for pilot make it a little bit programmatic boom or 0.5 so we we just toy with math and stuff like that to apply the value and the difference right now between the top of the image and the image itself it's a way bigger let's go for like this is like more subtle but as we reach 1.0 boom so we just start we're just starting with the the function the mathematical function here and I guess I guess that's that's a good Shader we have here I'm going to just change the let's apply to the scrollable thing now yeah yeah breakline scrollable let's change the main for the Shader playground scrollable change to our Shader which I'm just using the butter plate one I'm just gonna duplicate afterwards let's go we are we are applying the overscrew the material 12 ish over scroll but as I stop over scrolling it suddenly goes back so we can use the magic of flutter to adjust that I'm over scrolling I stop boom it goes back because I suddenly send set it to 0.0 it can use um a three animation Builder here perhaps to animation Builder this receives oh it's a value widget Builder that goes for context I'm going to call this Delta game and then this is just a child I'm not passing and then period to me let's go go Pilots thank you go pilot oh yeah I have to pass the duration too many seconds I guess it's good oh I don't wanna I don't wanna twing this while it is uh uh over stretching so if Delta Delta is bigger than 0.0 okay thanks copilot so this is basically what I created the duration that varies if I'm going back if I'm setting to zero suddenly it animates during 100 seconds back to zero back to zero and uh if I'm just uh in this situation where I'm over scrolling this doesn't have an effect so I'm just passing Delta here that will be used to calculate the over Square amount that will be passage to shade to the Shader I'm just remove this right now let's see it's quite fast I guess oops that's the logic is um inverted here let's go for 300 milliseconds and then we have the animation when I'm going back so we have all the flexibility of flutter with all the flexibility of shaders to create amazing stuff you know so this guy's the limit now and people can can use all the values that we already have on flutter as parameters to shaders should just go wild so I guess this is for the demonstration that I wanted for today you know that's that's pretty cool yeah um I I think your examples of what's on your Twitter are really cool like I remember like seeing the was it like a sun or something I thought that was really cool it is it just me or am I remember like like when you have like the this is well I don't know what is this right now let's see it wasn't this this is the Tweeter one no I wasn't I don't think this is the 21. I for sure something like this was there but it was like somebody running right it looked like a video game the way the Shader was oh the T-Rex it's on flame that was on flame I don't have this example running yeah but that that was yeah so yeah we have we have the flame engine yeah what happened there let me let me see if I can uh find the tweets because in the thread of the tweet I kind of explain how this is applied so what happens is I flame is just a widget it's just a game that runs on a widget and everything is canvas based so what happens is I duplicate this widget and in One widget I run uh what will be used as parameter to the to the Shader the other widgets I just run the whole game and then I use a stack to put everything on top of each other and that gives that effect so let me just uh find where's the oh yeah here I found it let me just put on the screen so this is the the T-Rex the 2x is like an example on the flame engine repository so it's a right implementer just added this visual effect so what happens is we have the the moon it's kind of a moon and I have some elements that causes uh the causes the shadow when they pass on top of that Moon so it basically uses the very same widget that we use here it's the very same thing the very same Shader I'm sorry uh but with some uh some flutter techniques the differences on the flutter side it's not even glsl anymore so this is the the two versions of the game that we're running that on the top is where we I don't apply Shader and the bottom is where I do apply the blue part is not doesn't go through the Shader it just I added here to illustrate that this is transparent so just empty pixels the blow parts and the dark parts and white Parts go through the Shader and this Shader uses luminance to apply the light so only the white part will have the luminance and everything else is just the Silhouettes of everything else is just two calls the Shadow and when I apply the Shader and instead of running this version of the game I run uh the Shader so I have we have this kind of effect that just the moon and uh the Shadows on top of it and then I use after this I just use a stack I put the the version with Shader on the top and the version without the Shader on the bottom and just we just compose this visual uh beauty that is this part and uh if you if you're looking if you look closely this part by the the cactuses on the front of the of the Moon it it appears like darker but it's just like visual uh illusion obstacle illusion because it has the same color but when you have a darker background it looks brighter so yeah yeah this is super attractive this is the technique so this this is the kind of stuff that I I I I want to to people know that shaders is that it's not just a gimmick you cannot just go and uh and uh do this kind of stuff you can use in the real flutter development every day just the thing that made me fall in love with flutter I don't know if that's her case is that you'll control every peaks of the screen and this Factor now it's even more impactful with fragment shaders yeah I I think this is this is this is pretty cool um but yeah I think the the difficulty of the shaders is that you have to really get into it's a totally different syntax right it's similar to C style I think it's called SL I think is the name of the language so yeah so that's basically the open Java sounds opengl Shader shading language shading Language by the way it's uh once you get a a great spawner what's a Shader this concept of what happens there what to shade their nose and what doesn't know which the answer is it knows only the parameters it doesn't know the results of other parts of the of the screen in that Shader so you can combine the results of two pixels in one for example unless you you do much part Shader which I can explain later um and uh yeah the the the thing I I use it to learn shaders is this online website and it's like the reference for everything is even on the documentation here on flutter is this online book that's called The Book of shaders it's just a 10 to 12 minutes you'll get the basic uh understanding of uh what's the Shader and even even has this uh editor where we can just play around so it's like this is just like the Dutch pad of shaders so you just can play around with a Shader here uh to create visual stuff but I don't know without having to to go out all of this has of compiling and everything and also examples there's lots of examples there so you can just Google stuff javasl and see if you know gaussian blur blur glsl there is blur there there are some people asking it's a very very widespread uh technique and most people will probably not need to write write drama cells like every day of their lives but uh it's a it's a fun uh technique to to know and if you like to just to play around I can spend a whole day just customizing parameters and stuff like that sure just see the output you know yes so if you want to learn shaders the book of shaders and also this documentation writing and using fragment shaders this is on the flare ducts that's it great yeah this is this is all really cool stuff um I kind of want to play with shaders when I have some time it's too busy these days but yeah you can do some really cool stuff and I always hear people talking about shaders and and they're useful and people complaining that they want more access to shaders within flutter and I'm like I don't know most the apps I make we don't really need to do this kind of stuff uh at least for apps that I need to make um but I mean there probably is a couple of times where I did want to do something and I didn't couldn't quite figure it out and maybe sharers could have solved the problem um I think it'd be worth it to kind of just go through this website like you have over here get an idea about what a Shader is what you can do with it yes um there's some ideas that I that I have that can be like useful with shaders there was this one that's uh I saw on Twitter some days ago it is kind of a progressive blur that you can apply to your images I guess this is it oops itself kind of progressive blur that you can add so you can animate this kind of stuff that's nice you know and apply to any image you don't need to tell your designer to process them in Photoshop then ship to you then you can put on your app you can like download an image from the uh from the internet and just display it and apply the effect on top of it so give this kind of flexibility you know and the this the the support that we have of shaders on flutter particularly speaking this capacity of sampling the actual UI of the screen it shaders it's like a very very powerful not even no um web technology have that flexibility for example unless you're using 3js but if you want to sample the dawn then pass to 3js it's not a fast nor cheap computationally speaking chip uh operation and if you compare that with letter boom it's uh it's uh just it's something you know so the possibilities now that we have a flutter it's like we see a lot of people publishing the most demos of Swift UI or compose or anything like that on Twitter and then someone from the flutter Community goes and replicates that with letter I guess the possibility now is for we create demonstrations and people of other Technologies try to replicate it because uh we can we can we can have flutter now on the event guide of some uh some types obvious interfaces yeah okay yeah I think I just need to go through this somewhere to really wrap my mind around it but I I can imagine some things like what's already coming to mind is like the I think it's like Arrow or whatever like the Windows Vista kind of style where it's like you have like this kind of iced you know you can see it but it's a little bit blurry kind of thickness I don't know if you remember what I'm talking about with like the Vista Arrow like that thing I think could be done with a Shader yes yes other types of blurs motion blurs on blur ghost and blur yeah I didn't think there's so many different types of blurs in this world but I guess there's a whole book of blurs we should probably make there's this one I guess I I just copied this from somewhere on the web on the web it's called the barrel blur uh let me try let me see if I can apply this to Barrel to our uh uh caps lock was on Power Player and let me see if I can apply this oh we have it oh it's not it's not dependent song it's still pretty much oh yeah this yeah it's almost like an ND filter or something in the image it's really nice yeah and this is a possibility to uh the thing that I use it to learn flutter was uh an app that I wanted to create that uh uh it's just a image editing app it's called uh let's picture it's published on the Play Store I guess and uh it uses the CPU to apply contrast uh brightness saturation to images because I just want I didn't want to pay for something like Lightroom to create images that I take but the limitations that is that I use even using the ffi which made a little bit faster I I was using the CPU to edit the images now if Shader is using the GPU the possibility just immense you know okay yeah so this is pretty cool yeah I really enjoyed you kind of walking through shaders somewhere with me and now I understand a little bit more about what they are and what you can do with them and it seems pretty I mean other than obviously learning the language and learning all the math and stuff behind it I think adding shaders to your program seems to be really straightforward like you just have to create the fragment and stuff it I feel less scared of it but still I don't really know too much about the shading language the glsl that's something they have to pick up and but otherwise once you learn that I think the languages are always yeah yes I I mean I I had a great experience just out of our context uh before 15 days before the Florida Vikings I didn't even had idea an idea what glsa was and uh the refiner Vikings I just did a demonstration with it so it's quite easy yeah it's quite uh uh straightforward to learn this language you you just need to understand some principles like the types and where it runs and take care of some examples because some examples may be from our older version of it so they may if you copy and paste on flutter they may break so just need to to understand the limitations the flutter itself has on top of java cell and all of them just a very very straightforward okay yeah I appreciate it like I said taking the time to kind of walk us through this and and uh there's a nice handy looks like you keep pulling the separate documentation when you go to flutter.dev you look at the docs you go to the user interface Advanced UI shaders they have basically a super good introduction about what a Shader is how to get into it and like you said the link to that shaders website so yeah it should be pretty straightforward to pick up and learn cool absolutely is there anything else you want to say about shares before you start the wrap up because I had quite a long episode but definitely I appreciate all the knowledge you've been sharing uh just uh what Larry I'll know that this will be uh the the playground I'm gonna make it up in stores it's close it search for some some days now but uh the the thing that I tweeted the light Shader it's open source it's under my GitHub and now see Glory stuff with Shader and uh also the the motion blur this I'm gonna just publish you as a package pretty soon just finishing some tests this will be called motion describe blur in this underscore scroll and uh yeah just to to serve us a guide if you wanna starts with the Shader stuff I also check before trying these things out check out the uh the master Channel I said the master oh the master channel of of the flutter Channel Master yeah some channel uh Master channel of shaders on YouTube that I had to think for a moment uh what you're talking about no the flutter Master chat I'm sorry the problem is that there's so many acronyms and things in my head from different clients and different projects I have to remember what's going on for what and you know it it takes a moment also talking to somebody in the U.S you're talking to me from UK it's like wait wait you're talking about leaders or you're talking about inches give me what what takes me a minute to start to put everything together absolutely yeah awesome yeah this is this is cool I I like it I'm I need to sit down and do this and I've been wanting to get into video games and stuff and I think shaders no matter what their kind of universal to a certain extent so it's it's yeah yeah yeah cool uh again uh thanks for your your time I really appreciate it um now you said we want to get into contact with you we can probably hit you up on Twitter right yes um yes I will I will start I will uh publish Marsha their stuff soon that I'm doing on some uh personal projects but uh the gimmicks and demonstrations and everything can be found at uh at my Twitter there's also uh it's important to follow Wolverine my co-worker that's uh creator of Umbra he has been working in medicine with shaders and flutter for way longer than me so yeah vote for ring I don't I don't remember exactly his uh Twitter handling vote for right yeah vote for me and uh oh yeah yeah that's it yeah I see him posting a lot about haters yeah he did something with uh uh just hindering a Shader a very famous Shader on Shader toy let's go for sugar toy uh and it's like a fantastic one that just hinders the entire freaking ocean so if I go for browse and popular it's probably the first or the second most popular Shader on Shader toy as this one the shaderscape Seascape this thing is like huge it's very demanding on the on the Shader part actually my machine is really you know like frames a seconds per frame right now on Shader type but on flutter it's like 60. it's ridiculous wow and this runs on flutter this Shader now with the inquisite capabilities some months ago not possible wow that's really cool I wish people if you don't listen to the podcast you're not actually looking at it you're missing out on some really cool looking cheater stuff yeah look I either I don't even know how to start looking at the source code but people can go wide and it's not that huge for the effect that we are seeing right yeah definitely is just 200 likes yeah that's not that much but yeah actually their toy is also a useful uh uh website to learn shaders yeah they have cool demonstrations here too well thanks for making my weekend busy with looking at shaders so I was hoping to get things done but I don't think it's gonna happen now you're welcome uh cool um I think yeah to make sure people can get a hold of you your your do you mind to say out your your Twitter handle uh here not a number or if you go for him.gg it's my website and there we can have my Twitter called linkagin and whatever not a number uh but yeah you might need to spell that because the pronunciation is if you're not Portuguese the currency of it off r e not a number yeah by like the entire fee re not the number Arena number exactly yes okay and with that um I don't think we I don't know it would be great that we can wrap this up um because we've had a long episode and uh I think uh you you've definitely given us a lot of things we got to kind of soak in so I appreciate all the uh the time and all the knowledge you shared and I'm happy that you kind of made the process easy for us who don't know anything about shaders to understand how to get into shaders and how we can use them in our flutter app and a good useful point is to kind of replicate that material three design right with Android that's really cool yes and the fun thing is running on Mac OS so this is the build up letter just running that effect that's supposed to be on onedride only where we just run home Echo has because we are rug people but yeah it's my pleasure too to share and so to talk about cool stuff I if I if I I don't bothers myself I can just lose the whole day talking about this kind of stuff because it's quite fun yeah it is fun just now trying to find a good practical use for it yeah I mean there is some but some things there there's not um like the ocean is really cool but I don't know if I can sell it to a client right now I mean but it is cool looking you can at least sell them photo technology and say look at this what you can do with it so absolutely cool I I say so react native try to do that maybe you can or cannot I don't know maybe not I don't know but uh don't even want to know okay cool and with that uh again thanks for for coming on and uh hopefully we can have you again in the future thank you and uh yeah call me I'll be here [Music]

Channel: Flying High with Flutter

Views: 4,095

Keywords: flutter, flyinghighwithflutter, dart, dartdev, flutterdev, allenwyma, demo, apps, programming, appdev, mobileapps, development, cross-platform, google, flutterpackage, fhwf, flutterapp, renanaraújo, fluttershaders

Id: uBTVV1bo3dg

Length: 80min 19sec (4819 seconds)

Published: Wed Jan 04 2023