From Blender to the Web - the Journey of a 3D Model

Good morning, everyone. I want to say that I have the sniffles, but I got tested and it's not COVID, so the worst you're going to get is a cold, which, I mean, take what you get, right? Okay, so that was not funny and I apologize. I mean, I think I heard like two laughs. Thank you. I don't know who that was. I can't see any of you, which is nice. Okay.

So, yeah. As Elie said, my name is Saru Wieda, which, Elie's one of the only people that can actually pronounce my name correctly, which I appreciate. Usually just something like Vieda, something like that, which I don't know. But yeah. So, I'm going to do my talk. I know it's 10 a.m. and we're going to be looking at Blender, which is a thing that a lot of you have not seen. And if you have seen a lot of years ago, I promise you that it looks better. It looked really bad. And that's why no one used it. So I started doing Blender in the mid-pandemic or something, I don't know, when everyone started doing their hobbies, basically.

And so this is one of the things that I make—Can you see my mouse? Yeah. So this is one of the things—Also, I brought a mouse because I'm that person now. So this is one of the things that I made and what we're going to try to do today here, together as a family, altogether in an actual conference, is—Wow!—is that we're going to try to bring this little boy, which I will gender as a boy, apparently, to the web and try to put it on a website. Okay, so, who am I? My name is Sara. Sara—whatever you're going to call me, I don't care. I work as a front-end developer at a company called Remote, which is very confusing to tell to people, when they're like, where do you work? And I'm like, I work at Remote. And they're like, I know you work Remote, but where do you work? And it just keeps going back and forth until one of us gives up, and it's like, okay, fine. I don't care anymore. But, yeah. So, Remote is a company that helps companies hire remote workers with, like, the normal, you know, vacation time and you're not a contractor, basically, which is quite nice. Yeah. So, we're hiring. Tell them I sent you. Actually, don't. That sounds like terrible. Do not tell them I sent you. And I love to do stuff in 3D. I started using Blender, like I said, in the middle of the pandemic, and I kind of fell in love with it. So, all these things that you saw, I made them with my own hands, and I have a Windows computer, if anyone's going to ask, can I use Blender on a Mac? You can. But it's painful as hell. Like, it just, it makes sounds that you didn't know a computer could make. And you think you know because of NPM, but trust me, you don't. So, there's a talk... Wow. It's been so long since I've done a talk, I was like, what's the name of this? Talk is going to be divided into parts. The first part, we're going to go to Blender and just export the little fella. And then the second part, we're going to jump into the web. Okay. So, if you've never heard of Blender, Blender is a free and open source 3D software. The reason there's an asterisk on 3D is because it actually does other stuff. Like it does 2D. It also does video editing.

The 2D aspect is not bad, but everything else is like... It's mostly known for its 3D aspect. And yeah, it's free and open source. You can also write plugins and procedural stuff in Python, if you know Python. I don't. So, there you go.

Let's go. I'm going to open up Blender and this is how it looks now. If you have used it before, it looked worse. Like so much worse. Like has anyone here ever opened Blender? Before version 2.8? Okay. So no one has seen how bad it was. So you don't understand like how good it looks now? You're like, this doesn't even look that good. No, you don't understand. I beg you to Google online Blender 2.7 UI. Okay.

So this is my little mug and there are mostly three views here in Blender. So this one is the one that I have right now is just for you to see the meshes which are the little a cube, a ball, whatever it is, and everything you have in the scene. And then there are two render views. And there's something called E.V. and there's something called cycles.

E.V. is the same thing at not the same thing, but the same IDS 3.js. So it's not physically good. This is kind of imitates light and how light should bounce, but it figures it out by, I don't know, AI and Python. It's probably not AI. It's just a bunch of if statements. I mean, what is AI? A bunch of if statements. And so this thing is new which makes it completely doable to use it on a Mac because it doesn't actually do all of that stuff. So if I switch to E.V. here and it takes a while and I come to the camera, this is how looks in E.V. So you can see that if I move it, the light kind of does this shadowy, weird thing. And that's because it's calculating it in real time. If you think about game engines like Unity or Unreal or something like that, it does the same thing but worse. There you go. I don't know if anyone has seen Unreal 5, but it's way worse than Unreal 5. That's not even going to go there. So yeah, E.V. E.V., this cycle is the one that makes your computer go. I don't know if that was too loud. So this is Cycles, and you're going to be okay. So yeah, this is Cycles, and what Cycles does is imagine every beam of light in this room, it literally calculates where it bounces and where it refracts and everything for each single one of those lights. And every light has like a thousand points of light, so it needs a really good graphics card. Or any graphics card. So MacBook is a no-no. So yeah, this is the more realistic one, but it's not the one we're going to use. So yeah. Let's go back to Eevee so my computer doesn't die. And I wanted to mostly just explain this. And I wanted to show you something as well in here, so like, imagine that you want to change a color or something.

