Loading summary
Transcript107 lines
- [00:00]
A
Sometimes you open up a website and.
- [00:02]
B
It'S so good that you're left wondering.
- [00:04]
A
How the heck did they pull that off?
- [00:06]
C
I would go to Blender, try some stuff out, and then I export those images, put them in sketch, do a composition. And so it's like jumping all the time from one software to another.
- [00:17]
B
How do you push past clean design and create something that has true game feel?
- [00:22]
C
I don't do auto layout or anything. It's just like almost like a sketching process just to get a feeling. And then you maybe try different states and then from there I jump back to codes and again I'll do it. So dirty and ugly. Like in this case, I just exported these images for the content and then I animated the wrapper.
- [00:43]
A
Welcome to Dive Club. My name is Rid.
- [00:46]
B
And this is where designers never stop learning. Today's episode is with Xavier Jack and he's going to give us a little tutorial about what it takes to bring.
- [00:55]
A
Web experiences to life using 3D.
- [00:58]
B
But he was also the one behind the super viral original Amy website.
- [01:04]
A
So to start, I asked for a.
- [01:06]
B
Little behind the scenes of that creative.
- [01:08]
C
Process as many things that happened in my life. It started on Twitter. So I was posting some weird experiment. I got a grant to do these experiments with hand tracking. I was sharing these things and then actually Dennis sent me a message. He was like, oh, I love this blah, blah, blah. With so many things on Twitter, sometimes it doesn't go anywhere at that right time. But after a few months, months, he texted me again and he's like, hey, we're gonna do our new website. And something that I really like about Dennis is that he sings really out of the box. And already he came up with a really cool concept to tell the story of one full day of using Amy visualized by gradients. And then he was going into detail with gradients. He meant gradients that represented the sky. So in the morning it would be a gradient representing the sunrise. And then midday, different one. And then sunset and evening. So, of course, this conversation is about how these type of websites come to life. And I think sometimes we get a bit stuck in the micro interactions and the design. And I think all those things are really important. But when there's a really strong concept, I think that really ties things together.
- [02:21]
A
It's cool to see this text too, because I interviewed Dennis, whatever it was like two years ago, and I remember him talking about being on a walk and basically being able to close his eyes and see the website. And sure enough, like, this message is the Perfect description. Description of what he was able to see in his mind. Really, really cool. Behind the scenes.
- [02:39]
C
In most projects, what I like to do is I call it gray boxing and that's how they call it in game. So I remove a lot of the detail and I just use basic shapes and basic animation and the interactions. So I don't think we ended up using anything, any of these. But like, I guess it was like our first communication. We can never work together. So it was like, how can we translate what you're saying? And like, my point of view, this didn't make sense at the end because of course, at the top of the scre, there's not so much in view and we made it so you have to scroll for things to happen. And this ended up being a video.
- [03:13]
A
I know we're going to get further into this, but just to even give people a frame of reference, like, I look at this, I'm like, this is dope. I have no idea what you use to make this. What tools even are used in this type of creative process.
- [03:25]
C
I love that we're having this conversation because there's also been this discussion lately on Twitter about the creative process and design and if designers should use codes or design tools. And for me, it's really interesting because for a long time I've been prototyping with codes for some really specific things. And this is actually most of my projects. I start with doing a gray box of the main interaction or the main flow, and then I use codes. I don't even know if I'm using any big framework here or just HTML and CSS. And then like the background is 3js. That's what I use. I have my own component library. But just to get started fast, it's nothing fancy. It's just like, let's make something really fast, but where we can get the energy.
- [04:14]
A
He says, not something fancy. As it like rotates and collapses and expands and it's like it's a real.
- [04:22]
B
Quick message and then we can jump back into it. If you're like me, then, you know, adding motion to your designs is the easiest way to make them feel premium. The thing is, I'm not a motion designer, but that's why Jitter's new AI Brainstorm feature is a game changer.
- [04:38]
A
I just drop in my design and.
- [04:40]
B
Then get instant motion ideas that I can tweak, refine and make my own. It's seriously so easy to animate your work with Jitter. I cannot recommend it enough. Just head to Dive Club Jitter to try it out today. You probably already know about paper shaders.
- [04:56]
A
It feels like every time I open.
- [04:57]
B
Up Twitter I see somebody creating some new beautiful halftone effect. But did you know paper uses real CSS as you design? That means your layouts are already code, so you can just one click, copy as, react and paste into your coding agent of choice. Paper is shipping more of their core editor every single week. And it's becoming so clear to me that this is what the future of design tools should look like. So if you haven't tried it yet, head to Dive Club Paper and start designing today.
- [05:28]
A
Okay, now onto the episode.
- [05:30]
C
So then it's never made it to the final website, but I really got stuck with this main concept of a full day of using Amy through the scroll. And I remember this app, but I don't know if you know this.
- [05:42]
A
Oh yeah, this is one of my favorite interactions, this little clock scroll.
- [05:45]
C
I mean, this is, I don't know, 2010s. I don't know, like it was like this micro blobby app. I think they were so ahead of the game also with the plus button at the left. But in this case, the inspiration was this clock that would pop up when you were scrolling. When we were building the Aimee website a couple of years ago, it was when the dynamic island came out also. So usually it starts with a concept like in this case, Dennis coming up with a concept of a full day of using Amy. But in this case it was the past website. And then I usually I will go to sketch. I use sketch. I know I'm weird, but anyway, I will just sketch like some really quick visuals. You know, I don't do auto layout or anything. It's just like almost like a sketching process just to get a feeling and then maybe try different states and then from there I jump back to codes and again I'll do it. So dirty and ugly. Like in this case I just exported these images for the content and then I animated the wrapper. So. So yeah, that was the idea that the scroll bar itself, it expands into this.
- [06:58]
A
This is a really interesting concept and you spent a decent amount of time exploring it. And yet I've never seen it before because it didn't make it to prod the creative process.
- [07:05]
C
I find it so personal also that it's a bit like, oh, I'm sad because I know it's a great concept and it's not going to make it. And I will also agree in this case it could take too much attention from the main product. So it did make sense to get rid of it, but on the other side, you can always make a video and put it on Twitter. And I did that and I posted it and it got a lot of traction. So I guess that's at least something that will fit the creativity ego or something. But then we went back to the. Probably the most important, or what I find the most important, which is getting the general flow of the whole thing together. So we started thinking sections and, like, which elements and layouts there's gonna be that point. Then I started, like, just jamming again. Like. Like trying stuff. Yeah, Like, I tried to do a low fidelity, for example. I know this looks horrible, you know, but, like, should we have a white background and then you see the sky through a box? Or like, I mean, you need to get started somewhere. Or then like, at some point, we're like, okay, no, let's just do the full backgrounds and it doesn't look anything. And then we were also thinking, okay, so we want to show features, but we also want to show the different parts of the day. So how are we. We're going to communicate this? So, good morning. And then, like, maybe some key points. But then we still wanted to show features more in detail. I mean, but this is like, all jamming and trying stuff out. This is not reboxing because we added some color, but in this case because of the skies, it just makes sense to add some color. But, like, we were a bit like, okay, how are things going to flow from while the users. So then, like, we're just trying things.
- [08:57]
A
These transitions are all three Js too. That's how you're making this happen.
- [09:00]
C
This one's all three Js in the background. And then, like, I mean, this brings other conversations. So at this point we were having more, like, abstract conversations. Like, does it really make sense that the liars are splitting into different things and coming together, or should they always be together?
- [09:18]
A
It makes sense. But something that's kind of standing out to me is how intentionally you were thinking about how the site should move and transition and come to life. And so a lot of the visuals and definitely the copy was pretty low fidelity. And yet, you know, that movement in between sections and that last concept you shared was really high fidelity. Like, that part felt pretty real in. In my mind. And you were pushing on that and, like, making sure that you were nailing down just the. The liveliness of the site pretty early, which. That stands out to me, you know, like, that's kind of different than how I would typically work.
- [09:54]
C
I Guess you're right. And I mean I've even given talks about this. I think that's a really personal thing. I don't think there's a right or wrong way. But it just because of my own creative process, I started doing more like coding and digital design for websites just using Photoshop. And then at some point I got into 3Js. But I got into 3Js just because I wanted to do motion graphics actually. But because I couldn't run Cinema 4D in my old computer, I was like, okay, well I can just do it with codes. But I was just trying to make motion graphics with codes. And at some point after doing that interactive graphics for a long time, I realized the full potential of doing something Interactive or with 3js is to add a lot of interactivity. Otherwise you might as well just use a video, right? I mean this is over the years coming into this realization. So then I realized I can do interactive graphics. So that's my strength and that's something that people cannot do with video. So why not use this unique, different advantage to the maximum. That's why usually I think the first thing it's concept. And in this case the concept was really good from the beginning, which was full day through scrolling. But for me then the main thing is how do things feel in terms of interaction. I'm now also into really more minimal websites. So maybe there's not a lot of interactivity through the whole website, maybe just a piece, but then I will think of the interaction in that piece, you know. But in this case it was clear from our conversations that we wanted something that felt like a full flow together. So that's why it made sense. We first need to get this right.
- [11:40]
A
No, it does. And that's kind of my interpretation of the trend today too is maybe there's a little bit less full screen motion animation. Although it still is quite popular. I'm thinking like the antimetal website. This is the most recent example that I've seen where like the full screen really immersive scroll effects, almost kind of Amy esque where it worked, you know, like it had its viral moment a lot of people talked about. I'm sure it was great for recruiting and everything. I have kind of swung towards like maybe really simple layouts. But I still so much power in this like game feel that you talk about and motion and liveliness. But I am kind of trying to put it more contained in like a section of a website or maybe some kind of a container. But the importance of motion is still it just is the way to differentiate between something that feels clean but standard and then something that feels, like, really, really special.
- [12:33]
C
I don't know if everyone has to do it. For me, it's almost my language, you know, so it's, I think, part of my personal touch. And I see more and more people doing it and I welcome everyone to do it. But I also like to be practical. Like, sometimes if someone wants to do, like, a really clear website. I mean, the new Amy website, like, it's super minimal, and I also get the point. So I think Dennis messaged me and he's like, you're not going to believe the new website is like, I love it too. I can appreciate it, too. And actually, maybe later I can show a couple of websites for a second that I've done myself.
- [13:10]
A
Can we show it now? I'd like to see a little bit of the creative direction. I'm kind of curious.
- [13:13]
C
I mean, it just like almost like an experiment.
- [13:16]
B
Oh, you did this.
- [13:17]
A
I love this website.
- [13:19]
C
And it's just really playful and, like, they have these, like, debug modes. And the main thing, it only has a cta, which is join the waiting list. And there's like a bit of a description here, but the whole point was to be a bit mysterious and get the word outs that something is going on. I mean, a lot of people signed up and it got featured in a couple of design indexes. I think it did the job, you know. And like.
- [13:43]
A
Yeah.
- [13:43]
C
And then the other one, I kept this 3js extension, which is called three tools. And this may be more like a typical size kind of thing. So as you saw, like, even while it's loading, you can scroll and it's not gonna block it. And everything else, it's quite plain. There's not even animations. But then there's like, it's three tools, so it's a 3js inspector. So the idea here, it's. I mean, the logo, it's like three things. So it symbolizes that it's 3D, and it's also like a T, but also like, there's these blocks that let you see inside. So conceptually, it's like you're. You're. Yeah, inspecting it. And the interaction is just so simple, but it's just satisfying to put it some cow. So I like to incorporate also 3D in these really small ways. But I think the idea of going all over the top, like we did with the Aimee website, it can also be. I mean, it got so many views and everyone talked about It. So it also takes sometimes to go really extra.
- [14:44]
A
I think it kind of misses the point to point at the Aimee website and be like, well, yeah, they, you know, the pendulum swung back to something that is a little bit more predictable for a reason. And that was always the way to go. Because the fact is that launch website, everybody saw that website, everybody clicked through that. Like it captured design, Twitter and honestly, like all of tech for a good month, right? Like, that was the website. And even if you would have something that has a higher conversion rate, it wouldn't. Like the current website wouldn't have went viral. You know, even the second website going mini viral was only because it was juxtaposed with the first website, which everybody remembered 100%.
- [15:23]
C
And I think that's also design. No, like knowing how to make noise and how to make people talk about something for whatever reason. I mean, and it was not for the wrong reasons. At the end, people discovered that there was this new calendar thing. And I talked with people and I was like, get a website before. And a lot of people were like, oh, there was a website before. I just heard of Amy because I saw that website. So it really puts the product also on the map for a lot of people. So.
- [15:49]
A
And there's definitely a correlation between like how far you can go with the animation and just the maturity level of the company. Like even the desktop FM site that you just shared. Of course, that makes total sense. Go for this kind of mystery. Make something really interactive and crazy. It reminds me of like the. The variant website when they hadn't launched yet, where it's like, it's fun, right? It almost is a fidget toy. And then it's like, okay, maybe here's your pre seed or your seed website. And now it's more about like attracting talent, perhaps. And you want to be really creative and immersive and eventually you grow up and you start hiring an enterprise sales team and you go really predictable and copy forward and enterprise Y. And that's like the natural progression. I think it makes a lot of sense.
- [16:27]
C
It makes sense. I want to think also that there's space to do micro campaigns, even if you're big. And I mean, before doing the Amy website, I did a lot of 3D websites for marketing and these were really big brands. HBO, Spotify, Adidas. And they're big, big brands that they've been doing marketing for decades and they know what they're doing too. Or. Although I don't know how effective those websites were. But that's maybe another conversation. What I meant is they do campaigns and like, even if you're a big brand, it makes sense to have these specific moments where you can be fun and like, it doesn't need to be only about information and conversion.
- [17:09]
A
Yeah, that makes sense. I mean, you're making me think of even like the Shopify Edition sites that they roll. They have no real need to do that and probably is more of a talent play almost.
- [17:18]
C
They use the website to go through the speech. So I thought it was really an interesting use of the website.
- [17:26]
A
You have me hooked on the Amy story a little bit as somebody who was a big fan of that website. So I'm wondering if there's more to this creative process that you can show.
- [17:34]
C
So I was just showing that we were prototyping the call flow and how things moved from one to another. And then we started going a bit more high fidelity. So we started adding a bit of detail and like, how about if we add some interactions also with the ui? But to be honest, this didn't go too far, but I wanted to share it just to show how messy the process can also be. This all of a sudden actually got us into this crazy rabbit hole of how should we frame the app? So we went into like, oh, should we do like inflatable frames? And then we went like in these long conversations on like, should, should it be plastic? Should it be frosted plastic? Should it be like there were so many versions and maybe to talk a bit about the process again. So a bit how this would work is I would go to Blender, try some stuff out, and then I export those images, put them in sketch, do a composition, and so it's like jumping all the time from one software to another. This went nowhere until really later in the project. So I think now we can go more into a really specific micro animation which. So for me it was really important to get the flow right. And for me, game feel, or I call it Interaction Feel, when it doesn't have to do with games. ICAD made this open source library and it's called Wiggle Bones. So Wiggle Bones already existed before and it's used in real time for games. And basically it's a way of making objects move smoothly but without too much code and without pre making the animation. So for example, if I move this, it moves smoothly. And basically what you do is in your 3D software, you create this, it's called armature or skeleton. So first you would create the shape and then you add these bones, they're called. And then if you Add wiggle bones when you move the root bone, which in this case it's a blue one. The other ones follow smoothly and like you can also use this to. With more complex shapes. For example here, like if you do it like this, then it can feel more like a pillow. So I had already done this and then because we were doing skies and actually in some of the branding from Open Purpose, they had already done some balloons. We were like, how about we do the Amy logo as a balloon and we make interactive with this technique we already knew. Then I made like a 3D model of the, of the balloon. And then so these are the same bones as you, like what I was showing before. And then you need to do this thing which is called weight painting. We added the wiggle bones and some other magic and they felt like this. And then this became kind of the signature interaction for the rest of the websites because we added a lot of balloons in the skies.
- [20:40]
A
I've spent so much time clicking the Amy balloons in the skies.
- [20:45]
C
It was also difficult to work on it because sometimes I would also get stuck playing with it.
- [20:50]
A
Sure, man. They were one of my favorite fidget toys on the Internet were these balloons.
- [20:55]
C
Thank you. I appreciate. Yeah. So yeah, then we started adding things together. I think here I'm showing also things that we didn't use. So yeah, we were. Yeah, no, so we. In the previous website they had some kind of COVID flow also. I don't remember exactly if it looked like this, but we were really stuck in the idea that we wanted to show some features like this. So actually I want to give a shout out because there were two guys that later helping me out and they were helping with this also, also Adrian and Thomas. And this was more like in the production phase.
- [21:33]
B
Hey, really quickly let me tell you about the all new Dive Talent Network. I've hand assembled over a hundred of the most talented designers and builders that I know so I can recommend them to my favorite companies. So if you're listening to this and you're open to new opportunities, the Talent Network is anonymous and super low pressure. It's just an easy way to see what's out there without having to post on social media. So if you're interested in joining or maybe you're looking for your next hire, head to Dive Club Talent.
- [22:03]
C
At the very bottom, we wanted to add this genie effect and we wanted the website to be stacked into a namey logo scene. I wanted to put this part also because it again shows the way that I love to work. So we have this idea. And then I first did a prototype only with gray boxing. So I made it go into a box, you see. And like the content doesn't make. Like it's not the final content, but just to get the feeling right, you know, every time that I came, like at this point the website was kind of complex. I started a new repo and I just did this. And we approved this before we moved forward, still without the colors. Just like slowly adding the 3D model and then only then we added it to the final website.
- [22:54]
A
Okay, I'm gonna pause you for a second here because I'm in this stage of my life right now where I feel like I can basically take over the world with Claude code and just five coding and one shining things. Cause it just keeps working. Yet this still again, it just kind of exists like over here for me. I'm like really? Like really? I could just tell AI to do something with 3js and start describing these crazy 3d effects and it would just work like you're tell telling me, like that is vibe codable at a high level?
- [23:24]
C
I think if you know what you want. Yes. When we do the demo, you'll see because I know what to ask. But I guess that's with everything, right?
- [23:32]
A
Yeah, that is what everything. It's like can. You just have to be able to be a good communicator. So maybe that is what it is. I need to have the fundamental understanding of what is possible with 3D on the Internet and then maybe some ballpark of language to use. And I don't know. This is. I'm excited to try. I've never done anything like that before.
- [23:49]
C
It's not so complicated. It just maybe because the concepts are different than creating a website or an app, because you have a camera, you have lights, you have materials. So it's different primitives than websites or apps. But once you understand how it works and of course you need to know what's possible.
- [24:10]
A
I'm kind of antsy now. Can we jump into a demo? I mean, I feel like anything that you can show in this world will be new and fresh and exciting to me. So I really just want to see what it takes to do anything in this category.
- [24:22]
C
It's going to be crazy, but it's going to be fun. Let's say we want to do the Balloon of Dive. So I already downloaded your svg, so what I would do first is I would go to Blender. I don't know how familiar you're with Blender. Please feel free to stop me at any point. But yeah, this is how it looks. I cannot explain all the commands because it would take forever. So if someone really wants to get into Blender, they will need to learn the basics. So this is a new file and I have your log somewhere, I think in Projects dive. Yeah. So let me close all this. So I have an SVG here. So you can nowadays just drop it here and say import svg. And now you don't see anything. But it's because it's really small down there. But if I do, I scale it really big. And again, I'm not going to explain all the commands because we would take forever. But I'm just now rotating it so it faces the camera and scaling it again. There's the logo. And I'm also going to do this center to volume. But again, this is like more like general Blender stuff. But I'm just putting it there. So now we have it as a. It's still a curve. So now in Blender, what you need to do, because this was an SVG and you can always press spacebar in Blender and it's almost like command K. So a lot of commands, I don't know, you just do spacebar and you can write here what you need. So I want to convert it to a mesh and just do convert to mesh. It's basically like comment T. Okay, this just is something we need to do now in Blender you can enter in edit mode, which is with tab. So now I can edit this geometry and I can click A for all. I'm gonna explain it and like, it's fine.
- [26:07]
A
This is a rabbit hole that you have to like thoughtfully go down. I totally get it. I'm just enjoying seeing. See?
- [26:14]
C
Yeah, yeah. To see how. How it would look, at least I'm gonna do here face modes and then select everything E for extrudes. And now this makes it sick. So now it looks like this. Okay. And then what I need to do now is I need to remesh it because that's gonna help me then sculpt it. I guess you just need to believe me at this point. So modifier here and it's called remesh. And then you need to do sharp. You see, it's changing. It was triangles before and now it's like quads. Did you see the difference? So before, if I don't do this, it looks like this. And this is really bad for sculpting later. But if I add this modifier, it makes it into this geometry which looks like squares and If I add more, then it creates more squares. So this is basically what I beat. Now, usually then, because it's a bit like Photoshop back in the days that it's destructive because I'm going to apply this. What I do is I duplicate collections here and I do duplicate collection. And then now there's two of them and I hide the previous one, so it's kind of having a backup. So now I have this and I can apply it. And now I cannot go back in this one. Then I can go into sculpting. And in sculpting, there is. Wait, I need to do here right click auto smooth. And that makes it just look smoother. But in sculpting, I can now go into this cloth thing and then with this clothing, I can change it to inflate. And like, now if I'm gonna. I'm gonna make the strengths much smaller. And like you, I should play with that, that stuff. But like, this is like when I'm driving to the right. It's the. It's doing this.
- [28:00]
A
Cool.
- [28:00]
C
Just something you need to know that it's possible. And then like, so now it's gonna. Yeah, let's say we're here now. It looks a bit like bad quality. So you can add here another modifier, which is called subdivision surface, which, what it does is it smooths everything, basically. I don't know if you're appreciating the difference, but it's smoother. So at this point, I'm just modeling, to put it one way. And then I'll be like, okay, I want to know how this would look. Right. Usually I'm going to save this really fast. I tried it before today. So at this point what I would do is still I would add a couple of materials. So you go here to shader editor. So I'm going to remove this here and I'm going to add a new node which is principate bsdf. This is the basic material. So this basically. And then you need to click here for render mode. Wait, we missed something. Also, we need to add a light. So I'm doing command A and other lights and I'm going to click area and I'll move it here and scale it up. And then I'll move it a bit here and rotate it like this a bit. So it's already looking nicer. Without the light, we cannot see the materials. That's why I had to to add it. And now we can just like change the color here. So, for example, we can go blue. And usually for some really basic lighting that looks nice, you also want a backlight here, or it's called rim lights. Probably you know about this because I know you have a nice. Nice lighting in the studio, actually. So this is something. But like this, like, I don't know if you could see it, but like it creates this light here in the back.
- [29:47]
A
That inner light is nice.
- [29:49]
C
Yes. So you can see where it finishes. Probably I went a bit too hard on it. So we have this one in the back and this one at the top. Maybe I want to make this one a bit stronger also. And there's some other parameters, this unit to get used to it. But basically most of the times you want to play with metallic and roughness. So actually metallic most of the times you don't want to touch too much. Just think roughness will make something really like a mirror. So you can see how the light is super sharp now. And the more I move this to the right, the more it gets. Like, if it was smoother, does it make sense?
- [30:26]
A
Yeah, it's kind of like diffused, almost exactly.
- [30:29]
C
That's also a word for it. So then what I would do here, if I was doing a bigger project is I would set the background to transparent, which actually you do here. Coming to film and then click transparent. And I would just. And actually just if someone wants to get into Blender, what I like this is like more specific, but I like to put the lighting into standard and then I like to change the look to high contrast. And actually, I think we're still missing a bit of light here. Let's make it look nicer. So anyway, I'm going to open it in cursor and now we're just going to telcursor set up a basic vite project with vanilla JavaScript. I think that's enough.
- [31:20]
A
Vite is one of those things where it's like in the BUN category for me, where I know they're important. I couldn't describe how they work, but I know that I need it.
- [31:28]
C
Yeah, I think it's just like the easiest way to. If you don't want to use Next JS or anything complicated. This is a really, really simple way to have a project that only has like a public folder where you can put assets and then a source. And we're gonna remove most of this. So it's like the. The most basic stuff you can get. So this is how it looks now. So it's just gonna tell it. Can you remove the counter and content for now or. Yeah, and content let's see what it does. Have you been by coding a lot?
- [32:06]
A
Oh yeah. I ship a PR pretty much every day.
- [32:09]
C
Yeah, everyone is becoming coders. I like it.
- [32:11]
A
Yeah, I mean it's like I'm having more fun right now than at any point in my career. It's addicting. It's absolutely addicting.
- [32:18]
C
Cool. Well, so remove the things that came up with the templates. I'm just going to say it's, can you add canvas and 3js, make the canvas fixed and taking the full window size, something like this Canvas.
- [32:37]
A
Talk about that word. Is that like required in order to render 3Js?
- [32:41]
C
It's just something to know. Like there's not more to it. Like in order to render WebGL or Web GPU in HTML websites, you need a campus elements. There's no more than. There's no more.
- [32:55]
A
That's, that's enough for me. One more clarifying question for somebody who's just like, they have no idea, like this is the first time they're seeing any of this kind of stuff. We're using WebGL and we're using three JS a lot. What's the relationship between those two?
- [33:06]
C
WebGL is a low level API to use the graphics card from a browser. So that's how you can render shapes and objects really fast and in 3D. In order to do that you need to talk to the gpu. And yeah, this is like an API. So a set of methods and calls that you can do in JavaScript in the browser to talk to the GPU. But that's really theoretical. But basically that's the methods that you need to call in order to render 3D stuff. And then three JS abstracts all of that into an object oriented way. So if you could use WebGL directly, basically you need to send instructions like, okay, now clear the screen. Now render this triangle. No one wants to be doing that. So with 3js you can do things like having a camera, having a scene, having a mesh. A mesh is any type of object that you can render on the screen. Good that you stopped me here because those are actually important concepts that maybe I was going to skip.
- [34:19]
A
Yeah, I'm trying to like just compare. Let's just create a, a general framework. Like it almost kind of feels like the difference between writing like raw jsx vs using like react.
- [34:27]
C
I would say webgl is even more low level. Yeah, okay.
- [34:32]
A
Okay, that, that is, that is helpful. Now I'm getting it.
- [34:36]
C
Yeah. Since we're talking about this, it's really good that you brought this up. The basic things that we're going to need. Even if I don't, even if I explicitly asked for it, but it already created a scene and the camera and the renderer. That's the basic things you're going to need if you want to do render something with three js.
- [34:53]
A
Okay.
- [34:54]
C
If we only have that, we're not going to see anything on the screen. So I'm going to ask it, can you add a white box just to see that this is working. So now to create a mesh. And then the mesh, it's going to have a box, geometry and the basic material, but we don't need to write all of this. So as you saw, it created a geometry and material and then the box is a mesh using this. So if we come here now, we can see the box already. So probably easier than you thought already. No, like, is it, like, making it more approachable already?
- [35:29]
A
It's definitely making it more approachable. It doesn't look very 3D or cool, but I can see how up until this point I am totally capable of doing this.
- [35:39]
C
Cool. So now let's add the balloon that we created. So how the process goes now is actually I like to create yet another collection, so I'm going to duplicate it, but I remove the lights and this collection is going to be the one that I export. So I will usually call it export and paint it in a different color. And then what we need to do now is go to exports and then we need to choose GLB here or gltf. Now we need to tell it where do you want to export it? So in my case, it's going to be codes and then here, and we want it in the public folder. And then it's really important coming here to include and tell it only to include the active collection. And then that's pretty much it. So if I click export now in our repo, we're going to see here that there's this new asset which is called type gbl. And now I'm just going to tell Cursor to render this gbl. Hey, can you load gvl? And I'm going to say slash GVL and add this to the scene. I think that should be enough if.
- [37:01]
A
This actually really loads, like, all right, this is kind of fun. I think a lot more designers could be playing with this.
- [37:08]
C
Let's see if it loads or no. I actually have this extension. There's a new one that is. It's loading. Wait. Yeah, it's not public, but there's another one now. But it helps me see what's going on. So I see that it's loading. So yeah, let's do this. Now I'm going to tell it. Please remove the box because it's on top. And then let's keep all of this. And if we don't see anything it's because we don't have lights again. So let's say, hey, can you add two and they're called rect lights. And then one closer to the camera looking at the object, the other farther from the camera also looking at the object. Let's see if this makes it.
- [38:04]
A
And the reason that you didn't export with lights is because presumably you want to have have more control over them in code based off of like how you're manipulating the balloon or something like that. Like why did you hide them from blender and bring them back in here?
- [38:18]
C
So there's no proper standard between 3D software and there's so much 3D software. GLTF is trying to standardize a lot of things, but lights are definitely not standardized. So we all wish that there would be a workflow where you could just make something in blender and somehow export it and that it would export it 1 to 1 to 3 JLS. But the reality is that you need to just bring some geometries and kind of reconfigure things manually most of the times. So this is working. I don't know what's this white thing, but is this a camera? I think it might be a helper for the camera for the red lights. Can you remove the helpers? But yeah, the model is already here and then like it's a lot of tweaking also. So I like the camera more at 45. This is like things that indeed I know because I've done a lot of times. So this is basically the fob which I right now I don't know what it stands for, but yeah, so it removed now the helpers. If I do 45 it's going to feel like it's closer like you see. And then I can. Now we can Change the rect light 1 intensity too much high. Something much higher. That's too high. Yeah, and I like it a bit also higher.
- [39:48]
A
Can we try to one shot some kind of interactivity like you know, clicking on it or moving it like or spinning it. I know what's possible there. I just don't know how hard it is to get there. And I'm kind of like this new bar that I have and I was like what is one shotable? You know, like how much could you actually. One shot with three js. Given some kind of a workable asset from Blender.
- [40:10]
C
If you want to do wiggle bones, then there's this process which is called creating an armature and doing weight painting. But it's also quite automated in Blender. So basically what you would want to do. Well, first I'm going to move this a bit here, but that doesn't make too much of a difference. But basically you do add armature and just single bone. And then this is going to create an armature that lets us animate it. And now basically if I click here, I can see behind. And now basically I can just take the tip of this bone and then I can click E and create new bones. So basically I'm just creating four more bones like this. You will need to believe me. Oops, that's wrong.
- [40:59]
A
I'm just smiling and nodding. It's cool.
- [41:01]
C
But I was wrong. Did you see? I was drawing them from there and I want them from here actually. Okay, yeah, I'm selecting that one without noticing, but like here and then make sure that I'm getting this one here. And now there's this thing which is called automatic weights. So basically I click these two things actually in the other order, which matters. And then I say armature deform with automatic weights. What users need to believe now is that if I move these bones here, now this moves with this, if that makes any sense. So that's what happens now. And now I can export it again to the out here file exports glb. And now it's still going to work the same. We have the armature. So now I'll go here. I'm just going to copy the link to Silverbone because it's not such a popular library. I think Cursor doesn't know about this, but I'm just going to give it the link. Hey, can you add wiggle bones to the armature in the glb? The add bones manually, keep the parentage bone as root. Let's see if this works. I mean, but until now there's. Yeah, now we have hundred lines of code. So. Okay, now the thing is, for this to work, we need to move the root bone and we still didn't do that. But I'm going to try it like this. So yeah, so you see that it's already.
- [42:50]
A
That's cool.
- [42:51]
C
Like this. And now we can animate the root bone and it's already gonna animate In a nice way. So let's do something simple so we can be like, can you make it so when I press spacebar, we rotate the root bone 360 degrees on Z so that's the vertical axis. And we can say, use GZA for this. So it uses an animation library.
- [43:30]
A
Oh, that is cool.
- [43:32]
C
Yeah, we could expand much more, but.
- [43:34]
A
I can already tell you can just go in every direction with this. This is really interesting.
- [43:39]
C
There's a lot of tweaking and trying stuff out also.
- [43:43]
A
But yeah, I can tell you have years of tweaking and trying stuff out under your belt.
- [43:49]
C
Yeah, because maybe I'm used. It feels as natural for me as HTML or css, but I like people does react more complex stuff that I do with this, if that makes any sense.
- [44:00]
A
I'm really grateful that you came on just because for the first time, I don't know, like, it's just feeling so much more attainable for me to learn these different tools and technologies not only with Vibe coding, but even just having AI help me do research and figure out how to use these tools and like, what specific method to use if I want to accomplish something in Blender, for instance. And so I don't know, I feel like you gave me just a little taste of what's possible and some of the core language to use. And I'm hoping that designers watching can really run with it because you can already feel that the ceiling is so incredibly high when you're working with these different tools.
- [44:36]
C
It's been great. Thanks for having me and keep in touch.
- [44:39]
B
Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Marvin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list and at Dive Club Partners.