Install Blend4Web Add-on and Export to HTML

Now Blend4Web has been around for a while but… I did a video on installing the Blend4Web add-on to blender some time ago. But there’s been a few changes and since I’m doing this series on how to run a set of drone images through an open-source tool chain and get it all the way through to a 3D model then an HTML file. I’m doing a series of videos that show each step along the way and one of those steps is installing Blend4Web. So we’re going to go ahead and redo that video since it’s been a while and there have been some changes so go ahead and take a look. It’s not that complicated. And as part of this I’ll show you how to import an .obj file that’s been produced by OpenDroneMap. And then we will export it into an HTML file that you share with anyone with a browser. All right, long ago I did a video on how to install Blend4Web, which is an add-on for HTML export of your models. But in addition to that it’s a full SDK capable of doing, you know full-on video games that play in the browser. So we’re going to install that add-on in Blender and so what you’ll do is go to And while you’re here go ahead and go to “Made With” and you can see what the Blend4Web add-on is capable of. It’s really astounding, the team behind this has put a lot of work into it and they’ve done really well. So you can develop fully functional web apps that that run in 3D. It turns Blender into an SDK for developing, you know, 3D web applications. And so here’s some of the projects, this one was developed by NASA. This is a 3d experience where you can, you know, play with the rover on Mars. And go ahead and look through some of these. There they’re really astounding. And all these play out in the browser so you can experience these right on your computer so do take a look at that. But back to the download page; so they have a community edition that’s free. The CE is the Community Edition and that’s going to do everything you want for the most part. And then when you if you want to you know get into some heavy development, go ahead and purchase the pro version. After you see what it can do you might you might realize it’s worth it. There’s a lot of assets and materials that come with a pro version. I bought it some time ago and it’s definitely worth it, so take a look at that. Go ahead and download your your SDK and it’s going to be a zip file. And then what you’ll do is unzip that download into a download location, probably like on your C Drive. And you’ll want to leave it wherever you put it because eventually if you move it then Blender won’t be able to find it. During the installation process we’re going to show Blender where it’s at. Now I do something a little bit unusual. I have it actually on an external drive because I move my SDK from PC to PC and the whole environment goes with me. So actually it will go from PC to Mac to Linux and run just fine on all those. And so Blender runs on all those to. In order to get that up and running, so we’ll go to File, User Preferences and we’ll go to System, oh no, File, I mean here we go. And then we’re going to go to Scripts. And what we’re going to do is just point this file to that Blend4Web folder that we extracted it to. So when you extract that you’re going to make sure you don’t have… Sometimes when you unzip a folder you end up with a folder within a folder. So basically you want your Blend4Web and it’s probably gonna say blend4webCE and the Edition number. Make sure you open that folder and all your files are in there. You don’t want to open that folder and have another folder named blend4web. So go ahead and direct it to that folder. Hit Save User Settings. And then what you’re going to want to do is close… I already have it installed on here. But you’ll want to close Blender and reopen it so Blender now knows where that file is. And then go to user preferences again and we’re going to activate the add-on. So it’s going to have… this is a recent change. It’s going to have its own heading right over here on the left hand side of the Add-ons tab of your User Preferences. So go ahead and select Blend4Web. And and go ahead and hit this checkmark. And it’s always been that when you hit it, you just click it one time. Just give it a minute to pause. (find its files). Because sometimes you’ll sit there and keep clicking it and you’ll get confused. So just go ahead and click that to activate that, and give it a minute until you see it’s checked, and you’re good to go. And then you’ll have savior’s settings again and at this point you’ll have a Blend4Web renderer engine. And the way that works is, each of these render engines is kind of like a separate dimension of Blender. They share some things and some things they don’t. So be aware of that some things like if you’re doing… in a previous video I did a bake of this, so I baked a number of textures into just one texture on this. And that would be, that bake which is a Blender Render function and if you watch that video I’ll link to it you’ll see how that works. But since we’re going to export this and take a look at it in an HTML file we’re going to be in Blend4Web. So, simply put, once you are installed and up and running, you just go to File, Export and you’re going to have this JSON and HTML format. So if you’re doing more of a fully functional web app, you know, they have a full scripting API capable of doing you know limitless things really. Or you can just export into a self-contained HTML file that has everything all in one file. And that’s what we’re going to do. So we’re going to export to our directory that we have everything else saved in here. That we’ve been working on in the other projects. And it’s going to be rrock4.html. So we’ll just hit Export. And it’s going to wrap that all up into an HTML file. So here is the file we just created. So let’s go ahead and open that up and have a look. So this is a one-step export. Once you’ve got the SDK, Itis an SDK but once you have this add-on installed in Blender it’s a one-step export. You basically just hit file export to HTML. Okay so what we’re going to do is adjust the clipping since this is actually a huge model. So it’s it’s clipping away in the distance. And we’re going to give it a nice sky to. So let’s do that let’s bring up Blender, and so what we’re going to do is make sure in the Blend4Web tab. We’re going to select our camera, and when we select the camera we see we have this new camera panel right here, and let’s go change a few things. First of all we’re going to do our clipping and let’s just give us a lot of room there because we don’t really need a limit on that. Because we don’t have anything far away that we’re trying to occlude. And then let’s go down to Display Limits in the viewport. And so that’s the limits of our camera zooming in and out, and so we’re going to go ahead and increase that to.. let’s go ahead and just increase it to 200 . There again well 100 maybe, 150. That’s pretty huge. So that’s pretty good that gives us all the room we need. And then we’re going to limit vertical rotation just so we all rotate right over the top. Because I want to be able to see all angles but we don’t need to go over at the top and you know get confused. So we’ll do that and then I’m going to go to the World Panel and hit Render Sky, and then give us a sky that’s not ugly. Give us something kind of bluish and sky like. Maybe a little darker blue, like that and then over here in the view panel we can come down, if we want to see it, come to come down to Display I called this a view panel it’s the… something else anyway… I will just come down to Display and just hit world background. That way we can see what it’s going to look like while we’re editing our model here. And we’ll go ahead and hit File, Export, HTML, and then Export. And there we have it. So let’s go ahead and bring up our our file again. So this the address is going to be the same so at this point we can just Refresh and it will reload that HTML file. And so there you have it so it put our camera… our limits are still there but still, you can you can see how that works. We can still change some things. There is our model our 3d model. This was scanned with a cell phone and then we ran it through the OpenDroneMap software. We do drone mapping but drone mapping is essentially 3d scanning. So in a situation like this you’re not going to be getting the the geo-tagging data. So the really the difference between three scanning and drone mapping is that a drone map is just a 3d model that has geo-tagging data to apply it to a place on Earth, whereas 3D modeling just makes a model with no fixed location on the planet. And so I did this with a cell phone about 18 inches away from the rock. And I just took sort of a dome pattern where I took one picture in the middle and then domed down to sort of close to the ground on eight different angles. I think I ended up with something like 57 pictures or 70 pictures or something like that. But anyway so while we’re here, let’s make a couple more adjustments just so we can tweak that a little bit. So let’s bring up Blender I’m going to go ahead and increase our max to 250 there’s no reason to have a limit on a model like this. And then what we’re also going to do is we’re going to set our… as it happens now, the camera starts off right there, kind of with that rock right in your face. So first time we hit NUM PAD 7, then G for grab and we’ll put it back up here and then we’ll hit NUM PAD 1 and we’ll grab and put it up here and it’s going to be looking at that spot anyway. So let’s go ahead and and see what that looks like. So File, Export, HTML. So with with Blend4Web there’s a lot more to it. So do explore that. At this point I just want to introduce you to it. If you’re doing drone maps this works for exporting terrain as well as 3D scanned objects into an HTML file to make sharing a lot easier. Let’s go ahead and refresh this. So there it started our camera a little further away. And you can make some adjustments and choose where the camera is looking. For example I might adjust it so you end up with a view kind of like that. So when it first comes up, it can look like that. And this this is sort of the default player. If you’re doing just a straight export to HTML you end up with a default player. But if you’re doing a more involved application you can end up with everything completely custom. But you are you do have some options here you can get into WebVR you can look at this with a like a google cardboard or some of the virtual reality platforms. And we’re going to go ahead and put an automatic rotation on it. Okay so there’s probably going to be corrections and updates because OpenDroneMap is under heavy development so if I have any changes I’ll put them down below and so also do check out Blend4Web as well. There’s a lot of potential there if you’re into developing 3D applications for the web. So here’s Blender we’re going to delete the original cube. We’re going go File, Import OBJ. We’re going to go into that ODM texturing file. We’re going to grab that OBJ file right there. And so here we are, here’s the scan that we did. It’s 90 degrees, at a 90 degree angle from horizontal. So first of all we’re going t0 go ahead and set that, we’ll just go R 90 ENTER, and then we’re going to change the origin. Its a fair distance from the model so we’ll go Object, Transform, Origin to center of mass. That works. Actually we should show you the texture on this. Right now it’s set to solid view. Lets set it to Material. So there’s material and you can see we have a very little bit of light from that light source we have right there. If I had only one material on this object I would just set it to shadeless, but since we have you know a dozen materials on there we’re going to go to the World panel and select environmental lighting. And so here you can see our 3d scan. And there’s my foot even made its way into there. At a more oblique angle you start picking up, sort of, peripheral trash. First off we’re going to go ahead and do some editing to get rid of that so I’m going NUM PAD 5 to go into orthographic view. What that means is that there’s no shrinking with distance, everything lines up perfectly. So we’re going to hit the NUM PAD 7 to look at it directly from above. We will TAB into edit mode. A to select and deselect everything. So I’m going to check this little box here which means we select pixels or vertices that are behind each other. So I’m going to hit B to box select. And so what we’re going to do is go ahead and crop the whole thing. I just hit B. Every time I hit B to select another group. And X to delete, select vertices. Then we’re going to hit TAB. let’s go ahead and make a little bit, kind of square. Let’s go hit B That’s pretty good. let’s hit NUM PAD 5 to go out of orthographic. I’m going to go ahead and hit the N key. You can also do that by hitting this little thing here. I’m going to set the location manually at zero, zero, zero.

10 thoughts on “Install Blend4Web Add-on and Export to HTML

  1. ~> Followed your example and works just fine. Now I need to study up on using it !!
    Thanks. I prefer an all open source workflow and that's what I have.
    Data security is the future, which is now!

  2. Congratulations from Chile !!.
    I have been searching for many hours and days an efficient workflow to do photogrammetry. Best regards

  3. hi i wish to ask if it is possible to install opendronemap or blender from ZIP file downloaded from github on windows 7

  4. Hello Will, Thanks for the posts. In the main very useful but I am falling at the last hurdle. Before I go into detail I realise that these posts are 2 years old so I just want to ping you to see if you are still there? The issue is with Blend4Web CE. I just can not get it to work properly (quite prepared to admit it is me but I do need help). Quite happy to converse directly if you agree. You can reach me at [email protected]

  5. Good tutorial but when I'm exporting HTML file then open in browser it's not showing texture in object but only showing material.
    Can't showing any texture? how to fix this

  6. Will, thanks again for the information. I'm trying to do the mosaich with 2000 imgs, I belive that blender can help me.

Leave a Reply

Your email address will not be published. Required fields are marked *