Game Development with Threejs

Hi there, my name is Anderson Mancini, and thanks for joining me at the JS Game Dev Summit. We will talk about 3JS game development and how you can start your journey learning it. So let's dive right in.

By the way, I'm a 43 years old creative developer from Brazil, and I'm founder and CTO of Neltix, a company that is based in Brazil, of course, as a creative studio, and I work with companies seeking ways to increase engagement through digital interactions, and I would say that's why game is usually part of my daily routine at my work. And I want to talk to you about how did I ended up knowing about 3js anyway. I usually say that I'm a developer trapped in a designer body, like I have worked with UI and UX designer since I was 18, but my real passion was always 3D modeling. I love this stuff. And I was seeking a way how could I combine my 3D knowledge modeling skills that I gained over years with my gaming experience. And about four years ago, I decided to bring my 3D modeling knowledge to the web somehow. And I feel that most websites in my country especially, they lost their appeal after a macro media flash became obsolete. And macro media flash was the one thing that I was using when I was creating my stuff before starting in this journey. And then I became aware of 3GS. So it was incredibly hard to find someone to hire for my company at that time. And then I decided to learn it myself, to give it a try. And what started as this learning endeavor very quickly became this passionate obsession. And that's why I'm so excited to be here, to give you some tips on your journey, try to teach you how to improve your way of learning 3GS, and to show you that learning this can be both accessible and very rewarding.

So let's talk about what is 3GS anyway. So 3GS is an open-source JavaScript library. It is used to create 3D interactive experiences on your browser. And it was created by Ricardo Cabelo in 2010. And now it is maintained by hundreds of developers all over the world. I would say me included somehow. And it abstracts the complexity of WebGL, which is like a very complex way of creating 3D for the web. But basically that means that we can run GPU-accelerated apps without running or installing anything extra on your computer, meaning no extra plugins are needed. And it is cross-platform, meaning that your work can run on any browser. And I would say more than browsers. Any modern browser can support 3GS. And we can extend it by using physics libraries, animation libraries, and many more stuff. So you can add functionalities to this application, to this library. And let's see how it looks on code.

So I can show you a simple example, very simple example, how it looks on code. This is a simple example. I know it is not exciting at all to have a rotating cube on your screen, but I want to show you how small code that you need to render a rotating cube on your screen. And everything that is written there, it is basically trying to mimic something that happens in our real life. So if it was in real life, that will be like a studio or like a movie recording studio.

So to start, you need your scene. So you need to have a place to record your movie. Then you need like a camera to record things. Then you need a renderer so you can see what is being recorded by that camera and then you have actors or objects that will be recording. And this is exactly what is happening in those lines. So it is very straightforward to understand using this comparison.

And I also want to talk about React 3 Fiber. So React 3 Fiber, it is more suitable to you probably if you are more familiar with React framework and we will see why. React 3 Fiber of course is a React renderer for Three.js. It was created by Paul Hanschell in 2019 and now it is maintained by hundreds of developers for point members community. And you can build your scenes using components to keep everything more readable and more organized. We will see an example in a few minutes. So your components can be reused. It has an extremely extensive ecosystem with a lot of new things being released like every week, I would say. And we have a lot of helpers created by other developers that are available for free for us to use. And we can see like an example on code. This is the exact same, not exciting at all rotation queue but now we are using React Tree Fiber. And as you can see, it is much more organized and compact because it is using components to structure everything. So of course, where the main, the MyBox component it is using a composition. So everything that is needed for that specific component is compacted or packed in this component isolated thing. And then you can import that on your canvas and you have the same scene. And here's an example of a comparison between FreeJS which is already short and React ThreeFiber. So of course it is simpler because he is using components but what is happening here, it is like basically the same code. Everything is just organized in a different way so you can get better understanding and better usage of the library. And I'm not trying to convince you to use React ThreeFiber or React, I'm just saying the benefits of using compositions on your work.

And what is another beauty about components because they are easy to reuse. So if you want another cube on your screen, all that you have to do is just to duplicate that line and then you have another rotating cube. And of course you can pass props. So you can change properties from the inside component from outside, which is great to keep everything organized.

