 So I think we can start, yes. As you can see on the screen, I will talk about creating games using Blender and Blend4Web. And my name is Mikhail Luzan, I'm from the Blend4Web team. I hope you're already familiar with the Blend4Web engine. This hands up who never heard about Blend4Web. So a lot of people, I hope my presentation will help you to see what is it, Blend4Web engine. And I'm a leader artist, lead artist from Blend4Web team. I'm in charge of making visual content for demo scenes and applications. And some of you who are already familiar with Blend4Web engine, I hope already seen one of my favorite applications made with Blend4Web engine. We called it Petty Gore's Tale game. And if you're not familiar, you can follow this link, even right now using your mobile phone. It's work directly in browser, you can test it, and later I will show you it here. But today I will focus my presentation on a new chapter of this game. We called it Petty Gore's Tale quest. It's a simple quest. Like there was a lot of them in 90s. It's just simple point and click quest. And I've created using only Logic Note system, our own Blend4Web Logic Note system without using programming. And now I'll show you, at first I'll show you a Petty Gore's Tale game. I opened it directly in browser, as you can see. Oh, there's a sound. So as you can see it's full 3D scene. I can move mouse around here. And here's loading additional objects for the scene, so it's separated. Now I can see the screen saver of main menu. It's very long, so we just skip it. I can push a button to show you a game process. It's difficult to play with touchpad, so I just run a little. So it's a simple arcade, I think. It's nothing to tell about the gameplay here. But it runs directly in browser. And now I want to show you, without any plugin, it's WebGL. Nothing need to install on your browser or something. Just run it. And so I can hear you. Oh, it's a single. And here you can see a new chapter. You can find it on our site yet, because we're still working on it. And we will release it at the end of this month, I hope. It's a simple button request. Here you can see an inventory in the bottom of the screen, where you can choose what you want from the character to do. So you can choose a hand, eye, so character. You can point on a different object, and the character can pick up this or look at this. So it's a really simple thing. There's a lot of that kind of games made by Telltale games, for example, and so on. And I'll show you this scene in Blender. Yes, this is a logic tree that creates all this logic in the game, but not all. Here's another logic tree. So before I start to explain all of these notes, I want to give you a basics of Blender WebLogic node tree system. And before that, I want to talk about a difference between Blender game engine and Blender web engine. It's a little boring, I know, but I need to do this, because some people, some user, Blender users on different forums think that Blender web is just an exporter for Blender game engine. And it's not true because these projects are really different and they develop it separately. They have some cross sections between them, but they're really not related to each other. And one of the first points to compare is scene structure. So both of them, both of these engines, use Blender scene structure to maintain the scenes. So they use this relationship between objects, animation, materials, as it done in Blender scene. And next point is material. So both of them use Blender internal render material for the materials, as base for the materials. But Blender web add some special nodes. We call them Blender web special nodes to increase possibilities of material creation. Next point, it's a viewport. Both of them use Blender JLSL viewport to prepare the scenes. Next point, it's post-processing. Both of them use their own post-processing, so they're completely different. Some of post-processing, similar to Blender post-processing, for example, DOF, they look similar, but we add some additional preferences to increase possibilities to set up this effect. But they are really completely different. And another point, it's a very important point for my presentation today. It's a logic system. So Blender game engine use its own game logic system, and Blender web engine made its own logic node system, and they are completely different. And next point, it's physics. Both of them use bullet physics engine. Next point, it's API. As you may know, Blender game engine use Python API, and Blender web use JavaScript API because it runs directly in browser. So if you need to add some code or to write a script for API in Blender game engine, you will use Python. In Blender web, you will use JavaScript. And final and very important point, it's a result that you will get when you finish your project. In Blender game engine, you will open it in Blender player, OpenGL Blender player with Blender file. And in Blender web, you will get a WebGL JavaScript application with the JSON file, which you can put on a server. And any user can open it from your server directly with your browser. Now I want to start with some basics of Blender web logic node system. So here you can see some of very important and most often used logic nodes. It's enough, right? Here you can see an entry point. It's a root for each logic tree. You can create a multiple amount of, unlimited amount of logic trees. But every logic trees, you will need to start from this logic node. And every node that will connect to this tree will create this tree. Another very important logic node, it's a switch select node. This node will wait from a user when he click on a specific object that added to this list. So for example, I'll add a cube to this list. That already exists on the scene. Connect this to entry point. And when I am run, oh, sorry. Something going wrong. Use, sorry for that. I'll use Alexander. Can you help me? Sorry. It's an Alexander, our programist. You can see his speech a little later in 14, I think. 14 to another. Oh, OK. Sorry, I need to switch to another SDK. It will take a few minutes. We prepared hard, but not so hard. As you can see, it will take a few minutes. As you can see, it's a Mac book, but it's with Ubuntu. So it's like a monkey with a bump. So we can expect anything from this. So this is a demonstration of problem-solving. I'll show you how to connect to the key. Blender, Blender for Web SDK to Blender. So we need just write here a path to the SDK. So I downloaded an SDK. I'll choose here a path, save user settings. And reload Blender. And now I'll test it. Oh, yes, it's OK. Around perfectly. I think something just happened while we were extracting or something, maybe correct. So I'll continue. Thank you, Alexander. Sorry, can you hear? Size of interface? Yeah, it's so small. Hi. You mean I need to DPI in my, it's HD quality to read? No, I will zoom some of nodes, OK? I can do this anything more. So as I already started, I just added a cube here, connected to entry point node. It's quite enough to see. OK, I add here a cube. And now my application will wait for me when I click on the cube. So I click on the cube, nothing happens, because I haven't connected anything to this output. So to see something, I need to connect to this output. And I want to introduce you another node. It's called PlayAnimationNode. It can play any animation on any object that will select it in this list. And I'll add a cube to this list, connect to this output. So when user click on the cube, this node will pass logic through this output with the name of this object. And all nodes that connected to this output will proceed. And I'll add a simple animation for this cube. I move it a little upper. And now I'll run my application. And when I click on the cube, it starts to move. It's very simple. And another two very important nodes. It's variable store node. This node can create a new variable with a specific name. For example, I create a new variable with name, click, and set a value of 1 to it. And I need to create a sphere to show how this works. And I'll add this cube, this sphere to switch select node. So this node will wait from the user when he click on the sphere. And I'll connect sphere output to variable store node. And I also need to cycle this logic on switch select node. So when the user click on the sphere, it will play this node, variable store node. And it will create a variable with name, click. And it will return a logic to switch select node. So this node will wait for another action from the user. And the next node is to see how this node works. We need another node called conditional jump node. This node will compare any variable with any value that you will enter here. So just connect this node between switch select and play animation node. Add a variable, click here, and compare it to one. So when I'll click on the cube, logic will pass through the first output. Conditional jump node will check is variable click equal to 1. And if it's true, it will pass through the first output. And play animation node will start play animation. And I also need to cycle this logic on switch select node. So it will return. And if it falls, I also need to cycle this switch select node. So if the user click on the cube and conditional jump will check this variable. And this variable is not equal to 1. It will falls and all logic will stop. But now it will return to switch select node. And let's test this setup. As you can see, when I click on the cube, nothing happens because conditional jump passed logic through a false output. And when I click on the sphere at first and then click on the cube, logic start to play animation. In other two very important nodes, it's hide object and show object nodes. As you can see by the name, one of them hide any object on the scene and another reveal any object on the scene. So just connect them to this tree branch. So I will hide a cube after animation will be played. And I'm also create here a cone at the end of cube moving. And I need to set hidden checkbox on it. So it will be hidden after the application will start. And here at the end of this logic branch, I will reveal it. So I'll start an application. First I need to click on the sphere, then cube, cube start to move. And at the end it was hidden and the cone was revealed. So that's how the logic nodes works. It's the basics of it. And let's look at more complex example. Before we start talking exactly about Pettigor-StaleQuest, I need to show you another example. Here you can see a simplified version of a Pettigor-Stale project. You can see a structure of it. In the base of this project, you can see a material and texture library blend file where all textures and some shared materials can be located. So here you can see a few textures that will be linked to some of project parts. In the middle of this structure, you can see different assets and wayfix and characters files that will be linked into the final scene. So here you can see some scene assets that just located on different layers. There's no sound, sorry. Each of them added to a special group. So I will link each object using doubly groups and also shared materials like this. And here you also can see the character model. In this group also added its armature. And as you can see, he already have a hammer in his hand that also added to his group. Near this blend file, you can see a file with animation for this character. For example, I already made a simple animation for this character where he picking up a hammer. And from these assets, I'll create a simple scene. So using link and groups, I'll add these boxes around. I love Ubuntu, but not Unity desktop. Then I'll add some other assets. Sorry, maybe it's so boring. No, no, it's OK. I'll try to do it quickly to move this. So I'll just put these things around. If you're tired, feel free to sleep a little. So I'll put it somewhere here. And now I'll connect a character to this scene using groups. So it's in the center of all scene. I'm also create proxy for its armature to test an animation. And we'll set the expert on it so it will be not exported to the engine. Now I'll link actions. So here you can see different type of actions. This is a simple action for this character. Character's armature has an inverse kinematic in it. But Blanford Web Engine hasn't support inverse kinematic yet. And it's need to bake this animation using Blanford Web special baker tool to bake it directly to deform bonds. So here you can see two animations with the same name. It's animation that created using IK and animation that baked. But I need both of them. In Blender, I will use animation with IK. But Engine will replace this animation by baked animation when I will export it automatically. So just link them, just add animation to proxy. So here you can see simple idle animation for this character. His moves a little. And now I'll create a logic to create interactivity for this application. I'll switch this checkbox in scene preferences. Then create new logic tree. And it's already with entry point. So I can start a new logic tree. And now I'll add node this node. I'll add at first play animation node. I'll select here a farmer mail group. In this farmer mail group I'll select farmer mail armature. So the animation will be played on farmer mail armature. And I'll need to type the name of animation I want to be played. I just copy and paste it here. And I'll set a loop on it. So this animation will be looped and play it cycling. And now, if all all right, let's test it. Oh, it's run. So here you can see that character moves a little. Animation played. And now let's add simple interactivity to it. I'm also have a baked version of the action changed automatically. Yes, engine takes baked version by itself. So I need to work only with usual animation and always will see what I made. And now I want to add some interactivity. I have a farmer mail picking up a hammer animation where a farmer picking up a hammer. And somewhere in the middle, as you can see, he already have a hammer in his hand. So I need to put this hammer that lane located on the ground somewhere here. So it will be looks like he picking up a hammer from this place. I'll add a switch select node. So this node will wait from a user when he click on the hammer. I'll add a hammer here. And I'll add play animation node that will play animation on a character where he picking up a hammer. I'll type it right here. Let's test it. So character just standing. Now I click on the, I think it's cache. It's always problem with cache. Sometimes loads the previous export. So I need just to open a console. I hope this all OK with this. Yes, set up. Don't export that. Maybe I wrong with the name. No, it's OK. Select switch on hammer. It's also clicking another run. OK, it was a cache. So this looks like character picking up a hammer. But this hammer still on the ground. And this hammer still in his hand, even when he started to picking up a hammer. And now I need to mix them. At the beginning of the scene, I'll hide a hammer that laying on the ground. And when character picking up a hammer, I'll hide a hammer that directly in his hand already. Hammer, stop. I'll hide a hammer that in his hand at first. Sorry, sorry. What did you ask? Yes, I mixed a little. I'm trying to fix this. So at first I need to hide a hammer that in the hands of the character, in the hand of the character. And I need to hide a hammer that laying on the ground and reveal the hammer that in character hands. It's another high level. Sorry, I see. So now I hope it's OK. Thank you. So with that, I really nervous because it's my first conference. OK, now it's right. We'll do it together. Mm. Ha ha ha. Tak. I had not right. So I need to hide a hammer in the hands of character. Now it's OK. So as you can see, the hammer in his hand are here. And now I click on hammer. It won't work again. Something wrong. So it's OK. Here, here, here, here. Cash, yes, it was cash. So as you can see, it picked up a hammer. No, it's OK. It was. And I'll explain why it was happened because here you can see a special checkbox that called do not wait. So this note was, these notes was played after this animation was finished to be played. And I need to set a checkbox here and add a little delay between these notes. For example, 2.5. I already prepared this number. So this note will ask this note to wait a little before do their things. And now I'll export this. I hope no cash. No, it's OK. No cash. So as you can see, character picked up a hammer. Oh, OK, yes. For now, yes. But it's still, this logic is still in the development process. So we improve this logic every month. And I just want to show you today what we already implemented. So now you can create, using this logic, some simple point and click quest. So we haven't implemented parenting, dynamic parenting still. So it will be needed to allow character to pick up a multiple objects. And you won't need to put it in his hand. And now, if you understand how it works, I start to explain how a particular style quest was made. I'll open this scene. I'll open the particular style quest scene again. As I already said, it's a simple point and click quest. And character can interact with different objects. So I can pick up this pestle on the ground. And it will show in his inventory. And now I can choose the pestle and try to use it on different objects in this scene. For example, I can use it on the keys. No, he don't want to use it on the keys. Or maybe on the cage. No. So I can use it, for example, on this hook. He will throw this pestle to the hook. And it will drop near the character. So all these things can be possible using only logic nodes. And it's done the same as an example that I already shown you. But so I will not explain every node in this logic. I'll just briefly go through some blocks and some of very important logic nodes. So this is the beginning of main logic tree. Here you can see some preparation. It hides something. This node hides something. On this scene, also you can see an apple-shaped case node. This node apply any shape case if it exists on objects geometry. So logic nodes can deal with shape case. So this node just close Troll's eyes. You can see Troll behind the main character that sleep. And this is a very important node for this scene. It's a variable store node that creates a variable with name quest point. And this variable will detect on which stage now quest is proceed. So by default, it's set to zero because it's the beginning of the scene. Then you can see play animation that play simple idle animation on the character. So it moves a little in the cage. And then you can see a switch select node that will wait from the user when he click on a specific object. And here you can see a list of this object. And before I start to explain these branches, I want to explain a logic tree that created especially for inventory. So this is how it looks. At the bottom of this logic, it just a logic created for help button that can hint you on a specific object that you must interact with on the stage of the quest on which you now, sorry for my English. It's still need to work with. And I'll just push. And it's point me on hook that I need to pick up. And these nodes just compare quest point node with different values and try to understand on which stage you are now and show you a specific object with which you must interact with just with a little flashing of blue around of this object. So it's not so interesting to talk about. But we'll talk about how icons of this inventory are made or how logic for this icons are made. So here you can see another variable store that create a variable with name selected. In this variable, logic will write a name of an icon that currently selected by the user. And now by default, it's set to I. And the next node, it's set shader node param that can change a value, can change some parameters in any material. So this node now changes value with name selected in material with name icon. And it's set it to value of one. And I'll show you in Blender how this material looks like. So I haven't a good keyboard. So I need to use this view select. Oh, it's OK. I'll show you a material. It consists of two images, directly images that you can see in usual view of this icon, and additional image that creates a blue highlight of this icon. And here I have a special value that switch on this highlight. So when node shade change, I forgot this name. It's very complex. When this node change a parameter in this material, it just change this value to one. And this icon started to be highlighted. I need to return to camera view. Active camera, sorry. And then further you can see another switch select node. And all icons in the inventory added to this list. So this logic tree will deal with only with inventory icons. And it will deal with them separately of main logic tree. So they will proceed in parallel at the same time. And for example, when the user click on Hand icon, at first a node variable store will change value of node set to Hand. So it will be mean for logic that now is Hand. Now Hand is selected. And then it go through all of materials and set 0 in its value selected in each of its material. And only in material Hand icon it set value to one. So it will be mean that only this icon will be highlighted. And it happens always when you click on any of this icon. And at the end, it just play a small animation. When you click on any icon, it's scale a little. So it just play this animation at the end. So it help user to understand that he click on this object. And so now I can pick up a hook. Now I can show you how this made. I close it a little more. And for example, when the user click on Pistol, what have happened? Here you can see some checks. It's a group of conditional jump node. First node checks which stage of quest are now. And next node compares variable with name selected. Is it equal to Hand or not? If it has a right stage of the quest and if Hand has selected, it will play a group of specific animation where on a character and on a Pistol object where it is picking up. It also hides. Here you can see an object that hide a Pistol after the character picked it up. Because he put it in his pocket, so it need to hide it. And here are some changes in the inventory. So because this object now in the character inventory, this object just reveal Pistol icon in his inventory and play a small animation to highlight this. And finally, node variable store just change a stage of a quest. So then it return it to switch select node. And now if a character click on the Pistol, this node will never pass it through true output. It always pass it through false and return to switch selected and node and this node will wait for another action from the user. And all of these things, all of these branches done the same. So I will not explain every of them. And as you can see, but you can see. I need to show you. Sorry. Now I can use a hook on a case. So it's a spoiler. You can find it anywhere yet as this game too. And now I can use the case on the cage and character get out from the cage. And now he can go around freely. And this is a trick and he can interact with different objects when he goes around. For example, I want to force a character to pick up a troll but he won't or maybe a book. He don't know what to do with it. Oh, he's from a village and just want to dance, as you can see. And it's a really trick because here a simple JavaScript code was to use to force a character to walk around. But only for these needs. All of the things and interaction between scene was made only using logic nodes. And this thing, special JS callback node do, it just here can see preparation where speed of character set up. So what this node JS callback, it connects, what? This node connect logic node between logic node with any code that you can write using JavaScript on your friend or your own programmers write it to you. And then after this code do something with, done something with any object on the scene, it's return writes to common logic nodes. So what happened here? For example, I have here another switch select node with another list of different objects with which character can interact with. For example, I click on the spot and I want from character to go and look at it more closely. And it smells bad. As you can see, there's no sound. It's still in work in progress. So we'll add a sound later. Sorry, what? Yes, as you can, I didn't say this, but Perigal's tail is made mostly using JavaScript. So only interesting made using only logic nodes. But the game itself, we still work with it. So each time we made a new application, we improve them. And we make it easier to understand. We combine some of them. They are still young and pretty. Or maybe not so pretty, but it's more loud, I can't hear. Sorry, I forgot the meaning of opportunity. What? Yes, yes, they all can be done in code. This node is made directly for guys who just can't code anything for me, for example. You can see code? No. Sorry, no, I can't show you because I'm not a programmer. It was made for this application by programmers. I even didn't know where it placed. Yes, this code just used this special navigation mesh to move a character. So this code just moved character by this mesh. And so can I continue? This is almost, I'm almost finished. So this code just moved character to a specific place, for example, an empty, near a specific object. And then common logic nodes, do-lay-things, and play specific animation. And as you can see, I just want to show you a scene before the end. As you can see, this scene has a lot of complex materials that can be exported to the engine without any problem. Some of them has not so many nodes. Some of them are really complex and really complicated. Yes, thank you. And some of objects link it directly to this scene and some of them made directly in this scene. And I just finished this quest. I need to test this portion. Or my character needs to take this. Well, something happens. So using logic nodes, you can also play particle system, change something in your material if you prepared it enough. And now I want to escape. And if all will go, oh, that's all. I think Pedigar escaped from the dungeon. Now I can look around on this scene. So if you have any question, you can ask. If you still have any question. OK. The moment we see is like a scene, you know, one step, another. You have more arcade type with bullet pieces. You can help me. You can find a lot of examples on our sites, really. You can download SDK and there's a lot of them. Thank you. I won't just say a few words before you ask something another. It's very important, this point, because you can run your application even on a toaster or a microwave oven if it has a web browser. And it's not a joke. It's not a joke. We bought a TV for our needs in our company. And it has an implemented web browser. I don't know what is it, a web browser. But we run our applications on this browser directly on the TV without connecting anything another. And they work really good on it. So it's an era when everyone will play their lovely games on the toasters, on the kitchen. Yes, I can show you a special debug. Firstly, a debug tool will be your console. So all problems are displayed here. So you can find any problem if you have. The problem with Hammer is just a cache because a browser always caching all application that loads to save memory. And it will not happen when your user will open your application. It's always not always a problem. It's a problem on Mac with Ubuntu, sorry. But usually it's not a problem. And I want to show you, if you want a special debug tool, not write port, it's always a problem. Port, it's always the key. You can download this and all these things you can find there. There's a physics, for example, demo physics I will not show you now, right now. I want to show you a pedagogical quest and a tools tool and debug panel. Sort loading, it's OK. Here you can see a tool and debug panel which can help you to test your application for a performance and different needs. For example, you can see a wireframe. You can see how much time your GPU spent on rendering different shaders. Yes, we have a debugger. And you can use this as v's. So here you can see a batch view that shows you which object was batched. So they was combined into one submesh and they will render faster than they was separated objects and so on. So any questions? OK, you mean using logic nodes? Now it's not implemented yet, but it's in now to do list. It will be in the future. Oh, OK. OK, state machine buttons. What is it? This panel already in our SDK. No, no, this is a viewer. It's just for developer to debug this. So user will see this clean image, even without this FPS showed. It's just for debug. No, they can't open. It's just only for your development. Oh, yes, please. Yes, you can interact with this. We also have some tutorials on our side how to do this. Another? Yes, please? Sorry. While people are getting out, I can't hear you. Oh, it's for debugging, just you can switch off it. It's by default on, but you can switch off it if you need. It's just for debug. You mean between a few animation? We already tried to implement this thing and just to move it to how to do list to do it better. But it's an hour to do list. It will be, I think, made soon. No, now you can't move individual bones. You can already? I think we can. We need to ask our lead programmers about this. No, there was used a physical, special parenting to physical object, but you can't move using API, I think. We can't visit our forums. You can ask this question on our forum. Yes? Yes, we have full VR support. And you can visit Alexander's speech and he will show you a demo that was made especially for VR. It's called Space Disaster, I think. Yes. We have and bring with us VR helm, but you can test it by your own. On our site, you can just open an application, take your VR and test it. It's OK. It will work us well. And next, if it, OK. Yes, I understand. Alexander, can you ask about Pathfinder? Yes, yes, it's... Is there some open... Maybe it was there? No, that is... The question was more like how do you implement stuff that we have in Blender that's... The first one was not mentioned, the other one is full. I don't know. I mean, it could be, I don't know. Full is full, I don't really believe it's... I don't know how far it's going to be from... So, I think that's all. If you have a question, we can continue in four years, I think. So, I need to go away. Thank you, thank you.