Exploring Shaders for the Web with Rik

(upbeat music)- Great.Hi Rik.- Hello, hello.- Welcome, so today we're gonna do a interviewwith you about Shaders Course,which is super exciting.

So that's just come outand yeah, can you start by telling uswhat shader isbecause some people might not know.- Yes, shader is a way to do thingsusing the graphics card.And basically a kind of like quick version of thisis how to make almost interactive texturesand colors and gradients that you can changeand really do new things with.

It's not a common thing on the web just yet.It's kind of like a fairly cutting edge thingbut previously it was using things like game development.So a lot of the same conceptsof kind of like rendering texturesand doing lots of weird things with kindof colors is now being available to the web.So what we're doing is basically applying a lotof this kind of game developmentand kind of style of really kind of getting into depth withhow we make textures from scratchand really kind of going into thatand applying it to a web setting.- Interesting, I've seen the project,how did you go about creating the course?What did you want to show?I noticed 2D, 3D stuff.So tell us a bit about the projects.- So initially a lot of the shader stuffthat you see on the web,it's very obviously cutting edgeand a lot of it was done in the 3D realm.So using web GL using three dot JSwhat we kind of realized isthat this was kind of leaking into 2D environments as well.So, quick example of that would be the Stripe homepage.The homepage has this kind of texture,the kind of as this gradient of movesand feels very subtlebut everyone who sees the Stripe homepage is like,wow look at this,look at this cool little texture going on.How do they even do this?A lot of people are like,is this a video?Is this something else?But what we kind of saw is this is kind of blendinginto a lot of top websites nowand a lot of kind of top agencies,a top product startups are starting to use this as well.So we were kind of likehow do we do this across lots of different types of styleand how do we kind of apply thingsso it goes beyond just kind of like a normalJavaScript style website.How do we kind of make it that kindof cutting edge so that people can do lots of strange thingsor are they kind of almost so quite arty thingswith something that wasn't potentially possiblea few years ago?So a quick example would be a slideshow.If someone's doing a quick slideshow for instance,usually what they would do is somethinglike click next,and then the image appears,which is fine.Having a new image of phases is goodbut if you kind of add that next levelhow do I do these transitions between them?I might not just wanna do a fade.I might wanna do something like a patternthat kind of waves in the next textureor do something completely different with that.It adds that kind of nice extra element to thiswhich goes beyond just being a slideshow.It feels a lot more interactive.So that's something that we really kind of focuson is like taking the same things as what you doday-to-day on the web and thinking likehow would you add that next level to it?How would you kind of go beyond the next step?A quick example would beif we have one of the early projects,it could have just been a video backgroundor it could have been just a static image.Instead, we were kind of thinkinghow do you make this interactive?How do we make something that lookslike a texture interactive,moving the mouse around,being reactive to thingsmove things or time, for instance, as wellbut also running really, really quickly as well.So that's kind of where really where it came from is likewhat do people do on the web right now?And what would take it to that next level?- Amazing and yeahthe projects were amazing.They look incredible.Which one did you have the most fun makingwhich are you particularly excited about?- They're kind of all like my babies (laughing)so I love them all the samebut I think there's a few in thatI really liked personally,there's actually one or two that I was kind of like,I might keep this in my own little projectson the side as well.So the third project that we do calledartist McLeod is using this kind of like texture,which uses noise and randomnessand bit of grain in there as well.And it has this really kind ofdynamic background to it.So it's a simple kind of London page,it's a contact page, here's my links.Usually that'd be fairly kind of like basic kind of pagebut what we kind of felt was like,if you add this kind of moving texture to this randomnessif you refresh the page as a different lookand feel that is something that feels very, very interactiveand it goes beyond just being a kind of likevery basic page.And also it's a relatively quick thing to make as well.So having this kind of dynamic movement with reactionsand mouse and just really kind of like takes abeyond what a just simple landing page would be.So I think that was kind of my favorite onebut also some of the later 3D ones as well.We have a project called jellyfishwhich is basically using a lot of lighting.So we're kind of thinking,whereas the license on this,how do we make it metallic?How do we make it have shadows on there as well?So that was something that we really wanted to show ishow do you apply this kind of game developmentlighten and metallic-ness to a websitecause that's really not done that often.So this is really kind of where we wanted topush the boundaries a little bit more.- Cool, yeah.I love that one as well.That was the latest one or put in later.- Yeah we added it very, very last minutebecause I was like,I feel like there was like a project that was too bigand I want to really kind of show offgo in depthon one of these kind of lighting projects to showthe range of things that people could do with it.And also the control of it as well.That's something that I think this course really does well.It's like, it gives you very fine grain controlover everything that you do.So if you wanna kind of like make the lightin slightly different, like there isn'tlike someone else's coat that you're using, it's your codethat you're really interactive withand you can change.It's your stuff.You wanna change the lightign,it's your lighting.- Cool and there's 10 projects.That's pretty yeah, a lot for a course.

