[UNKNOWN]

[MUSIC]

[UNKNOWN] Ok, so thank you, hello, my name is David.

I'm working at Microsoft as a program manager.

Working with the IE and Spartan team.

And you can follow me on Twitter if you like or tell me if I was good or

not on Twitter.

So, first of all.

[BLANK_AUDIO].

So I'm using.

Okay, some disclaimers.

So maybe you can notice my beautiful accent, so I am French.

So, sorry for that.

I try to do my best and I cannot speak as fast as you guys.

So I also have different jokes, probably.

I'm from Microsoft, which is maybe a bit weird for you.

So I'm using a Windows PC, maybe the only one during this conference.

And I'm browsing the web using Internet Explorer and also the product Spartan.

And I am a developer which mean that I'm very bad in the beautiful things,

all the cool designs.

So I try to do my best.

Also that I'm working with some cool UX design and 3D artists.

So I'm going to talk about Babylon.js.

So Babylon.js, we start to work on this product with one of my best friend and

today my manager prob, almost two years ago, as a free

time during the weekend and the night, so my wife really love this project.

And, we start at an open it's a free and

open source product you can find on git hub using the Apache two license.

So it's very, you can do whatever you want to do with it.

We first start write, written it in JavaScript.

And then we switched to TypeScript I've managed to convince David, so

we have two Davids work, working on that to switch to TypeScript.

For various reasons, because it really rends quality of our code and

then we can switch to ECMAScript 6 in a very simple way,

because it can comply in ECMA Script 3, 5 or 6, without changing the code.

And TypeScript is basically a super set of ECMAScript six adding types.

So, it's really really [UNKNOWN] to learn ECMAScript.

So, our [UNKNOWN] have to be very simple to use so

I really enjoy the privilege to because we really share the same philosophy.

I'm not a 3D guru, you know, and my, oh, it was the other David,

well I think when he was born it was already knew about 3D and matrix, and

all the shaders, so it's, it's really awesome.

But I'm acting as a monkey when we are writing the firmware.

If I don't understand, I get that nobody will, okay?

So, this is the way we're writing the framework.

Still we need some hyper phones.

And really need to run it everywhere.

This is the web.

So I don't want to break anything just because it will run in IE or Chrome or

Firefox, I want the code to run everywhere.

So that's why we're making some choices.

So we added a lot of features in [UNKNOWN].

When you're doing games or 3D stuff on,

in a general manner you're working with tools like Blender, which is free and

open source, 3D Studio Max which is not free at all, very expensive,

Unity, so we've been writing some exporter to dump the content to WebGL.

And we've add us also added some offline support using

IndexedDB which is a nightmare to work with.

And the idea is just to save all the assets

on the clients side to be able to have an offline experience.

Then we have also some collision and physics engine for the game, mainly.

And finally, we work on, as we will on the web, we will try to add some network

optimization by loading in an incremental way, all the assets.

For instance you are starting a game, let's say this room,

you don't want to load all the city.

You start to load first with this room, and when you are moving out the room we

start to load also the cards and stuff like that in a very smooth way.

So we'll show a lot of different things or [INAUDIBLE] I'll

talk about web audio because we're now going to web audio in IE.

And of course we add a lot of cool things like touch, gamepad,

I'm going to demonstrate to you Oculus.

I'm not sure it's very useful to you, using Oculus on the web, but we've got it.

And some virtual joysticks using touch.

So for handling touch we are to you know, pointer events, I don't know if you

follow the, all the information you got around point, pointer events, but

it's really useful, because it's a unique way to code with mouse, touch, and pencil.

So it has been brought Microsoft as a W3C standard.

But there was also the Touch 7 from, from apple,

no less, that add some difficulties to learn on, on as a start out.

And when we start writing the firmware, we saw that this model was really good

because it's from Microsoft, but we really thought it was a good model.

And we decided we like a poly field to be about to throw this model to

all other devices like Firefox OS, Android, using Touch 7.

For the ID you're coding, you're using pointer events,

