 Okay, continuing with our BabylonJS tutorials allowing you to create 3D scenes in your web browser and today we're going to be looking at creating scenes in Blender 3D and exporting them for use in your web browser using BabylonJS and luckily BabylonJS has an exporter for for Blender 3D. I'd like to mention that I am running Blender 2.71 and also this is not a Blender tutorial. This is just on how to import stuff that you make in Blender so I'm assuming you already know how to use Blender. So let's go ahead and first thing I do is let's just add some stuff to this Blender scene. I'm going to, well actually before we do that, let's go to our web browser, let's go to BabylonJS.com, go to downloads which brings you to their GitHub page and we'll go to exporters Blender and right here you can see there is an io export Blender Babylon.py, it's a Python script. There's also this new tower of Babel.py which was added six days ago. I have not had a chance to look at what that is but today we're going to be looking at the export Babylonpy. So you can click that, click raw and then download this Python script. Then you can go into Blender, go to file user preferences under add-ons, click install from file, find where you have downloaded that file and click install from file. Then our little search bar here, we're going to go Babylon, we'll type that into search and enable the Babylon importer exporter and then if you want you can click save user settings and that will keep that enabled. Otherwise when you exit out of Blender, when you come back in that will be unchecked and you'll have to go back in there and check it every time if you want to export a Babylon scene. So killing save user settings will save that so you don't have to do that every time. Now that we've imported the exporter or loaded the add-on that is the exporter, let's just create a very basic scene. I'm going to move this cube up, add in a plane, scale it up. I'll just randomly create some cubes here and maybe rotate some of them just to give us something so obviously you can import and create much more complex scenes and models and Blender will import most of the common formats out there for models so if you get a model that was created in another program you should be able to import it to here. So we have that, the default scene has this light here, this lamp, let's move that over there and clone it over here and give each one a different color just to liven up our scene. We'll make one of them a blue color and we'll make the other one a reddish color and if we hit F12 that's what it looks like in Blender. Here we go, the camera is kind of close there but luckily we'll be able to move the camera around inside the Babylon, inside your browser once you import it with BabylonJS. Again, it will import the entire scene including any cameras you have, any lighting you have. If you're adding textures, we're not going to go over that today but you want to use UV textures and you'll have to make sure that the JPEG files or PNGs or whatever format you use are appropriately located. But now that we've got this basic scene let's go ahead and while our cursor is over the 3D view here, hit spacebar, type in BAB to bring up our Babylon exporter, click on that. There is only one option in here which is if you want to export only the current layer. We're not going to check that because we're going to export the whole scene. I'm going to go to where I have my tutorials that I've been working on and we'll call this one B scene for Blender scene and we'll automatically append to that dot Babylon. We'll export that and now let's go into our editor here real quick. I'm going to get out of Vim here and if we, I'm in the folder that I just exported that file to which we called B scene dot Babylon. If I enter to bring, open that up in a text editor such as Vim, you can see that it is a plain text file which actually a lot of 3D models are but this isn't just a model, this is the whole scene so everything we just exported, the cameras, the lights, the names of the lights, any materials. It also exports physics. If you wanted to use, set physics in Blender, you can do so. I'm not going to go over that today but just as I talked in the previous tutorial, you'll have to import the Canon JS engine if you want the physics to work and they act a little different than they do in Blender so they don't always get the results that you want but if you want some basic physics and you set them in Blender, they will export into here as well and so you could actually modify your scene in here. I don't know why you would do that unless you accidentally deleted your Blender file but you can actually import this back in with the same plugin that we just added on to Blender so if you forgot to save your Blender file and you have this Babylon file, you can import it and start modifying it and then export again but I just want to show you it's a very basic JSON format. If you've done a lot of stuff with JavaScript, you've probably come across JSON. It's very common format, very easy to use, very easy to read and I just wanted to show you that. Now let's go into our script, our HTML file. I call it 04.html. Right now I have the basic HTML tags in there, our HTML tag, header tag, title, script importing the Babylon JS script and again if you want to have physics you have to import the Canon JS physics. Some very basic CSS which all this really does is get rid of any padding margins and sets our game or scene to be the full width and height of our windows. Basically it will fill up the full browser. So that's what that's doing there. Inside our body tags we're creating a canvas and which is going to be used to render out our Babylon JS scene. I gave it the idea of render canvas and then inside our actual script tags here, the only thing I left from previous tutorials is this resizer for when you're resizing the window the scene will resize properly. So let's go ahead and start writing out our code. I'm going to create an object first here, our canvas object, a canvas variable here that we're going to point to an element on our page. So document which is our our web page it's the document we're looking at right now. We're going to say get an element by ID and again this is case sensitive so capital E, B and I there and we're going to say the render canvas because that's what we called it. That's the ID equals this. We're saying get the element by its ID, what ID is there and don't forget your semicolon at the end of the line there. So now anytime in our script if we call canvas with lowercase C or however you name it you can call it whatever you want within reason. It will look at that canvas element and we'll do the same thing for an engine. We're going to create our rendering engine and we're going to say it's a new engine. Look at our Babylon script that we imported and use its engine function to create a new engine and we're going to say to use the canvas element that we just created. Next we're going to load our scene and instead of creating a new scene from scratch we're going to use a scene loader which is already built into the Babylon JS script. So we have to say Babylon again all capital there. That's saying to look at the function inside the Babylon JS script and find the function called scene loader. Use that scene loader and run from within that the load option and here we're going to set the name blank just double quotes there. Just keep simple we're only going to have one scene here if you have more than one scene you're going to label them different things. We're just going to leave that blank for right now but we want to give it our Babylon file that we looked at earlier the JSON file which we called bc.bablon. If you ever get an error that says unable to load no loader found for this file or something like that you probably spelt or put the wrong file name there. I've come across that I got the Y and the L backwards and I'm looking at my code and could not figure out why I did wrong and it's just it was a typo there it was looking for a file that didn't exist so it didn't know how to load it and my browser was telling me the console my browser was telling me I don't know how to load this file and I'm going what do you mean you don't know how to load it anyway next we're going to tell to use this engine that we created here because again you can have more than one on a page and we're going to say new scene and that will create a variable called new scene let's close out this function here but this is saying okay we're going to load this while it's loading then run this function the scene is going to be called this we're actually going to relabel it here to scene so vars scene that way anywhere in our script we can just call scene and get it again you can have more than one scene and you might use this function more than once and that's why we're doing it this way in a way yeah okay so now from here on out anytime we want to call our scene we'll call it scene with capital S that's just how I wrote it you can write with lowercase s just be consistent with whatever you do we're going to say scene execute when ready I'll give you a give you a guess I give you one guess on what this does well when the scene is ready well and then execute this function so basically it waits for the full scene file the this file here which is our scene and the other files need for it to download from the website which a very basic scene should only take a second or two larger scenes might take longer you could create loads load you know a process bar we're not going to go over that in this tutorial but it's saying once that's downloaded ready to go then run this function and now we're going to take our scene and we're going to stick the active camera well you know I'm not going to do that yet we're actually going to leave this function right there blank as far as let's see make sure we write that out correctly yeah close our braces and our parentheses but in here we're going to put our our engine so again we're going to call our engine element that we created again up here and that we're using for this scene and we're going to say renderer loop and we want to spell things properly so we probably want to put an n here instead of an a so run renderer loop and this we talked about in previous videos in this series and basically this is just a function that every time the render loop happens it's going to do something we're going to say scene dot render so we're going to render the scene but you could do other things as in the previous tutorial we used it to rotate objects again this does is affected by the speed of your machine so if timing is important you may not want to use this for certain things and that's it as far as importing the scene that's all we need I mean 10 maybe 15 lines of code to create our import our scene let's go back to our web browser here and refresh that page and there is our scene with our cubes and our lights right now you can't do anything with the mouse or keyboard so let's say we want to create a very basic fly through camera in Babylon JS they call it the free a free cam which is the default type of camera so we don't need to even say make it a free cam we're going to assign controls to that camera and we're going to do that once the scene is ready so once the scene has loaded we're going to say scene dot active camera dot attach control and we're going to attach that to our canvas element and what this does is spell things right again camera so we're saying okay take our scene and find the active camera now we didn't create a camera in our script here although you can if you want to create a camera you can have more than one camera and change from one camera to another or have multiple players theoretically and have a view for each player but we didn't create one in our script here so where's it going what active camera is it looking for well it's this camera so you notice when the page loaded it automatically we got the view from here so wherever you put this camera will be the first view when the page loads unless you set another camera and we're saying is take that camera so look at the scene find the active camera and then attach controls to it using the canvas element we'll save that come back in here into our browser hit f5 to refresh and now I can use the mouse to move around and my arrow keys also to move around and that is our scene from blender and of course right now if I hit f12 and then I hit f5 to refresh the page you'll notice that there is you'll get an error that says that there's a manifest file missing manifest file is not something that is necessary although you will always get this error in the console if you don't have one but what it does is it adds a few options tells the browser a few things that can improve its loading time so let's quickly create a manifest file or at least look at one that I have already I'm going to open up one that I've already created called boxes dot manifest and we can actually copy this all over perfectly but okay so we can say inside the manifest file right here I'm I think there might be other options but these are options I usually have in there the version of your scene or game and then enable scene offline either true or false enable textures offline true or false okay so what this does is when before your scene loads Babylon JS checks for a manifest file if it if there is one it checks these things and sets them so the first time you load up the game or scene or whatever it's going to load everything that you need within that same browser if I go back to that same page and I have enabled offload offline mode set to true same with textures which I do have set to true here what that will do is it won't need to download everything again it will load it it will basically store it in your browser and then later on reload it from there so you can have an offline mode once you've already loaded it from online and the only time that it will get redownload that stuff is if the version number changes now I set this to false and I probably should set this false to although we're not working with textures in this example and I'll show you why so what I'm going to do here is I'm just going to highlight copy and so the name of the manifest file like our scene is called be seen that Babylon create another file with that and then do manifest at the end I'll import that same exact thing from here but here I'm going to set this offline mode true and save it which I don't recommend while you're actually still developing the game and this is why so I come in here I hit f5 now we don't get that error in the console so let me go ahead and close the console here everything looks fine let me go back into my Babylon scene here and I'm going to or my blender scene here and I'm going to add a sphere and I'm going to grab it I'm gonna put it right there you can see it's in the camera view and I'm going to now again just hit space bar BAB hit enter hit enter I just resaved the scene it's that simple come back in here at f5 and where's my sphere I don't see the sphere the reason for that is the version number didn't change and I have it set to offline mode true so it didn't redownload the scene so I get a faster loading scene if it was more complex because it wouldn't have to redownload it from a server if you are running this off the server rather than locally it will store it inside your browser and load it from there so what I am going to do is I'm going to come in here and I am going to set this to false and this to false so this is a great thing to have set to true once you put it up on a web server for people to use it will lower the load on your server lower the traffic that's needed and improve the speed of loading if you have those set to true but since we're still working on it here on my local machine now that I've done that I can come back in here hit f5 and you can see the sphere is right there and now anytime I refresh the page it will reload everything since I have those set to false so all depending if you're still working on it might want to set them to false once you have kind of a set you know version that you want to put out there you can put it out there and then you know as you make changes change the version number and then that's when people will get updates so it's very a very smart way of doing things I think so again I can now just add a few spheres here hit spacebar Babylon exporter enter enter I just overwrote that file at five and you can see the other spheres I just added I can come in here again I can say monkey I can add a monkey move the monkey on the x-axis z rotated on z so there's my monkey I'll hit space at or I just added another monkey I'll move that to where the camera can maybe see it at some point anyway and now we're going to Babylon export come in here whoops refresh my browser and there are the monkey heads so you can see how easily if you have a web server setup all I have to do is export and every time I export as long as I have my manifest file set to false or if I change the version number as soon as I export that boom the scene is automatically updated and anybody accessing it all they have to do is refresh their page and that's it so again you can add materials to these objects colors again if you're going to add textures you want to use UV mapping otherwise it won't come through that's true with a lot of game environments UV mapping is usually used for games and there's a lot more you can do but I just wanted to show you the basics today again Canon JS will help you add physics but we just got this basic free cam a fly-through cam and I thank you for watching I hope you enjoyed these tutorials that's it for this month is what my patreon voters voted for were these Babylon JS tutorials and we'll see I might do more in the future if my patreon supporters vote for that so if you are a patreon supporter of mine and you want to see more Babylon JS let me know and I'll be sure to do more if you're not a patreon supporter think about going to patreon.com forward slash melex 1000 should be a link in the description of this video to it and there you can support me on a monthly basis either a few dollars a month or more whatever you think I deserve for the tutorials I put out I do a lot of tutorials and if you enjoy them I ask that you support me and I appreciate your views either way and I hope that you have a great day I'll also visit my website filmsbychrist.com that's Chris the K should also be a link to that in description again have a great day I would like to take a moment to thank the following patreon supporters for helping make this video possible