 Hello and welcome! Today we are going to be talking about good code, writing good code, and how just a few lines of code can make a load of difference on how your program runs. And one of the reasons I'm doing this is because people argue over which programming language is the best and why you shouldn't use such-and-such program or such-and-such programming language. Yeah, you know, I have my opinions on different programming languages, but I have a personal feeling that for the most part when it comes to writing efficient code it's more important to be a good programmer than wondering what programming language is the best because you can take the absolute fastest and best programming language in the world and if you write it your code poorly it will run horribly and you could also take a very slow language but if you write your code efficiently your program can run better. And yeah, if you got the best, the fastest programming language and you type the most efficient it's gonna be the most efficient. But my point is here is how you can just do improvement. In fact the code I'm going to show you here could definitely be improved some but it's just basic examples to show you the difference. So right here I have in Blender I have a 3D model of a Sherman tank. I think it said it was a Sherman tank in the model. Anyway, it's a tank and we are going to load that into a program that I wrote in JavaScript using HTML5 and 3JS and a lot of people are like oh no writing programs in HTML and JavaScript it's horrible blah blah blah and maybe you're right. You know what maybe you're right. But I'm going to show you how just a little bit of changes again can make a huge difference. So here's the model in Blender. Let me go over here. This is the project you can actually download everything I'm going to show you today in one file. It's you know not the smallest project in the world because I purposely loaded some big things in there. But you can clone that and then you can also go to my website to to run the code. I'll try to remember put links in the description of the video. But basically you would go to Filmsitechris.com. For test scripts for 2020 and then look for the project called 3D models loading example master. So you can get that there and so this is it running on my web server which is running through Vulture and Vulture services over in Miami and I also have the same exact files running on my local machine just to show you the differences here because one of the issues that people will complain about with like HTML programs is oh well loading times because it has to download everything. Well you can cache everything. I didn't write this program to cache anything but I can run it locally which speeds things up dramatically. But any program you run either has to be downloaded or loaded to your computer at some point. So even though we might be working with large files here you could write the code to cache locally and that way it doesn't have to download. We're looking at loading time here primarily but also download time. So real quick I have three examples here. I have tank 10 which loads 10 of those tank models, tank 100 which actually loads 101 of those tank models and then tank empty that uses empties which you'll see why we do that in a moment. So let me go ahead and load this from my web server. My films by Chris server again I'm in Naples this is in Miami so it's the other side of Florida and my internet speed will vary greatly on this but I have my network tab open here so you can see as it's downloading how long it takes. So I'll click on tank 10 and you can see here it loads a scene. I can move the scene the scene's working but the tanks haven't loaded yet. If you look down here they're still loading and the file is like 280 some megabytes to load 10 of those tanks which is going to take about 45 50 seconds to download from the web server. Again I could have this after loading once cache locally but I did not write the program to do this and that's something else that you could do to speed to increase your or I guess lower your time, increase your speed lower your time. It's still loading. It seems like normally if you're gonna have something load large like this you would have a load screen so people know stuff is loading. I didn't do that here but we can see it's almost done loading a little bit more. We're at 40 seconds and 41 seconds it's done downloading and now I would count it's going to take about 10 to 15 seconds for those models to load after being downloaded so it's not even the download time it's the loading time is what we're looking at here too and we got those 10 models. So we're looking again 45 seconds to a minute with halfway decent internet speed on my machine to load 10 of those models. Let's go ahead and run that from a web server locally we'll go 10 and again you can see here it downloads the model and only took about a second to load that but we're gonna look at how long it takes once those models are downloaded it's still they're still not here the scenes frozen because it's loading those 10 models they're still loading there we go once they're loaded it runs fine right because we're using WebGL which is the same as OpenGL to render stuff so once it's loaded it's it's rendering using my GPU and everything and if I hit control shift R that will refresh it and make sure it doesn't use any cache files we will see this again again it takes about a second load one two three four five six seven eight nine ten eleven twelve about 12 seconds to load after the one second of downloading it from the local machine again on the first example I'm downloading from a remote server so it took 45 seconds download that 281 megabytes of files so we're looking at loading this locally best case scenario you know is going to be 10 to 15 seconds let's go back to my remote web server go back to the directory here now we're gonna load again there's actually 101 tanks in this scene let's see how long it takes to load from the server on the other side of the state one two three four five so it took five seconds it took four seconds to download only 28 megabytes four seconds do that in less than a second for it to load them now I didn't lower the polycount these are the same exact tanks same exact tanks loading from a remote server not cache again I'll hit control shift R to show you to refresh it against downloading it's downloading the files it took 2.87 seconds at time and again about a second for it to load 101 of these tanks same exact tanks I haven't lowered the quality of the models at all how am I doing this and why is it only 280 or sorry 28 megabytes rather than 280 megabytes and it's it's 10 times what we were loading before I'm not compressing the models at all I just wrote the code different again that was a remote server let's see how long it takes to load that from the local machine 101 tanks boom I mean we'll refresh that again one two two seconds to load 101 of the same exact tanks well let's go ahead and look at the code so I had the project here we will first look at tanks 10.html and we got some JavaScript in here and if we look up here most of this is just basic loading the scene stuff but then here we're loading the model I'm calling this function that I wrote load DAE file which is the type of model that we're loading here and we're loading model tank 10.dae again that's 280 some megabytes we come down here what we do well we create a variable called model then we just basically load that model and add it to the scene that's pretty much all we're doing here so we're downloading 288 megabytes worth of files worth of model and loading it and that's only 10 models at that size let's exit out of this and look at the difference in tank 100.html again we load it in the in the main function up there the color coding is a little messed up here whatever but let's look here we load the scene just like before all that's the same well now instead but instead of loading 10 tanks this is only loading one tank which is why it's one tenth the size I find that tank model this is one way of doing it there's better ways of doing it and I'm creating a tank object I'm setting its position I don't I shouldn't I don't need to do that I was trying to move it off to the side it's still buried in all those tanks but I move it then we just do this this is basically why added here after finding the tank model I'm looping 10 times and looping 10 times again I'm taking that tank and I'm cloning it and then moving its position X and Z relative to its number so basically we're taking what we're doing here is we're loading one model instead of loading 100 models or 101 models we're loading one and we're saying instead of load it just generate new ones generate new ones so we don't have to load all those models up into RAM and then render them out to the screen we're saying create and some cases example here sometimes it's faster to create something than it is to load something so instead of loading 100 miles we're creating them we're loading one and then copying it over a number of times and the way we're doing that is basically this for loop again this is just repositioning the original tank so we the only thing we've added is we found the original tank and then we loop through it and load a hundred more of them to the scene now that's great and also I want to go back to blender to also show you I was talking about how in the web browser it took 10 to 15 seconds for it to load those 10 tanks let's go ahead and load a new scene here and delete the default cube whoops delete the default cube and I'm going to import that same exact file I'm going to go here I'm going to go to my models and I'm going to load those 10 tanks one two three four five six so it took six six or seven seconds is what I normally count when I test this out so it is faster than in the web browser by you know about half we got seven seconds rather than 10 to 15 seconds it's usually about 12 seconds so yeah about half in blender than it is in the web browser so yeah blender's loading things better than the web browser is but doing it the proper way where we're generating them rather than loading them all is still faster than that now one of those issues is I very easily put the and put them in there and loop through them and made 10 rows of 10 what if you're designing a game and you want these tanks in certain places on a hill or a box and you want them rotated a certain way well you still can do something similar with just a few lines of code and I'll show you my code but my show my code on this could probably be cut in half if I spent a little more time on it I'm gonna load this and all these files again are in the project on git lab we got tank empty that blend don't save that and I in this scene I have one of the tanks and I have a bunch of empties empties are just points they're just positions and rotations and you can see that some of them are higher I put them all in different positions and different rotations so basically if I go back to my web browser here and I can go to this again this is my remote server here I can click click on tank empty one two three four there about four seconds for the download and load all these tanks based on those empty positions and if I do it on the local machine one two there we go we got two seconds to load those and yeah there's not a hundred here but again cloning them like that takes almost no time at all so I could have a hundred of these empties and it would increase the size of the file very much so there's not as much not a hundred to load a hundred tanks but a hundred empties are nothing so you can use empties in your project and normally you would have here I have the tank and the empties in one file normally you would have one file containing all your assets so you would load all your assets your soldiers your trees your buildings that you're gonna use and then you'll have another file that's basically your map that has all the empties in it and I'll show you the code right now for this to explain a little bit more I'm going to vim tanks empty so again I have my DAE file here it's loading now last time we just looped through some numbers to give us ten rows of ten this time what I'm doing is I'm creating an array called empties and then I'm gonna loop through each child each object each element that was just loaded from that scene that DAE file that we loaded I'm going to look at each one put an object I'm gonna get its name and if its name includes tank well I'm gonna make that my tank object if it includes empty I'm going to push that to the empties so if you would have different models you might have instead of empties you would have tanks and you would have trees or whatever you're going to label them as once we have this array completed we loop through that array and I'm gonna say okay get the first empty get its position XYZ gets rotation XYZ then clone the tank just like we did before set its position to XYZ and its rotation XYZ based on the empty and added to the scene and again I should I wrote this like this where I did position XYZ getting each of the empties position and rotation in reality I could have cut out half these lines just by saying T position X equals empty position X so I could have cut that in half and in reality I should be able to just get the position in one line and add it to the position of T so really I have how many lines of code do I have here about 15 lines of code this probably done five lines of code if I was to write it better I don't think that would improve the speed too much but we'll clean up the code some but yeah so I just wanted to give that as an example to where here I'm loading these I don't even know how many I made one two three four five six seven eight nine ten eleven twelve thirteen so it's 13 models loading and it's loading in an fraction of the time about one third probably less than one third then loading just ten of those models into blender and I'm doing it in the web browser here in JavaScript which is considered by many to be a slow language now I am not saying that you have to program in JavaScript or that doing the same thing in something like C would be better because if you did this in C yeah it would probably load better but if you're loading 280 megabytes worth of files in C it's going to take longer if then loading 28 megabytes in almost any other language so again it's not about so much about the language you pick but how you write your code and again let me let me real quick go to blender here and show you I just copied these empty so if you look they all have a name called empty empty whatever empty their number but you could change this instead of empty I could say tree dot for and then I could add a tree model in here and when I loop through instead of saying just find the empty if the name is empty I'll say well create a new array called trees and I'll say okay if the name has tree push it to the trees array and then loop through those positions as well just different ways of doing it in fact you can make one loop like this and based on its name clone a different model again we're getting more in depth there but same concept you wouldn't have a hundred trees in your scene a lot times if you have a game editor for a particular game their level editor is going to do this you might place 3d models in the level editor in the level editor but then when you save that output it hopefully isn't saving all those models to the scene it's going to convert them to basically coordinates like this so anyway thought I'd give that example again you can go you can go to getlab.com forward slash by Lex 1000 this project is called 3d model loading examples and you can also go if you were to go to filmsbypris.com we can go to software scripts click on 2020 and 3d model loading examples and you can run this right off my server from in Miami hopefully I have got plenty of bandwidth so hopefully this 288 megabyte file doesn't eat up all my bandwidth a lot people start hitting it might have to get rid of that one but you can obviously run it locally by cloning it or at least downloading it from get lab but if you want to test it out and click here load those 10 I'm gonna stop that because that takes too long but I can also load a hundred here and I'm not sure why oh there we go okay took a little a little bit of time that time that's probably because I I have multiple things open and I can hear my processor spinning up the fan on my processor anyway anyway thank you so much for watching I hope you enjoyed this and again the code I wrote here could definitely be improved but I'm just showing you how easy it is to go from horrible code to halfway decent code and of course code can almost always be improved visit films by chris.com that's chris the K also you can go to my website and go to the sport section and if you want to donate to me through PayPal you can click on this donate button right here you can become a sport at patreon.com and then you can also go and see me on a library LBRY there'll be a link in the description of that and there you can watch my videos and you can get some cryptocurrency for watching my videos and you could tip me if you like my videos that way you can tip me with no money out of your pocket so check that out link in the description as always I hope that you have a great day