 Hi, hi, everyone. I'm really happy to be here together with you in this lovely city rainy weekend, but still thank you for inviting me for such such an amazing Conference, and I'm really happy here to help you to learn more about augmented reality Advertisement and why it's always good to try before you buy My name is Anastasia Miroshnichenko. I am from Berlin, but originally I came from Ukraine I am an expert WebExcel developer, at least an expert in my sphere, and I'm responsible for augmented reality on a web I'm working at St. Elmos. It is an advertisement agency consisting over 200 of professional all around the Germany, and we are good in experimental Content and we bring storytelling and campaigns Different AR solutions to our brands So as I already said we are using multi-reality is storytelling to break up the rules and brings the new wow effects to show our clients what is possible and so one day people will wake up and realize that augmented reality is here and It happens a lot of question about this sometimes overhyped sector, but the biggest question is how it actually Make money How many of you have your phones in your hands right now? Yeah, as you see it's already 2020 and people still are keeping phones in their hands and everything that is happening right now in technological sector is going around phones so and Advertisement are really keeping an eye on AR because this is the next step This is a new level of how we can interact with our work Customers how we can help them to play around with the product to adapt it to your needs and see what is possible more than it's only shown and Actually XR can help that but what is XR? Do you know? Yes, XR is for extended realities and Actually, it contains everything that you can see here like 360 video You already know it's just a cardboard and and your phone and you're rolling around on your chair to see some 360 videos virtual Reality can be delivered with Hokoluz or vives. So but basically it's Your reality absolutely replace it with a virtual ones augmented reality is where the phones come on and this is An experience when you overlay your real world will worse with some type of With some type of digital layer on top of it and mixed reality all of you I guess have already heard about the Holo lens It's helps to interact with augmented reality for example with the gestures with the light estimations with object occlusions and so on So all of that together happens to name XR But still the key tech Technology in this sector is augmented reality and what do we know about that? It's that it contains about from native air applications web air and social media Let's get a bit closer Some of you probably know that you you need to install Applications to be able to see the augmented reality happening on your phone But we also have a web solutions for that like for example using only HTML and and a JavaScript we can bring the augmented reality experience right on your table Helping people use only their phones and nothing else is needed Also for web air experience. We can have air quick look with from Apple which is using use this set format and model model viewer for Android, which is using JLTF models The Apple is going forward into AR and they already implemented High definition 3d models, which can be placed where on every Surface you can get and the Google with our AR ads can already help you to visualize an object just right Typing in into a search like shark penguins astronaut and you will get them immediately Staying with you in your room so Going to a social media. Yeah, thanks It's it is about a Facebook and Instagram. I guess all of you already knows the spark studio from from a Facebook It's actually really good engine to who plays a augmented reality experience for almost of users But the problem is there's a new Generation preferred not to use a Facebook. It's more for our older people Yeah, if you want to show some product to a teenager, it's probably need to be an Instagram I guess all of you know about the face filters and spark your studio So as I already said, we also have a Google ads and a YouTube is Coming on with its own try-on features. So for example watching a video on a YouTube You can immediately experience some new products on yourself But talking about a makeup. It's really in interesting case Because when you are buying a makeup, you are not really buying a makeup you are buying a result that the makeup Delivers to you and it's always very difficult to buy for example lipstick on online because you never know how it will fit to you and Here the XR comes up because without No need of expensive headsets. No need of install and applications You can just grab your phone and already try it out Here with the newspapers experience is a more like worldwide used Example it it helps a people to extend the information behind the print Editions like for example if yesterday there were a football game and you Didn't a well and you wasn't able to see it. We're just just do not buy a newspaper and see the key Scenes which were happened So as soon as we hear at JavaScript room, let's see a bit of code But don't be scared. You don't need to know nothing specific like a national JavaScript It's really really simple and I guess everyone of you can do that Remember about Augmented reality on the web. We still remember that it's just a normal web page and everything that is built it in is happens not in 2d dimension, but in a 3d and just and Responsible for a 3d we have a web graphics a library Did someone try this out already webgl? Okay, you heard about that perfect you know that it could be quite like complicated right but and Actually, this all piece of code is required to write only one small triangle And you know that a 3d objects can contain a thousands of them So we are not going die dive deeper into this luckily for us a lot of frameworks were Created like for example three three gs or a frame a plague Hanvas Babylon gs and in many others which are build it on top of web jail and have and helps us just normal developers to create 3d graphics much more faster and There are different web AR extensions that help us to bring our 3d object into the real life like for example the AR Gs which example I will show you soon It's an open source JavaScript live Library you can find it on a github just using few lines of code you can immediately bring to your model into the real world it's all guys are also very interesting projects from the guys from California It's good for surface as estimating image targets and they are really state ahead of web AR solutions and And I already mentions mentioned It's an apple quick look and a model viewer from Google which is already building into your safari or chrome So first before we start creating a project we need to who defined which type of project we want to create 15 minutes on mine, okay? I will I will be fast. We have an image markers Which which is developed with free open source lab library ARGS. We have an image targets from it's wall It's free to could develop on your Laptop, but you will need to pay for a license if you want to push it to the Audience and as I already said as well has a surface as estimation Next so I will show you the short example using the a frame. Did you already tried it? It's very good for us lazy developers Just to write your lines of code and do not go deeper into three gs and web and webGL It's also an open source and you don't need to learn a JavaScript to be able to write it so you just go to a website grab a CDN link and You are able to who create some experience I will show you where quick quickly how to put a basic 3d model on top of a hero marker Which is a default marker for AR and this is all the code which is needed How many of lines is 1 2 3 like 7 right which is seems not really on Complicated, let's go step by step First as I already said we are going to the a frame a web website grab a CDN link and add into our head then with an a frame we are creating a scene and Actually all AR magic which we want to create will be written inside After we are adding an entity with our 3d model What is good for a Frame they have a assets is an assets management the system. It helps our assets to Reload faster. So actually our 3d model will be Loaded as soon as our page is loaded. So it's quite the fast then Actually, if we load our model it could happen that it's very huge Like for example, if you just export it from unity or blender It's the nature one meter in in a unity is like 100 for a web So you will would need to scale it many many times down Also as soon as we have an animated model, we need to add an extension for animation and Here I use an a frame extras and add an animation mixer Attribute to my model So finally, let's add the augmented reality For this for that I already said I'm going to use a RGS and the hero markers He'll hero markers are default for augmented reality on a web and it is some sort of QR codes Which can be easily? Recognized by the camera on your smartphone For each markers we can define difference 3d scenes so To be able to do that. We will add a seed a CD a link to air. Just into the head Then we are calling our air G is just JavaScript into a scene and as an embedded at attribute which will remove full-screen style on canvas from our experience and The last we are a heading a market hug tag Just just just shows that we want as this model seem under this particular marker And this is just a few lines of code and you can already get the amazing experience on the web But it's actually not really practical for Advertisement because we are living in a new era when you want to get Everything at once like our customers all all always said that they need the information about the product Right here right now, and they don't want to click like a thousand buttons to be able to see that And it's possible like for example in this case with Modella beer you can Easily add 3d experience to a billboard So you you will not see the boring bill billboard Advertisement some bottles of beer, but you can already see a beautiful Picture of or maybe some piece of storytelling to get some atmosphere and try it on Or for example an advertisement of a basketball players Why just do not throw the ball in the basket together with him Like yep Yep, and you can throw it out Which is pretty fun I Will show you one more experience about a printing Advertisement that we already developed for our eternal client This this is how we can add augmented reality into a magazine and It's works pretty stable and as I said it's accessible to any Our user who has a phone at least not older than five years But here I will show you different potential issues you can face with like for example different magazines Have different for a format like for example the size of a page can Can vary it can be thinner it can be taller and for each Experience you need to load appropriate marker. So sometimes you have like a thousand Not a thousand a hundred image markers just to show one simple Experience, but how not not to get lost there here. We are using a url Like for example in the url. We can add which which issue a Customer will scan which page it will be and then Depending on that you can you can load appropriate marker and show appropriate video Also, the most common issue is very bad mobile connection It it could be really a Prop a problem ask your user to wait until your experience will load So please make it easy and light and simple do do do not put very huge freedom Models were very big videos try to make it Like a lighter than at least five megabytes Also, my favorite issue is a battery Low power mode Sometimes the iPhones or Android phones are going in this Battery saving mode and then you you realize that no experience is working and you start Panic and calling to the clients that nothing is works tomorrow is Is that the Deadline and everything that Don't worry stop. Just check your battery first because low power power power mode removes all air Actions from your phone. Just switch switch it off and it will run Also, don't don't create your experience very Complex try to keep it simple and clear to Do your user teach your user to? Connavigate with a basic steps like for example tap here move Move around flip your camera and don't ask a user to make a lot of a move or move Movements because it's still a new technology and we need and we Need to teach our customer how to use it so as Einstein said Everything should should be made as simple as as possible, but not simpler And for us as a developers, it's also very important to keep our code clean Please keep care about your consoles keep care about the arrows because any of you can can go and Check a code and all of us will will want to be able to read it to understand how it was Developed so keep your code in order And yeah with your help We we can make the invisible or visible and it's actually all what I wanted to say. Yeah, thank you Thank you. So who has the first question? You bitch. I It's cute. Ah, thank you. I have a question When you put this Marcus in in magazine in paper magazine How well used is it? I mean 10,000 readers how many use the your experience? How many users can use our AR experience in a different magazines, of course, we are using Google analytics and Google tracks to and metrics to count how many experience are running and actually it's like Maybe 20% of the users just because it's also very important to have a good design experience like if you if you point a QR code on top of off your ad Use a user will see it immediately immediately, but he might think that okay It's probably a link to a website. Nothing important will happen, right? So you need to leave like a small instructions like for example, hey look here is air a Experiment and also you you can promote your air experience in different Social media channels like for example you use an influencers. You you can just record a small life video talks about how he is he's using air how it's Seem easy how how it's light and working on Yeah, so unfortunately not a lot of people Hello. Yes. Thanks for the presentation with the yeah I've a very similar question like with the billboards. How do you attract the user to even know that there is an experience to be had? I wouldn't know if I was just walking past the like the beer billboard to even get my phone out to sort of absorb the experience Yeah, so how how we can attract a user for this this particular bill bill billboard It's all about that design a design should Navigate a user to come here to find a QR code to to be able to unlock a camera and and go to a Experience unfortunately, not all customers knows that for example to read a QR code You'd you'd need to download a specific app anymore. It's all already built in into a camera So yes, we need to educate it educate our customers first Thanks Yeah What is the conversion rate? I mean, you just told us that at least 25 percent of people use the The mobile application or at least their phone to to use VR and on these 25 percent How many user actually buy the product in generally speaking is it better than normal? No Yeah, it's also a good good good question how many Customers are finally buying a product after visiting air here experience. We also use a Tracking for a buy buttons here and using a history from where the user came and Actually with this t-shirt I show you in a make in a magazine it was sold out in two weeks Yeah, so Probably the percentage of users who finally buy a product is pretty high because the experience is new It's wow effect and it's super hyped Technology, yeah, thank you