And of course, as I talked to you, we have components from Dray. Dray is a collection of growing components like N helpers that you can import into your scene and it is free to use. So if you want to have orbit controls, like I have in this example, we can rotate around now in that scene. All that we have to do is to import orbit controls from Dray library and it is that simple. And if you want, for example, to have clouds on your project or your game, you don't need to code it like someone already did it for you. You just import the cloud component also from Dray and then you add to your canvas. And it is simple as that. And Dray has more than 150 other helpers like this for you to use. So the secret is to know them by visiting the React TreeFiber documentation.

And let's see now some more exciting examples how you can use React TreeFiber and FreeJS and what can you build with this library. So let's see. Those are some examples of my recent projects. And as you can see, we have like the journey visualization. We have product configurators like the GSI Games Sim Industries with that beautiful wheel controller for like car simulation. It is amazing to see things like that running on your browser without installing any plugin at all.

And those are other two examples like one for Dairy Farmers of Canada from Neltic's recent project and Immersive Studios Automotive Showroom. And those are all powered by FreeJS. And again, they run with a great performance without installing anything extra on your browser. You can visit those addresses, those links just by searching on them on Google, if you want. And if you want to see more examples like this you can visit my website under salmansinha.dev or freejs.org which is amazing for getting examples. They have a lot of showcases on their home page. So you definitely should take a look at that.

And of course, we are here to talk about games, not projects. And yes, you can create games using FreeJS. And let's see some examples of games created using this library. Here we have two amazing examples from Mercy and Mitchell. And they are so beautiful that it's hard to believe they run on your browser and you don't need to install anything extra. So they are really, really good. And here are some more examples. We have the Elysium by Blizzard, which was released, I guess, last month. And then we also have Choo Choo World by Ellusion. Those are also great examples. Some of them are also multiplayer. So you should definitely take a look at those links and see by yourself how they work and how beautiful they are. They really look like an application, not a website. And for more games like this, you should also check this website, WebGamer.io, which has a lot of other examples of games using 3Ds. And I want to take this opportunity to talk to you about creative development, not only the game development. So I'm creating this game with my friend Leandro Castanho from Argentina. And this will be released soon.

So I want to show you a little bit of the creative process. So we start by gathering a lot of references and trying to define a style for a game. Of course, we had this idea to build a pinball machine game using FreeJS. And we used, in this case, artificial intelligence to grab references and potential designs on the game.

Then we start by collecting assets or creating new assets for our game to create the board and the overall mood we want for that specific game. And then we create a visual concept, which is, of course, experiment evolves, experimenting with life, with the visuals of it, and the overall guideline for the game. And then finally, we create the board, like the final layout for the pinball machine. And this is a gameplay prototype. It is just to test the physics and the overall interface. It is, of course, currently under development, so be sure to follow us on Twitter or YouTube so you can follow the progress on this game that we are creating.

So the physics works, but nothing else for now. But this is a little bit of the creative process of creating a game. And so you ask, is 3JS a game engine? No. It is kind of. The short answer, it is no, because it is a generic 3D renderer. So things like physics, like animations, you need to do yourself. But as I showed you, we have a lot of things that you can add as an extra to the 3JS to transform it in a game engine. And if you want to really dive in into the game development using your browser, you should also know about PlayCanvas and Babylon. They are more focused webGL game development. I will not go over them here, because it is another course, let's say. But you should definitely check them out.

And I want to share with you a little bit of my learning path. So let's see how we can start learning 3JS. This is my path. I want to tell you that it works for me. I followed this when I was learning it. But your path might be different. So use it with caution, OK? We can start by mentioning that you need to have HTML and CSS knowledge to start with this. This is a mandatory thing. And also JavaScript knowledge, it is a requirement, because everything that we'll be creating will be using JavaScript in the end.

So I recommend this course. This course can teach you all the basics of JavaScript. If you never saw JavaScript before, you just search for Learn JavaScript Free Camp on YouTube. It is a great course.

And if you want to use React TreeFiber, of course, React knowledge is a requirement. And I recommend you to search for Joy of React course by Josh. It is a paid course, but it has hours and hours of videos and exercises. And it is beginner friendly, so if you never saw React before, don't worry. You'll be covered. And it is another great course.