So there is this little tab here, and I have it at orange. And let's make it blue or something. So this blend file, if you want to play with it, it's completely free. This is zero, whatever. And you can just download it, do whatever you want. Please don't draw anything weird on him because he looks so happy. But apart from that, yeah.

Whatever. So one very important thing is to know how, let's say you downloaded a model from the internet, like Sketchfab. The internet. And you want to export it somewhere. So the first thing is that any mesh can have several meshes in it. So this has a circle, which I have no idea what it is, and it has another circle. There you go. It makes sense, because I named my stuff, right? I should have named it. But there is a button. If you click on the right side. Sorry. I switch. I get issues with the right from left. And I have a license. So think about that for a bit. And you select the hierarchy. This means that it will select everything in it. So if I click G to move it, you can see that it moves everything in it. Okay. Cool. So let's export. So file, and you can click export. And for the web, you should use gltf. gltf is a format that's mostly used for the web. Okay. Cool. That's it. So I'm already in the thing. So Blender to the web, let me go to public. So there are mostly three types. So there's a binary, and there's a gltf file. People will tell you to use the binary, because it's slightly smaller. I would as well. But the other one is just pure JSON. And this is a talk, so I'm gonna use the other one, because I love JSON. So gltf embed is a JSON file. It's a very scary, terrible JSON file, but it's a JSON file. And something very important that you should always click, is apply modifiers. And there's something else. Do, do, do. Include selected objects. Because otherwise, it's gonna literally put your entire scene. Which is not what we want.

So I'm gonna call it the boy, and I'm gonna turn on compression. Okay. Export gltf. Let's see what happens. Right? Okay. So I have this. And let's open this file. And you can see it's a very scary JSON file. So this part is because it's an image. Like a texture. And it's just... You know, no one is ever gonna read this, but let's pretend that it all makes sense, right?

Okay. So the first thing that I wanna do is I wanna minify this even more. So I have... I have sheet sheets. And I wanna use gltf transform. And this adds a draco compression to it. So I am gonna go to public, and boy, and then call it... So send to public. No, no. There you go. Boy, that... Okay. Draco, whatever. The gltf. And this is gonna compress it more. Okay. I say open dot... Should have been in public. It did the thing. Okay. So... Right. Where is it? It's 1.2 megabytes. And this one right now... Where is that? Is 406 kilobytes. So it just, like, compresses everything really big. Really a lot.

So the first step of this is that we need to transform this gltf into JSX. And we can do that using an online tool. Or you can do that using the command line. But since I have internet, I'm gonna use the online tool. So I'm gonna drop it here. Why did I open my entire thing again? This was not a good idea. Okay. So open... It's like, no... It's all my pirated movies. You can't pirate stuff in Germany, by the way. They will come at you.

Like, literally. They will go to your house. It has not happened to me yet. So here is the little fella. Right? And here we have a very small set of code that you can't read. But I promise you will be able to read it in the J... You know what I mean. The s code. There we go. So let me copy this. And the first thing I'm going to do is paste it over here. So this is the site, and we have this little coffee mug, which we don't care about. We're going to kill it with fire. And we're going to put the little funky person here. Oh, now he's a person. Wow. Okay. He got upgraded to person. That's great.

There are three things that you need to install, which I pre-installed. Which is... So you need to add React... Come here. Three. React 3 fiber and React 3 dry. So fiber is the... How... It's the... Oh, God, I forgot the name for the React thing. The React native thing. Which is the... It makes... Okay. React 3... You need that. And then you have React 3 dry, which is a set of helpers that help you with a lot of stuff. Because they're helpers. They're good like that.

Okay. So I have a model, and it's a component, and I can't export a default, so I'm just gonna... I don't know why I keep doing live coding in talks. I hate myself. Okay. Okay. Okay. So now, we should get an error. One day. Is it compiling? Uh. Uh. Corresponding disk. No. What? Don't do livecoding, kids. I've never seen that error, and I've seen a lot of errors when it comes to 3JS. Like a lot of them. I don't know what this means. Cannot find... Does not name on disk. Does not recommend... Okay. Okay. So this is probably an issue with the fact that 3 probably got updated since I last used it, and now it is just open in GitHub. So let's figure this out together. Open file in remote. And let's come here, and let's go to the main... See? I was smart enough to at least push this. So that's a good thing. Okay. Let's copy this. Paste it in here.