One thing that cropped up,I think, do you need a lot of maths for this?'Cause it looks quite technical in places.Is it, do you need-- So it is a technical course.There is a little bit of JavaScriptand HTML CSS that goeswith this just because it's interactiveand when we moved from mouse aroundthere's things that happenfrom a shader point of view,it's a bit of a weird concept,so it's not mathematicalbut you have to think about every single pixel individually.And what I mean by that is when we usually do a webpagefor instance, we kind of take it as a whole.So I have a webpage and there's a button,if I click the button, something else happens.With shaders, it's per pixeland it's really kind of thinkingabout what is happening at that time,and we basically write in a program for a pixelwhich is kind of a weird concept'cause usually we do from a webpageor a backend or something else.This is kind of thinking like,how do you do this one thing?And it's not really connectedto any of the pixels around it,which means that you're kind of limited in what you can doin terms of we don't know what the next pixel is gonna say,we don't know what the next frameor the last frame is gonna be.So we kind of have to thinkabout things in a very logical way.So it's not really mathematical.It's more kind of thinking,okay, I have this thing in space in kind of like a grid.What is this thing gonna be at this time?What color is this pixel gonna be at this time?So this is something that's kind of a little bit differentand it's a bit of a weird concept to getyour head around when you first learn this concept.And if you can come at it from a kindof completely different,if you've seen this code for the first time,it looks quite strange to be honestbut we build it up piece by piece.So it started with this kind of likehow do we make these gradient kind of effects?How do we go into noise and grain?How do we kind of do these kinds of transitions as well?How you have textures in there.So as the images,so it's not really mathematical,but there's some technical parts to it too.- Yeah, I saw a student actually said on Slackthat they loved the approach of this coursebecause it does really feel like you're buildingand learning a chunk.And yeah, that was...- We try to make it almost like a story arc.So basically kind of like a TV seriesin a weird way where you have these callbacksto previous projectsand you can see things in different contexts, I suppose.So we wanna kind of show peoplehow they do it in their own projectsrather than this kind of like,we've done this often, the next new thing.So you see the same kind of patterns appear again and again,and one of the things that we've seen alreadyis people using this in their own projectsand they've done it really, really quickly.So some of the first people who've taken this courseare building this stuff in the real life world projects,so they understand how it works.They're doing it on their own things as well.- Is it mainly aimed at kind of designersdo you think, or developers,is it more yeah...- For me it feels like digital artand I'm kind of saying that at the moment ofcrypto art and NFTs.For me it was kind of like,how do we make this stuff very kind of fluid, I supposehow do we kind of go into that?So it's a mixbetween people who wanna kind of take their designsto the next level.Some of this stuff is likeyou can't do this with Figma.You can't really do this with other kind of design programs.It's like you have to get into the codeand actually do it.And that's kind of one of the fun things about it is,you're getting your hands dirtyand you're making lots of accidents in a weird kind of way.So it's very experimental really.That's kind of how we approach it is likehow do we go about this thingfrom a very unique art, obviously art standpoint.So we start with this kind of concept of,let's take one of the projectslike the green kind of background project that we havethat was kind of built up from just lotsof trial and error and lots of kind of goingin different variationsand trying out different things.We kind of had a rough idea of what we wanted it to bein the end,but it it can go in different ways.And I think that's one of the nice thingsabout doing this stuff in the code is likeyou do lots of accidentsand you make something brand newand it's like completely different.And it's very, very,you could say is betterthan what you actually had in your head.And I think that's kind of like one of the fun thingsabout this course is there's so muchlike you change two or three thingsand it's something completely different.- Interesting, it sounds amazing.I can't wait to experiment.