And then, after learning the basics of JavaScript, I recommend you to learn 3D software. And why? Because creating a 3D game in a 3D library without having prior knowledge of a 3D software will be very challenging. So I encourage you to learn the basics of any 3D software you want, just to have an interface to play with when you want. And I recommend the Blender 3D, of course, because it is free. And it is the one that I've been using all over the years. It is very popular, so you can find a lot of free courses and a lot of free content on internet. And you can start with this tutorial by Blender Google, and this will teach you all the basics that you need. And you can also learn Spline these days. So Spline is a 3D software used to create 3D interactive experiences in your browser. So it supports native 3JS and React 3 Fiber export. And just to mention, this entire 3D software were created using 3JS or based on 3JS. So you can see the power of it. It is pretty crazy, isn't it? So it all runs on your browser. You don't need to install anything. So you should definitely take like a look at this, at least. And after learning the basics of the 3D software, what I recommend is you to follow two possible paths. So you want to learn using free resources. Would require more discipline and patience from your side. Or you can learn by using paid resources to speed up things for you in a more structured way, let's say. And let's start by the free resources.

If you just type like 3JS, learn 3JS, 3JS tutorials on YouTube or any platform, you will find a lot of great things to learn from. I would start with the 3JS documentation because there's a lot of things covered there. So it is a great place to start. If you like books, this Discover 3JS book can cover all the basics that you need. And if you are like me and prefer videos, there are tons of videos teaching the basics of the 3JS. And you have a great free course. Just search for this 3JS tutorial for absolute beginners, and you will be covered.

And of course, if you want to pay resource, like if you can afford it, the most complete course for sure is 3JS Journey by Bruno Simon. Like, it is everything that you need in one place. It has more than 72 hours of video, and you can go from the absolute beginner to advanced. And this is the way that I ended up using to learn 3JS. I would say that everything that I know came from this course, so it is amazing to be honest. So, you should definitely take a look at this.

And moving forward, after you have the basics of 3JS knowledge, then you can study more specific game development courses. And we have a lot of them as well, because 3JS, it is in the field for quite some time, more than 10 years. So a lot of other developers, more experienced than us, can teach us. So, you have, for example, Nick Lever course, 3JS game development is very specific. It is a paid on Udemy, and you also have Baba Sensei course, just released free on YouTube, which is great. So, they are very great ways for you to start game development. And remember to start with the easy ones and not the most difficult games, so you cannot get frustrated with yourself.

And after creating your first basic game, you can expand your knowledge, and you can do so by learning for example, more about 3D modeling, because that will enable you to customize your 3D assets or to create your 3D assets. And you can also learn GLSL shader language, which is create, which is, I'm sorry, you need to cut this part as well. You can also learn GSGL, oh, this one is difficult to say. I'll do again. You can learn GLSL shaders to create unique materials, unique like shaders, unique post-processing effects. It is amazing. You can also learn an animation library like GSA, React Spring or Firmware Motion to help you with animations on your projects. And depending on your game requirements, you can also learn visual effects, post-processing particle systems, and much more. So, of course we have disadvantage like anything. Like the biggest issue when we create games using 3JS, it is the performance.

And I would say any web platform, but 3JS runs on your browser, so complex scenes can drop the frame rate. But like the browsers are gradually improving on this. So we'll be covered probably in some timeframe ahead.

And will be very hard for me to give you tips on performance because we have limited time here, but we will have a discussion tomorrow. And there I can have more times to share with you some techniques we can do to improve the performance. So be sure to visit us tomorrow for those tips.

And one last thing that I want to say, it is like, don't try to learn all at once because it is hard. Like of course you need time and start with the basics, create very basic games at the beginning. And this will give you the experience that you need to move forward. So be patient with yourself.

And I want to thank you very much for your time. Like I hope you enjoyed as much as I did. And I hope that my knowledge was helpful to you. And don't forget to follow me on Twitter and on YouTube so you can get more tips and inspiration. And I hope to see you soon. I wish you a great day and bye-bye.