That was not a paste. Sorry. This is a German keyboard. Jesus Christ. A lot of stuff happened there that I don't know what it meant. But yeah, welcome to German keyboards. Okay. So let me run Yarn again. And all we can do is really just hope for the best. Okay. We did not. And it's all right. Their mouse has buttons that do things. Will you work for the love of God? It's doing this to me. And I apologize for wasting everyone's time. But trust me, this is way worse for me than it is for you. So how's everyone doing? You ever just like, you do something you haven't done in a long time? And you're like, I wonder why I haven't done that in a long time? And then you do it. Right? And then life is pain? And you're like, oh, I remember now. Like when you haven't, oh thank God. In case of a doubt, it's Yarn. I mean, npm, it's the same. Doesn't matter.

Okay, so you still don't get... God, I need a moment there. Okay, so you still don't get anything. And that's because to render anything into react-3-fiber, we need a canvas. Right? So let's import the canvas from react-3-fiber. And this is like, this is telling React and everything that like, everything inside of here is not DOM, it's like WebGL, basically. Right? So let me close this canvas. And now, like, it should show a really sad version of it. Which like, it's just... It's like... So this is supposed to happen, by the way. I'm just very awkward.

So what is happening right now is that everything that happens in 3D needs light. So if there is no light... Like, real life, right? If there's no light, you're gonna hit your foot on something, and you're gonna step on a Lego and you're gonna cry. Not that this has happened to me. Yeah. And what don't we have? Thank you, thank you. I'm sorry. I need interaction right now. So I'm gonna open up my little things, and I'm gonna add two lights here. So one of them is an ambient light. And an ambient light has no shadow. To think of an ambient light doesn't make any sense in real life. But there's a point of light that spreads evenly everywhere and makes no shadow. And the spotlight is these things that are ruining my eyes right now. So that casts a shadow. So right now you can see that we have a little bit of, like, not a little bit, but we have some lights, and we have a little bit of shadow. Okay.

That looks cool, but does it look cool enough? No. So what we want to use here is something called a stage. And a stage is something that React 3 Dray has to just display your 3D model, right? So I'm gonna use this. And I'm gonna close it here. And I'm actually gonna import this from a component that I made, which is about the same thing, but I added some props to it. And I already made a PR component, stage. There we go. So what a stage does is that it just makes everything look better instantly, because it creates a little, like... You know, like a stage. Like, you know, like... The lights in your face. Like literally this, right? Cool, cool, cool, cool. So there's a bunch of environments as well, which you can check... If I delete this, I think it's gonna show me the type definitions. It is not. But there's something called, like, dawn, for example. And this basically downloads images from the web to just put an environment on it. I tried them all. The one that looked better was night. So this is looking good, right? We have the little nugget boy there. But what if we animate him? I know.

I know. I know. Okay. So we can do this. Together as a family. Okay? Good. So as you can see, this ref here is marked to a used ref, so it means that we have access to the entire group. Think of a group like a div or a G in SVG. So it's just a it just groups the thing, right? And then when you move it, it moves everything inside of it. That's why when you're in Blender, you make things parents of things, and then everything is everything. There you go. Good talk, right?

Okay. So one thing that we need to do is to import something called used frame. And I'll explain what it does. And I could console.log it, but I'm not gonna because it's gonna kill my computer. So what used frame does, it did not import it, did it? It did? Okay. Cool. What used frame is, is that when you're this doesn't work like the normal DOM. So every thank god, every time you look at it for every second, there are 60 frames. I mean, depending on your computer, obviously. But there are supposed to be 60 frames. So this runs on every single frame. There's just nothing happening right now because nothing is happening right now, right?

So let's come here. And let's just get the position and rotation of the element. And if the okay, let me just explain the position. So the position x is this. Y is this. And z is the one up at your face. So if I want to just move it up slightly, I can just add 0.1, or 0.01. And it's gonna slightly float up to nothingness, and it's gonna disappear eventually. So every frame it's moving at 0.1 up. And there is also like mathematical functions, like math.sin and stuff like that that do stuff like this. But I made a couple of functions because... There we go.

Okay, I copied this thing twice. Okay let me just use this now, I don't need the mouse anymore. It did its job. And I'm gonna import this wobble function, and I will show you what it is. Let me import it. Import wobble from back... No, it's not back. It's here. It's here, with all of our ctl animations. There we go. This is it. God I've been broken by the music scene of Berlin. This is the music I sing now. So now it wobbles. Look at that, thank you whoever made that sound. So what is math that's in, math that's in is that thing.