And did you come up with many kind of blockers?Did you break things,I guess some of those breaksand maybe a happy accidentand you come up with some different art,but was there any kind of tricky bitsthat you came up against?- I think the main thing for me is like what I said earlierit's like getting your head around this ideaof like per pixel programs,which for me as someone who's worked in web pagesand backend code for a long time,I have this holistic viewof everything whereI know exactly what this whole thing is gonna do.Whereas this is very muchlike everything is running concurrentlyand it's very kind of like a strange concepts.So for me it was kind of like get my headaround that kind of concept.So to begin with was like, okayI don't have any concepts of like,what was next to me.That is quite strange for someone who'sdone JavaScript for a long time, for instance.So it was kind ofhow do I make a texture using basically a million differentmini programs all run at the same time.So that was something thatreally kinda messed with my head to begin withcause was like such a new concept.Why are we doing it this way?And I think one of the other things as well isthe language that we use in GLSLis very kind of limited in scope on purposebecause it runs so often,it runs per pixel.So if you have a thousand by a thousandthat's a million times that is runningand you have this kind of like limited palettebut using that kind of limited paletteyou can actually make a lot ofvery creative things in there.- Amazing web GPU.This is kind of said to be the future.

How does that compare?And what's your view onthose working side by sideand which is better?- I think it's very interestingbecause there's a lot of like hard technology nowwhich is coming out from a web standpoint.So take some like fake money.That's all built on top of web technologies under the hoodbut when you install itand use it it doesn't look like thatand it looks native almost.So I think that's kind of one of the things that,all these kinds of new technologies give usis the ability to do things that we usually would bekind of reserved forprograms on a Macor windows that now we can do within,in the browser itself.So it just does give us a power to actually do thingsmore accessible from a point of view of technology.You're not dependent on Mac or windowsor iOS or whatever it is,you're now dependent oncan I access it in the browser?Can I go to a URLand that's a lot more accessiblethan just, I need to be on a windows PC.So I think there's this movement in technology that is kindof like JavaScript for instance,is becoming that kind of native language of the web.But I think that's gonna leak into the web is nowbecoming more of a platform for a lot of tools.The fact that Figma could do things very, very quickly isbecause it's a web technology,compare it to something like sketch,which is just my onlyfrom windows you sketch.And I think that's a big deal.Figma is very, very accessible because you can go to a link.I can send you a link in your,in that tool set very, very quickly.So I think it's a great thing.I think the more that we have these kind ofinbuilt technologies in the web browserat the more accessible that this technology is for everyone.- And it's code life that you use for this?- Code life is a program that we're using at the momentto kind of do some less sketches almostso that we can kind of like really controlwhat we can have as an input.So code life is basically an installable program isCode by Hassler a really great company.And what they kind of have is it's kindof sandbox, I suppose,where you can play aroundand make your own shaders from scratch.And what they do is mainly kind of do thingsfor like audio environments.So if you're a geekand there's lots of visual effects that are in codethat can plug into the PA system.And it has like very interactive things for uswe're not really caring about music too muchbecause we do things with the web.So yeah, we use in that kind of as a basisand then transferring it into web technologies.- Cool, can you integrate music with that type of thing?- Yeah, so it's a little bit more tricky justbecause audio on the web is not as commonas just kind of like inputting things in the music playerso you can do it pretty easily.It's just, you get your audio tag,put it in in your Java scripts,read the things that you wanna readand then you do things with the shaders on top of that.- Cool.Maybe that could be a piece of content one day. (laughs)- (laughs) That tutorial.(both laughing)- Yeah, exactly.

