- Hi, I am Sam from Prismic. And I'm here today with Bruno Simom. Bruno is a really incredible
creative developer who does amazing things
with 3D in web development. And today we're gonna talk a
little bit about the basics of 3D web development, how
to do it and what it is. So, Bruno, thanks very
much for joining us. - Thank you. So, I'm actually very new to all of this. I've never done anything with 3D, and relatively new to
web development as well. So to start, could you
tell us a little bit about what is Three.js? - Yeah, sure. Three.js has been around for
quite a long time, actually. To understand Three.js, first you need to
understand what is WebGL. Almost everybody on the web,
at least web developers, maybe designers have heard about WebGL. WebGL, it reminds you like OpenGL for people who has been
like playing video games, stuff like that, might have hear it. WebGL enable like having 3D. It's not just 3D, but let's say it's 3D inside your web browser. The idea is that you're
going to draw stuff in your browser inside
what we call a Canvas. And you can draw really,
really, really fast. Like you can draw billions,
maybe not billions, but let's say millions of triangles in just like a fraction of a second. And it's made possible because of the GPU, which is a component of the computer. - Okay, so I'm gonna pause
you there for a second. 'Cause there's only one
word that I've heard so far that I recognize, which is Canvas. - Canvas
- Canvas is an HTML element, Yes?
- Yes, exactly. You can draw, but on what
elements you will draw, it will be on the Canvas. Canvas can be used also to draw, I don't know, circle or stuff like that, stuff that has nothing to do with WebGL. But you can also draw
WebGL inside the Canvas. The idea is that you're going to draw, usually it's triangles. And you draw one triangle,
one other triangle, another one, another one. And after that you have hundreds
and hundreds of triangles. And all those triangles
will form something that will look like, I don't
know, it can be like a sphere, a face, a building, stuff like that. So this is the idea behind the WebGL. And it's good because
it can do it very fast, because of the GPU, it's
graphic processing unit. - So when you say drawing
inside the Canvas, WebGL is a language
that's doing the drawing, can you explain to me a little bit what's happening behind the scenes there? - It's a JavaScript API. - Okay. - See, it's just like you
have access to functions, variables, stuff like that. And when you use this variable,
you change this variable, then you use this function,
and then you have a triangle that will be shown up on your Canvas. - Okay, I've got an idea now. Thank you.
- Okay. And the idea is that
WebGL, well, it's awesome. You can do a lot of things. You can draw triangles,
you can draw a face, you can draw buildings, but
it's really, really hard, like way too hard. Like many people, I think
I started with WebGL without knowing about other solutions. I was like, "It's too hard,
I can't, just I can't." But then you discover
that there are libraries. And this is where Three.js comes. It's like a right above,
you have the WebGL. It's this API that lets
you draw on Canvas. And right above you have like
a layer, which is Three.js that will simplify the API so much. Like with just a few lines of code, you will be able to draw that sphere. If you want to draw a sphere
in WebGL, in native WebGL, you will need maybe
like 200 lines of code. - Wow.
- And it's complex code. Like at the end, when
you have your sphere, you didn't even understand
what you just did. And so, that's the idea.
(both laughing) And I started like that. I was like, "Oh no, that's too hard." And someone maybe, I don't know exactly how I discovered Three.js. But someone probably told
me you should use Three.js. I gave it a try. And with just maybe like
15, 20 lines of code, you get your sphere, and you can start playing around with it. - So when you started with WebGL, what's one of the most complex things that you would have made
before you learned Three.js? - [Bruno] What do you mean? - Like what did you actually succeed in creating with just WebGL? - I think I just did like one triangle. (Sam laughs) - Okay, I get it.
- It's such an achievement when you do your cute triangle, and you have a color in a
corner, a color in that corner, a color in that corner. And the great thing about that is that, the color gets interpolated. Meaning if you put blue
there and the red there, you get purple between those, and you're like, "Okay, that's cool." And then you go to bed
and you need like a week of holidays to be able to do code again. So yeah, I think I, no, maybe I did a cube, and that's all. - I mean, still sounds
really impressive, right? - No, it's not. - Okay, so Three.js adds
that layer of abstraction to make this all kind of practical. - Yeah, that's it. It's like a, so much easier,
and you have a documentation, stuff like that, a whole community. And you get regular updates, and yeah, just a few lines
of codes to get 3D stuff inside your browser. The thing is, WebGL, it's not only for 3D. You can draw triangles. If you put the triangles
at the right place, you get like like a 3D
buildings, 3D characters; to create video games, stuff like that. But you can also use it just for 2D. Because if you draw, I don't
know, like just two triangles, you get a square. And this square can be like top player, moving just like that. And you can have environment it's a, I don't know, like it's an
obstacle, stuff like that. And it's again, just two
triangles that make a square. But usually we use the WebGL for 3D. - Makes sense, and I'm just
curious, what is WebGL? Does it stand for something? - That's a good question. Web, well, (laughing) I guess it's just a web.
- I wanna guess web graphics language. - Yeah, graphic language. Actually, that's a great question on that. I don't have the answer. - We'll come back to that.
- I know it comes from OpenGL, that's for sure. 'Cause it's like a derivative of a OpenGL. But I don't know exactly
the meaning of GL. - Maybe it's like NPM, it
doesn't stand for anything. - Maybe. - Okay. So then, now that we're
talking about Three.js, what can you accomplish with Three.js? - If you like video games,
you can create video games. It's as simple. You can create 3D stuff. You can create video games. You can, I don't know,
if you have a product, and you want to display
your product on a webpage, you can have this product,
and the visitors of your, the viewers to your website
be able to rotate around, and move your objects, and
maybe start animating it. If it's a bike, you can see the bike running down the hill, stuff like that. So that's the idea. - When say you can make a video
game, are there limitations? I mean- - Yeah, it's mostly
performance's limitation. Like you get almost the same technology. You have some limitations
also like on the features you can really use. But it's mostly about performances. We don't have the same performances between the native application and this web application with WebGL. - Okay, I'm gonna you ask a question that might sound really silly, but like, when you're talking about performance, does that like, is there an equivalent to like a gaming console? Like, can you get the
performance of like an N64, of like a PlayStation 2? - Oh, that's a great question. I would say it's a little below PlayStation 2, maybe. - Okay. - Yeah, I'll think that. It depends on the games
we are comparing exactly, but let's say the early
PlayStation 2 games. - Wow, I mean, that's
very impressive to me. - That's pretty good. - Okay. Now there's another word, and I have a vague sense of what it means, but I'm hoping you can
help me understand better, is what is Blender and where
does it fit into all of this? - Yeah, Blender is a 3D software. So, the similar thing is about 3D clearly. The idea is that with Three.js,
you can create primitives. Like you can create cubes,
sphere stuff like that. If you want to create a house, maybe you will do like
your cubes that make like the global shape, and
then add some kind of pyramids, stuff like that, or maybe
some bushes with spheres. But it's kind of limited
by primitive shapes. If you want to do
something really complex, like, I don't know, if you
want to create like a face with the nose, ears, stuff like that, you won't be able to get
a good result if you use only spheres, cubes, stuff like that. The idea is that you're
going to use a 3D software like Blender. You will create the
object using great tools, like brushing tools. You will add textures, colors. You will add more shapes, do
a modifier, stuff like that. And at the end, you will export it in order to be able to import
it inside your Three.js scene. - So, what would the, like file format be? - There is like hundreds, really
a hundreds of file formats. Actually, there is no limitation. If you want to create
yours, it's up to you. If you are using a Blender, you can write your own
exporters using Python. And I did it for a very specific project. I needed this very specific data, so I kind of created my own file types. So there is like hundreds of file types. But currently we have a
standard which is called glTF. Don't ask me the meaning
of glTF, I don't know. GL, well, you still have the GL, file format, maybe I don't know. But a glTF is becoming the standard. If you want to get like a realistic result that looks kind of the
same between software, between WebGL, between video games, you probably should go for glTF. Because you will have like materials that are following the PBR, it's a physically based
rendering principles. It's just some algorithms,
some calculation, some techniques, that make
something looks realistic. Like you can have this
textures, metallic texture, roughness textures, stuff like that. And you will have very similar result between Blender and Three.js. Just to talk about Blender and Three.js, but also in the, I don't know, c4d, I don't know, maybe babylon, maybe in Unity, Unreal
Engine stuff like that, you might get the same result. But if you just want, I don't
know, maybe the geometry in order to create an
object composed of particle, you don't need glTF. You can use a FBX, OBJ, Poly, there are hundreds of formats. - But at a basic level you've
got many different formats that you can export from
Blender and you can import all of them to Three.js. - [Bruno] Yeah, that's-
- That's amazing. - Yeah. - How do you think for web developers, how do we make the decision whether or not to include 3D on a website? - It just depend on the project. Like if you have, I don't know, you want to sell a product, you need people to be
able to see your product. You can add photos. Photos are great. It's a good start. You can add videos. Okay, that's great. But if you want the user to
be able to, I don't know, to turn around the model, to change the environment,
stuff like that, you might need to
implement a 3D environment to be able to let the user
just look at it, look around. Maybe you can even use like VR in order to be able to turn around. I don't know, if you're
selling like a car. You want the user to be able to move in the car, out of the car. And with just a cardboard,
stuff like that, you will be able to do that. So if you have a product,
well, that's a good idea. But you can also use it, like, I don't know, if you're a 3D artist, you're doing like
modeling, stuff like that. Where you want people to see it, maybe you will put it on the
ArtStation, stuff like that, which are great website. But the best would be that the
people go to your portfolio, and be able to just look
at the models you did with the right textures,
with the PBR rendering, so that it's a realistic. So that's the second version. If you want to create games, because you can create games, you could use like Unity or Unreal Engine both are really great game engines. But I think the advantage
of having WebGL games is that you can access it
just through one click. You click on the your friend sent you, and you can access the
game, and that's great. Another performance on that greater compared to Unity and Unreal Engine but still you just click and
you can play with your friends. So it's great. So, if you want to do games,
you can also use that. And finally, I think
it's just to have fun. And for me it started like that. When I started doing WebGL, I was like, I thought I like to do 3D stuff. I like to do web development. I looked at the, like WebGL
project, and was like, "Oh, that just looks
great, I want to do that." So I was just, I wanted to
have fun and create stuff. So, it's more like a creative
need, you just create stuff. - I mean, it's funny, it can
kind of go either way, right? In terms of having fun with development, you might get started with
WebGL and kind of go on. I don't know, I'm gonna put this aside. But sometimes you get
into something like that, and you think, "Wow, this is so cool. I can do so much with this, it's amazing." - Yeah, the problem is that it can be hard to get good looking results. So you have to dive deep to grind until you get something cool. But yeah, that's the idea. The moment where you have something in 3D and interactive in your
browser, you're like, "Ah, I have ultimate power, and let's go!" (both laughs) - Okay, and then my last question is, if somebody wants to learn Three.js, how can they get started? - Well, obviously I would say
with Three.js Journey course, we will put the link right below. It's a course I created
a to learn Three.js. Why I did it, well, it's, when I started learning Three.js, we already had some good examples, but the documentation wasn't even done. Like the library was always changing. It was too hard to keep the documentation like up to date with the library. So it was really hard to learn. But right now it's become
like much more easier. You have documentation,
you have so many examples. We will put the link below again. You have some great
tutorials, some are free. And also the idea was like... I've been teaching for
many years, like in school, in French digital schools. And I like just to teach. And when I made my portfolio,
people were just asking me, "How can I learn to do that?" And so many people asked me that that I decided I should
create my own course. - Because your portfolio
is quite stunning. - [Bruno] Yeah. And for people who haven't seen it before, we'll also put the link to that. - Okay, yeah, let's put
the link below again. Yeah, it's like this
red car running around. And when I did this portfolio, I had like a lot of engagement. A lot of people asked
me, "How can you do that? How can you do that? Please teach me." They asked me for
mentoring, stuff like that. Okay, maybe, why not? I was thinking maybe it's
time to create a course. And the library Three.js was
getting like really stable. Like we get updates, we get improvement, performances improvements,
new features like every month. But the library was getting really stable. I was thinking like, "Right,
it's now, I have to do it now." So I created Three.js Journey, which is more than 30 hours course, where you learn the basics like how to set up your first cube, how to set up the camera, how to be able to move that camera. And then you go to more
advanced techniques with particles, with physics. You can add physics to your work so that the cube just
bounces with the sphere, stuff like that. And we talk about shaders. Shaders is the real power of WebGL. It's how to communicate with the GPU. So this main component for
WebGL in your computer, in order to create like really like stunning animation stuff
we just find like amazing. And obviously performance
tips, stuff like that. So it's a huge of course. But there are also, you
have to pay for this course. It's not expensive, it's less than $100. But you also have access
to a lot of good tutorials, free tutorial, I want to talk about those. We will put the links below. But if you go on Three.js Journey, sorry, if you go on the Three.js website, you will have access to a page which is named, useful links. Meaning that page is kind
of hidden, which is sad. But you have a lot of great tutorials. So again, we will put the links below. And you can learn for free with those greater tutorials too. - Awesome, and if somebody
wants to do your course, if they want to do other
Three.js tutorials, what are some of the skills
that you recommend they have before they get started? - Just JavaScript. Yeah, and I think for every tutorial you will find for my course and for the one that we
will put in the links below, you just need JavaScript basics. Obviously, knowing
mathematics we be helpful. Because you have to do some math in JavaScript, in WebGL, it's useful. I'm so bad at mathematics. Like I'm really, it has been
really a struggle for years. Because when I was in
high school, I was like, "I don't need math, I don't like math." I was the worst of my,
how do you say, my class? - [Sam] Yeah.
- Yeah. And yeah, I was the worst,
like I had a zero out of 20. - This is too real,
because all the time I like try to write a function that will resize an image
for me or something. And I sit down with pen and paper, and try to figure out
the trigonometry for it, I'm like...
(inhales and exhales) - Trigonometry, oh, no. (laughs) Sine, Cosine, SOH-CAH-TOA
you know those things, yeah. I had to relearn everything. So I'm bad at math, still I
got everything of this done, so it's possible, all right. So mathematics, if you know, it's better, if you don't, it's okay. About 3D, it's okay too. Most of the tutorials and the mine too, will just explain like
there are three axes. You can move on those axes. Those are arbitrary axes. What you need can be anything you'd like. In can be one meter, one kilometer. You will learn everything
in those courses, and in my courses. So just JavaScript basics
like variables, arrays, functions, loops, and
events, and conditions. And that's all. - Cool, well. I'm excited to see more
and check it out myself. And otherwise, thank you so
much for this explanation. I feel like I've actually
kind of understand 3D a little bit now,
which is pretty amazing. - [Bruno] Awesome.
- Thanks, Bruno. - [Bruno] Thank you.