we're going to propagate it to all devices.

So now a lot of people have written similar poly field like polymer, or

other poly fields, so it's pretty great to see that.

So we're using it in our project because we have written it two or three years ago.

So let's see some demonstration, of what we can do, so I need sound.

And I'm going in, in the broader, so this is our last demonstration.

[BLANK_AUDIO]

So I should have some sound when it will load.

[BLANK_AUDIO]

Hopefully it will load.

[BLANK_AUDIO]

And you know what, it doesn't load because my web server [UNKNOWN].

So I'm going to relaunch it.

No panic.

What, no, this is a Microsoft guy, it won't work.

>> [LAUGH]. [LAUGH]

>> So it's building.

Okay, it's building.

So I'm going to take this mural in, just to be sure to have always

the same product.

And this is, something that is being built with Michel, which is, we are,

we are a bunch of French guys, so Michel is our Unix and 3D designer.

And he has built everything into 3D Studio Max with a, using a single line of code.

So, the IDs is completely alone building that.

So, you can move inside this scene, that is quite fun using mouse and,

and keyboard.

And we add some cool effects with one of our interns like the [UNKNOWN], you see.

Very fun. And it can be like that.

And for instance, we also add some interaction for the mouse.

You can click on that, so don't be afraid.

[SOUND] And this thing has been done without a line of code in JavaScript,

so we had what we named an action builder.

So it's going to connect some node inside 3D Studio Max, which is a web view,

because I want it to be portable on all platforms.

And what he's doing basically as a designer, is that when the user is going

to click on that, I just want to play the sound and launch this animation.

So there's one thing that we can also switch using a game pad camera.

For instance, using the game pad.

And in the transparent quick and then move around this beautiful house.

It's scary.

You can hear that we've got some 3D sound, meaning when I start to be near the window

I can hear theres something to do because there is a skeleton playing on the piano.

And finally we decide to create a sentry.

So, as we are in England there is endless.

[SOUND] He's dead.

I'm sorry for that.

>> [LAUGH].

>> Clippy, which is a, a Microsoft product.

So let's check if the Schrodinger cat is dead or not.

Nobody really knows and I think he's dead.

And, finally, good news is IE6 is also dead.

So, if we click on it, [SOUND] we can see that we've got like,

Batman calling for help [LAUGH].

So we see, we see the last instruction.

So you see Gamepad, APIs, WebGL,

where you'd use a lot of stuff with advanced graphics.

So it, it's awesome to have that in the product without any plug in and

fast performance.

But we also have the, the idea is to be able to run on every platform so

the idea was I've got obviously a Windows phone.

You know what a Windows phone is?

Have you ever seen a Windows phone?

>> [LAUGH] >> You've got some?

Check it.

It's really, it's really great.

So, whatever.

I'm going to relaunch the app.

Yes.

So just need to switch a little bit.

Like that, okay.

So I need to work on the responsive side.

Hello.

For instance I've learned [UNKNOWN] okay.

And the idea using, while you can, you can launch the same demo from your iPhone or

Android, so the idea was to be able to have the very same code, and it's complex

to have shaders and WebGL being about to run everywhere because this has not

the same power on the GPU side that my, my laptop for instance, or the big desktop.

So we've strived to build something that is going to adapt itself

based on the device you're going to run using some more or less complex shaders.

So I guess I'm not running the proper scene.

I don't know which one I've chosen, so let's go back.

[BLANK_AUDIO]

I want this one.

I'm going to reload.

[SOUND] So this one.

So not everything run perfectly fine because of the performance.

So normally this one should, should be fine.

[BLANK_AUDIO]

You can talk.

>> [LAUGH] >> While it's loading.

[LAUGH] So this is a Windows phone.

It doesn't have yet the next roaring engine of IE, so

we don't have web audio yet.

But, in the next update in Windows ten you will also have a [UNKNOWN] with you on

the phone which really cool.

So, now, I can move inside the scene, you see.

I got some very good performance.

So, it's a full HD screen.

