Svelte + Three.js + GSAP, static html website #47

hey good morning everyone it's sunday my name is yuri and we're gonna live code today again something new today from bom dia to portugal too and to germany and to india hey hey guys how you doing so well first of all while everybody is joining for the stream i'd like to thank everybody who supported me on patreon because i've had a biggest support ever on my stream for this month probably and thank you all really appreciate it it's not about the money anyway but still about the attention that you pay to my efforts maybe so yeah let me know if everything is all right you can hear me well see me well and let's get started today it's gonna be cameroon oh oh you know you're from cameroon friends okay so today it's going to be a svelte stream it's been a long time since i wanted to try swelt swelter i think on english it's swelt and yeah hey hey welcome to my stream in ukraine as well all right so it's been a long time since i wanted to try swelter because svelte is looked like so promising everybody saying swelter looks promising but no nobody actually does like a lot of projects in it some people start to do the projects on swelt but it's not much yet so i decided i'd give it a try and i thought i would join swelt and 3js and i try to do some page transitions like i like i think once i did the this kind of stream in vue.js so i did vue.js and i did vgs page transitions and then there was some webgl which connected to the page transition and yeah i decided i'll try this one with svelte as well and see how it goes and there's recently been an update about swelter swelt swelt kit i i guess it's weld kit is being released pretty soon in the coming weeks and i thought i'd try this one as well so let's start with with some swelt template i guess and then i'll do the webgl part and then we merge them together or maybe i should try start with webgl what do you think guys webgl or swelt first in the end it's going to be both of them anyway but just the matter of where do we start so svelte for anybody who doesn't know that yet wealth is like vue.js react angular and then swelled jazz but it hasn't like um i think well the main principle of svelta is the developer experience so it's actually well if i if i understand this right it's actually kind of easier to get in you don't have to write a lot of code and then you get almost the same stuff as you get in react like the reactivity and okay let's start with webgl so guys ask me for webgl and then i'm gonna move to swelt and then i'm gonna marry them together all right so a couple of my supporters in my discord channel asked me about this effect like this image transition and i thought it's pretty simple one like this one but on the other hand it looks pretty cool and then there's this effect which also looks pretty cool then this uh come on where's the transition there should be some kind of transition here oh yeah here is it okay and all of those three effects actually will share the kind of the same principle so i decided i would explain this principle and then we would merge that one into the gem stack built with the swelt yeah all right so then let's do the creative part first so i'm going to do this i'm going to call this one like image transition and then i'm going to copy my 3gs team plate and let's start it with parcel [Music] uh let's open everything up well it looks ugly but it depends on the image as well i don't know that's that's up to the taste i think it's the style of the of the website you can do anything with this kind of effect well once you get the grasp of how it's done you can actually master all the pixel art i mean all the image transition art so let me move the windows first so we get some kind of window layout i actually like the idea of this effect maybe not the looks but i like the like the math behind it all right so first of all i have this app.js and then i need to this is the 3gs template this is a 3g part i don't actually need a 3d and well to be honest i wouldn't i wouldn't actually need the 3gs in the first place it's because this could be done with a native webgl this could be done with the with any kind of webgl framework especially ones that focused on the full screen image but because i'm i'm a fan of 3.js and kind of want to use it anyway to be open to the 3d part as well i'm going to connect the 3gs part here so first of all i need to make the full screen image for that i will i will switch to the orthographic camera in my team plate i'm going to remove the aspect ratio so the camera sees only one by one square and it outputs it so it doesn't matter the aspect ratio it's going to be always filling my whole screen this is the simple way to do the the full screen image in fijians and this is the first part well the second part let's just upload some image i think i've had them somewhere here some images and like about block like just some kind of images i'm gonna get them just two images i'm gonna get them the uniforms it's getting harder and harder to find new stuff for streams because i've had enough over 100 now so yeah about i still find this one kind of interesting because of its simplicity and how beautiful it is so we had two textures and then i could move to the fragment shader i'll declare two uniforms here and then i could just get the image let's get to see something and we see the image it's obviously distorted because i'm not accounting for the image size in any way to do that to do that there are a couple of ways to do that the like the simple one the simplest one and my favorite one is to just have well the same the same dimensions for you for every image we could have different of course so it's gonna be this but it's easier to make them all the same aspect ratio and then i'll go to the fjs and i have this like snippet of code here it just like measures if the height and the width like if the aspect ratio is more or less than the image aspect ratio i mean aspect ratio of the viewport and then just assigns two values i don't really need another two actually i just need like this a1 and a2 values so this is this is it and i just have to put it here i could have put it on on the image load but yeah we're not really making a production radio website at the moment so now i have this updated kind of ues i also have this snippet right here which says that i'm gonna scale my uv so i'm gonna move them to center like normalize the uvs so they're not between 0 and 1 but they are between like minus 0.5 and plus 0.5 and this means i could just multiply them with any value and that would be scaling and i'm scaling them with my aspect ratio parts and then moving them back into the zero zero one range i mean it's not really zero one range anymore but yeah centering them back away like centering them making them not normalized again what's the right way to save this anyway so we are making the new uvs for scaled image and then yeah it's just it just this is just it so i'm just using this uniform resolution and for anybody who asked me about how to do the aspect ratio part for the image well it's it's just this if you have the image aspect ratio you just measure that if that's more or less than the viewport and then you do this kind of simple formulas because you have to account for both aspect ratios all right so now we have the full image part and now the web gel part oh it's going to be complicated we need to have some progress probably have some progress here oh i have some progress and i think i'd like to set this progress on my material progress value this settings [Music] what set property for the value of undefined because i haven't declared the progress uniform probably by the way i just removed the types from the uniforms because we don't need them anymore i've been wanting to do that for a long time yeah so now we have the progress and i can kind of use that progress i have it declared here already so i could just maybe multiply this with progress and then you get this so because i have two textures i can do the i2 t2 and i can do the mix between them easy stuff and then the final and this is how you do this simple fading fade out transition with the images but then comes the like the real part like how we would do the actual transition but that this is actually like what fascinated me in this exact transition is that you actually use the distance between well color you use the distance between colors so if you just uh have some kind of uh dist is the distance between i1 and i2 both being rgbas actually and we're measuring but rgb is just the four-dimensional vector after all just four values so you could make a distance between those and you could even visualize that here and it's kind of interesting to see the like distance between images so when the colors are like black and white the distance is maximum and when they are kind of similar the distance is small so right now we are getting this uh weird thing which is kind of an arc on itself so it's merged between two images because it's just distance between them but then you could see both of them at the same at the same point so the main thing about all of those like every freaking single image transition made with glsl that you have to have something like this you have to have some map of values some function between two-dimensional uv and then the some float value between zero and one like this that we see right now because it's black and white it's zero and one and then once you have this value between zero and one for each of the pixels on your screen you can just make a transition so the like the darker the pixel is the faster it's going to go to the next image transition and well this is how you do this but then you have to use the progress somehow so how do you use this black and white map of values to do the image transition well how you do this well i think i think you have to make first the another value like not mod but for er like something between something from the progress and then i could use this dist and then progress so it's going to be either one or zero depending on the progress value and let's visualize this so if the dist is less than progress is going to be zero and otherwise it's like this is actually it right you could already see that all those weird kind of things are done exactly with this they might be using in a different image map they might be using some displacement map maybe noise values but it's that's that's what it is actually so now we have map between zero and one not really between zero and one at the moment and maybe that's because you know why that might be because uh the distance between two four dimensional vectors is actually not between zero and one because like in the cube the diagonal of the three-dimensional cube is actually a square root of three not square root of two and not one so maybe i should divide this by square root of four which is two finally i'm using math maybe i could use this like here maybe it should work yeah i think that's it we just didn't normalize properly the value there are some pixels some last black pixels and this just means that there are none pixels that have the maximum distance value like between zero and one because this is the only maximum you could get between zero point and one inside the four dimensional cube finally i'm using four dimensional cubes how's it called already i mean there's a name for a dimensional cube tesseract is it is a tesseract something like that all right so now we could you just use this value to do the image transition so the final image is going to be not this anymore but it's going to be uh so we have this pr value we could actually do this maybe like this i need to set the final well this is kind of it i think in the original shader they used a bit different method i'm wondering why maybe it just adds to some more beautiful more artistic kind of effect so let's try to replicate exactly what the formula they used and because i think it's pretty famous color distance shader which being used on like on different kind of projects on the web and yeah so this is basically where the transition happens and they actually use this let's break it down oh my god i'm so bad at breaking down so instead of the image one they actually use the mix between both of those images like the i1 and i2 and then the same value the pr what's going to be here i think it's just it just makes it more east doesn't even change anything wondering and then yeah i think it's going to be a1 now okay nothing's working anymore maybe i2 yeah i'm not sure if anything has changed to be honest does it really change anything you guys in the chat see some changes in that i gotta switch that one all right so in this dirty kind of look actually comes from the actual gradients in the jpeg and some artifacts in the jpeg so you can get this kind of dirty i don't know loft what do you call this crunch this kind of style and it's pretty awesome and you can actually use the separate image now right now we're using the difference between those two images but you could use any kind of image and not only image you could use any kind of i don't know any kind of math behind it so instead of using the distance here i could just use like these equals 0.5 what's going to happen then just a static value so it's going to just switch but then i could use the let's use the vuvs something called something with uvs so i could use something with the uvs and then like x and you get this so this is actually like the the concept of the of all the image transitions is like using some kind of float value which is the function of the i don't know if the uvs or of the time of anything and then you get every single kind of image transition just by you know using another math function and i could do something like uh let's do this something small multiplied by sine from the new uv multiplied by 10. and let's see what's going to happen and we get this but then if i add time here i'm gonna be moving now so i guess you get the point right you could you could do anything with this kind of approach so once you get it it's everything is possible so i think for the webgl part it's pretty simple yeah i'll be honest with you it's pretty simple considering what we've done recently but that's the point i wanted to make a simple image transition which i could use with some swelter website so i now want to build the swelter swelt gem stack solution select this static generated website just the htmls in the end i want to build it with swelt and i wanted to use the webgl image transition between all the pages i wanted to use the the texts like the slide transition for the text for the content of the website this is basically just like if you if you create the website and then you use the barber js or high wages so for me like this whole stream was not about the react js alternative or the ujs alternative it's not about that for me it's about um picking up the new jumpstack solution for myself new default one because well there are some good ones like like for actually it's it it's gatsby for for react it's also next.js right they both have the server-side rendering but the gatsby is more like jam stack and then um for vue.js it's next which also has like generating the static files and then i've tried already the react way i've tried the vue.js way and i wanted to see like how the swelter holds on to those in terms of i want to just build a static website with animated transitions that's what i want to do and this is like 90 percent of the websites on the awards website actually but still let's try that so if you if you think about swelt if you're not familiar with that so there's this swelter dev which is like the the actual component framework cybernetically enhanced web apps i actually like the like like the whole attitude of svelte developers so and then there's supper swelter there which is the like the next one next js which has the server-side rendering which is ceo friendly and all this stuff but then recently just a month ago uh rich harris who is the main responsible person for this world and announced that they are going for like i think for one solution so instead of having swelt and then supper jazz which is kind of separate framework they're going to do the one which is called swelt kit and it's pretty similar to cypress just like the updated supper but let's use this one today and there's another reason why i'm using this one and then let's create a new folder and call this one swelt let's now go to this folder so this is like developing once well from scratch um swelt and then just to start that i think you need to do in pain npm it needs welter next so for support it was different you have to use the the jit yeah there's just some statics already team already defined template with the webpack or roll up i think yeah webpack and roll rollup and what's different with swelternext is that they don't really use the webpack called rollups they use the snowpack which is kind of called like a futuristic web development so i have to say that there's this sign which says that we're gonna stop at this moment and well uh nobody's gonna help us and so of course like it's all experimental and the stuff so if you wanna use it in production you better try separate at the moment because it's kind of stable but then this one is an experimental thing um but well danger is my middle name so we're gonna try this i'm not gonna use typescript yet so once we got the needs we got this folder with the static files just some images and then this s source file folder which has some roots already just one to be honest and then the counter so let's let's start let's start it let's do the npm install and see how it works it's pretty fast and then you could do the npm run dev and it's already running it's localhost 3000 okay we got it we got some errors probably because it's all experimental we got some state because it's clickable and it works and let's let's open it up how do you idea of using react well i use track 35 bro i like this idea i think i i try to use it more just that it's too many things i'd like to try swelte has been on my list for a year already i think and i finally got to it so we have this now gonna do the layout window yeah so going a bit forwards i'd like to say that i really like the experience working with swelton i think i need to say this now because until i got some weird errors and everything broke down so i'm gonna say this now when i'm starting i think you can click the i think you can track the click by cookie so by the local storage that's not a problem but i don't think it's tracked at the moment what is nice though like the rich harris showed it in his recent video i'm gonna link that video in the description anyway because it was like a month ago and it's pretty cool and everything is new and all this stuff uh what's nice that the state is being preserved when the module being replaced hot module replacement is being realized here so it's actually working pretty good so um let me just get to it so this is the counter this is how you build the counter on swelter well there's some styling obviously this is the usual component view of any swelled component so it's pretty similar to i think to vue.js it's closer to vue.js than to to reaction so you have javascript which is script you have the button which is html part you don't wrap it in anything because this is just an html then you have style so it's pretty much almost copy paste solution that could work like 20 years ago because this is just basic style script and html so if this javascript doesn't use any special swell thing it's just copy paste and it's gonna work this is how the component looks like so this is a simple counter component in the swelt and it looks pretty simple too i mean this is the state which we don't really declare like anything complicated yeah it's pretty simple so then you have the roots and let's try to do some roots here so i'm gonna do the about because i already had those images like the about the blog and the stuff i'm gonna just do those pages and then i'm gonna create the index swelt it's gonna be about each this is gonna be the blog page and what else is the contact space right let's add some more here so right now we have those pages maybe i could even go to them like yeah it's actually working right out of the box it's that easy so i have a simple website structure now now next what i want to do i want to put up some styles on those structures and i want to add my canvas back before i do that i wanted to test some transitions for the like when you go from one page to the other page then let's just wrap everything in one div oh yeah and well i'm kind of missing all the styles and the nav and because right now what i see on each of the pages is just this like if i just do the view source it's just the about page i don't have anything inside the body what i want to do i want to have some kind of layout with my navigation so let's uh let's go back here let's set some components just the simplest kind of components you could imagine and that's gonna be the index page i mean home page and then about i mean it's just about and then the block so first i'm going to try to build like a simple swelt website maybe a couple of minutes for that and then i'm going to go into the webgl part so we have this about block and let's add this snap now so i'm gonna go here just the same way that i imported the counter i'm gonna use the counter and i'm just gonna use this snap company and well it's just there i think it even preserves this state if i remove this one no i didn't it didn't all right so i have this enough which but it's not cool to move it to every single one of the components so i think i create the layout swelt and then uh we would have to have some kind of slot where all the content would go and then i have the script and just the same way that i did it here i'm gonna move my enough component here so every single page has a snap component now so now we could navigate the website it's actually already a single page application at the moment just a couple of static pages and then maybe let's set some content so it looks a bit more kind of a website so now we have the navigation for the simple static generated website and then the cool thing right first of all how do we build the static website out of it if i just go and if i just go and do the npm run build it actually creates uh some website but this one is uh this build is for node.js it's not really built that you could upload to your patch server or maybe some random server or maybe just the static barebond server it's actually you need node.js server to run this one and this is where it comes to the interesting part this has its welter config file which states like which adapter we should use and this adapter is actually like which what's going to be the server actually like where would we put our assets at our website after we build it and there's this static adapter let's install it oh i think i got a it's 12 touches i'm gonna install specific version so i think this is the one of the last ones working there not all of them work for me so now we have the static and then let's try to make a build again and now we could see that it's actually building all the roots for us and if we go there to the build folder yeah you can actually already see like the whole structure it actually built all the htmls for us this means you could just upload this website anywhere and it's gonna work and the html is actually pretty clean here i mean it couldn't be any cleaner because it's like literally the html i've put in my company well because it's a static website it might look simple but still for me it was kind of um a bit of a magic because i just okay i'm just building the single player i got for free the the single page part and let's test this out actually because i have the simple for me i still i need to test everything i need to you know fill this magic with the simplest server so if i go to the build folder and there's this simplest server you could run on your mac os like the python server there are some others there are nodes node.js server i just had this one my snippets so this one definitely doesn't have any note it's just this it's just serving static so if we just go here so the website is actually working and i actually get the single page application here so it's not even though it's those are static htmls generated i actually got the like smooth patron transitions already so let's go what's next what's next should i show you how to you how would you use the api for this one yeah let's just use let's just try real fast to see how the api would work so for block i'm gonna generate a couple of pages now and i'm going to just copy paste a couple of codes from this super swelt template uem here oh my god all right so there's there was an example of how you would use the api in like the third party cms maybe this could be anything it's just a json request after all i mean the http request so if you could go here to the blog part there's some well there's index json there's the way how you pre-load all the assets in swelter so let's let's see the block page well for now the block page is actually nothing more than the couple of paragraphs so let's go to the blog page i'm gonna do this i'm gonna use the some of the public apis dummy apis i'm gonna use this one just list some users whatever it could be blog posts this could be users so i'm gonna request this part and then it sets to the posts well i have to expose the post as a property in swelton i think and the way to do that is actually this simple as that this means that after i got my request done i got my fetch done got my promise fulfilled i will have this posts variable here and then i could just use it and well to use it you could just do this so i'm gonna remove this part i'm gonna copy paste this remove so it's pretty simple those templates might look weird to you but it's just just another way of templating in html this was one of the actual arguments against swelter because those templates look kind of custom they're not javascript they're not html there's something else oh yeah haven't i posted uh i mean yeah yeah yeah yeah i mistyped thank you too many scripts okay so i have the post data i think because this one returns me like page and then there's data then they have email in the first name okay let's list the first name here and then i mean this is this should be the id actually this is a slug and this should be the first name then maybe an email also so let's see this works for us it doesn't yet because i'm not i'm not actually running the server probably yeah i just built it and i'm not running it let's run it okay so here we go the first error and we have it because why i think so that should help me expect it i think i messed up the brackets somewhere shouldn't be like that all right all right need to check up the example again each posts as pos okay yeah so that's right each posts data it's uh because this one is yeah still not right what is wrong now is not defined yeah lots of typos just lots of tabs so it's actually working right here if you don't make a lot of typos it does work for you so it just lists all the stuff from some third-party api right it does that so if i do the build right now i just need to check everything myself if i do the build right now okay not found the block oh because it's looking for the urls and i have to make this luck part all right let's just do that it's not really hard um supper has another template here which is just this and just copy paste this whole template and it's called slug swelton and then i need to make a request here and the request is going to be a single user request like this then params slack which is the id that i'm gonna send there and then the export same kind of post thing i'll need this css and then post it returns me also data and then the email let's just preview the email repost data email not html already h1 let's make it a big one that should be so we're making the request to another user part hope it works for us so now we have i mean we need to run the server again yeah so far so good all right something is still wrong cannot read property title of undefined do i have this title it's a title oh yeah i'm i'm still having this weird all part another error what do we have now undefined so this is a block one and i have to make a request for the network here hmm why do i have this error here besides again post title i don't have the title there i don't have the title still something is wrong as post no s there is no s there was no s so i think it's gotta work for me now maybe i forgot to copy paste something so it's post [Music] this wasn't really important part for my stream but i decided i should go with this okay post data email so we do have this server now let's try it again so the block works everything is working and then not read property data fan defined it's not json i guess yeah it wasn't json yeah i've just copy pasted the request and forgot to replace the last part and because of using the public api it didn't have the json part in it so right now yeah it's working all right we have this we could go the block and if you just do the generate partner let's just see what it gets us to actually save all those blog pages from the request and this is what i like like i can actually set the structure in some third-party cms and make the generation with the swelt this is what i liked about swelter this is the point i wanted to make that i could actually for me actually it's maybe important just for me because i can use swelter as a gem stack solution for myself all right and then this is image transition this is wrong folder and then build i would actually have all those saved already like uh just request the api i don't know maybe for you it's it's easy but for me it's just magic that it's gonna go forward and save all the request results all right next thing let's move let's make the transitions let's make the transitions and then the webgl transition so there are a couple of basic transitions built in into the swelter which you can use and let's try to import this one let's wrap like this park in here then i'm going to import the fade then i i kind of want to wrap the whole content for this page and content and then i'm going to use this transition and to use this just transition wait and let's use the same as it was about and then the contacts let's for example use those two starters i have this again there we go we have it and then so if i wasn't being stupid but by making mistake it it's actually pretty easy so far it's not that complicated uh yeah i need to start the server hello to moscow too and now we get this transition well i think you have to set the position absolute because like we already have this transition but it's not smooth so what i'm gonna do i'm gonna go to the layout there's a way to set the global styles and because we're going to be using the the full page thing anyway i'm gonna set the nav and then like something like this i'm not sure if you need to rip body into this one but let's do that [Music] so there we go we have to use enough glass now yeah i don't know just decided to move it to the right layout and then just a bit offset oh thank you this is a custom-made friend of mine made for me it's made out of the kiev main hall just on the streets alright so now we have kind of something like the website we're having those transitions except for the home page because yeah let's focus on the about in the context page at the moment we have the transition let's use the javascript transition there is the way to use the custom javascript transitions and this is the way to use it let's just show me so you could just declare the function which at this point is a typewriter function um not here in contacts yeah instead of using the fate and like default transition as well i could use the typewriter like the custom transition and then you could to use it you could just use the in or the transition typewriter and i'm going to use it let's call it custom transition custom transition i'm going to declare it and well when i look at this function so it actually will it does some checks whether you could use this transition at all on those functions which i'm going to just remove and then it's pretty simple so we have this node so this transition gets the dom node and then we could just set the duration and you have to return something like this function the t is between 0 and one actually like in everything in all the animations it's always between zero and one so it just goes between zero and one and type writes something and you could do the failed animation the same way you could do any animation and what i thought well maybe i could do the g sub animation this way let's do the g sub and pom pom i'm gonna install it and then when i get this note i could do the timeline with g sub and then i could i don't need this and then i could do the tail to this note and then the duration i mean this is set in milliseconds probably but for g-sub i need to set it like this it's going to be in seconds and then duration here is going to be correct one and then not too but from from rotate 90 degrees so it's pretty simple and then uh here instead of just setting the style so setting some content i'm gonna do tl progress t because this t runs between zero and one let's by the way check that let's see yeah now we got the simplest g sub transition and that means actually you could do any kind of transition and that means that i could do i could go to the green soak website and i could do this bleachers for example go here so i could actually do this split text you could do this with some other functions of course it's just that i have green sock because they presented it to me and i'm yeah i've been very honored to have it as a present and and then it's a gift then i need to install right how do you install it this was here just installed the g-sub and then how to use the g-sub split text we have to split first and then we get the array and then come on js so because we have the node already i'm going to do this chars and then from uh like you get the charge array it's gonna be charged all right and then stacker 0.1 let's see what's gonna happen now let's just see we have about yeah it's actually rotating each of the characters at the same time then maybe we should also set the opacity 0 and then y 10 yeah and now we have this weird back and forth animation well there's actually a way to set the separately in and out animation but what i'm trying to just to like get here that we actually get the barber gs experience and the highway experience so we have this static single page kind of application website with animation in and out transitions and then let's add the webgl now well this is kind of a simple one but it's a debug gel so i'm going to create the canvas component swelled and then i'm going to add it to the layout probably because it's going to be shared between all this stuff i'm doing a simple static website with swelt and with some webgl transitions and i'm going to integrate webgl into the swelt now so the transition happens exactly when the swelter transition happens and there's this built-in function built in add no variable export default segment i'm not sure about this name i don't think it's not the default but not sure this is the right thing to name this variable but it actually says like on which page we are at right now and i'm going to paint this this segment probably it's not these i think it's this is the variable that i'm gonna be bending it to the canvas component all right so now inside the canvas which is at the moment just the nothing minus one just so we see it so yeah we do see it and then yeah so we have the full screen canvas component at the moment we have this animation happening here the transition part i'm going to remove the cancel lock so it doesn't frustrate me yeah it's nice how it moves just back and forth maybe i could just do this like this so it only runs when we come into the page and then we're getting out and it's going to be just fade then just fades out it's simple as that and you could do them any right just dress up and do anything all right all right the webgl animation well first of all i need to copy images i need to copy all the images let's move it not here here let's move all the images to the static folder inside my swelt we have them now so they are now accessible through this slash about jpeg just from the root next thing i need to in this canvas component which is empty at the moment let's say i want to have canvas here just some canvas and then i need to have some script and then well there are some life cycle hooks in swelton so once the once the segment variable updated in layout and this means once we change the i mean change the page once we go from one root to the other i think i could just uh hook it up here and it was name import you just after update from was just smelter and then i could use this after update function here after update hook and then i have to set this variable as well right i have to expose this page which i'm transferring from the layout at the moment like this page variable and then i could use it here i don't know about this weird autocomplete here so i kind of want to test it if it works for me so it's about hello from the canvas root change so i'm on the page about if i go to the contacts now i have the contacts page of the home page it's undefined which is good for me still and then the blog page so it does work for us there's some weird css here all right so we have the about and the this one this one it works for us so then uh next thing next thing i need to have this canvas as a dom element as a reference inside my whole animation for this i'm going to do bind this canvas element and then i have to declare this kind of element obviously and then i have to have some unmount hook on mount getting closer oh yeah probably yeah nice aesthetic well thank you i like how mr dupe states in his uh twitter description that he's not so creative not creative developer i'm not really a creative developer i don't know green is all right by me as long as it works it's not red that's a good thing okay on mount and then we have will we have this canvas element there yeah we do have it so now we could run some initialization of the canvas element right there so let's move the module here we could have moved this module like a separately i mean i mean i mean i mean like a module javascript model but somehow snowpack didn't build it for me so i needed to move it inside the component well let's try that so this is the fragment shader to avoid all the gls if i just jls solidify mistakes i'm gonna just do this this inside my component i don't need this anymore i don't need these these these okay i think it's ready for copy pasting i'm gonna right after the those things i'm gonna just copy paste this stuff i'm gonna remove this setting progress and i have to remove the export default it's going to be just class sketch and then again when i'm running i'm going to do this canvas element then images and then start so for canvas element i'm going to use this canvas element so inside the on mount i'm going to do the led sketch just i'm gonna do let's sketch here with the lowercase s and then this canvas element and then i could use this canvas element inside my sketch when i'm instantiating the web gel renderer so i could just use this canvas which i have and hopefully and there's also some stuff where i add the canvas yeah there are some a bunch of stuff that i need to change as well because i'm i've added to the dom here and i have this this container part and resize part and then i need to install the three getting close so i guess it's building the dependencies at the moment and then the about is not defined what the hell is about oh yeah because i've been using those here okay i'm gonna just set them as no set them as now and i think something is working at the moment so if i go here i have my canvas it's full screen canvas it's just black because i didn't have any images this is a good thing so the next thing i wanted to do like there might be a better way to do it and i'll be grateful if someone helps me in the comments or in the chat but let there be black by the way yeah now it's black so now what i want to do i want to get all of my assets all of my assets right here so i have these images and i have this package slot asset the slot assets let's get it done and then images images so when i instantiate my sketch i could just do this what was the last name about block contacts index ok index what i could do now and this after updates is coming soon i want to pre-load all the images inside my canvas let's open it up so i'm going to do i need to import i need to import the dependency first and then load all well actually just images because i have them already as a variable images and then and then and then i should have them i should have them in my application let's see i do yeah i do so all the images are loaded now i have the images because i already pre-loaded and now i could do this foreign sets key equals so we are just converting all the images to the textures and let's then cancel log them and let's see what's gonna happen key is not defined or the water like what the heck oh it's going to be i should be let here yeah so right now we converted all the textures to i mean all the images to the textures so all of those are textures now so now i have to come up with the method i'm going to instantiate all the stuff here so when the application starts when the application starts it's not this it's in canvas here so when the application the is that when the application starts i can also set the default part which is going to be just the page so i can load the default image right away and for that i'll just go to the last lines of my load method and this material t1 uniforms equals what assets uh the name was start or if if it's the start is undefined like we are on the home page it's going to be assets index and then i have to set the uh we finally see something this is a webgl actually so go to the about page we're actually on the about page right if you go to the context page it doesn't switch the animation goes but it doesn't but if i reload i'm gonna see the contacts image and if i go to the home page if i reload i don't see anything because error creating webgl context but okay let's not go to the home page this is i found the best solution for that let's just not go to the home page then on the blog we also have the blog image we'll figure out what's wrong with the home page later on all right so now we have this and let's do the change background function and let's run it only when we here it's gonna be sketch change background with a new oh no let's leave the console lock so it's going to be sketch change background after each segment update so let's okay i bet it's something with the undefined variable for the homepage but let's fix it later [Music] change background so on change background we get the we could do g sub 2 for this material uniforms progress and then the duration let's be half a second it's got to be the same as the duration for the 12 transitions and then the value gonna change to one but on complete gonna be something else happening here all right uniform progress and then um we have to set the next texture which is t2 i believe was the name t1 t2 yeah should have been current next honestly [Music] so this material uniforms t2 value equals to these assets new page or index again something is wrong with that index so far but let's and i have to have these assets too so i have to set these assets equals essence we have the assets we have them here so it actually should work right now for us this i need this we are almost at the end i don't need this anymore i should remove this the only important part is this change background i think we also need to maybe okay something is wrong which is to not read property uniforms of undefined where is it happening and change background this material change background this is because i'm running this changing background on the start before the component even being initialized so i think i could just go and check if if i have this component so if if sketch sets okay it's almost there something is still wrong g-sub is not defined okay well now it's green okay let's fingers crossed yay we got this transition it's not smooth because because of the uncomplete function so in the end after the after the transition i have to just bring the whole animation back again progress value equals zero again and then let's save this one to the variable and then this material forms t1 yeah it's working now only if we don't go to it's working why the why the heck it's working on the homepage now i think i had the same typo maybe whatever so maybe let's change it to back to the original animation that i wanted to do in the first place and not this simplistic explanatory version so it's here and instead of overwriting the disk i'm gonna just command this one i think it's pretty fast for this one right so let's make it two seconds so because well the website looks well i'm not sure even the ugly is even the right word for this one but what the hell we are all developers right we know that we could make it look cool but the tech behind this one is this is what makes it important so well of course yeah we have to make transitions safe because if we click during the animation it just cuts it but yeah just made a single page application and the roots being changed this is the most important part like this is actually the static web page and let's try to build it npm run build and let's try to build it and run it in some static web server and see how it handles all those web gel transitions for us i promise to eat pictures but i forgot okay build me something let's start the server let's go and we see the web page the counter still works then we go to the about page and we got those transitions and this is all just a bunch of htmls you know and we have the single page application with a bunch of htmls and with the webgl and even some of the g-sub-transitions which are to see i think in the layout i'm gonna just set the color all right all right this will not change the build anyway but still and we got this awesome website that's definitely not the website for people with any color differences in perceptions any percept in color you know what i mean because it's hard to see anything here but it's still a bunch of webgl transitions and there's even the contact space transitions hard to see it but it's there the g sub transition that we just made oh thank you thank you for believing in my design skills anyway i hope you get the idea like for me it was the the best thing was to try if i could just build this simple not the beautiful obviously but the simple website that's been statically generated with server side rendering with some third-party api and then the webgl well not under one hour but still we kind of close i hope you learned something from this because i did because i did and actually well i have some some really simple ideas for my projects that i want to do like simple startup kind of thing helpful projects and once i tried the reactant view and then swelter i think it's i'm i'm i'd like to do this one in swell table the ones that they want to do i would like to try spelt on those because it looks so simple it's so close to the like the html that i remember not the jsx not the css in js it's just like how i remember i've been writing html and css all my life yeah so thank you guys for being today with me i hope you like this one it's been a simple web jail and a lot of struggling not that struggling just a lot of interesting stuff from swelt i believe hope you learned something so let me know what would you like me to show on the streams maybe on the next one i will probably share all the code with my patreons from this stream so they find it useful and then yeah i'll be seeing you on next sundays is there a reason to choose free or any no there's no no reason the only reason is because i like 3gs and because i had this template and it was quite easy to convert this one to i think you could as well you use the curtain js or any any kind of two-dimensional webgl renderer i think it's a bit harder with pixi to use custom shaders in pixi because they've been changing that part in in three four and fifth version and i've been a bit struggling with it there are some kind of weird names for me like not the uvs but texture coordinates which is kind of the same but still i'm used to uvs yeah anyhow anyhow if you have some stuff that you'd like to see on the stream just let me know i'm all for doing the useful stuff for you if you like that you can press like and just comment this thing that's really makes me that really makes me happy when people comment and give me the feedback and then well ggs have fun on this sunday i'd go try to have my maybe and relax a bit so guys see you on the next sunday and i'll be sticking in chat for a while and then you in the comments and twitter

Channel: Yuri Artiukh

Views: 8,849

Rating: 4.98524 out of 5

Keywords: webgl, triangle, tutorial, canvas, animation, ascii, three.js

Id: dvPfmcGtmrI

Length: 84min 20sec (5060 seconds)

Published: Sun Nov 29 2020