Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.
Transcript
Intro
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, take what you get. Okay. So, that was not funny and I apologize. 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 Ellie said, my name is Sara Vieira, which Ellie's one of the only people that can actually pronounce my name correctly, which I appreciate. Usually it's just something like Viera. Something like that, which I don't know.
[00:56] So welcome to my talk, I know it's 10:00 AM 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 made. Can you see my mouse? Yeah. 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, all together in an actual conference 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 want 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 was 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. So Remote is a company that helps companies hire remote workers with the normal vacation time, and you're not a contractor basically, which is quite nice. So we're hiring. Tell them I sent you. Actually don't. 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 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.
[02:38] If anyone's going to ask, can I use Blender on a Mac? You can, but it's painful as hell. It makes sounds that you didn't know a computer can make. And you think you know because of NPM, but trust me, you don't. So this talk, wow, it's been so long since I've done a talk. I was like, this? What's the name of this? This talk is going to be divided in two 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.
What's Blender?
[03:07] Okay. So if you've never heard of Blender, Blender is a free and open source 3D software. The reason there is an asterisk on 3D is because it actually does other stuff. It does 2D. It also does video editing, but the 2D aspect is not bad, but everything else is like, it's mostly known for its 3D aspect. It's free on open source, you can also write plugins and procedural stuff in Python, if you know Python. I don't. So there you go.
So let's go. I'm going to open up Blender and this is how it looks now. So if you have used it before, it looked worse, so much worse. Anyone here has ever opened Blender? Before version 2.8. Okay. So no one has seen how bad it was. So you don't understand 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.71. 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, like 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 Eevee and there's something called Cycles.
[04:30] Eevee is the same thing, not the same thing, but the same idea as Three.js. So it's not physically good. It 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. 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 switched to Eevee here, and it takes a while, and I come to the camera, this is how it looks in Eevee. So you can see that if I move it, the light 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 way worse than Unreal 5, let's not even go there.
Eevee. Eevee is this. Cycles is the one that makes your computer go pff. I don't know if that was too loud. So this is Cycles and you're going to be okay. 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 a thousand points of light. So it needs a really good graphics card or any graphics card. So MacBook is a no, no.
[06:05] This is the more realistic one, but it's not the one we're going to use. 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, imagine that you want to change a color or something. So there is a 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, open-source, EC Zero or 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.
Okay. 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 you see this has a circle, which I have no idea what it is. And it has another circle. There you go. That makes sense, because I name my stuff. I should have named it. But there is a button, if you click on the right side. Sorry I get issues with right from left and I have a license. So think about that for a bit. And you select hierarchy. This means that you 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 it. 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.
From Blender to the Web
[07:36] So I'm already in the things, Blender to the web, let me go to Public. So mostly, there are 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 going to use the other one because I love JSON. So glTF in bed is JSON file. It's a very scary, terrible JSON file, but it's JSON file. And something very important that you should always click is Apply Modifiers. And there was something else. Do, do, do. Include Selected Objects, because otherwise it's going to literally put your entire scene, which is not what we want. So I'm going to call it The Boy. And I'm going to turn on compression. Okay. Export glTF. Let's see what happens.
So I have this and let's open this file. And as you can see, it's a very scary JSON file. So this part is because it's an image, a texture and no one is ever going to read this, but let's pretend that it all makes sense. So the first thing that I want to do is I want to minify this even more. So I have cheat sheets and I want to use glTF transform. And this adds a Draco compression to it. So I am going to go to Public and Boy, and then call it, so send it to Public. No, no. There you go. The Boy that, okay. Draco whatever, the glTF. And this is going to compress it more. Okay. Say open. it should have been in Public. Ugh. It did the thing. Okay. So, where is it? It's 1.2 megabytes and this one right now, where is that? Is 406 kilobytes. So it just compresses everything really big, really a lot.
[09:33] 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 going to use the online tool. So I'm going to 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. Literally they will go to your house. It has not happened to me, yet. So here is the little fella. And here we have a very small set of code that you can't read, but I promise you'll be able to read it in the, you know what I mean, VS 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 side 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. So there are three things that you need to install, which I pre-installed, which is, so you need to add React Three Fiber and React Three Drei.
So Fiber is the, oh God, I forgot the name for the React thing that does like, React Native thing. Okay. React Three, you need that. And then you have React Three Drei, 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 explore a default. I don't know why I keep doing live coding in talks. Because I hate myself. Oh, okay. Okay. Okay. So now we should get an error. One day. Is it compiling? Corresponding this. No. What? Don't do live coding kids. I've never seen that error. And I've seen a lot of errors when it comes to Three.js. A lot of them. I don't know what this means. Cannot find, does not… does not recommend. Okay. So this is probably an issue with the fact that Three probably got updated since I last used it. And now it is just open in GitHub. So let's figure this out together.
[12:24] 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. 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 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. Mainly when it's something that you don't know how to fix that it's like, cannot read proper. No, that's fine. You just put one of those like, so yeah, how is everyone doing? Do you ever just, you do something that you haven't done in a long time, you're like, I wonder why I haven't done that in a long time and then you do it. And then life is pain and you're like, oh, I remember now. Like I know when you haven't-- oh, thank God.
In case of a doubt, it's yarn. I mean, in PM, 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 in React Three Fiber we need a canvas, right? So let's import the canvas from React Three Fiber and this is telling React and everything that everything inside of here is not DOM, it's like WebGL basically. And let me close this canvas. And now it should show us a really sad version of it. 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. Like real life, if there's no light, you're going to hit your foot on something and you're going to step on a Lego and you're going to cry. Not that this has happened to me. And what don't we have?
Speaker 3: Light.
[15:00] Sara Vieira: Thank you. Thank you. I'm sorry. I need interaction right now. So I'm going to open up my little things and I'm going to add two lights here. So one of them is an ambient light and an ambient light has no shadow. Actually an ambient light doesn't make any sense in real life, but it's like, there's just a point of light that spreads evenly everywhere and makes no shadow. And the spotlight is like 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, not a little bit, but we have some lights and we have a little bit of shadow. 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 Three Drei has to just display your 3D model. So I'm going to use this and I'm going to close it here. And I'm actually going to 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 a stage. Like the lights in your face. Like literally this. Cool, cool, cool, cool.
[16:18] So there's a bunch of environments as well, which you can check, if I delete this, I think it's going to 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.
3D Model animation
[16:38] So this is looking good. 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 just groups the thing. And then when you move it moves everything inside of it. That's why, when you're in Blender, you make things parent of things. And then everything is just everything. There you go. Good talk. So one thing that we need to do is to import something called use frame, and I'll explain what it does and I could consult I log it, but I'm not going to, because it's going to kill my computer. So what use frame does, it did not import it, did it? It did. Okay, cool.
What use frame is, this doesn't work like the normal DOM. 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. So let's come here and let's just get the position and rotation of the element. And 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 going to slightly float up to nothingness and it's going to disappear eventually. So every frame it's moving at 0.1 up, and there is also 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 going to 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 details. Animations. There we go. 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.
[19:21] So what is Math.sin? Math.sin 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 then it was like, so now you need tensions and sins. And I was like, f*ck. Okay. So if I can explain this to you, everything's going to be fine. So a Math.sin is something that does something like this. It goes from a number from minus one to one. And what you need to pass to it is something that keeps on moving. And in this case, we're using state at elapsed time, state.clock at elapsed time, which says how much time has passed since you've actually started rendering this scene. And so it just does this and then you can multiply it by something or divide it by something. This thousand is just at a random number. This has no point in here, I could remove it and do something else. And then I'm multiplying by Math.PI. I could multiply it by 10 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? Because that's not creepy at all. Imagine like, you're just drinking your coffee on your mug's like, what are you doing?
[20:58] Okay. So let me reload. Because sometimes, 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 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, sure, let's go to the math of high school again, where I failed. It 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. That's basically what we want it 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 changed 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. And everything that we're not used to is hard. I know. Docker, I still don't understand Docker. Let's not talk about that. I still don't know exactly what Kubernetes does either. That's what I have. I am two minutes out of time. So you can download the Blend file, the projects, whatever you want from that URL, which is not complete. So it's github.com/saravieira/blender-to-the-web, which has two I's. Don't forget the second either. That's a common mistake. I will not judge you if you did. It's a very common thing. Why does it even have two I's. Really dumb. I am @Nikkitaftw on Twitter with two Ks because I like to confuse everyone. And I recently made an Instagram and I called it TheEvilNugget. And you can follow me there for all the stuff that I do in 3D. If you think they're cute or cool or whatever. I survived and the pandemic and this talk. So I feel like just that deserves a round of applause.
[23:21] Speaker 3: Amazing. Can we step into my office please?
Sara Vieira: Okay, cool. Which one? Which side?
Speaker 3: Oh, whichever one you like.
Sara Vieira: Okay. Oh, I get to choose.
[23:29] Speaker 3: Have a sit, stay a while. You can ask questions on Sli.do at Sli.do. The code 2225. But I think we might have a couple in the pipeline already. Yeah. Okay. So for those of us with Macs, are there renderfarms or equivalent we can offload to?
[23:47] Sara Vieira: There are a lot of, wait, sorry. I'm just going to go back to my computer, because there's a free one, actually.
Speaker 3: Free one.
Sara Vieira: There is a free renderfarm from Blender. So Blender free, renderfarm. 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, that lights up the entire f*cking house. But yeah, so you can use this. It's free. If you don't want to use this one, you can Google Blender renderfarm or 3D renderfarm and there's so many of them. Yeah. There's a lot of them.
[24:28] Speaker 3: I don't know if you want to do this. Maybe not live. Could you make it spin slowly?
Sara Vieira: Spin what? Like this? Yeah. You can just add the, I'm just going to, you could have mentioned, you could have said that while I was here.
Speaker 3: Yeah.
Sara Vieira: Let's see if I can do it. Who knows? I already embarrassed myself.
Speaker 3: They did say please.
Sara Vieira: I know it's very British to say please. In Germany they would be like, it's your job.
Speaker 3: Make it spin.
Sara Vieira: You have to make it spin.
Speaker 3: Do it.
[24:57] Sara Vieira: Okay. So rotation that. Why? Which I think it's this one and still the same thing. So you can do this. No, that's no. German.
Speaker 3: So how is Germany?
Sara Vieira: I'm just going to copy it from here. That's how it is. 0.01 and it spins.
Speaker 3: While you're there.
Sara Vieira: Yeah.
Speaker 3: Do you have, and I know this is a hard question.
Sara Vieira: Yeah.
[25:30] Speaker 3: A favorite nugget?
Sara Vieira: A favorite nugget?
Speaker 3: A favorite thing you've made? A favorite character?
Sara Vieira: Oh, a favorite thing that I've ever made in Blender?
Speaker 3: Yeah.
Sara Vieira: I don't know. Let me, maybe.
Speaker 3: Do you love all of them equally?
Sara Vieira: No. God. F*ck no. I've made a lot of cursed stuff, girl. Some stuff that you're like, God, that's worse than code.
Speaker 3: That's cute.
Sara Vieira: Thank you. I think my favorite one is this one.
Speaker 3: Aw.
Sara Vieira: 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.
Speaker 3: Incredible.
Sara Vieira: Thank you.
Speaker 3: Thank you Sara, for your talk. Give it up for Sara, everyone.
by
React Summit 2022