I know that an iPhone six is about twice as fast as this one.

So, the idea is that I've built something called,

virtual realistic camera to let you move using your two [UNKNOWN].

And it's real good, but I don't know why its independent of the age of people if

you're too old, nobody is able to use my virtual [INAUDIBLE], so I will be using my

son which is who is approximately 16 so he has no issues using it but

when I am giving the phone to old people so I don't know exactly the age.

Some other guy.

I'm completely lost.

I don't understand what's going on.

This is some crappy code and.

Well, just test this and, maybe I will be able to, to tell you your,

your specific age.

Well, welcome, you're young enough to be able to use, the phone.

So, you can test on your side on your iPhone,

Windows phone, or Android or Firefox or OS, it went everywhere.

So here are the features.

So there's a lot of features but lets restart the engine from the beginning.

Lets try to understand how to code that.

So, like the previous talk,

what I really like is not to spend to much time writing the commentation,

we are writing the commentation, but agree to help people to learning by.

Experimenting.

And we decided to, to trade for them in naming a playground.

So the idea is to share some code on the playground, and

let people experiment I, IPIs.

If it's written in TypeScript is very easy.

You're going to see too, we have some cool features.

Like auto-complete code.

So, let's have a look at that.

So let's check if the internet connection is working.

[SOUND] Okay it's working fine.

So we can see the code over there.

Don't know if it's big enough, so

I'm going to launch it in the web using, no no not that.

[BLANK_AUDIO]

And the code here is pretty simple, so we try to have some comments and you try to,

need to create a scene in the camera axis, several stuff like that.

Once you're reading the code, maybe you want to change the color.

So, you need to to know a little bit of 3D vocabulary for that.

So, for instance, I need to create a material.

Material is, in 3D, what's going to have an impact on way the object are looking.

So, for instance, yes I [UNKNOWN] done something is going to load,

you know, the IntelliSense.

What we name the IntelliSense autocomplete features.

And if I'm looking for the standout materials, then it's going to help me.

So it needs a name.

So sphere.

It needs a [INAUDIBLE].

So [UNKNOWN].

Once I've done that, I want to edit for instance, the diffuse color.

So you need to know a little bit about three D.

And fortunately to be able to use that.

So [UNKNOWN] main code basically.

So we've got the bench of predefined colors.

So for instance I really like purple.

That's why I've chosen purple for the [UNKNOWN].

And once they found the matter all you need to effect it to the object itself.

And you see every time I'm typing,

we're trying to help you to understand what's going on.

Hm? And, what's, you can run that,

you can save it, it's going to generate, a specific hero to share on the forum,

on us.

This is a way we are spending our time debugging the problem we had.

So we asked the user, please do it on the.

And play around, send us the URL and we'll have a look to your code and fix it, or

fix our code, because sometimes we have bugs I must admit in our code.

So you can play like that.

You can create for

instance several other things like you want to create a cube for instance.

Then you need to have some basic properties so meshes.

So a mesh is a 3D object and I'm going to create a box and

name it box one, a size of two inside the current scene.

And once I've done that you'll note they are on the wrong way so

maybe I need to move the position.

Position, so, I need to move on the X and that equal to.

And now, it's another way.

Very simple to use and

you can see I can already move in the scene using my mouse and keyboard.

You've got nothing to do.

We are taking charge of all the inputs.

So, this is a way to to build something.

So, if you really want to affirm, you can use only cube and do some.

Furnishing.

So, like this project.

So, a couple of minutes later,

I don't have this magic scene to, to write [UNKNOWN].

And then you can move inside, a maze.

So it remind me the, the all good, [UNKNOWN] of doom and, you know.

And the idea if I'm, I'm currently moving inside a.

A 3D QR code.

So I, I had the idea to transform a 2D QR code in a 3D one.

And if you got a smartphone, if you flashing it,

it read QR code is going to say that jQuery works, err, rocks, rocks.

And the idea was to do something for you know, the valentine date.

So it was a present for my wife.

I pretend it was made for her only.

