XR adds: “Try before you buy”
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 490 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47046 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 202010 / 490
4
7
9
10
14
15
16
25
26
29
31
33
34
35
37
40
41
42
43
45
46
47
50
51
52
53
54
58
60
64
65
66
67
70
71
72
74
75
76
77
78
82
83
84
86
89
90
93
94
95
96
98
100
101
105
106
109
110
116
118
123
124
130
135
137
141
142
144
146
151
154
157
159
164
166
167
169
172
174
178
182
184
185
186
187
189
190
191
192
193
194
195
200
202
203
204
205
206
207
208
211
212
214
218
222
225
228
230
232
233
235
236
240
242
244
249
250
251
253
254
258
261
262
266
267
268
271
273
274
275
278
280
281
282
283
284
285
286
288
289
290
291
293
295
296
297
298
301
302
303
305
306
307
310
311
315
317
318
319
328
333
350
353
354
356
359
360
361
370
372
373
374
375
379
380
381
383
385
386
387
388
391
393
394
395
397
398
399
401
409
410
411
414
420
421
422
423
424
425
427
429
430
434
438
439
444
449
450
454
457
458
459
460
461
464
465
466
468
469
470
471
472
480
484
486
487
489
490
00:00
Augmented realityComputer animation
00:30
Software developerExpert systemContent (media)Digital signalSoftware developerExpert systemWeb 2.0Augmented realityDependent and independent variablesSphereContent (media)Different (Kate Ryan album)Roundness (object)Computer animation
01:10
Bit rateRule of inferenceReading (process)Sound effectClient (computing)MultiplicationAugmented realityForm (programming)Computer animation
02:05
Product (business)Level (video gaming)Computer animation
02:29
Augmented realityMixed realityMixed realityVirtual realityAugmented realityVideoconferencingEstimator1 (number)DigitizingType theoryOverlay-NetzObject (grammar)Computer animation
03:43
Augmented realityVirtual realityKey (cryptography)VideoconferencingDifferent (Kate Ryan album)Type theorySystem on a chipElectric dipole momentComputing platformKey (cryptography)Augmented realityCartesian coordinate systemBitHypermediaWeb 2.0Form (programming)Forcing (mathematics)Computer animation
04:05
Computing platformSystem on a chipHypermediaWeb 2.0Augmented realityCartesian coordinate systemComputer animation
04:24
Source codeComputing platformFile viewerHypermediaSystem on a chipRight angleEndliche ModelltheorieOnline helpAugmented realityTable (information)Web 2.0Android (robot)File formatFile viewerComputer animation
05:00
Source codeWorld Wide Web ConsortiumEndliche ModelltheorieOnline helpObject (grammar)GoogolSurfaceAutomatic differentiationComputer animation
05:40
File viewerSocial softwareComputing platformSystem on a chipHypermediaFacebookSource codeHypermediaFacebookGoodness of fitElectric generatorAugmented realityProduct (business)INTEGRALComputer animation
06:19
Level (video gaming)Artificial neural networkComputing platformSocial softwareFile viewerFilter <Stochastik>YouTubeVideoconferencingProduct (business)GoogolAutomatic differentiationCASE <Informatik>ResultantCartesian coordinate systemCellular automatonComputer animation
07:18
World Wide Web ConsortiumSource codeCartesian coordinate systemWeb 2.0Letterpress printingAdditionInformationGame theoryDemosceneGreen's functionComputer animation
07:53
Source codeSineDemosceneScripting languageLatent heatDoubling the cubeBitGraphics libraryWeb 2.0Normal (geometry)Perfect groupWeb pageAugmented realityDimensional analysisCodeTriangleDependent and independent variablesRight angleLibrary (computing)Computer animation
08:53
Object (grammar)Right angleCodeTriangleFreewareSoftware frameworkComputer animation
09:14
Software frameworkWeb 2.0Software frameworkFreewareSoftware developerComputer animation
09:39
File viewerData modelExtension (kinesiology)World Wide Web ConsortiumGoogolReal numberVideo gameState of matterCodeProjective planeLibrary (computing)Endliche ModelltheorieGoodness of fitOpen sourceLine (geometry)Extension (kinesiology)GoogolObject (grammar)SurfaceGraphical user interfaceDifferent (Kate Ryan album)Web 2.0File viewerMedical imagingComputer animation
10:36
Source codeComputer-generated imagery8 (number)Library (computing)Projective planeOpen sourceType theoryFreewareMedical imagingSurfaceEstimatorLaptopComputer animation
11:17
Web 2.0Line (geometry)Scripting languageSoftware developerOpen sourceFrame problemLink (knot theory)WritingCodeFreewareComputer animation
11:43
Source codeData modelScripting languageEndliche ModelltheorieDefault (computer science)WhiteboardCodeLink (knot theory)Extension (kinesiology)WebsiteMultiplication signWeb 2.0Data management1 (number)Physical systemAttribute grammarDisk read-and-write headMetreDemosceneLine (geometry)Web pageFrame problemPhysical lawReading (process)Metropolitan area networkComputer animation
13:39
QR codeAugmented realityQuicksortSmartphoneDemosceneWeb 2.0Default (computer science)Different (Kate Ryan album)System callComputer animation
14:09
Convex hullDisk read-and-write headProcess (computing)Endliche ModelltheorieLink (knot theory)Line (geometry)CodeNetwork topologyTouchscreen
14:47
Source codeData modelInformationRight angleWeb 2.0Line (geometry)CodeProduct (business)Right angleInformationComputer animation
15:21
Endliche ModelltheorieCASE <Informatik>Computer animation
15:48
Source codeTerm (mathematics)Client (computing)Augmented realityLetterpress printingForm (programming)Computer animation
16:29
Term (mathematics)Source codeComputer-generated imageryWeb pageStructural loadVideoconferencingFile formatMedical imagingUniform resource locatorRule of inferenceConnected spaceMultiplication signComputer animation
17:38
Mobile WebPower (physics)Asynchronous Transfer ModeKolmogorov complexityPower (physics)Connected spaceAsynchronous Transfer ModeClient (computing)Case moddingVideoconferencingEndliche ModelltheorieGroup actionSoftware developerForm (programming)Tap (transformer)Video game consoleLocal ringWhiteboardMoment (mathematics)View (database)Computer animation
19:35
Newton's law of universal gravitationCodeOrder (biology)Computer animation
20:05
Online helpMetric systemGoodness of fitHypermediaMobile appCategory of beingGroup actionProduct (business)Link (knot theory)Row (database)TrailWebsiteDesign of experimentsLatent heatDisk read-and-write headDifferent (Kate Ryan album)Point (geometry)Video gameQR codePresentation of a groupComputer virusInheritance (object-oriented programming)Bit rateData conversionSound effectVideoconferencingXMLComputer animation
24:41
Open sourcePoint cloud
Transcript: English(auto-generated)
00:05
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
00:23
augmented reality Advertisement and why it's always good to try before you buy My name is Anastasia Mirosnichenko. I am from Berlin, but originally I came from Ukraine I am an expert web XR developer at least an expert in my sphere
00:41
And I'm responsible for augmented reality on a web. I Working at St. Elmo's it is an advertisement agency consisting over 200 of professional all around the Germany and We are good in experiential content
01:01
and we bring storytellings and campaigns different AR solution to our brands, so As I already said we are using multi realities storytelling to break up the rules and bring the new wow effects to
01:22
Show our clients. What is possible? and so One day people will wake up and realize that augmented reality is here and It's happens a lot of question about this sometimes overhyped sector. But the biggest question is how it actually
01:42
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
02:04
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 customers How we can help them to play around with the product to adapt it to your needs and see what is possible
02:26
More than it's only shown and actually XR can help that but what is XR do know? yes, XR is for extended realities and
02:41
actually, it contains everything that you can see here like 360 video you already know is 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 hokolus or vive. So basically it's
03:03
your reality Absolutely replace it with a virtual ones augmented reality, it's where the phones come on and this is an experience when you overlay your real world will with some type of
03:22
With some type of digital layer on top of it and mixed reality all of you I guess have already heard about the HoloLens it helps to interact with augmented reality for example with the gestures with a light estimations with
03:40
object occlusions and so on So all of that together happens to name XR But still the key Technology in this sector is augmented reality And what do we know about that? It's that it contains about from native AR applications web AR and social media
04:04
Let's get a bit closer Some of you probably knows that you you need to install an 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
04:25
It's 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
04:43
Also for web AR experience we can have a quick look from Apple Which is using USD set format and model model viewer for Android which is using GLT F models
05:02
The Apple is going forward into AR and they already implemented High-def initial 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
05:24
typing Into a search like shark penguins Astronaut and you will get them immediately Staying with you in your room. So
05:43
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 who plays a augmented reality experience for almost of users
06:04
But the problem is that the new Generation preferred not to use a Facebook. It's more for our older people Yeah, if you want to show some whole product to a teenager, it's probably need to be an Instagram
06:20
I guess all of you know about the face filters and Sparky our 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
06:44
experience some new products on yourself But talking about a makeup. It's really an interesting case Because when you are buying a makeup, you are not really buying a
07:04
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 web XR comes up because without
07:24
No need of Expensive headsets no need of install and applications. You can just grab your phone and already try it out here visit Newspapers experience is a more like worldwide used
07:42
Example it it helps people to extend the information behind the print Additions like for example if yesterday's ever a football game and you Didn't they Well, and you wasn't able to see it. Well, just just do not buy a newspaper and see the key
08:05
scenes which were happened So as soon as we here 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
08:20
Simple and I guess every one 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 in is happens not in 2d dimension, but in a 3d and
08:41
and Responsible for a 3d. We have a web graphics 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
09:05
And you know that a 3d object 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 free free JS or a-frame a play canvas
09:26
Babylon JS and in many others which are built it on top of web GL 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
09:46
Like for example, the AR GS which example I will show you soon It's an open source JavaScript library You can find it on a github just using a few lines of code
10:01
You can immediately bring your model into the real world It's well guys also, very interesting projects from the guys from California it's good for Surface as estimating image targets and they are really step ahead of
10:23
web AR solutions and I already mentions mentioned it's a Apple quick look and a model viewer from Google, which is already built it in into your Safari or Chrome So first before we start creating a project we need to define which type of project we want to create
10:45
15 minutes on mine, okay I'll I'll be fast. We have an image markers Which which is developed with free open source like library AR GS. We have an image targets from its wall it's free to could develop on your
11:03
Laptop, but you will need to pay for a license if you wanna push it to the Audience and as I already said as well has a surface estimation So I will show you the short example using the a-frame did you already tried it
11:23
It's very good for us lazy developers Just to write few lines of code and do not go deeper into free GS and web and web GL 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
11:45
You are able to create some experience I will show you very quick quickly how to put a basic 3d model on top of hero marker Which is a default marker for AR and this is all the code which is needed
12:00
How many of lines is one two, three four, like seven, right? Which is seems not really 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're creating a scene and
12:25
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?
12:41
a-frames I have a SS it's an SS management the system it helps our assets to preload faster So actually our 3d model will be loaded as soon as our page is loaded. So it's quietly fast Then
13:01
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 meter one meter in in a unity It's like 100 for a web so you would need to scale it many many times down
13:23
Also as soon as we have an animated model we need to add an extension for animation and In here, I use an a-frame extras and add an animation mixert attribute to my model So finally, let's add the augmented reality
13:45
For this for that I already said I'm going to use a RTS and the hero markers Hello hero markers are default for augmented reality on a web and it is some sort of QR codes Which can be easily?
14:00
Recognized by the camera on your smartphone For each markers we can define different 3d scenes so To be able to do that. We will add a seed as a deal and link to AR GS into the head Then we are calling our AR GS
14:20
GS job JavaScript into a scene and as an embedded head attribute, which will remove full-screen style on canvas from our experience and The last we are in heading a market hug tag
14:41
Just just just to show 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 a web But it's actually not really practical for Advertisement because we are living in a new era when you want to get
15:05
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
15:21
and it's possible like for example in this case with Model a 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
15:44
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, and you can throw it out
16:04
Which is pretty fun I will show you one more experience about a printing Advertisement that we already developed for our Eterna client this this is how we can add augmented reality into a magazines and
16:24
It's works pretty stable And as I said is accessible to any our user who has a phone at least not older than five years But here I will show you different
16:41
Potential issues you can face with like for example different make magazines Have different for formats like for example the size of a page can Can vary it can be thinner it can be taller and for each?
17:01
Experience you need to load Appropriate marker so sometimes you have like a thousands not a thousands a hundred Image markers just just to show one simple Experience, but how not not to get lost there here we are using a URLs like for example in the URL we can add which which issue a
17:26
Customer will scan which page it will be and then depend depending on that You can you can load appropriate marker and show appropriate video Also them the most common issue is very bad mobile connection
17:45
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
18:00
mod or 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 iPhones or Android phones are going in this But battery is saving mode
18:21
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 isn't the Deadline and everything that Don't worry. Stop. Just check your battery first because low power power power mode removes all AR
18:44
Actions from your phone just switch switch it off and it will run Also, don't don't create your experience very calm complex try to keep it simple and clear to Do your user teach your user to
19:04
navigate 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 or movements because it's still a new Technology and we need and we need to teach our customer how to use it
19:25
So as I said Everything should should be made as simple as possible, but not simpler and For us as a developers. It's also very important to keep our code clean
19:42
please keep care about your councils keep care about the arrows because in 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
20:01
Developed so keep your code in order And yeah with your help Week, we can make the invisible or visible and it's actually all what I wanted to say. Yeah. Thank you
20:23
Thank you. So who has the first question? You'll be shy It's cute. Thank you Have a question When you put this Marcus in a magazine in paper magazine
20:42
How well used is it? 10,000 readers how many use their Experience how many users can use our AR experience in a different? magazines, of course, we are using Google Analytics and
21:01
Google tracks to and metrics to count How Many experience are running and actually it's like maybe 20% Of a 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
21:24
of your ad Use a user will see it. You mean 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 a
21:45
Experiment and also you can promote your air experience in different Social media channels like for example you with an influencers. You can just record a small live video
22:01
talks about How he is he's using AR how it's same 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
22:22
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 acted to sort of absorb the experience Yeah, so how how we can attract a user for this this particular bill a bill a billboard
22:42
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
23:00
Customers knows that for example to read a QR code. You don't 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
23:22
What is the conversion rate Okay, you just told us that at least 25% of people use the Mobile application or at least their phone to to use VR and on these 25%
23:42
How many? User actually by the product generally speaking. Is it better than normal? The detection to a website, yeah, it's also a good question how many Customers are finally buying a product after visiting. Yeah here experience. We also use of
24:06
Attracting for a by buttons here and using his 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
24:21
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