Immersive Web Experiences (with Bruno Simon)

[Music] hey everyone good morning good afternoon good evening wherever you're tuning in from and thank you for joining me for another live stream if you've been following along i've been bringing on guests for a series of live streams about really anything and everything from front end to the back end to design to creating these immersive web experiences which we'll get to today and the way this will work is feel free to just throw any questions out at any time in the chat and we will get back to you so today i'm really excited to talk with bruno simone who is a creative developer specializing in webgl i first saw his work a few years ago when he released his incredible portfolio site which i'll pull up here and show a little bit later but it's awesome it looks like a video game uh he also created 3js journey which is an online course showing how to use 3js to create these immersive webgl sites which we'll show a little bit today so with that being said everyone give a please warm round of applause in the chat and welcome him to the stage hey everyone hey hey hey nice to meet you because it's the first time we can talk and not using uh private messages yeah yeah it's great it's been fun there's been a few people that brought in the stream that i already knew pretty well but you know we're just getting a chance to meet each other really for the first time live so this is really awesome and you know as a fan of yours seeing your your work in the past and creating these awesome experiences i'm really excited to get a talk today and learn more about how you do the amazing things that you do so thank you for joining me today i know it's late where you're at so i really appreciate that yeah thank you because i want to learn some stuff from you too we've been doing kind of the same things you've been doing courses i've been i started like only six months ago so yeah i'm quite sure you have some stuff to teach me too absolutely absolutely and also thank you to everyone who's joining in live we uh we really appreciate everyone joining feel free to leave any comments or questions in the chat and we will uh we will get back to you anything and everything about creating immersive web experiences bruno's dog is represented as well yeah i think you can hear it already i have to to warn everybody that uh the strange noise you can hear behind or not dinosaurs or stuff like that it's my dog it's right here and uh you might hear it so sometimes i will mute myself because i know he's making a lot of noises and students from my course knows those noises usually i just put like a dog emoji when you can hear the sonic and i cannot remove it from the uh cut it from the the the rush from the video but uh yeah yeah people know these dogs that's hilarious well you know what we welcome all pets here on this on this live stream so we're happy cool that's friendly stream great do you have one i have two cats two cats and they uh they they try to jump up on my desk when i'm screaming sometimes so i have to like obviously close the door and all right don't join in i don't guys say don't scratch the door yep then you yeah you'll probably be able to hear that for sure yeah we have fans we have some uh some people from your course joining as well too yeah i can see that's that's awesome um i'm i'm new to uh to this platform i don't know how i can interact i can see okay i have to go to comments and see all the messages okay yeah on comments and you can comment back in there as well too so we can if there's one you want me to pull up on this on the screen i can do that as well too okay great awesome great well maybe the first thing just to kick things off i think would be really interesting talked a little bit about your personal site and i think this would just be a really good opportunity to do a little bit of introduction to yourself for people who maybe don't know some of your prior work and just you know show it off a little bit live i think it's really awesome so why don't i just go ahead and share my screen and maybe you could just give a little bit of introduction to yourself and why you made your site like this yeah i want to see how you drive the car because it's not that easy no it's really not i'm going to try my best but i can't make any promises make a course together about react 3 fiber yeah there is a lot of people asking about react 3 fiber absolutely i've heard i've heard so many good things about it i've wanted to dive in but i probably need to take your course first honestly and i'm going to need yours because the reactor i've been using it but not that much we are going to talk about that later yeah so first thing we can say is about the loading time if you check the the network you will see that the the website is very very small like it's it's light and even best is like um when you just arrive at the moment you can click on the start button there is something like four megabytes which is absolutely nothing and then i load the rest of the images after so yeah it's i'm pretty glad i got it so small which was one of my concerns i i noticed the performance was really good for how complex this site is could have been better but it's good it's good just good well i mean that has to be you know you have to spend quite a bit of time on the performance to get to this level too especially with this is running pretty smooth like the fps is pretty good and my computer is uh probably probably struggling with live streaming at the same time too and it's still it's still handling it pretty well nice so what was your kind of inspiration for creating a portfolio like this just as more practice or there is so much uh reason behind this first um i've been teaching like for many years uh in a digital school in france and i just like to teach and that's my thing and uh one year i asked the students to work on their portfolios but my portfolio was meh you know it's sweet it wasn't really good it wasn't that bad you had some web gs you could see like some project it was okay but i was like i need a better portfolio so um i started working on my portfolio and i just enjoy so much working on the portfolio that i spent like three months working during the evening during the weekends to get it done and uh and always trying to push it forward and i was like teasing people on twitter and they were like oh that's awesome i want to play so i was like oh maybe i could i should continue and do more so i spent three months on it and uh here you go you at this website and why a car you might say well because first i play a lot of video games uh almost every day i play video games all kinds of video games pc console and i just like video games and what's funny is that when i start learning uh like development web development i didn't even know you could create games we had flash at this time but for me it was like impossible it was too hard you you remember flash oh yeah yeah that was great time and uh and for me it was like impossible you cannot create video games at uh of for performing it was just too hard so when i started doing those i like you can create video games so like i need to do a portfolio i need one day to create a video games and uh at this time i was like okay i need to do my portfolio i want to do a game let's do a portfolio game and uh and this is why i did like this little car running around it's really funny because my roots i think in getting into programming also stem a little bit from gaming i used to play games all the time i still play games occasionally and when i was getting into programming like i was building uh like arcade emulator style games with python because that was that felt like the coolest application of programming to me like making games seem like i want to be a game developer i was like this is it this is what you want to do so i share a lot of that excitement too for building those you know incredible web experiences where you defy what people think that you can do on the web and i think what's really cool i you know looking at your portfolio and some of the sites that you've built it seems like you really take this to heart and you put a lot of these really really immersive experiences yeah it's sort of about spending enough time on it on on it like um many times i've been asked to do uh something like uh i worked at uh immersive garden and uh it's a french studio french digital studio and uh and many times the the the artistic director just said like uh i want this uh this would be awesome it would be uh the client uh it's what the client needs it's what the the viewers need uh can we do it and i'm like i don't know should we try yeah let's go and we just try without knowing if it's possible and as you said you just put a lot of time a lot of half in it until you get something maybe it's like a total fail like it wasn't a good idea then we can find something else maybe we can try next time but uh yeah you have to put like a lot of times a lot of efforts and and just try keep trying until you get something done absolutely there was a good question about what is the underlying technology other than webgl that your site's using so you've got html right you've you've got some javascript in there is there anything specific you want to call out yeah sure um there is almost no html you just have like a canvas inside the the body the rest is always gel one important part is the the physics like i didn't handle the physics physics on my own because it's a lot of mathematics i'm bad at mathematics and i know there is already a lot of libraries um there is amo.js there is a canon js and uh and i use canon js because because i wanted to test it like i never did uh did use a canon js before so i just i was like it's a portfolio it's time to try stuff so i tried canon gs and then the idea is that you you create like a physics world using canon gs and uh and you create your rendering world the world you can see using three js and the idea is that when you create let's say a brick because you have bricks on the on the on the website if you create one in 3gs you create also one in in the physics world so in canon js and then on each frame you update the world you say okay you physics world you update yourself on each frame and then you take the coordinates and the rotation and the the scale but there is no scale so a position in a rotation of the physics world of the canon canon gs word and you put them inside the 3ds world so that's how you create physics like realistic physics and uh and yeah you scan on js very good library unfortunately the the the the author of the library the the one that created the first stopped working on it because he probably is working he's probably working on something else now and uh but unfortunately the community uh um forked the the the repository and started working again on it so it's a it's not dead it's a great libraries still missing some documentation so we have to to kind of uh search inside the examples but uh but uh yeah you can do a lot of things like cars or objects following around and and stuff like that nice there's a lot of a lot of love for the site it was the site of a year on awards huh that's pretty yeah it was actually many things it was like it was a hold up like uh the the awards i i took three awards uh but uh there was it was not site of the year wait i have i know i know it was people's site of the year so it's not the jury site of the year the site of the year from the jury was uh i don't remember but i know it was like a well deserved so i was glad for them and i think it was magnifice and it was a nomadic tribe do you remember this one yeah it was absolutely crazy website like uh well deserved and uh i also had like um developer of the year and it's developer site of the year it's not really the developer it's the website and uh for jury and uh people so it was a three awards that's amazing yeah nice i one thing i'm curious how would you define what a creative developer is because i know that you talked about that like you're a creative developer but for people who maybe aren't used to that job title or that description like what separates this creative developer from just like a front end developer or somebody who's building these type of experiences yeah that's a great question uh i hear this question a lot today you know you have like so many job titles in uh when it was like 15 years ago you remember what uh what was the name for every jobs it was one master oh yeah you had one webmaster doing the design the community management the forum the code everything now today you have so many titles it's such a mess i try not to fall uh i mean there are reasons behind that it's because we want to really uh clarify the the job description but uh i try not to fall into this uh this mess and i like the creative developer title because it's it's still like general like it's kind of fuzzy still there for me the the definition of a creative developer obviously you have to develop stuff but you have to develop stuff but with um design and creative obviously an almost artistic part in it or not that much about artistic but the idea is that you will use the code to create stuff that you could not have created using just the the design tools you have like a photoshop like like a web design figma like illustrator you have limitations like if you want to create a generative forest with elevation with uh using stuff using specific algorithm that will do a spiral or something like that you cannot do that in photoshop but with code you will use mathematics you will use randomization you will use like loops stuff like that and you will be able to create that so for me that's the creative part of um of the job and uh to explain a little more how a creative developer like um exists in a team um the best example again is with the immersive garden where i worked i worked for three years actually um the idea is that the the designers we had like the best possible designers uh they're like uh dick chan analysis many other and um and um the idea was like they were giving me an intention because the designer he you know in a studio or an agency the designer will like understand what the clients need the clients and the visitor of the of the website needs this is not so much the developer job and this is great because the designer will understand what the client needs and we he will create what i call like intention like it maybe uh through some design stuff maybe using pinterest maybe using a dribble and just like fetch stuff and say to the creative developer so it was myself we need something a little like that but with the colors like this and then they create some stuff use these kind of lines and then the developer the creative developer okay let's go and the creative developer just starts doing trying stuff and the code has to be like very flexible because the developer has an id you have the client he has an id the designer he has an id and the developer he has an id and in the end you have this this long process which means that there are like transformation like the id maybe get lost somewhere so um the developer has to create something that will be easy to transform like you're supposed to create something that you you can tweak the colors you can trick the shape you can tweak the model you can tweak the textures so that the designer and the client might just tweak stuff and find the the perfect tweaks to get the the perfect result and you will be using obviously codes to create like generative content to create stuff that you you could not have created without coding that makes a lot of sense i think what's interesting to me is the amount of control that you then have in that position like you're kind of uh a jack of all trades who gets to work across the design the development um from the just understanding the creative process and almost like a product management too as you're trying to help shape the vision of what that is going to look like what i'm curious about is how how does one develop the skill set to do something like that did you start in the past working maybe you know more on the design side and then over time kind of realize that the the culmination of all those skills was what you enjoyed or like is there a what's the learning track for something like that because you really have to understand a lot of different things obviously you're going to be a great jumpstart into that yeah i was uh to to be honest i was like really lucky to to um to try stuff and that then became what i'm doing for for professionally um as you said you have to you need a lot of skills and you need a lot of experience that's that's true i'm using like a 3d software i'm doing like uh design stuff almost artistic artistic stuff i'm using a lot of different languages some very hard i'm using a lot of libraries and i just gathered those skills through time and the the most important thing is just to have fun with those because when i started webgl it was just for myself like i was in this mood like i would really like to create a video game and you have this uh webgl api that lets you do 3d well what's better than 3d video games you have great 2d video games but still with 3d you had some depth you had some realism and um and so i just tried for me to have fun it was so hard like uh i tried like native website it was really too hard but still i discovered like 3gs and i started having fun and for 3d it was like 3d softwares it was exactly the same thing like uh i needed to create this model uh i was like oh yeah we'll try uh let's use blender and uh blender is fun or let's continue oh this tutorial seems fun let's continue and i was enjoying it and because i'm enjoying it i'm doing it like i can do it in the evening instead of watching tv or or i don't know sleeping early i just keep doing this because i'm enjoying doing this and this is how you develop your skill enough to to to have enough experience to so that you can use it uh like in a real project and uh and yeah so um to do this creative stuff you have to to learn well it's if it's for web obviously you need to practice like a javascript a lot like like crazy and know about performances um you can do a lot of creative coding with just html and css i don't know if you've seen like those crazy cop pen there is this uh oh there is this uh this um this girl who made like a um like a realistic portrait using uh css and html that's absolutely crazy and uh and for me it's creative coding this person probably did that because uh she's enjoying doing it and she's doing it really well and i'm quite sure she she had like a lot of jobs uh after that because she knows like css like nobody which is which is great so yeah for me it's just about practicing what you like finding what you really like so that you can practice it and without counting the hours and develop your skill and in no time you will be able to do crazy stuff and you will even not even realize yet that you can do that like uh uh at a point i was like uh okay let's add webgl to a real website for a client for me that that was like impossible like okay we can try the this client looks fine maybe if we fail it's going to be fine it went really well so i keep doing it and uh yeah so it's kind of the idea you just practice what you like until you can use it like professionally i've seen those single div css only drawings and yeah those are incredible the amount of time it must take to make those is is definitely significant and to your point you made a great point about the people who are creating those they have to have a genuine interest and enjoyment making that and in the process of doing that they don't even realize the the amazing skills that they're learning they're just trying to have fun they're enjoying the process with it and that's really like that's a key advantage that's the superpower like if you truly enjoy that then it's going to be easy to want to learn that yeah if you don't like switch to something else you'll find it yeah absolutely i'm kind of curious it seems like in the past four to five years maybe even going back a little bit further but really in the last i'd say five years these type of immersive web experiences that have you know over the top 3d like really interactive sites have grown and grown and grown and grown and i think brands see these experiences and they say i want to do that for you know whatever segment of the market i'm in whether it's e-commerce e-commerce or similar if you have any idea like in the rise there just due to the uh the tooling and the software that's made it easier to create these experiences or why do you think they've got so popular yeah that's uh that's a good question i'm not sure of why i think it's uh like um i think it's because developers there there is more developer able developers able to do crazy stuff because still it's really hard it takes like years of practice to be able to create those websites and like a few years ago you had maybe like a 10 developers being able to to do the website we we do today like the websites you can see on awards and stuff like that with a huge webgl but now people are learning it because uh like uh because of libraries like 3gs there are other libraries but this is the the most webgl library used that became accessible through tutorials through a great documentation and um and it became like really stable and today you have more and more developers able to do that so if there are those people able to do it well let's use that it's easier to find a developer that will do it so for me that's the main reason uh maybe it's also because uh like uh companies just realize you can do that like maybe they've never seen uh those 3d website until until now because there is now a lot of uh a lot of those like even on the the on the on a big company website like like github github you now have web webgl expense on the home page of github so um all the companies uh that that use github maybe we see oh that's a 3d globe that's uh that's crazy can we do that for our our brand and then they do that so so i don't really know actually i want to know you what you think of that why why do we have so many of those websites now yeah to your point about it getting shared at larger brands i think that's critical when you see something like a github.com with the webgl globe so many developers across the world are seeing that and seeing that experience and wanting to bring that to their site and their brand too i think that's a big piece but then two i've seen a huge rise in 3d experiences for e-commerce specifically and i think the differentiator there is by giving this brand new experience especially in uh you know with covid and everyone being online this new experience that feels more like a real in-person experience it really changes the landscape for e-commerce and it gives you a leg up over the other people maybe just doing you know the typical ecommerce experience selling online there was one i love it was from some european um almost like an ikea where there was different interactive pieces of a bookshelf and when you when you swapped it out the different pieces change and you got to like twist the model around live and i've seen a similar thing with like you know really high-end bikes where you can switch out the parts and stuff that experience really makes online shopping like feel like you're there feel like you can actually change those things out so i'm a huge fan of it i would love to see more and more of that in the future you're actually right about the the current situation with covet stuff like that i had a lot of people asking me to create a website to kind of try to do a switch like try to compensate the the the their financial issues with this uh covet situation like festivals that cannot do festivals so they want like a cool website or brands that need to sell more online so i saw so they need to to create a better website so yeah you're totally right yeah and we can see a lot in e-commerce too and yeah i think i saw the the this biker website you're talking about like very realistic i really like this website i want to talk about your course a little bit because i think it looks amazing and before we get into it the thing that struck me the most when i first saw it was how well the promo video was i thought you did a really really good job producing that showing off some of your work like highlighting why you should be interested in the course do you have any background with video or was that just like your was that your first shot at doing a promo video because it was really well done well actually i'm right now searching for the motion designer that did it wait i'm gonna put the link as soon as i find it it's a it's a friend of mine it's timothee bart so we just said tim bart uh we've been working together at immersive garden he's like a designer motion designer graphic designer so he does a lot of things and uh he did this uh this promotion video i just gave him like all the rushes like you know when you film your desk you film your dog you film the the screen stuff like that and uh and i gave gave him everything i gave him a scenario and he did the job in like in no time it was absolutely crazy oh yeah i got it it's uh i cannot post comments uh why that i some i think youtube thinks like they don't allow people to post links unless it's the owner of the stream i think but oh i i have a private chat chat maybe if i do this here you can receive it and share it yes absolutely yeah okay so that's uh tim timbart and he did the video and he did a great job i agree with you it was a really cool video i think that's important like to do a really cool video and and i spent something like maybe two days two full days recording and preparing everything for just like three minutes of videos that was exhausting it was really good i was i was very impressed so he he did an excellent job cool yeah i want to i want to just talk a little bit about the course because there's a there's a lot to unpack here we both have experience creating courses and these online experience and it's a whole new set of skills not only not only are you understanding how to you know work with 3d but then transforming that into an educational experience building this you know interactive website it's a really awesome way to show off to you know prospective students what you're going to be building you can even like interact with these scenes what what uh like what was your motivation for this course it seems like it was right in the middle of a really good niche between webgl and education like lots of people wanted to learn webgl not as many people teaching it as there probably should be uh you're talking about the website or the reason why i did this uh this course um just why the the course in general yeah why the course uh well it's because um after i created my portfolio a lot of people ask me like can you teach me a lot of people ask me to do mentoring where if i can how they can learn and so many people ask for it like i was always giving the same um url it's uh on 3gs documentation you have a useful page which is uh not well uh like it's pretty hard to find it but see it's a great page and you have some tutorials but just some tutorials me i've learned uh like um you probably know west boss uh i really like west boss tutorials and i like westboss tutorials because it's like the the huge schools that take you from the beginning to these uh advanced uh advanced uh advanced uh like uh uh you you you know you know the the thing like react i learned re uh react using a west boss tutorial and uh i was thinking that we were missing this like the tutorial you just follow the video and do at the same time and in the end you know this library so uh i was thinking today 3gs is stable we don't have this full course available i know how to teach because i've been teaching like for seven years something like that to in the the digital french school i was like okay i have to do it and because i also left my job at immersive garden i had time so okay let's go let's do it and then i spent six months on it and uh and that's it i i was gonna ask how long it took because it seems like the breadth of content is so in-depth like you cover so much and i know that's a lot of work so i i was it was obvious you spent quite a bit of time working on it and polishing to get it just right yeah three months full and three months like uh half time what's the biggest course you you've made so how long yeah so i've really made two full length courses the first one it probably took about two months and then the second one it took probably three months pretty active and then the last month i was like you know just trying to get it done and get it out so now it's funny too because now when i look to the future to the next course that i want to do i want to do something even more in-depth or more expansive because i like having the comprehen like you were talking about like having something really comprehensive that goes from a to z covers the entire thing which is really really valuable i think um but it seems like the course has already been really successful and going well over 3000 people have enrolled which is pretty pretty incredible it seems like yeah that's crazy i wasn't expecting that much i'm so glad like it's uh i don't know for you but uh it's so hard to spend months working on a course without knowing if it's going to work like it's really like like you feel tired you walk like i don't know like 14 hours a day and uh and you don't know why you are doing this because maybe it's not going to work but still you do it like uh you give everything and and yeah i was i'm sorry like it worked well and it gave me the i want to continue to do more now nice yeah i'm sure that there's so many more opportunities now to take this type of content even further now that you've got the base for it you could even say students who have previously taken this course can now do an even more advanced style of course going really in depth on you know how to fine-tune performance which i saw there was a section on performance even at the end but maybe even turning up you know just another another notch yeah yeah actually i can do like a small announcement here is that there is more lessons coming more lessons to the course uh everyone's loving the dog they are lovingly yeah yeah it's here he wanted the tension like he was on my side if i put it on the floor he's like between my legs just pushing me so i can see i can notice it so i put it on the side but on the side he's doing the same like you just look at me with his eyes and wait for me so at the point he's going to sleep so uh out of the camera soon what do you think was the most difficult part of the entire course creation process like knowing not knowing whether it was going to be successful or through time is is very difficult but i think for me it was like the last mile of you get 75 done and getting that last bit finally done seemed so difficult like the it was so easy to get weighed down and feel like you're never going to ship it you were never going to finish okay how do you finish like what's this last part you you're having a trouble of finishing yeah for me i think it's it's all the other things that are involved with creating courses that you forget about it's the the website copy it is the you know the design of the site it's the marketing of the site it's trying to figure out how you want to do sales for your site and i noticed that it looks like did you create your own kind of course platform for it on on your site too so then you probably had to like you know build your own stripe integration or like yeah yeah yeah that's uh that's kind of the the same brand for me the the harder the hardest part wasn't this part for me it was the recording like the recording was really hard first because of this dog because i had to uh to make sure it doesn't make too much noise it was really like really hard i had to do a lot of editing and stuff like that and and also because when i'm doing a record i'm doing it at the morning so i wake up and start immediately uh doing the the okay sleeping now and i start immediately doing the the record and it's really hard because at the end of the morning i'm tired like it's the the end of the day which is really awful like and i keep working on other stuff like the websites uh and and stuff like that so it was really hard and also because i don't know for your setup but me i i had this huge light in front of me and uh and this light was like i was so tired and when you have to do like two hours uh videos because there are two hours video in the course at the end you're just like exhausting your eyes are red and you're tired but oh that's still the morning now we can continue the day so for me it was the the hardest part yes i did created the whole platform which was a truth i made because uh because i knew how to do it like i've been doing a php i've been doing a lot of things for many like classic websites for four years before doing a webgl so i was like i know how to do it i want to have full control i will do everything myself like uh i've been handling like a account stripe as you say people as you said paper is a nightmare um i just hate like it took me one hour to implement stripe and it took me one even no it was two hours to implement stripe and two days to implement paypal what the hell i say so it was really hard and yeah all the details after that so so yeah and as you can see like on the homepage of the 3gs journey there is like this huge experience with the those flows and the the funny thing is that initially we were supposed to create only one scene and to do that i asked a friend of mine which is a roman brill i'm going to put the links inside the private chat so you can send to the reps because i can't uh send to everybody yeah so uh okay and uh and roman rio he's like a 3d designer he do a lot of other things like a lot of designers uh great designers but uh he he's so like motivated that he was like we were not going to do one scene we are going to do one thing for each chapter i was like uh okay but i have to implement everything and and uh and do some webgl stuff inside so i was like you know what let's do it we are going to have fun and we had a lot of fun doing it but it took like i don't know i i cannot really put a number on it but i think i spent something maybe like like four weeks just to do this webgl part of the website and again i did it because i had fun doing it like when i had this little laser burning the walls i was so happy i played with it for for i don't know maybe 20 minutes and uh and uh so yeah i enjoy doing it so it looks this is why it took like six months it's it's because of all those details but yeah for me it was the recording that really was exhausting exhausting so it sounds like you collaborated with quite a few people to to kind of put together all the different pieces what was that like like just working with people you worked with in the past and bringing people along to help kind of shape the vision of what you wanted this to be was it you know what did that look like first i'm so like grateful because they they helped me uh for obviously it was like a paid job but still they gave me like a friend a friend a price and uh and they spent a lot of times on it uh all of them like um had like like a jobs on the side and uh and uh it's so cool that they did that for me obviously uh i would like accept jobs with them uh so for as um as um how do you say like a uh like uh to to thank thank uh them uh and yeah working working with them was just great because uh we are used to work together and we are we we work great together we have been doing projects together like roman rio and tim timberton we we've been working together uh already so so it was really easy and i'm not like a difficult client me i'm really like easy client and it's not just word and in the end in fact there is a lot of feedbacks and you spent hours changing everything i'm like uh as soon as it's great i just trust the designer even if i don't agree usually i just trust the designer and usually they're right i'm not a great designer so i just trust the designer so it went like really straightforward and both for the the promotion video and the the website and roman brill by the way did all the websites like the the design the internal pages design everything he did uh everything you can see is from from him so so yeah it was a great job it was really easy to work together because we work great together i'm gonna have to have to give them a follow on twitter because that's that's impressive like they they've done an incredible job to help you out there and the collaborative thing is awesome too i if i could maybe for my next course i'll do something like that too because i think you know the the combination of all your ideas and skills put together helps create a product that's you know ten times as good as it would be as just a you know a solo person out there doing it on their own yeah what are your what are your thoughts maybe stepping back a little bit on some of the abstraction levels on top of um js or you know like the react 3 fiber or some of these other frameworks that i guess bring the component model to trying to use essentially webgl yeah unfortunately i don't like it like um i have this issue it's it's a it's a great debate you're starting now but for me data binding framework is for data binding and that's all i have this problem right now is that uh i'm teaching yeah like i'm teaching every year as i'm teaching to fully beginners that never done the javascript and the and the what i think is that there is there is going to be like at least one or two years before they are able to learn things like react like vue.js and stuff like that because i need to practice um javascript and uh for me that's the problem is that we are like like like digging very deep and we put ourselves there and we are happy because it's something that we can learn that we can handle easily because we have a lot of experiences but we don't think enough of beginners like people that we just start web development you usually a few years ago web was just like html css and njs and it was great now you have to learn like a web pack react uh crazy libraries and a good buy and stuff like that gatsby gets by i never know how to how you say it and uh and for me it's too hard and i like to get back to the roots as much as possible still for me like um react view js and stuff like that it's awesome when you need data binding like when you have i don't know like a number stuff like that for for like if the the market like your your sellings or maybe you're doing a chat or stuff like that it's so great to have access to a data binding framework because the data will just react like your interface will just react and you will have nothing to do you just inject the data and when the data changes it gets updated for me we have to to keep using react and stuff like that like this why i'm saying that's that it's because uh i also got like a um when i was working at immerse garden i did some recruitment like uh people who wants to work with us and i had people that know that they knew like react but they didn't knew javascript and it's remind me of a time i don't know if you learned it this way too where we learned uh jquery query sorry i have trouble saying it in english before learning javascript do you remember this time yeah it was so wrong like no you're not supposed to learn jquery before javascript it was a crazy mistake i did this mistake because my teacher taught me that and uh and that was a big mistake and today people are learning react before learning 3ds so they can do stuff so it was a little maybe harder maybe not to learn but in the end without react they are lost and for me that's a big mistake so um so uh i'm not a big fan of it and when i see like um like a react3 fiber i think it's a great idea because you could you can just create like a cube with just adding components but when you you are having troubles good luck finding where is the where does the trouble come from and for me it's like the more layers you add the worst for me it's as simple the more layers you are and sometimes you add like somebody we say ah okay that's a layer but that simplifies everything no no you cannot add a layer and simplify this is two opposite words it doesn't exist so this is what i think still i've been using like vue.js a lot uh we created like website like great website using vue.js and once we were really like um experience with our way of using vue.js we could create a website in two weeks that was absolutely crazy so it's great but when someone started working with us we had to explain everything like we do this this way we use that this way the routing is doing is uh handling this way oh and for seo where we have like server side rendering stuff and things are getting much complicated more complicated which i think is kind of sad so this is why i'm like just standing like uh far from it like i like the idea i don't want to use it that's the problem i i definitely hear hear a lot of those things i've struggled with recommending tools to beginners because there almost needs to be a revitalization of just using vanilla javascript instead of something even like a jquery or a react because of how far it's progressed i think what i've seen is that you can do a lot in that regard people tend to latch on to whatever tool that they're most comfortable with and since a lot of people have learned these newer frameworks for their job or whatever then they just kind of use them everywhere the thing that was interesting to me is it's interesting seeing something like react be used to build these experiences but my guess is that at the end of the day for people who are really advanced in using 3js and using webgl it's pr like you probably have to get really fine-tuned with performance because you're it's it's demanding of a browser to run that kind of complex experience in the browser so adding more javascript in for the react layer or some component layer probably doesn't help as far as the performance optimization thing would go that's my guess but i i haven't tried it so i don't know so sorry right like um in one of the lessons i explained uh some performances tips and i'm quite sure you cannot uh use those performance performances tips as easy if you are using like rec3 fiber so yeah you're right about that that's really interesting it's enticing to see the mental model that you learn in one spot applied in multiple different places but it's really good to have that open conversation about the realities of trying to launch something that has great performance it can be accessible by you know people all over the world with even slower browsers or slower devices so yeah that's that's really incredible i'm gonna just scroll up a little bit and yeah i was going to say there is some interesting questions there's lots of lots of good questions in here so i'll just start a little bit up at the top um yeah thank you to everybody who's joining in we appreciate you asking these questions and yeah people people love the course if you if you're interested in the conversation today and you want to learn more it sounds like that is absolutely the opportunity to to learn more about this i put a link to the course in the chat below uh if you want to check it out and i also you know showed it on the screen there too um so let's see what questions everyone has are there any prerequisites for the course is it yeah just javascript you don't need to learn react you don't need to learn you don't need to learn a blender or stuff like that you just need to know javascript basic javascripts like loops variables arrays functions events and you're good nice yeah oh yeah thank you yeah we got some another answer here for that and it sounds like we're excited for more lessons so that's incredible too yeah more coming i have to work on it actually i have a preview for you if you want absolutely i'd love to see that we have some some of your students here too who i'm sure would love to see that as well yeah actually i already talked about it in the in twitter but uh let's show to people so sure i'm going to share my screen with rendering definitely check out this course so awesome i will stream wait can we see yes okay let me just get the right window like this i will go full screen no maybe not full screen like this so yeah the idea is that uh as you said like um on the home page you can see that there is this good looking scent those good lookings like floors and the the problem is that uh what i use behind this is very hard it's called baking i'm baking the the textures like the lights and the shadows into textures and then i'm using those textures inside the web gel and i did a huge mistake it's that um i didn't uh explain how to do it in the course i talk about it i do explain a little how you can do it but still there is no like uh the lessons on how to do it and the reason is simple it's like really hard like it's a lot of optimization 3d in blender in 3ds and you have to to do the exact steps at the exact moment and if you do something wrong you messed up with your texture and you cannot use it so this is why i decided like no it's too hard i'm not going to add it but in the end i felt bad i really felt bad because uh i want people to know how to do that so i was like okay i will try and i wrote i already wrote almost all the the lesson i'm at the last part it's a four part uh it's a full shutter in the end and i think it's going to be like maybe between five to six hours longer lessons so it's a full essence with a lot of blenders a lot of 3gs a lot of optimization at the end you get this result which is exactly the the technique i use on my um on my uh on the homepage of a 3ds journey with beautiful bake texture so it's not exactly the same i decided not to do one of the the rooms because there is too much uh objects and the lesson is we're going to be like way too long and it's not very interesting so i just focus on a few easy to create objects but all the techniques are the same and you will learn how to do that and obviously how to add details and right now you can't see it oh it's sad because uh no i don't have it here unfortunately but there is like a cool pattern uh drawn inside the the portal and it's an animated pattern where you see like some some kind of waves you can see it on my twitter if you if you go a little back in the timeline and uh and yet again it's uh techniques um it's a shaders it's uh the real power of webgl and uh and yeah i'm almost done with those lessons but still i have to like uh like make sure the english is uh the text um the english text is uh is uh is right and i have to record everything and and do a new video maybe promotion video so it's not for for now but still i'm working on it and it's coming nice well thank you for sharing that that's that's really cool i i love the example too that you gave like that scheme is very appealing to the eye yeah do you know where i got this from ah it's from valeem i don't know if you know this game ah it's a game like right now on steam uh everybody's playing it there is like a five million people that played it just in the it came out like a month ago there is already five million people and i lost quite a few hours on it and it's a viking uh stuff uh like uh like procedural award and uh and i'm in this mood i was like oh i need to do a scene i'm going to do like a like a viking mood with porters and trees like trunk trees with an ax in it so so i think i i hope people are going to like it i posted on twitter people was like oh yeah that's cool okay let's do it nice we got some france represented here i think the last thought is supposed to be red probably yeah i think it got converted through the uh the emojis um are the designers that you're collaborating with are they also coding as well too um i didn't get the question sorry oh uh are the designers that you're kind of collaborating with are they also coding do they know how to code as well no not enough clearly um i know some designers that do uh some some code but it's like really rare and uh and it's sad because uh there are there the reason behind that it's like that they are already so busy with all those those uh design stuff you can do 3d you can do a lot of things but i think the the best designers are the ones that do coding and the best developers are the ones that do design and i see a lot of developers doing designs but i don't see enough designers doing coding i don't know why uh maybe you know why but uh i think we were missing something there and i really like recommend uh designers to try to do code maybe because it's less accessible like it's uh you need years of experience to do some coding but you can start some designs bad designs obviously but still you can start with just a few weeks of experience i don't know i don't know i i agree though we want to see as many designers as we can coding i think that makes for a better web overall yeah how uh how would you kind of sprinkle in a little webgl and 3js on top of an existing web app my guess is like you want to add just another layer of interactivity and a kind of a creative experience on top ah it's sad because i had the perfect answer to this during an um a meeting i did for me there are three reasons let's see if i can remember the reasons first it's really to serve the product like if you have a product and you want to sell it people need to to be able to to see that product but they are on a web page so how can you rotate around how can you see really the the field of the product where you will simply create a 3d version of that product a good example is this um this bike website maybe we can find it like easily wait i'm quite sure it's on the home page of 3gs let me check if we can find it let's see if there is a bike if the chat can help help us find this website it's a bike i don't know who did it who did this website and i can't find it unfortunately but well i think it was a great idea like you want to sell a bike you people want to see the bike through every angle instead of providing like a lot of videos a lot of images you just put a realistic render a render of the realistic 3d version of this bike on your website and then you can rotate around and feel the the bike and what they did great is that you can really have like a see the texture of the bike they did a great job a great job about that and uh and it's really realistic so for me it's really like a serving like a a product uh purpose then you have like this wow effect the wow effect is really like uh why did my website and why some some people asked for for it in uh to do it in in professional projects it's just to to um like when you have a brand you want to to um to how can you say that i'm getting tired here so i i have just i'm having struggle find the words but you want to to to that visitors of your website viewers of your website really feel the brand with an immersive experience like you want them to feel to to really like experience this this brand identity and what's better than the real uh immersive uh 3d website when you kill the can live inside interact with it uh that's all that's the second reason and the third reason i had uh oh yeah it's obviously like to to like visual visualization reason like if you want to make data visualization and you need a third layer well you will just simply use 3d it can be really useful to see the data it can be like for back office it can be to to see the so something you would not have seen using 2d interfaces so so it can be like a data driven purpose yeah that makes a lot of sense to me there's uh people are excited about the new features for the texture baking coming in well we'll just uh we'll find one more good question in here maybe uh do you teach do you talk about blender in the course oh yes and there is a two hours lesson so it's not a blender course still i think like webgl developers if they know how to use a 3d software it's a huge bonus in their skills like i had so many times clients uh wanted something but but contacting me and they were like but how how are we going to do 403 do we need like someone else i was like no don't worry i will take care of it so it's a huge bonus in the skills uh to be able to create your own models which is why i added like a two hours lesson about that and uh two hours it's it's enough to know like the basic of the interface blender is is quite hard to learn it became like much easier those past years and they did a great job but but it's quite hard but once you know how to use it you and you you will understand why it's like that so they made some strange decisions like interface decisions but once you know how to use it you're like okay that's why and you're so productive so i did this two hours video where you learn how to create a burger i thought it was a great example because there are some modifiers like mesh editing some materials but very simple materials you just put a color handle the roughness and the end you export it and then import it inside 3ds obviously because that's the the goal and by the way the new lessons also have i think i didn't recorded them yet so i think it's going to be like two uh two to three hours of blender at least maybe more so yeah you do learn blender in the sun still uh it's just like beginner stuff and if you want to learn more there is a lot of youtube videos and stuff like that to learn there is a lot of resources to to to continue learning a blender well i'm gonna have to check out the course i'm i'm very excited to to learn more about this stuff and i know where we're we're reaching up on an hour and i know it's late for you i want to be respectful of your time so i just want to say thank you so much for joining today and chatting this was really fun to hear more about your experience and to see some of the things you've built so thank you thank you thank you and thank you to everybody in the chat who's we really appreciate it oh sorry yeah thanks to you and uh and sorry for the dog noise i can see that uh that we can hear it because your your son is kind of muting when the dog is snoring so it's pretty funny and uh sorry we didn't answer uh every question i think we missed some uh don't hesitate to just ask us on on twitter and just mention the both of us and we will answer your question and uh and thank you everybody thank you lee and i see you around awesome sounds great all right thanks bye

Channel: Lee Robinson

Views: 4,437

Rating: 5 out of 5

Keywords:

Id: trEwdfuZQhA

Length: 58min 28sec (3508 seconds)

Published: Fri Mar 05 2021