But I've published the code so it's for everybody.

>> [LAUGH] >> I'm sorry my dear if you

are listening to me.

So you can flash it and it will work.

So if we're, if you look at the code, it, it's fairly basic so I,

I've done the, a blog on that so you, I can, you can read on my blog.

And I basically create, creating a lot of cube by just following the,

the trickle that has been generated.

And the, it has been gener, generated at the end, I guess.

Query. You see

that I'm currently building whatever I want as a trick will be a, a 3D maze.

It's quite fun.

Well, I find, I think it's fine.

Well. >> [LAUGH].

So, now, when you're working with 3D artists,

they don't want to work with API's.

They want to use [UNKNOWN] tools and they want to do something like that.

So, I cannot be able to do something like that using only cubes.

So, the idea is Michelle starts putting his idea on piece of paper.

So, you want it to have something like that with some frog sounds.

And this is not because we are French [INAUDIBLE] And some values sound.

And start to think about that.

At the beginning we wanted to create the inside the house but

we have not enough time to finish the interior part.

And it tried to browse a web and find that this one was really great so

we wanted to create something similar and

finally went inside 3D Studio Max because is got the license.

I don't have it.

And it starts creating the magic inside 3D Studio Max and

exporting it into Web [UNKNOWN] and, and it's own engine.

So this is all we created.

So the Pipeline is basically to use your fiery tool as a 3D artist so

you could be free to use your marks in Maya, Blender which is free so

we have written a bite on export, and Unity which is our last one.

Not completely finished but I'm going to give you a demo.

I'm going to turn our version five format,

which is documented on our gated, which is the .babylon5.

And once, once you've done that, the idea is to be very simple to see, so

you can drag and drop that into our Sandbox.

I'm going to show you or use your favorite editor to, to load it.

So.

For instance lets launch unity.

So unity, you've got a lot of different tools.

It's very simple to use.

I'm not a good guy using the, the [UNKNOWN], to be honest.

But this one is very simple to use.

So you can zoom.

You can do whatever you'd like.

Here, put some light with shadows.

And once you finish that we insert over there.

And you .babylonGS menu to help you to export that using this specific part.

Your going to export using your button.

And we're going to convert everything using some WebGS convert files.

So lets do it together.

So lets put that on the desktop.

[INAUDIBLE] SF for

San Francisco because it is supposed to be some San Francisco buildings so

going to run through all the textures maybe convert them because

using you don't have support for PSD so going to convert in.

PNG for instance, and

once you have finished it tell you everything is, is being done.

You need to go over there, so it was on the desktop.

You see all the file,

and as a designer Michelle didn't want to write any JavaScript line of code, so.

We work on a tool frame.

The idea is to take this tool, which is online, and you take the file, and

we're using the beauty of HTML file drag and drop API drag and drop.

And it loaded.

So it's very simple.

I cannot do more simple than that, even if Michelle is already complaining.

It's, well you know maybe you could do a simpler, simpler version,

so I, I can't do.

Simpler than, simpler than that.

3D artists are very complex to work with you can trust me.

>> [LAUGH].

>> And then you see you've got some real time shadows and

you can even add some things like a [UNKNOWN] layout,

start reviewing everything and maybe choose to have a look to all the meshes.

So for instance I can remove one of the [UNKNOWN].

No.

Yeah, can we move the plane if I want?

Okay.

Can we move everything?

Yeah, this one.

Okay.

You can debug that in real time and

it will shun the [UNKNOWN] which is quite good because this is a very simple thing.

So this is a way you're going to build stuff.

I've got all the great sample like so you can split over with this kinda tools.

So as we don't have ours apparently.

And so I'm going to append palace.

This one is really great so it's, it's a bit longer to convert it.

So I've already converted using the same process.

So it's over there, it's the eventual file.

And you then take it and drag and drop it in the right window.

It's going to reload it.

And then you can see you've got some nice trees.

You got some, we see the cool free assets on the Unity store.

So you can lots of different assets from Unity store, bring it in Unity and

