I can remember that day pretty well. It was in October last year (the 13th) for the Paris WebGL event. After our demos (with David Rousset), a tall guy went to me and asked me about the availability in Babylonjs of an interaction engine. At that time, we -meaning the BabylonJS team- had already been discussing about one nodal actions framework, but we were still planning of a new set of demos, especially 3D Manor (see that post here, in French). Demos that forced us to rethink our pipeline and include a decent interaction process. One year after, for the 2015 edition of the WebGl Paris event, we released on stage a new scene to show the benefits of the new actions framework for Babylonjs.
The scene can be found here: http://www.babylonjs.com/.
You may need also the BabylonJs kit for 3dsMax, in order to follow that blogpost: https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/3ds%20Max/Max2Babylon-0.20.zip (click on Raw).
The scene and all the assets are to be found here for your convenience: http://1drv.ms/1OFPWat
A few words about the scene
Before talking about the Actions Builder, let me introduce you to the scene itself. Nothing special, not a great artwork, nothing really fun. The goal was here to be practical and to go straight to the point. Actions. With that in mind, I modelled a button switch, with a green light indicator, then duplicate it two times. I created a plane underneath for shadows (two, in fact), and add a BabylonJS logo in the background for completion purposes. Nothing more. About one hour of modeling.
On the animation side, not a big deal : only an animated up and down button, on 8 frames, and a babylonJS logo, orbiting around its pivot point.
For the materials, you may have noticed that the switch box contains three distinct chanels: Diffuse, ambiant and specular maps. But I calculated more passes (ex: Ambiant occlusion) and collapsed them in the diffuse or in the ambiant map. Some other objects contain a reflection map (metallic parts). As I wanted to show objects on and off (we will see that later), I also created a power-on indicator that is rendered with a babylonJS Fresnel Shader in the self-illumination channel.
I added a fixed camera (a targeted camera, in 3dsmax), a directional light, pre-rendered all the lightning maps, and the scene was ready for some Babylonjs test rendering and tweaking.
Actions Builder : FIrst steps
During this year, the team had worked intensively with Julien Moreau-Mathis (@Luaacro) on that Actions Builder engine. the main direction was done by David Catuhe (@deltakosh), Julien was in charge of the development part and I checked from time to time (with @meulta) the interface and the consistency of the actions. During the creation of that scene we went back over numerous previous choices to be more in line with the “artist mindset”. But finally, here is the process to create a basic actions set.
If you have 3dsMax, you can open the file nammed “initiale.max”.
The idea here is to animate the button of the first switch box and to lit up the related indicator. To do that, we need to select the button in 3dsMax, do a right-click to open the quad menu and then, to select BabylonJs properties. Make sure the “Pickable” property is checked for the actions in the screen to actually do something in the scene.
Close that windows (click on “OK"), and do another right-click and open the BabylonJS Actions Builder. Here we are baby. Let’s do some actions. First of all, you can see in the BabylonJS Actions Builder windows a three term panel. One for the toolbox (contains the available actions), one for the action graph (will receive the actions) and one for the properties of the selected action. Drag one trigger (“Left Pick” is just fine here) and drop it over the object label in the central panel. You’ve created a trigger for that object ! It’s that simple ! Now that we have a trigger, let’s add an action onto it. Drag the “Play Animation” action and drop it over the “Left Pick” Trigger. As you can see, the action remains green until you select it. Do that, and it will turn yellow. Moreover, the properties panel for that action will eventually show up with a bunch of properties to tweak. For that button, the target is a mesh, named “Btn poussoir”, animated from 0 to 8, with no looping parameters. After completion, it should look like the following picture.
It’s now the perfect time to export the scene for the first time. Just in case, click OK from the Actions Builder, in order to validate the action graph, go to the upper toolbar, select Babylon, choose Babylon File Exporter, select the proper directory and options and click on “Export and run”. You should see the scene running smoothly and if you move your pointer over the first button, it should change the cursor shape. Click on it and…bingo, the animation is no played. Amazing.
Let’s do something a bit more tricky: I want to turn on the indicator when I press the push button. For that purpose, I created two indicators, located at the exact same position. The idea there is to change the default one by the illuminated one on a click. Easy. Turn back to 3dsMax, select the push button and open the actions builder once again. Add another “Left Pick” trigger to the tree graph, and connect a “Set Value” action to it. In the properties of that action, indicate that we’re targeting the object nammed “Lightclue” and we assign the value “Is visible” to “false”. Something like the following picture :
The conterpart to that is that we will need to reverse this action if a second left click occurs. As the tree graph is browsed sequentially from top to bottom, we only have to copy the “Set Value” item (select it, Right-click, copy) and paste it over the previous one (right-click, paste). Select the last action, and simply change the value from “false” to “true”. If you export and play the scene, the green indicator should disappear on the first click, then re-appear on the second click. Cool.
Now we need to do the exact opposite of the previous action but on an hidden object in the scene. So, let’s add another Left pick trigger to the graph of the push button, add a “Set Value” action to it, and set the “Is Visible” parameter to “true” for the object named “LightClueAllum”. Do not forget to add a reverse action, just as we did for the indicator. Your graph for the button should look like that image :
It’s a good idea to test the scene, now. Eventually, all will be under control and you should be able to animate, show/hide objects just by clicking on the push button (the Taadaaa effect). I think you should consider to congratulate yourself and pick a coffee. Things will get a bit more complicated, from now on.
Actions Builder : conditionnal thinking
Now, you can easily duplicate all these actions, because they’re bound to the object itself (just have a glance to the 3dsMax user defined properties of the push button). This means that copying an object, copies also all the Babylonjs action graph. Beware to correctly re-affect the actions to the correct object (LightClue001, LightClueAllum001, and so on…). That done, you should have the three push buttons to work properly. More over you can add three green omnidir lights, and animate their intensity value, to add more realism to the scene.
What we want to do next is to illuminate the BabylonJS logo in the background when and only when the three push buttons are on the “On” position. Assuming everything is properly connected, let’s move on to the next step. This time, we do not want our action to be launched on an interaction with an object. We want things to happen when other actions had been completed. We also know that the first push button is “ON” when the object “LightClue” in not visible, right? So, if “LightClue”, “LightClue001” and “LightClue002” are not visible, that is a good set of conditions to illuminate our BabylonJS logo.
To do that, right-click over an empty part of the 3dsMax viewport, and open the BabylonJS Actions Builder for the scene. Add a “Every frame” trigger and drag over it a “Valuecondition” (the red shapes). In the conditions properties, select “LightClue” to be “is Visible” equal to false (well, not visible…). Then add a “Set Value” action to that branch, hiding the object “Text001” (in fact affect Text001 to be “is Visible” to false). Test that in your favorite browser: the BabylonJS logo should disappear when you click on the first push button.
The good news is that you can combine more conditions : add another condition just under the first one, that tests the value “false” of the “Is Visible” property for the object named ”LightClue001”, and move the “Set Value” to the bottom of the graph (create a fake trigger and drag and drop over it to make that action easier). Now you need two conditions for the logo to disappear ! You have just realized an “AND” condition with no code at all !! Brilliant.
And what if you want to make that logo appear again ? Simple. Add as many other conditions as you may need (but not combined, this time) to test the scene state and bring back the logo again. And to illuminate the logo, just create another object, hidden by default, and make it visible when the conditions are fulfilled.
For my scene, I tested the values of additional lights (the three green omnidir lights I mentionned above), rather than the “Is visible” tag of an object. It seemed to be more convenient, to me. I also added a lot of things to happen if the proper conditions are set (dim the main directionnal light, change the background color, set a bright logo to appear, and so on…). And I also connect a set of “OR” conditions to the scene to bring it back to its original state in the case of one of the button is defined to ‘Off” (see that horizontal alignment of conditions in the picture ? This is how you make an “OR” conditionnal graph). I suggest to open the scene nammed “Finale01.max” to see how I managed all my actions and conditions.
With no code at all. Isn’t that brilliant ?