Intro to Blend4Web: A Realtime Blender Web Engine

[Music] hey guys how's it going my name is grant and I'm the host of Remington graphics and today I'm gonna be showing you guys a really awesome tool for blender called blend4web now blend4web is a tool that allows you to put your blender 3d model and textures into an actual web browser so you can view it online it exports straight to HTML and JSON files so it's really useful and it has a lot of potential and a lot of cool things that can do and I'm sure some of you will be able to find a really awesome use for it so let's go ahead and take a look at it so you guys are interested in checking out blend4web there is a free version available on their website and it's full-featured it's not it doesn't feel restricted at all which is where my favorite things about the what they did with this so you can get it from blend4web com we come over to the Downloads tab here and you can see we have blend4web seee which is a free version that i'll be using this video we have blend4web Pro which has some extra features especially with licensing and then we also have blend4web pro LCS which has a bunch of extra features you can read more about it but for now we're just using bun for web CES so you can guys can go ahead and click the download button it is a rather large file it's 1.4 gigabytes fortunately I already have it downloaded so I'm not going to waste your time making you watch me download a 1.4 gigabyte file so go ahead and download that pause the video until it's done and once you get it all downloaded it should be in a dot zip format which is what I've got right here so if I open this up we can see that we have a folder in here called blend4web cer underscore c ii and what we can do with this is what we want to do with this is extract it to a memorable location I already have it extracted as well because extracting it takes two it takes it a while so I extracted to my blender assets folder which is where I keep all my blender stuff so you can figure out my material library all that just make sure it's somewhere memorable where it isn't going to get deleted because if you do delete it then you've got some bad issues on your hands so I'm gonna go ahead and open up blender now and we're going to go ahead and enable this ad on the flash plugins slash entire engine for for blender it's really awesome so it is a little bit different from the rest of the add-ons they typically enable so what we're going to do is we're going the user preferences we're coming over to the file selection here and we're going to change this scripts input here if there is something here other than slash slash it means you changes the past you probably know what it's from but it should be slash slash by default so we're going to go ahead and click open folder and we're going to navigate to wherever we saved that and mines in my blender assets as I mentioned earlier and you can see I have blend4web and then blend4web seee now you should open the blend4web stewey folder and you should see all these folders you don't need to click anything just click accept once you're in there and you can see that our directory is now in here next what we need to do is click Save user settings and go ahead and restart blender so I'm gonna click X over here and open up blender again and by closing and reopening blender it initializes the blend4web add-on in blender because there's so much to add to it so now if we come back into the user preferences go to add-ons we now have a little tab down here that says blend4web we can enable it it is going to take a little bit to turn on because it's got so much stuff it's adding to blender but it shouldn't take too long you need to there we go so now if you'd like to make sure blend4web is in blender every time you start it up you can click save user settings or if you just rather use it for one time you don't have to click this I'm going to click it because I love but for what it's really cool it's got a reason to the list of really awesome features so now we can change this from cycles or whatever is up here to blend4web because that's its own engine now by default our scene isn't very extravagant and if we click fast preview down here it will open up our web browser so we can actually see what our blend4web scene looks like in our web browser so that click fast preview here you can see it opens up and we have our cube and it's not much and it kind of looks like crap because that's what the one default blender scene is it's pretty crappy but we can create some really awesome almost photorealistic they're not photo realistic TVR materials things that look really nice they're of course not actual preview our because they don't use ray-tracing in this engine but it does look pretty realistic and it's got actually it's impressive to say it's actually very similar to the results I got from Eevee so that's that's saying a lot about these guys that develop this so anyway I'm gonna go ahead and close out of our preview window and I'm actually going to go ahead and delete everything in our scene because we don't need any of it next I'm going to go ahead and add a UV sphere and I'm just going to add some extra segments to make it a little bit more smooth I suppose and we're going to change smooth shading or change it to smooth shading next what I'm going to do is I'm going to move it up just a little bit right pressing G Z and then one let me really quick turn on my screencast key so that was just DZ and then one to move it up one unit and I'm also going to go ahead and add a plane and we're going to go ahead and scale this up five times that looks good all right so now let's go ahead and create a material I actually have a few texture maps that I got from polygon comm I have a color map a normal map and an ambient occlusion map and these three maps will work flawlessly with blend4web there are some other maps but it's kind of hard to use if you have a specular map I definitely recommend using that but for now these are the only three that we're going that we're really going to look at so I'm gonna go ahead and select our sphere here and we're going to go ahead and put the material on the sphere so I'm going to come into the material settings here click new I'm going to call this stone because it is a stone texture and I'm going to comment into the textures tab I'm going to click new and we're going to make our we're going to import our color map so before we get too far into this I'm going to switch over to material mode in the viewport oh I forgot we should probably set up a light as well so I'm just going to set up a basic amount of spotlight a sunlight just so we can get some decent shading on our object like that all right perfect so now I'm going to go ahead and open up our image from my desktop here so blend4web color and you can see that it doesn't have anything on it and that's because our UV sphere isn't unwrapped so I'm gonna go ahead and switch over to edit mode press U and then we'll do a sphere projection just because we're working with us here and we're going to have a little bit of distortion up the poles but overall looks pretty good and it is it a kind of low resolution texture so I'm going to go ahead and change the size of Hoops not sticks like three maybe there you how that looks good so now we have a texture on our sphere but it doesn't really look that extravagant at all so let's go ahead and add a normal so we'll come up here to our texture options add a new texture we'll call this one normal and immediately I'm gonna come down to the bottom here and open up our normal map just like that and you can see all of a sudden our Spears trippy that's the only thing I can really describe it one thing we want to make sure we do is match the size of the other one so I'm going to change these all to three and under the image sampling tab right here we're going to change we're going to come over here in order to check normal map and that will tell blenders blend4web engine to use the normal map information instead of just the color information we can uncheck use alpha as well it's not necessary but I like to do that just in case there is some alpha in the normal map for whatever reason I've had it happen before anyway under the influence tab next this has basically affects where the what's being changed about the model so you can see we have different things here we have like diffuse shading specular and geometry so I'm going to go ahead and uncheck color because we don't want it to affect the color and instead under the geometry tab I'm going to select normal and you can see immediately our our map is here and it's a little bit glossing a little bit reflective but we can change this all and a little so let's go ahead and add our NV the clusion map as well so call it AO and I'm going to do the same thing as I did before just go ahead and open up the map right away AO and you can see our sphere is not white but instead of changing it from diffuse to shading or to specular or something like that instead what I'm going to do is I'm going to go ahead and change the blend mode to multiply and that'll go ahead and basically multiplies the brightness values of the MEA inclusion map against the color map so those dark spots get darker so you can see if I drag the color influence right here no ambient occlusion with ambient occlusion I just think it adds a little bit of extra pizzazz and a little bit of extra depth I'm actually a change to like 0.8 and then I'm also going to come up to the normal map the normal map is a bit strong for my taste right now so I'm going to change this as 0.75 just we get something that's nice and in the middle now we can come back to our settings our material settings here we can change some other things such as the specular intensity or the diffuse settings and stuff like that diffuse intensity I think it looks good as it is now so now if we go into our fast preview again it'll load up here and we can see that we have our beautiful beautiful sphere and it looks pretty dang realistic and if we use high resolution textures and stuff for a more realistic model it would look a lot better as well now one thing that really throws this entire image off is one this very very dark side because of our lighting setup right now and the fact that there are no shadows being cast so let's go ahead and fix this I'm going to take this Sun lamp I'm just going to make a little bit more dramatic and dramatic angle I suppose so it casts a longer shadow and in order to enable shadows what we need to do is we need to select our object go to the object settings and down at the bottom we should have an option that says shadows and we're going to check both tests and receive shadows because we want our sphere here to both cast and receive and then we're going to do the same for the sphere there's a plane nose bottom but it doesn't really need to cast shadows because it's not it doesn't have anything to cache shadows onto so we'll just set it to receive shadows now if we come into fast preview we can see that our shadow is being cast but again it is very dark and this side is very dark as well so let's go ahead and lighten that up I suppose now what you could do is you could do a full on lighting setup but what I prefer to do is use it environments lighting which is actually supported in here you don't really get that the hgri lighting that you get in cycles and evie but you do get procedural skies down here you can see you can do that or you can just set up a sky with blenders default settings which I prefer to do because it's nice and easy and it looks good so if we enable these two it'll start showing the sky in the background here but we also want it to provide lighting so we'll check environment lighting and now you can see it is providing lighting to our scene so I'm going to change the strengths down the point like three because I still want to maintain those shadows on the other end I just don't want them to be as vibrant and in addition to this because the sky is a little bit blue I'm also change the sun's color to be a little bit warm typically I'd use something like a like a black body here but I don't think internal supports that unfortunately but it should work so now if we go in a fast preview it should look a little bit more realistic than what we have before so there we go compared it so we're already starting to get somewhere and starting to get some realistic results which is absolutely fantastic and it was really easy so now let's go ahead and look at some of the different effects that we can apply to this and get some really cool options so if we come into the render settings or render tab of the properties menu over here we get just whole list of different things we can do we can play with the shadows we can check our play with reflections or refractions object outlining stuff like that I'm going to focus on bloom motion blur and I guess color correction will do those three but also remember that ambient occlusion godrays exists just remember they exist so that's all I asked you right now so if we go ahead and go too fast preview here you can see that Wow our art scene is very bright and it's a that's because of the bloom we applied obviously so if we come into the bloom settings here over on this right panel which is really handy we can change the intensity of the bloom for example so if I want it to only be like half of that and change the edge luminance so that it only glows in certain areas or something like that I'm going to change it up to like no gray there looks nice but you can get like really cool-looking results just playing around with bloom and it also kind of acts as a sort of renown sect if you can see that right there from cycles and stuff so there we go we can do that and then we could also change that color correction like I change in there we call so plaintiffs motion blur unfortunately motion blur doesn't look the greatest in real time as you can see here but it is good that they added this in because I'm sure somebody will find a use for it I just really can't find one right off the bat but there we go but remember how I said the whole god rays and what was the other one I can't remember what the other one is an inclusion to see I told you to remember and I can't even remember myself we can't edit these and that's because we don't have it enabled over here in our blender window and that's just the way they built it I think it's right that they built it like that though because you kind of just reminds you of what you have enabled on what you don't have enabled because it's all of a sudden you're playing with godrays settings and you know kind of makes no sense when it's not enabled one thing that is important to remember though is after we exit out of this web player these settings will not be saved it'll default back to these settings that are in here so we need to change these to match that so in this case it's point four four and one point one seven so 0.44 and one point one seven just like that and now when we started up it'll have these settings by default instead of defaulting back to the default was it's one four and one so with that being said there's a lot of different settings to mess around with here as you can see and I'm gonna go over a few more here really quick you can add mist into your scene by coming to the world menu and selecting this and you can actually preview this in the material menu which is nice and then one of my favorite things about this is you can actually create oceans and stuff like that so hard to click new here and come down to the very autumn we're very autumn very bottom if our create a new material and come down to the very bottom we can check this little option that says mess water and it's a special water material and basically turns the entire plane into an ocean so I would just turn off short smoothing because we don't have a shore but you can also change things here like waves you can see it's got it's just got all sorts of settings I'm really caustics off but you can see we have shallow water shore water underwater fogs up for service scattering ripples with waves all sorts of different things that you can play with like there is a lot here but um as you can see over here doesn't really change much but if we come into the fat preview you can see that we now have a giant ocean and it is a little bit wonky looking but you can see we look at it from underwater it actually changes color for above water I don't know why it's this white color i I have it working before yeah I'm not sure why it's white I don't have that happening before but you can see that it does have some really awesome abilities to replicate that ocean and get in a real-time rendering engine is kind of cool and you can also change things like the subdivisions of the plane and stuff so you can see the subdivisions is at 64 right now you can you can just play with it so much there's so much you can do with this it's rather insane and now we're going to go ahead and take a look at probably my favorite feature of this whole thing and that's the fact that you can create interactive content and you can also play with physics in this online which is absolutely awesome I actually used this like in my physics class my teacher use an example I didn't realize it was blend4web but it was blend4web that somebody was using and they used it as a physics demonstration which was really cool to see so let's go ahead and actually go ahead and I just keep saying go ahead let's go ahead and add some physics to this object so I'm gonna come into the physics tab and I'm going to check object physics which enables the physics for the object and then we're going to go ahead and under the physics type thing we're going to select rigidbody and that will add this as a rigidbody object which means it moves around and it doesn't squish or anything next we're going to go ahead and check collision bounds and change it to a sphere that way it has spiracle collision bounds and we're going to do the same thing with this for the most part really actually no not at all we just needed to check object physics now typically in blender physics you'd be able to click play and the sphere would fall but I wonder if actually yeah see doesn't work but anyway we have to actually preview this in the preview window but now so you can see if we open it up oh I forgot we saw at the ocean going he'll get rid of the ocean material here just like this delete that all right now let's try this hopefully it doesn't just fall onto the ocean there we go you can see it falls onto the plane and it sits there which is cool and all and you can also have it roll down things so if I were to angle the plane this way like that and then preview it you can see that it's now rolled down it which is neat and you can create things like Domino courses and stuff like that I saw and I was looking through tutorials so I can get an idea of what this is myself oops that to keep pressing s wise here instead of our Y I'll just do this there we go I kind of right I could have pressed Omar what am i doing because we conclude swirls and some guy made a domino course and one of the coolest things out of this entire situation is the fact that you can create interactive content with it so if I were to add a cube right here and this is going to be kind of like a ramp I guess move this over here and just sign is when the z-axis down size on the x-axis up move it to here and rotate it move the ball all the way to the end and move it up a little bit and then we're going to go ahead and add another cube as Z down a lot s Y and what this is going to act as a sort of a blockade so the ball won't be able to roll by what I do here I change the rotation real funky there we go so put this like here and then we'll go ahead and enable physics for both of these they just need to be static object we don't need to mess with the collision bounds at all I am going to change this to a greenish color level because we want to stand out just like that and now if we go ahead and run this it should land on it and then just casually stop perfect looks like our material got a little bit messed up there but that's fine you don't need perfect materials to this so now let's go ahead and add some interactiveness to it and basically what we're going to do here is we're going to make it so if we click this green thing and you can see it's lighting up right now if we click this green thing the ball will continue rolling it'll it'll move up or something at creating a gate and ball will roll down which is the end goal so one important thing to keep in mind while working with these things is that if it if the if you're working with some sort of material or something or some sort of material some sort of object that has students applied to it you want to apply its location otherwise it might have some errors when you actually export it so to applies the location you're just going to press ctrl-a and select location i'm going to do this for all of these here and now if we play it again press preview you shouldn't notice much of a difference but oh okay maybe we shouldn't apply the location of the ball will leave the locations of all where it is see if that helps there you go so don't apply the location of a rigidbody object just static objects and any objects that should be actuated or something like that so now I'm going to go ahead and split this view here by clicking these three little white lines and dragging I'm going to open up a node editor window and I'm going to come over to this no tree thing which is our blend4web logic editor and it is based on the nose which is really cool especially because a lot of people are familiar with notes from cycles and to enable our logic scenario we come into the scene tab here and may check this logic editor button and I'm going to click + to add a new node tree that we can use over here and we can go ahead and open it up from our browsing thinkingyou right there and you can see we get this note here that says entry point and what entry point is is basically from the time that the web page is loaded it's fully loaded from when the engine I guess is fully loaded that's when entry point is running so we can create different steps almost so we have different sensors and then we have different results or actuations that we can perform based off certain actions done in the browser so in this case we have switch select which is my favorite because it allows you to click on things so in the case that I click on this green thing then it will do something so I'm going to collect connect next two previous because that's kind of how it works the next thing goes the previous thing obviously whatever it's just showing what you put connects here I'm actually going to rename this green blob we have here this green block to trigger just to keep track of it so we can add our trigger object into the object tab so that's saying if it is clicked and we have two options here we have trigger hit-and-miss so in the case that the trigger is clicked then do this if we in the case that the trigger is missed then do this so we don't really want to worry about whether or not it misses we just want to have it do something when it is clicked so I'm going to change this to transform objects because we want to move our little blob here or block I don't know I keep calling it a blob it's obviously a block but anyway so in the case set hit we connected to previous here we want the trigger to move up so we select our object is trigger we're going to change the space to local because we wanted to change in relevance to itself not in relevance to its environment and we're going to change its the location by five let's leave that oh god zero there you go we'll change that to 5 that way goes up 5 blender units and then we can also change the duration in here so it takes five seconds forward over one second one second sounds good and we don't need to put anything past here if you'd like to expand on this tree you can do all sorts of things there's all sorts of different control fold things so you can see you can delay things we can create variables and use the jump so if ball location equals five s and this or if fall location is greater than ten do this or something like that and you also have JavaScript stuff which I don't understand I understand but you know it exists that's cool but this adds a lot of that note adds a lot of stuff a lot of features and a lot of potential for developers so let's go ahead and fast preview this see our scene loads here and you can see our ball gets stocked and what happens if we click our green thing oops I moved in the wrong direction I guess I forgot that I have to apply the rotation too that would be kind of important I forgot the completely that I rotated that and that's important otherwise this stuff will get stuck and I don't know why that just teleport through I'm actually going to recreate this because I don't want it to do that again sometimes it does get a little bit buggy I've noticed I'm pretty sure that's user error I'm sure I did something wrong in there that somebody will point out and then we're going to go ahead and apply the location we don't have to apply rotate rotation because I didn't rotate it this time now it's going fast pretty good oh I didn't add object physics did I nope I did not let me do that really quick object physics statics cool now let's try this fast preview there you go click it moves up and the ball continues rolling perfect it worked flawlessly and our ball is going to fall into oblivion which is nice but there's it there's just so much stuff that you can do with this and I absolutely love it so let's go ahead and actually export our object knowledge so we can export to different things we can export to HTML which is what I prefer because I actually know how to use the HTML a little bit or it can export to JSON so I'm going to export to HTML in my case and we'll call this blend4web it's demo and now if we go ahead and open up well I guess it export is where it is export to exporting it to My Documents instead of my desktop so let's do that right now and now you can see we have blend4web demo dot HTML and if we go ahead and open this up you see it loads the engine and just like that we have our scene done now one thing to note is that physics isn't supported in HTML but as you just saw there you can click things so just keep that in mind you do have to export to a JSON file if you want to use physics which is unfortunate but hTML does it have its limitations so anyway thank you all for watching I hope guys took some interest in blend4web it's a really awesome tool and it has a lot of different things you can do with it whether it's educational or showing off a product or just playing around with it there's a whole whole lot you can do that about sums it up for this to you thank you all for watching and I'll see you guys next time adios you [Music] you

Channel: Remington Creative

Views: 70,600

Keywords: blender, education, 3d, cg, cgi, pbr, tutorial, guide, how-to, remington, graphics, lesson, vfx, blend, web, blend4web, realtime, real, time, rendering, render, game, gaming, internal, interactive, addon, plugin, engine, intro, introduction, chrome, java, json, html, firefox, bloom, ao, ambient occlusion, product, preview, mesh, material

Id: oASmvujRRr4

Length: 24min 48sec (1488 seconds)

Published: Sat Jun 10 2017