What's the limitations of this technology?We'll see, we've got this amazingthat all these shapers we can make it,it seems quite limitless at the momentbut are there got to be some limitations.- It is credentialing.And I think if you're on an older browser,there might be some thingsthat don't support certain technologies with that as well.But I think at the moment, yeahwe've looked into,the amount of people that can actually use this technologyand the good,I think it's a 95%of people can actually like see this stuffand feel like it runs really, really quickly as well.So I think that's something that we've been really focusingon this, how do we make sure this stuffruns really quickly in the browserbecause there's no point if it runs slowly,you can see something cool,but if it runs slow,then what's the point and yeahreally kind of making sure that it's accessible as wellto as many people that wanna see it.But I think as we go forwardsas more as more this technology gets added init just expands the tool set of what we can do.So yeah, I'm very excitedfor the next two yearsand seeing what comes out.- Okay, cool.And is there a favorite shader that you've seen on the webNot in this course,but you know just something that you loveapart from the Stripe, obviously.- I was gonna say the strive on page, but(laughing) there's a few,there was one that I saw the other day wherethey're using I can't remember the website,but I'll find outI'll send you the link that uses as kind of blur effects.So it has this kind of 3D environmentthat as you move your mouse around the pageit basically almost looks like water effects.So it kind of like drags things around the pageand moves images.There's a lot of things as wellwhere you can kind of like scroll down a pageand you get this kind of like 3D splitlike not 3D split, kinda RGB split.Those are pretty cool things as well.I think the most powerful onesare the most subtle ones as well.There's ones that you can get really,they'll knock you over the head with it.And it's like, look at this really interactive sitethat has tons of like flashy things on here.I think it's a really so ones that kind of do the best work.Cause you kind of have those little sprinkles rather thanthe whole sugar on top.Those are the kinds of sites that I likewhere it's like you're not trying to do too much with itbut you're taking it above what it should be.And that's the kind of like nice little area that I like.- And I think you've said before that shadersyou can achieve amazing thingswith quite little code.- Yeah.I think that's kind of,one of the nice things is becauselike I was saying earlierthere's all this stuff runs per pixel.So, the pixel doesn't really care about anything around it.So think as humans who are kind oflooking at this whole canvas or outputof what we actually haveyou can get very very interesting effects very quickly that,a pixel doesn't care about this stuffit's just running the thing that is told to run.And I think that's kind of,one of the nice things is almostyou can make these kinds ofreally beautiful effects really, really quickly.And just under like 20 lines of code,some of the tutorial videos that we've goton our YouTube channel,they're very, very short amounts of codeand they're very interactive.They're very kind of changeableand they're very quick to make.And I think that's kind of one of the powers of itis there's some, there's a lot of stuff you can doon top of this in a weird way,it's almost like a styling language,almost like CSS is kindyou have that power over what things look like.And that is a really kind of powerful conceptbecause you do something really, really subtle.And it again, can expiral into lots of brand new ways.And I think that's kind of, one of the interesting thingsabout this course is there's so many variationsin that there's so many kind of bitswhere you could branch off and do your own thingthat it becomes very experimentaland very kind of like on the studentsto kind of do their own thingand take their own path.And that's kind of like one of the really fun thingsabout this course.- Awesome, cool.Well, thank you so much.- No problem.- It's out now the shaders course.- Yeah!Show me.- Well yeah, hope to hope to see that. (Rik laughs)