I failed this part of math and I thought I would never need it in my life. And then I was like you know what I should do 3D. And he was like so now you need like tangents and sins and I was like fuck. So if I can explain this to you everything is going to be fine. So a math that's in is something that does something like this. It goes from a number from minus 1 to 1. And what you need to pass through it is something that keeps on moving. And in this case we're using state dot elapsed time, state dot clock dot elapsed time, which says how much time has passed since you actually started rendering this scene. So it just does this. And then you can multiply it by something or divide it by something. 6,000 is just a random number. This has no point in here. I can remove it and do something else. And then I multiply it by math dot pi. I could multiply it by ten. And then it will just be faster. But then it will go down too much. So yeah. The rest is just experimentation.

Okay, cool. So that's cool, it wobbles. That's cute. Isn't it cute? It's the cutest thing and it works. So then I'm dividing it by a lot. But you don't have to do that.

So then I wanted to do the exact same thing on the rotation. And now it does this. Because it's like, thank you. I think that was a different person. Thank you. I think the one came from here and the other one came from over there. I don't know. I can't see any of you. So you're fine. You can do whatever you want. And I want to do something else. Which is like, what if it looked at you, right? Because that's not creepy at all. Imagine, like, you're just drinking your coffee and your mom's like, what are you doing? Okay. So let me reload. So when you like, HMR. Sorry. English is not my main language. I'm just going to use that for the rest of my life. The position gets screwed up. So now, it uses the mouse to tell what it is. And it looks at you, right? On the X and the Y? And what this uses is that it takes the state of the mouse. The position of the mouse on the X and the rotation, right? And lerp... So let's go to the math of high school again, where I failed. It just uses two numbers and tries to go between them in a very slow and steady motion. And this comes from Three.js, which is quite cool. So yeah, that's basically what we wanted to do.

So now we have this. Let me just make it bigger so that we can see it. And I need to find this to close it. And there we go. So now if you open this page, there's a little one here. And as you can see, all the shadows and everything, they change with the position, which means that it's rendering in real time, which is quite cool. And this was about what? 56 lines of code. So it's doable. It's just something that we're not used to, right? And everything that we're not used to is hard. I know, I, Docker. I still don't understand Docker. Yeah, let's not talk about it. I still don't know exactly what Kubernetes does either. So yeah, that's what I have. I am two minutes out of time. So you can download the blend file, the project, whatever you want from that URL, which is not complete. So it's GitHub.com, slash my name, which has two I's, don't forget the second I there, that's a common mistake. Blender to the web.

I will not judge you if you did, it's a very common thing, like why does it even have two I's. It's really dumb. I am Nikita FTW on Twitter with two K's because I like to confuse everyone, and I recently made an Instagram and I called it the evil nugget, and you can follow me there for all the stuff I do in 3D if you think they're cute or cool or whatever.

And yeah, I survived. And the pandemic and this talk. So I feel like just that deserves a round of applause. Amazing! Can we step into my office, please? Okay, cool. Which one? Which side? Oh, whichever one you like. Okay. Oh, I get to choose. Have a sit, stay a while. You can ask questions on Slido at Slido.do. The code is 2225. But I think we might have a couple in the pipeline already. Yeah.

Okay. And for those of us with Macs, are there render farms or equivalent we can offload to? There are a lot of – wait. Sorry. I'm just going to go back to my computer, because there's a free one, actually! Free one? There is a free render farm from Blender. So Blender free render farm. I hope I don't get spam. This is actually free. So a lot of people, basically what they do is they download an app, which I do have it on my Windows, which is a very beefy gaming computer that has all the lights and stuff. The lights up the entire fucking house. But yeah. You can use this. It's free. If you don't want to use this one, you can Google Blender render farm or 3D render farm. There's so many of them. Yeah. There's a lot of them. I don't know if you want to do this maybe not live. Could you make it spin slowly? Spin what, like this? Yeah. So you could add the... You could have said that while I was here. Let's see if I can do it. I mean, who knows? I mean, I'm already embarrassed myself. They did say fine. I know. It's very British. Say please. In Germany, they would be like, it's your job. Make it spin. You have to make it spin. Do it. Okay, so rotation that Y, which I think it's this one, and do the same thing. So you can do this. No, that's no. German. So how is Germany? I'm just going to copy it from here.

That's how it is. 0.01. And it spins. While you're there, do you have, and I know this is a hard question, a favorite nugget? A favorite nugget. A favorite thing you've made? A favorite character? Oh, a favorite thing that I've ever made in Blender? Yeah. I don't know. Let me, I don't, maybe? Do you love all of them equally? No, Godfuck no. I've made a lot of cursed stuff, girl. Some stuff that you're like, God, that's worse than code. That's cute. Thank you. I think, I think my favorite one is this one. Aw. Which, there is no video, but there's also a video of him just waking up. And I think this was the favorite thing that I've ever made. Incredible. Thank you, Sarah, for your talk.