export it in WebGL to, to export your, your art on the web.

And it's going of course, well I've have not done the,

the demo, but trust me it work on every browser.

[BLANK_AUDIO]

I can do the very something.

Just because maybe you,

you think I know the Microsoft guys it's going to work on the IE.

No, oh, it also work in Chrome.

Also work in Chrome [LAUGH].

>> [LAUGH] >> And it also work in Safari and Firefox.

You can trust me.

You can test it.

So very simple to use.

So, a couple of hours later, what you can do is you can is you can even take

the very same thing we will be using the beginning.

You can see that a lot of files, some MP3 files.

And Michel is best, because if you do everything inside 3-D Studio Max and

I've done that to test.

It's going to reload the same,

scene at the beginning with the sound and all the action.

So it's, everything has been described into our js file.

You know that to let the 3D artist doing a lot of stuff without cutting anything.

[SOUND].

[BLANK_AUDIO]

So let's talk about audio as being implemented recently a web audio stack

inside Babylon.js, still trying to be very simple to use.

So you have some ambiance audio.

You've got some omnidirectional 3D sound, all directional sound.

And we're using some attenuation.

So those algorithm provided by web audio.

And you can add a bridge the sound by managing or

building using our exporter format like we've seen with the motion demo.

This is currently only supported by our 3D Studio Max exporter.

But we are currently writing the Blender and

Unity part to have the exporter everywhere.

So, let's do some brief demonstration on how it works.

And of course, I'm going to use our playground for that.

And the internet connection seems to work pretty well.

So you can see this is very simple, all you got to do is to create a sound.

Give it a WAV or MP3 file or

Au file depend on what what your browser, browser is, is reporting.

And then you can listen for the mouse down and do some play.

And its funny to map it to the space key while your tapping some code.

For instance because if I, [SOUND] you know, [SOUND].

Yeah, I thought it was funny to write code in to have gunshots when I press into

the space bar.

But I'm not sure its a good idea.

And then you can of course still have the auto completion part.

To help you doing.

So it tell me I can play specific time if I want to.

So let's say 0.5 sec, second,

and another one at 0.3.

And now if I run the gun, the gun again.

If I'm left clicking, I can, I can do this, this very simple thing.

So it's very simple to use.

And once you done that maybe you want to have some special sound.

So, special sound is done automatically by wayward you and Babylon, yes?

We are updating the position of the camera for you so

you have nothing else to to do rather than crafting that 3D sound.

Saying where it should leave so, you know, in x, y, z.

And then everything is going to abate by itself.

So, to [UNKNOWN] trace that to do that I've create some sphere where all

the sound was on leave so.

And I've composed the music just to not have any problem with the IP or whatever.

[MUSIC]

When I'm going in inside a sphere, I can hear, you know, the, the sound.

[MUSIC]

And as soon, as soon as I leave the sphere, it stops.

Because it's being done automatically by wayward you.

We're using the 3D sound and

we've done in Babylon is just updating the position of the camera.

And automatically you know that the sound has to be shut down.

And the, something else to [UNKNOWN] is to create,

an analyzer to re-check that, sorry, it's note down.

So, and to see the, the graph.

[BLANK_AUDIO]

So I need to add a scene.

And this analyzer has to be connected to our audio engine.

So which is static, automated static for this positive logic.

And then I've got some function that's connected to my analyzer and

are going to better understand what it's going to do.

Oops. [BLANK_AUDIO]

And now, I'm going to ask to my analyzer to show

[BLANK_AUDIO]

The debug canvas.

Going to run it.

And now the debug canvas is just sorta showing you, you know,

a graph of this sound.

Because the, the beauty of We, Web Audio is you've got access to,

to the real sound.

You can do everything you want with it.

So if you want, for instance,

to create a 3D analyzer with that, it's very simple to do it.

And you can, I've got plenty of ID using that.

For instance I want to build a physics things with audio it could be very fun.

And I see that we've got three minutes left so

I'm going to show you the way to load some code.

