Tip:
Highlight text to annotate it
X
Alright friends, what I have for you today is a Hello World project to help
get you going with Blend4Web. Now the idea behind this project is to make it as
simple as possible, while still using the key components of Blend4Web. That
being HTML, CSS, JavaScript and of course the scene you make in Blender. So first of all
if you go to this website, I will link to it in the description, I might even put a
little box for you like right in the middle and you can download the files
for this project. So just click this link right here.
The project will download. While that's downloading I'm going to show you the
simple scene in Blender that I used in this project. It may look a little complicated
but it's very simple. Mostly what you see is this spherical image I placed in the
background and I'm gonna go ahead and make that invisible so you can see
what's left. And if we take a look at the camera you can see I've added a little
animation and that strange little pointer there I have parented that
to the camera just for my own visual aid so I can see where the camera is pointing.
I find that useful and it doesn't show up when you do the render. The
reason it does not show up is if I click on the object, come to objects panel,
come down here, I have here check marked Do Not Export. If you are new to Blender
go ahead and search on youtube, "Blender For Noobs" it is a great series out that helps you
get going in Blender. Filter your search results for the past year so that you are
current. Alright I'm gonna take that zip, I'll show ya how I handle zip files.
My way is weird but i just drag it out like that, and then I'm gonna go ahead and unzip it.
I have 7 Zip. You can Extract All or if you have a third party program you can do that. So I'm
gonna extract it out. There is a (2) there because I've got another one sitting
there. And I'm gonna go ahead and delete that. And open this file and open this file. Now
these are the files we are concerned about. So this is the project. In
order to properly place this I want to show you the project manager in the Blend4Web SDK. So
from Blender, make sure it says Blend4Web and click your
Export tab. And hit Open SDK right here. And so that's going to open that up. And
what we're going to do is go ahead and go to Project Manager and here you see a list
of all of the applications that ship with your SDK. And we're gonna place
ours on the list for ease of access. So we're going to click NEW you were gonna
name our project Hello_World. And I don't think we need a title at this time. Now
if we were starting from scratch you'd wanna create some of your starter files
but we're not gonna do that. But we are going to bundle our project into one
single directory. So once your settings look like this, go ahead and click Create.
And its going to tell you what it has done. It created a directory in apps_dev
/ Hello_World.
So if we come to our root directory of the Blend4Web and go to apps_dev, you're
gonna see your Hello_World directory. And there's there's nothing there except for
a project file. So let's pull up the zip file that you downloaded and what we're
going to do is just load these into our directory. So we can just copy those in.
Now,
something that's going to happen is, your, as you can see, all of these have a link
underneath them. So what this is going to do is it's going to look for an HTML
file with the name Hello_World. And once that once that exists its gonna give you a
link there. So we will go ahead and rename that. I was gonna just name it
that to begin with but I thought well why not why not pass that little lessen
along. Let's go ahead and rename that file, the index HTML to
Hello_World And then if we come back to our Project Manager and refresh it, its
gonna have the link to your project right there so if you open that up now
your app is running on your local server. Now to recap how to find your projects
you can open the SDK, go to Project Manager, and click on your link and that's going
to open your project. Now, to find it in the folder structure, you're
gonna go to the root directory of Blend4Web, apps_dev, Hello_World and
here are all your files. Now let's go under the hood and see what all these
files are. And so, to,
to take a look at what these files are, these first three you're just not gonna
worry about at this point in your career. And this is the image that I used for a
texture as the background. And I should mention that is a power of two
dimensional image, or a POT image. So I believe the dimensions of this image is 40...
We can find out. So lets go like this.
Properties, details. So we can see that this image is a 4096 X 2048. And
those are powers of two. To understand what powers of two are, if you just start
with two double 2, 4, 8, 16, 32, 64, 128, 256, 512, so typically WebGL doesn't function
well with non power of two (NPOT) dimensions so it's a WebGL things so, try and make your...
Anytime you're putting textures into Blender for the purposes of
Blend4Web exports, try and use power of two dimensions in your images. And this
second image is the same image over again. The reason it's there is because
for convenience sake I packed the files. If you go to External Data you can see
I've got that check to automatically packag it into .blend. And so when I
did the export, it exported that image again and that's not always the most
ideal way to do it. Sometimes it's better to link to it externally. And I have just
done that for convenience in this case. And then we have our b4w.min.js.
That your JavaScript engine that does all your work. And then when you
export your JSON file from Blender it's going to create this .bin file and this
JSON file. You don't need to edit those, you just need to know that they are there
and they need to be part of your project. And so the next thing, let's let's bring
up a Hello_World.html and these are the key ones, these three right here. CSS, HTML and
Javascript and I have these open over here.
So the elements of your HTML file: basically you have a link to your
style sheet which is the Hello_World.css and then a link to the Blend4Web engine and
this is a link to your javascript file. And then down here we have the id
The id, what that is... Let's take a look that at this. That is this background.
Like a background container that the application runs in. The JavaScript file...
The JavaScript file loads the app into this You can see it's opened and
closed there's nothing inside. But if you go to your javascript file we see that
it targets that right here and loads your scene into that container. And if we
look at your CSS file, we see that it also targets that and tells
it to remain fixed and be 100% and the top left corner is aligned to the
top left of your screen. And then we also have the overlay_container and if we
look at the
CSS filed the ID is targeted with the #overlay_container. And this...
These rules apply to that, that's what gives us this. Its scrollable and
centered. And one cool thing you should know is way that's colored. So RGBA
stands for red, green, blue, alpha. And you probably know what these numbers mean
just in case you don't know what that is that's what gives it this alpha.
If it was a 1, it would be completely opaque and a 0 would be completely transparent.
But now we have this nice translucent, semi transparentcy that we were trying to
achieve And the javascript file is fairly simple. If you want to delve into
this code I've gone ahead and put some comments to kind of explain what the code
does. And also your SDK comes with documentation. So I put the address here. The way to
find that is if you go to your SDK, lets go back to the root of our SDK and come to API
Reference. In here like for example if I want to know what "app" means I
could come over here and read what "app" does. So you should know where the
documentation is. Now that we've got your project up and running let's make sure
you know how to make it your own.
I wanna make sure you know how to make changes and get it exported. So what I'm
gonna do is go ahead and just add a random object here. And I'm gonna show
you how to do the export. So we're gonna go export JSON. We're gonna go ahead and
click Run In Viewer. That's a little tool that will help you tweak your project. So
we're gonna hit Export. And its gonna load it into the Viewer. And what we see is the
great, big, huge cube is right in our face. So let's make a quick change to that.
Scale it down.
Just to show that we made a change and let's try again.
File > Export > JSON. We can kill the first one. And so there we go, that's that's our change. This
gives you the options of of tweaking some elements. So for example I wanted to
adjust the lighting, I could come here and adjust the lighting in the scene. And
it doesn't affect the picture in the background because that's set to shadeless,
and its not affected by light. And if you had used some of these other settings in
your scene you could adjust those as well. So we can close that. And we can go ahead
and check the scene in our Project Manager because we were just looking at the
JSON export only. Let's go ahead and look at the full project. Now you know
how to customize this Blender scene and make it your own.
Alright one little detail I wanted to cover is the F12 key in your browser.
Whether its Chrome or Firefox, if you hit the F12 key it opens this console and will
display any loading errors you might have. So any time something's not working
when you try to load it, go and hit that first and you will
get a record of what's happening. So in this case I refreshed and just navigated
to there. And if you've got something wrong, missing files, or or warnings,
you'll get that here. And so it's kind of a useful little piece of information
that will help you along your way. Now while we're delving into the SDK, I would
like to show you a couple of other example applications that ship with your
SDK. So starting from the index file of your SDK, we're gonna look at some of the
basic applications that will help you as you start your path in Blend4Web.
We're gonna check out this Balloons application. What this is, we've got normal HTML.
And this is a little bit opposite of the Hello World demo that we did. This one plays over the
surface. We have a button here that's defined with CSS and HTML and when
clicked it plays a little demo there. And this is all within Blender and let's see,
another one you should look at is the Cartoon Interior. Now this is a nice
little demo. We have the ability to place these objects into the scene and we can
select them and turn them. And this uses elements HTML and CSS if the JSON file
doesn't load at all you can still see these buttons because they're defined like a
normal web page would be built. And and let's look at one more. I want to look at
this one here. So this one doesn't have any user interface type HTML overlay.
What it is, it's completely a Blender created scene, and it is responsive.
So you can go ahead look at that to. And so the way to look at these projects
under the hood, if you look at the address here, in your Blend4Web root Directory, we
can go to deploy, tutorials and examples. So let's take a quick look at that. So if
we go to blend4web, deploy, tutorials and examples. So here, for example, is the
Cartoon Interior and a real simple one to look at: let's look at that that
Interactive Web Application. So here is the various textures for that and the source
blend file. And, Web Page Integration, so if we were to open the .blend file for
this. So there it is. Oo let's take a look at those and just see how they're
made. So one thing to be aware of is that the reason we're running a server
on the local machine here is because the security settings of the browser don't
allow it to run script from a separate domain. Essentially what that means is it
needs to run from server. So once you start getting into JavaScript files, you
need to test your project on a server. And the easiest way to do that is to
spin up a local server. And so that's what that's what's going on here,. When
you look at this directory, once the server has started, the default is
localhost:6687. That's the root directory of your server which is also the root
directory of your Blend4Web SDK. And so that's what's going on there. So I
think that is all the elements I wanted to cover with this video. So hopefully
that helps provide you a pathway to getting started with Blend4Web. So if
you get stuck on anything while you're discovering Blend4Web, come on over to
the Blend4Web forum. There is a
lot of folks there that can help you out. I hope to see you there. Thanks for
watching.