 Hello everybody. Can you hear me? Where for him? Where for him? Okay, and I'm Daniela DeLuca. It's Luigi Berry. We are from Chinaca in Italy and we want to introduce you back to the Middle Ages, which is a brand-for-web prototype that we like to call a point-and-click adventure game. So we are from Chinaca is a Chinaca is a main Italian Italian supercomputing facility hosting hosting machine used to supercalculation for research industries like weather, forecast and other calculation. Chinaca visit is a small department made by, I don't know, we are like six or seven persons inside the whole Chinaca. Focus on computer graphics. So scientific visualization and more recently cultural heritage, heritage stuff. Real time or pre-rendered. We've made some short movies and some other stuff. Today we want to introduce this game, it's a prototype and it's an educational third-person adventure game. We want to focus on online PC browser-based game. So that works without any plugins or without any installation and that is also compatible with the mobile. In this game, you play the role of Guido, which is a typical medieval name in medieval Bologna, which is our city in Italy. He is a mercant apprentice in medieval period in Bologna and with an encounter, a ghost, he encountered a ghost that creates time vortex for some reason and Guido finds himself in the Roman Bologna. So he had to solve quests and puzzles to go back to the Middle Ages. And get back home, of course. These are some people involved. I want to thanks everybody because the support and the work that they are doing, they have to for this prototype and we want to share with you about the path, the difficulties and the technology that we've used to make this game. Of course, we are a Blender-based studio that uses Blender for modeling and real-time or pre-rendered animation. So we thought we could use Blender too for this in particular for modeling. But the community gave us a big help because we are not capable of rigging stuff or make so much complex things. So we can borrow models from Bandswap or use the Chigi cookie flex rig, which I will introduce later, to use in our project. Also, this is a prototype of a web app, but with no plugin installation, we've tried with Blender Game Engine, we tried Barster, or also WebGL 3JS. But we find quite comfortable with Blender Web, because it's much more easier for us. This is our experience, so I want to share it to you. Blender Web has the JavaScript part that allows you to do everything that you can do in a browser, but in 3D, you can pick object, move, create, I don't know, we'll see later something, create diffs, the ID, or interaction and anything. What else? Yeah, you have to do this with Blender Web APIs or a lot of math depends on your problems. And the inventory system and conversation engine of this particular game are borrowed from another website. This could be better, but it isn't good enough. So we extended for our purpose to achieve our goals. We'll see that later. But for the Blender part, I wish to tell you something about our previous movie made in a few years at Sineca. These steels down there are from the movies, and this is the character that shows you what happened in Bologna through centuries. So the evolution of the city is in the city museum, and we have done most of the 3D modeling. Other are coming from some project, some research studies. And we use this to explain how Bologna is evolved through centuries. So we have these models. We can re-adapt, because they're iPolis, we can re-adapt them for real time. And for example, this steel down there is a Roman Bologna, and we grab some models, re-alaborated for real time, and create an asset for the game, just an environment with the in the Blender Web engine. So this is a web browser, you can reload the page, it reloads, and that's just an asset. If you want to do something more, you have to do JavaScript, I'm not capable of this, and you can do interaction and moving through the environment. Okay. So there are other projects from the past, this is from the latest century. This is called Nume, which is a real time navigation into Bologna, and these are some of the models which we re-alaborated to do the movie. So this is from an ancient, this is an ancient version of this, which is the actual look of a part of the prototype of the game. These are the new asset and the new texturing you see. For the character part, we dedicated a lot of time experimenting, and these are some animation tests. There is a model on the community from Blendswap community, and it's free to use by CC by license. So we can reuse and optimize because it's really heavy, 50,000 polygons. So we have to reduce the number of the birds, and this is my first test. We haven't so many skills, so the first test is like, I don't know, this, the first working test. I don't know, the head is here somewhere, you can find it. Okay. But then with the ray rigging of the model, we have a functioning character, and after that we have to, of course, bake and paint on the character to reach the, to reach optimized version or so for mobile. So like, here's in a steel window. After this, we encountered the Chijikuki Flex Rig, which we used for other, for other movies, but we think that it's too comfortable to work with this rig because you have infinite variation. You should try this because, yeah, it's open source because it's a blank file with so many plus because you have triggers, you have sliders, you can change the shape of the body, shape of the face, the colors, the dress clothes, et cetera. And with this thing, we could reach all the non-playing characters, we could populate our real-time world. And we'll see how, but the real problem of this kind of stuff is that it's not made for real-time. And there are hundreds of bones and shapes for the rig to move. And this is a problem because in WebGL, in browser, you have to keep low your bone number around 64 or less is better. And for this, we started with the Chijikuki Flex Rig, a model standard character, like a merchant, and then applies all the ship keys and removes the armature. So we have the T-pose model standard with no rig at all. It's a model without ship keys with only one UV map. And so we can paint and bake also the clothes on him to reach this thing. And with the powerful node-based Blender render and Blender game, and Blender for Web because they are similar, they are mapped one with another, we can reach decent shading. And after this, it's lifeless because you have no rig. So the second step is a Rigify setup because Rigify, we discovered, is much more comfortable to play with. And we can replace the whole rig that we have removed with Rigify, generate the rig, so the character has a standard rig. But there is a problem. So we save this Rigify as an NPC node-playing character merchant animation. But there is a problem. He has too many bones too. So we have to throw them all down away. Keeping only the deformation bones, that's the one that we need to deform the body. We don't need the shapes that allow the animator to move the body because they are plus that are functioning in Blender but not comfortable to export in WebGL or in Blender for Web. So this is a second file named NPC merchant that helps us and that is exportable. This is our production file that works in Blender for Web. You can export and have the steel model but with the rig. A third step is to animate with the first file that one dedicated to animation with all the rigs so the animator is comfortable. But then in a temporary file, we bake this animation only for the deformation bones that we kept in the production file. After this, we can append the final animation through the game and then it works. We can choose between idle animation, work animation and manage that in Blender for Web and there are lightweight and manageable through the WebGL plugin that is Web, Blender for Web. So for the more technical part like JavaScript and stuff, I leave the word to Luigi. Okay, so in order to make the game playable on every touch screen devices, we decided to adopt a point and click general. As you can imagine, we have been inspired by LucasArts Monkey Island game. So let's talk about the character movement. When you click on the screen on the 2D screen, the game calculates a target point for the character moves. The target point is calculated starting from the point clicked on the screen with a ray projected toward the floor plane, with a ray projected from the camera toward the floor plane. The speed is calculated depending on the distance and the animation can be walk, run or idle depending on the speed. Here you can see a little example. To get the correct quaternion rotation of Guido, again we had to do a lot of math, math, math again, math. And while we were looking for the right trigonometric correction, we had some issues, some funny issues like this Michael Jackson move walk. You can imagine the right music here. Okay, in the game we needed an inventory to store every item Guido is collecting during his adventure. So starting from a simple textual inventory system, we created a graphical one working inside some HTML, DIV tag, enabling the analysis of objects, their combination, their use in the 3D environment. To end our conversation, we started from a pre-existent library managing a direct dialogue with a multiple choice answer. This library has been extended in order to enable complex dialogue and complex dialogue between the player and all the character inside the scene and to enable the conclusion of the dialogue by selecting a validation. We modified it to suit our needs, adding also the possibility to give and receive objects so to interact with the 3D scene in order to progress in the game. The camera movements, in order to explore the locations, we need also camera movements. Those movements are activated when the character reaches specific areas using blend for web collision sensors. Here you can see four areas with different colors that enable the four different camera positions. Okay, what's the feature of this project? We built a prototype to get into the framework and after a year of pause, of stop, we used again this to develop a web virtual museum. It's called a movie and it's a prototype at the moment. It is dynamically and procedurally built up on a database of a search in a database of over 300,000 paintings database. It's possible to explore the buildings, the rooms with the same point, the click movement that we saw for the game and it works as a browser. It can contain 180 paintings for each floor and every user can read the labels, can have a detailed view of the opera and the application is also designed to work with touch screen or smart mobile as you can see. We also prepare some special galleries dedicated to particular scanned operas. All of this thanks to blend for web, of course Blender. Okay, thank you. Thank you for the thank you. Do you have any question? What is your vertex count? What's in power? Vertex count in the game. Vertex scan count. Oh, vertex count. So we can open the file. The medieval level, I think I keep it lower than 64,000 vertex and every character around 3,000, at maximum 5,000. And for the bridge, this is more low poly, low polygon, the bridge that you saw at the beginning. So I think there is like 20,000 vertices. Can you again show the link of the side move here? The link of? The side with the... It's not published yet. Oh, okay. It's a prototype. It's still a prototype. But we need to finish the floor and then the partner are keeping building the database, so it's still in progress. No, I mean like the video that you showed in the end. The video. That you showed in the end. Move here. Yeah, also the museum. Also the museum. At the moment online. Oh, these are two, yeah, different works and they are both prototypes. This is from last year and the museum is this year's work. But the museum is also prototyping work in progress because we only have access internally. Sorry about that, but you can see it's moving. The name, it can be deployed maybe next year. Okay. Okay. Thank you. Thank you very much.