Using loading something using code.

So up to now, I've show you how to load a scene by drag and dropping.

But if you want to do it by code, this is a simple line of code.

This is this one.

Which is asynchronous.

And once it's loaded you can then do whatever you want in the scene.

So start to interact with your own code.

Which is a way to create a game.

Because games now static-fied, you need to have some, some interactivity inside that.

So, let's launch VSim, and you will understand what the code is doing.

[BLANK_AUDIO]

So, we see another beautiful 3D scene built by Michelle.

My lovely 3D artist.

So I can move inside the scene.

You see we've got the collision engine.

Which is well, maybe of use for

you but it's quite complex sometimes to, to check that in real time.

So we're doing for you.

And what I've done is adding some physics,

scenes inside the scenes by pressing the S key.

You see I've got a lot of both.

And I've got some bug performance for an unknown reason.

So I'm going to launch it in Chrome.

>> [LAUGH].

>> It works fine in IE, but I guess this is an alpha [INAUDIBLE].

And you see it's, why is [UNKNOWN].

So it's very fun you can add a lot of, of things.

And then you can throw the ball away or the boxes inside a 3D scene.

So very fun to, to do it.

And we're currently working on optimizing the performance using

latest stuff like SMGS or stuff like that.

That could really help to do some recomputation, and client side.

So you can see what you can do, using pure JavaScript and, and WebGL and

it run everywhere on every browser, so it is pretty fun.

So, the last part is a debug layer.

So, is very complex sometime to know where you're losing some time.

So, we build something to if your GPU [UNKNOWN]

that the GPU is not powerful enough.

Is it a problem linked to your cpu?

So, in on the JavaScript side.

So we are using User Mark with is something we got in IE.

So let's hope it will work.

See when I close of course the one window.

So let's check if it works fine online.

Let's launch these specific things.

This is an engine built by Michelle again.

And, if I'm pressing F12, I can profile the, the, the graphics parts.

But I can also add what we are naming some user mark over there.

You see?

So generate some rhythm mark in your code.

So inside our lab, library framework,

we're going to generate some specific marks.

And once I've done that, I can ask IE to profile my code.

I'm going to stop, going to collect the data.

And you will have a visual through, throughput of the F, FPS,

you can zoom on the specific part to try to understand what going on.

But there is a lot of single link to the browser itself that I'm not interested in.

So I only want to, to take the, the things linked to my code.

And now the great thing is we've,

we've tried to implement a lot of different things inside our library.

Which is, we are beginning to render our thing,

then we, beginning to render things linked to the camera.

We start to evaluate something linked to the 3D object.

And we can see that some parts of our code could be quicker than other parts.

And we have the possibility now to enhance this part in our library.

Because we are emitting some specific, how to say,

user mark that are going to be taken by the product.

So this is something that is being described in the [UNKNOWN].

I guess we are one of the first products to have it.

But it's really helpful to analyze the [UNKNOWN] using that.

So you can implement that in your own library if you want,

just need to edit some specific user mark.

[BLANK_AUDIO]

So if you want to see what we are working on in Internet Explorer you've got

status.modern.ie you can see what's we going.

So [UNKNOWN] work on the Web Audio,

Media Capture a lot of feature around ECMAScript six.

And you will see all the features that you love that you.

Maybe you will check that we currently developing them.

We currently evaluating them.

Or we currently, well we are not interesting in them.

So you can then send me on Twitter, please add this feature in IE.

And I'll try to convince the, the product team to do so.

You can download some VMs on your Macintosh.

To test IE, and then if you want to play with, our framework,

this is a free framework.

You can go on babylonjs.com, play with our playground.

Or ask question to we're two, mainly two developer working on the framework.

So, myself and David Ketchu,

which is, named deltakosh because he's a big fan of Babylon Five.

That's why the, the framework is being named Babylon.

Do we have any questions?

No.

No you don't have any questions?

>> [LAUGH].

>> You don't have time for questions.

Thank you.

[APPLAUSE]

[MUSIC]