Verge3D Puzzles Visual Logic

Verge3D Puzzles Visual Logic

Let’s take a look at the Verge3D
Puzzles visual logic system. So this is the early version 1.0 of Verge3Dd but I
think if we get the basic concept of how things in your Blender scene interact
with the Puzzles logic system, it will be easy to keep up with future changes. So
this is the scene I’m going to work with. I’ve just put together a few things to
work as an example. What I have here is a text object and then I’ve got a scanned
model that I’ve imported as an OBJ file. And it came with its texture and
material and then I’ve got a few cubes here to use as buttons and they are
parented to my pump object there and I’ve got an animation to work with here
so you can see my cubes move along with my pump scanned mode,l and then I’ve got
a library object and this isn’t entirely necessary but it’s a good idea to take
all of the materials that you have in your scene and attach them to a library
object, that way you can make sure they’re all exported properly. If you
want to utilize some materials that you don’t have attached to an object at the
beginning, they won’t be exported so this is sort of an optional thing you can do
to make sure you have all your materials exported and all I’ve done there is
just taken a a plain, subdivided it, and then assigned a material to each each of
my faces there. So the first thing we’re going to do is we’re going to open the
App Manager to create an application, so since this is a visual logic app
I’m going to go ahead and just name my app “Logic” and what I’m going to do is
before I hit the Create App button, I’m gonna give you a split screen view so
you can see what happens in your apps folder, let’s go to Verge3D/applications
so here’s a list of applications, this is my main Verge3D
file structure so if I go to applications and if I hit create app. Now
we have a new folder in our applications directory and here are the files for our
new application, so let’s return to the main screen and now we have our app
listed here so let’s open that up and go to Puzzles. Now currently we have the
default starter scene, so what I’m going to do is take the Blender file that I’ve
already got going here. I’m gonna save it over the top of the default one that was
created, so I’m gonna hit File Save As, and here is the the one that was created
and so I’m going to save over the top of that, so the next thing we need to do is
do a glTF Verge3D export. So if we go to File, Export, come down here we’re
gonna do the Verge3D glTF. And let’s make sure it’s going to go to the… since I’ve
saved it from a different location, just double check and make sure it’s
saving the glTF file in your applications directory.
We’ll hit Export, so here’s our scene again so I’m gonna go ahead and and go
back to our Applications Manager and I’ll go ahead and hit Puzzles again and
there is our our scene. Now the first operation we’re going to do is we’re
gonna hide, and then for a selector we have our object selectors,
our animation selectors and material selector, so we’re just going to pull out an
object selector and in the drop down we’re going to select our materials
library, so now when our application runs it’s going to hide our materials library.
So let’s try running it. There it’s done so now every time the app loads the
first thing that happens is the material library gets hidden, now in order to save
our changes we need to hit the Save button, but here again I’m going to pull
up a split screen view so you can see what happens when you do that. Right now if you refresh the page, you would lose everything you
have done here, and so let’s show you how the save actually works, it’s not
important but if you’re a coder it kind of helps to understand what’s going on
behind the scenes, so in our Logic application we have a JavaScript file
called Visual_Logic.js and you can see there’s nothing here, so you don’t need
to worry about this but this is just a matter of helping understand what
happens when you do visual logic here, so I’m gonna go ahead and hit save, now once
I have this open with Sublime Text once I click on this, then the code that I
saved magically appears, so everything that you do here, once saved, will update
this visual Visual_Logic.js file. And one little gem that might help you, you might
not find this your first time, is down on the corner here there’s a little drag
spot where you can drag it out and change what you need to do. Sometimes
it’s helpful to see your whole scene and other times when you’re working on your
logic nodes, you don’t really need to see much, you can just drag it out and fill
it up like that. So the next thing I’m going to do is make make it so when I
click on this it plays the animation, so let’s go to events and bring out a when-
clicked and we need an object selector so if we go to the object selectors and
we can pull out an object selector and you can also, if there’s already one in
the scene, if you have it selected you can hit ctrl C to copy and then ctrl V
to paste and you’ll have another copy. And then you can always use the drop
down to select your object, so I’ll stick that in there, and I’m going to bring up
my pump model what did I call that thing? Pump, there we go,
so when clicked, and then I want to play animation, so we need to… there we go play
animation we’ll pull that out. Now we need another selector we’ll go to the
selectors and pull out the animation selectors, and so you can see I have only
one animation in this scene, so I’m gonna delete that one right now.
So now if we click our object it should play… but I’m gonna save and then hit
play to restart our app, and now when we click our pump it plays the animation.
Now I have these different buttons here and what I want to do is be able to
change the color of our model according to which color we click. So when you
select the top level of of your logic blocks you can it moves them all around,
but you can also copy them just like that. I’m gonna start with a red cube and I’m gonna say when clicked, now where’s my
red cube? There it is, and then it’s gonna play the animation, but I also want to
assign a material, and we need to get out a selector of a material there’s a
material selector, so there’s our red material. I want to assign red to… and I’m
going to copy that one because we’re gonna assign it to the pump… oh, when it
has “of” pump that’s actually the animation of pump so
let’s delete that and copy this one. There we go, And let’s play
animation and assign material, red, to the pump. And I’ll hit Save and Play, and see
what happens. There we go, so now it’s assigned that material to the pump. Now, I
would like to be able to get my original material back, so when we click the pump
I would like to have it revert to its original material, so I’m gonna copy this
and put it up here and we’re gonna assign the pump material which I named
so that I could figure out what it was here, there we go Now I will save and
play, and so now if I click my pump, it goes back to its original material. The more
groups you have in place the more you can copy and paste, so I’m going to hit
ctrl C and I’m going to copy it three more times. So when clicked I’ll change
that to the blue cube. I want to play the animation and assign the color blue and
then the green cube assigns the color green and the yellow cube whoops,
yellow cube assigns yellow. There we go. Let’s save and play. There’s red, blue,
green, yellow and back to the original. Okay, let’s do a little bit of dynamic
text logic with our text object here. The first thing I’m going to do is
create a variable for entering some text so let’s just go to our variables and
create new variable and I’m just gonna call it input. I’m gonna drag a set input
to, onto the screen and then I’m going to… Let’s see I need a text input. Where do I find that? Prompt for text there we go. This is going to… wait actually I need a
select… there, there’s my variable, so in the little drop down for your variables
you can select all the variables that you have in your project. So it’s
gonna prompt for text and it’s gonna give you a message, it’ll make a
little window here that gives you a message, so I’m just gonna put “enter text”
so I’m gonna go to text and just get a little text box here, and I’m gonna
change that to “enter text” and so that will prompt and so I want to make this
an on-click function so let’s drag in and on click, so when my text objects,
I’ll just copy that in the drop down, find my text. So when text is clicked
it’s going to set my input variable to whatever’s written in the prompt for
text, so then we’re gonna pull out an update text operation, so we’ll stick
that in, and the object… there’s the text object we’re going to update text with,
we need a variable, our input variable, so let’s go up to variables and pull out
that with whatever we input. All right, let’s try that. All right, so I’m going to
click my text object, and I get a prompt. I’m going to write “hi”, enter and it
changes to “hi”. So now let’s add some if-then logic so
let’s go to our logic panel and I’m gonna pull out an if statement. So I want
to be able to dynamically change the color according to the text that we
input. So let’s add some if-else functions here. Let’s build this up to
have a total of four options, and on these little gear icons, the only way to
make it disappear is to click it again. So, if we want if input.. oh we need it we
need to do it like a logic operator this you know we need this deal right here, so let’s
copy our variable, and then we need just a text entry here so let’s
copy that so if our text input is red, we want to
do… update text objects… assign material and then we want to assign… let’s grab a material already there, and we want to
assign red, so if our input is typed in as red we want to assign red to our
object. There we go so let’s add a couple more of those in. What I’m doing is I
just copied it and I’m just pasting copies in. And so, what are our colors
here in order here? So we’ve got red, blue, green, yellow. So let’s change that to
blue, and we’ll change that one to green, and that one to yellow, and then we need
our assign material copied, ctrl C to copy, to control V to paste, paste that in, paste
it in and paste it in here, so assign red… so if it’s red a assign red, if
it’s blue, assign blue, if it’s green, assign green, and if it’s yellow, assign
yellow. And we want to place this into our little function here like this. There
we go. So, when clicked, when the text object is clicked, it’s going to set our
variable to an entered value. It’s gonna prompt for a text input and
whatever we input is going to set it to that value, then it’s going to
update a text object to whatever we typed in. Now if that text entry happens
to be red, it’s gonna turn our text red. If it’s blue, it’s gonna turn us blue, etc.
So let’s hit save and play. To see if it works. I’m actually going to
refresh to start from the beginning. We’ll hit refresh, by the way, make sure you hit
save before you refresh your page. You will lose it all! But then if you’re
accustomed to working with Blender, you’ve learned by now to be careful
where you click. So let’s click on our text object, we’re prompted for text, I’m
gonna type in “red”, enter, and it updates the text to our red string as well as
changing our color, so let’s click it again.
Let’s try green. There’s green. Let’s click it again, let’s try blue, and
there’s blue. And if we enter something arbitrary… whoops, then it doesn’t change
the color it updates the text, but it doesn’t do anything to the color unless the
value that we enter matches one of our input cases. So now that you’ve got an
idea how the logic editor works, I’m gonna invite you to look at some of the
other examples that come with the SDK. Let’s go ahead and hit the back button,
that’s gonna take us to our App Manager. Now I’ve got
a couple here that you won’t have, Iv’e got a couple of my own applications I’ve
already got started. A place to start is, go to the E-learning application because
that has a lot of great logic in it, so let’s open the puzzles for that, and I’m
just gonna drag this out to give us some more room to look at what they’ve got
going on here. So what this is, this is a Create List block. This basically
creates an array and in that variable you have all of these entered in. I’ll
give you a quick look at what the JavaScript looks like and so here’s that
actual array right here it’s just it’s just a simple array with with all those
entries, so you don’t need to know about that but if you do much coding it it
kind of helps you know what’s going on. And that way this can be used in other
places in the logic to to refer to all of these objects here, so for example we
have “all parts animas” or all parts anims
we’re gonna so we’re going to stop all parts anims, so if you come up here we see
that that name refers to all these pieces, so let’s take a look at some of
the others if we go to the Ring, you can see there’s a lot of, you know, materials
changes and stuff like that here and the spinner, this has got an
animation it starts and stops with. I think after you play around with this
for a little while you’ll realize the power that this visual logic system has.
Just to make sure I cover everything that’s on here you have a zoom in and
zoom out function, and if you somehow get lost this centers your code, you’ve got
that little drag corner there to drag it out, you can hide your code to look at
your app, and then bring it back out again, if you hit delete you lose all
your code but unless you hit save it’s not really gone, you can refresh and it
all comes back. If you do a lot of coding and forget to save, and hit refresh
you’ll lose everything that you haven’t saved, so kind of as a habit, every time I
make any changes at all, I just go ahead and hit save. And then the play button
restarts your app and that works a lot but sometimes if you want to start back
from the beginning with some parameters that that just come from your Blender
scene or something you can just hit refresh, and that works. So this is the
blend file that I started with . Ccheck the links in the
description and I’ll make this available for download if you want to play with it.
One other thing I wanted to cover is, if you go to your application file here’s
my Logic file, if I was gonna upload this to my website, I would upload all
of these files with the exception of the blend file, you don’t need that, so once
you upload these, your HTML file will be the landing point and it will
then refer to these other files.

Only registered users can comment.

  1. Interesting. The app "Drone Blocks" works on the same principals, only for Drone/UAV instruction/Flight programming. A great teaching element.

  2. could you do a tutorial on how to embed it in a page using wordpress? Like can it be just a window inside the whole page as in sketchfab?

  3. Will …could you tell me of a place online where I could do 3d work (using blend4web or verge) so I could practice ?I wouldn't bill for anything..just for practice..

  4. When I export Text objects from Blender they don't appear in the WebGl. The object is available in the logic editor, it just does not display.

  5. You´re like my new hero! Thank you for sharing this tutorial! So inspiring!! I really like this logic. How do you embed this into a wordpress site? Thanks.

  6. wow, this is so fun to learn, i wan't to create a car configurator maybe this would an awesome alternative to unity or unreal. maybe you can do a tutorial for the future like replace object or hdri environment, physic shader.. ans so on.. cheers.

Leave a Reply

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