From WebGL to WebGPU: A perspective from Babylon js by David Catuhe

hi everyone my name is a first I want to apologize for my shitty English and from friends I'm gonna do my best to speak slowly and initiate hyman alright I am the creator of the villains yes I am working for Microsoft on the DRGs and yes we are supporting web excel as it's moving so you can try it today against the current implementation of the con spec and obviously as soon as it's going to be stable we will implement it in snap of a fear yes so I would like to share with you my experience actually regarding WebGL and all we moved to actually always reported with GPU kind of so first presentation Babylon chess is a open source free 3d engine that you can use it's here to help you use a low-level API like we mentioned WebEx our event so Alexa is pretty simple to deal with you still need to enter 3d on top of that and that could be a complicated task so we are here for help you on that on WebGL GPU epic cell you name it without you it's a full feature engine which you put kind of what you should need for games putting physics yeah I guess things difficulties it's backward compatible we really hate when I have to rewrite something when I use a new girlfriend of a API so I put that into the foundation of the villages but we know this is backward compatible so it's complicated from the engine standpoint but from your standpoint it's gonna work if you anyways we have a take home where you can just learn by doing that's me I write documentation it's a painting the heck I know you don't fit documentation so we are the tools for that we collected based on where you can learn without hitting documentation we are also responsible at Microsoft for exporter so in 3dsmax my and unity we created gltf exporter cles is what we try to consider as the de facto standard for 3d for file formats so it's open source standard for 3d file format it's pretty complete it was pretty complicated before that now the end here is kind of the language we all speak so we try to support that as well we have a pretty I am proud of the community above everything else it's a pretty active community 400mm geo if you want or enough ask any question just go to the forum we really have good people there it's use across the way we use it a lot of Microsoft it's also used by Adobe Sony whatever minecraft if you go to minecraft that come there is a new version of minecraft which is on the web and it's using bourbon I guess what alright let's go back to the topic WebGL and WebGL - and who is already familiar with WebGL oh I'm surprised okay who already used web here at the same work and you still alive incredible so WebGL is is kind of a part of OpenGL ES 2 and 3 to the web and it's a kind of interesting aspect and a kind of interesting API it's a stateful API meaning that you have a gigantic state a state that you change value on okay so for instance you want to render a triangle on the screen before wandering the triangle on the screen you have to set up the entire state to make sure you can render your plan go and sit in the entire state meaning ok I want to set the color I want to set which shader so which language and when I used to handle on the screen and stuff like that and if you want to have two objects you're gonna set up the state for the first one handle the first one set up the state for the second one in the second one okay state changes are a problematic stuff in this study because we are living in a JavaScript world and web here will communicate back to the native API and so every time you change the state there is a communication between JavaScript and that is expensive okay and remember we are dealing with 3d meaning we want to handle at least at 60 frames per second so we need to remove all the friction we can find so let me show you something that's the take on play down to babylon gesture curve over billion GS dot slash packing.com and it's a place where you can just enter code here we give you intellisense so you can type and it does not work obviously sometimes it works each where you can touch your code and when you hit return here you're gonna hand out the scene directly here so that's the baculum GS it's a gif file let me show you here we just got a gltf file from a file server and that's it that the amount of code you have to deal with if you want to create a thing the villages will help you by creating the default camera in light if you don't provide one and also the same thing for the default environment okay I'm gonna use a positive extension name SPECT tortillas spec tortillas here will help me show you under the hood so what's happening inside this handling.i thank you so this to digital girl that we brought to help us actually debate will be here that's a shame but all sales that not provide a way we shared a burger they give it they give you web here and deal with that so that's the final outcome okay and that's the story not of my case it's time that of my rendering we have actually here a first call with I click twice here we have to clear so here what you see is all the WebGL order all the way BL commands that we are sending down the WebGL pass okay so 200 the image that you saw before this little guy here when I'm at that I can move at 60 frames per second actually we first clear the screen and then we set up a lot of state because remember well here is a state machine so I have to set up a lot of stuff and said a command so I am setting my viewport I ask him okay please use that specific shader and then bind to that specific memory array which is a geometry and then set that matrix matrix and then bind another buffer which is the list of faces and then set that texture that picture that picture that picture okay and boom first comment render 16,000 ish triangles okay what and so you see the headset okay and then we move to the next one okay please change the buffer you want to run there now I handle a new object Babylon's yes is here to help you optimize so we we check for you that you are not you and he only wanted WebGL commands okay so between two orders in blue here there is just a minimum amount of changes that we have to do to let you handle what you want so second order here that's the lassies and blablabla blablabla okay whew c'mon laters then that's the final one okay and every time actually every time there is a blue command we ask the engine the GPU to do something and WebGL was here to translate between us interest it into something that the WebGL ingenuity understand I am running on Windows 10 here so the WebGL in come here it's your boy so same thing but yeah we call it edge in here will execute tactics code you Timothy okay and WebGL will do that translation for me is showing exactly the same page on let's say a module using Safari it will translate first into I guess still OpenGL into metal okay and so here you see that among other up commands we also send this beast which is the shader code the code that can be executed by the shader by the GPU okay so the GPU does not pick C++ or Java Script or whatever it's big a specific language named GLSL okay and that's GL we explain okay what should you do to under this pixel okay and that could be pretty complicated yeah and that's what you have to do is you want to use WebGL you have to do all of that send all the command center to state and then write the shader to explain or to handle every single pizza so that's why engines like Mariano villages are required because most of the time you don't have all the knowledge and all the time to do that the main problem that I wanted to underline here with WebGL even though it works pretty well I see here I can handle PBR physically based rendering we've almost no no problem see I have a pretty dumb number of textures that are all rendered here the problem is that if I want to go further than that I am kind of limited first I am limited because there is no real support for threading I am forced to work on one single thread here and secondly I have to deal with this state okay I can't prepare out of state I have to update them every time I want to change an object okay and furthermore WebGL is a kind of OpenGL ES for the web and that does not work very well with DirectX 12 Vulcan or Mittal or the new IPs okay so looking all of that smart people decided that yes no and by doing good pretty powerful stuff over here it works kind of almost everywhere I barely found a device where it does not work there are values support of develops reports obviously but most of the time it's worked perfectly with even on a feature phone that it's like oh maybe 20 verse it's the work all right anything what you do so the question was what do we want to solve with where do you want to solve the fact that we don't want a state full machine we want a state less machine the big difference is here the big difference is that we were stateless machine I can prepare my command store them and say under that and that is a big bunch of stuff that the system will use under no move to the next one under I don't have to change a single ton of information I have asthma as I want you can think that's web do you like a BGP you like a mainly WebGL in G in a sense that we gonna capture two states and then use them as as we wish okay first and so the point very important is that we are really closer to the metal exactly the same story as what Annelle mentioned with WebEx our WebEx ah was meant to help connect with a values set of SDKs and here we have the same story we need to be closer to die-cast 12 in a same sense that we need to be closer to vulcan and metal and so we need a guy which is adapt to this kind of new api it's a evolving standard we are far from being complete on web CPU there is no way to day actually there is a tiny way to do it if you walk on a Mac using Cannady there is a flag it's like yeah you really want to test it that that you can turn on and you're gonna have a pretty an embryo of what could be web easy to you because it changed every day we are working with the Google team on this PC seekers to me so they implement stuff we implement that in Babylon yes we do some tests although it's faster it's lower etc the main problem we face here is that we want to be faster wine executing JavaScript code and so we need to shape a web GPU are here so that they are as less as possible member of interaction between the JavaScript layer and the webby GPU layer and that's what we are working on right now anyway if you want to have a sense of what could be I prepare it already that's a cool video so on the Left WebGL on the right web GPU and we are just increasing the number of machines by increasing the number of images we increase the number of state changes and you can see that at some point WebGL we're just gonna die it's 12 m per second so 80 millisecond per frame because we changed so many time sorry and when we are on the web GPU it's running on a standard Mac laptop nothing very specific using the discrete GPU not even an Nvidia or whatever it's checked like Intel GPU the same scene the same amount of meshes was far better because of the fact that there is no more state what does that mean from an implementation mathematician standpoint I give you a tiny example sorry maybe but easy to follow let me try this is what we do when we work with web GPU so far you can't change like overnight but just to give you a sense of what we are working on right now on the web yet we have one object the device context and we say a device context set that states entered state center state render set that stage said that state random okay you will Jim Webb CPU is far powerful because we create context and we own that context so I create a context I set value on that context that's my inputs that my index prefer that the information I want to set on that context and I am gonna save that context and I can reuse it so as soon as my context already handling the example that we are here we cost nothing because I just say context other context kind of context kind of context I have like one context per image is for instance and I just say there is no more state changes because there is no raw state actually there are states that I owned so I hopefully I see people noting so I kind of and when I am excited I speak faster than when I am not and so I started to not initiate but I hope you get my point and so that's pretty much it you can try it today you will sorry it's possible to try it today you need to have a map with the very version of Canada of conduct with Canada we have a page on our documentation you just should go to doctor double NGS dot-com search for the web begin stuff for WebEx up and you see what what works for so far and we can search for web view and so here we have web ppyou and i'll i'm not on screen for some reason what magic the men that whispers to cables together so here you have the M what we did so far what the experiments and you have a live example here but if I click it because I am on Windows Windows did not implement yet expected stuff so I am simile I have got a wonderful direct like no so if you have any question I'm fine to take question if you if I can answer any question I was crystal clear oh it's you posted like a you don't know what is it no no it does not work on both because it's not implemented it's not that it does not work well it does not work at all it's an implementation question because it's so moving sense of the Google team decided to pick one hardware that they are pretty at ease with which is like everyone else but me MacBook so they decided to just implement it on by my Microsoft as a task if you go to do a BGP you get a list there is a task for Microsoft we also implement Dole which is the new of the new engine good that do not support directly to you we will implement it at some point but the spec is moving so fast and we are at very beginning there are expectations and I know that in standard expectation like overrated we have expectation to have a testable version if we were by end of this year probably on November the thing is that we babylons yes you just develop you babble on GS team and we will sin and we will take care of switching first in webview if it's reported and then we go back to whoever here - and it's not supported in WebGL one does the interest of having a intermediate layer that going to take care of the details it's pretty fun to do you have to like go in debt such backwards-compatibility first on the API and then secondly also on JIAJIA one like isn't that much time with you it's a lot of time in it I started purple NGS as a pet project before it was then used by Microsoft six years ago and the goal was to be backward compatible since the very beginning because I went down the path of rewriting everything every week like a new version a unit of Java State and you can show off everything almost every day right so I thought react was a stuff and then a week later it's like no you are so you should do you know like it's all over the place so I decided okay for 3d WebGL is here to stay but we know that they're gonna do something else WebGL to win whatever so we decided to think the architecture in a way that we are the layer that is exactly like WebEx audience we try to be as flexible as possible to be future proof and sometimes it doesn't work and if you open the bid on J's code there are pieces where we conducted gates like you should not put them there for a reason and we have a big loud comments like please don't change that code it's here and we know it's ugly you know it's the it's sad but we have to keep it because of backward compatibility and that's why Enterprise choose to use babylons yes because they know that when I invest on it and so a year from now when they move to the new version of a billion chess they won't have to be to everything because the RTA change they are good and bad about this philosophy the goods the user are pretty happy with that the birds that we develop have some time we have to deal with what we did like I don't speak English very well so the very first version of the yes as some interesting namings properties that look like people at least once a month I have someone doing a PR to fix my typos values I have a property named moose sensibility because in French sensibility its sensitivity I guess that's alright and so I use a sensibility which sounds cool to me and it's completely wrong so the way you decide I will you move your mouse moves like little smooth so much smooth it's a pretty interesting opportunity so the documentation stated the whole talk is completely done but we have to keep it because now PO use it no more questions perfectly thank you very much

Channel: Seattle JS

Views: 8,285

Rating: 4.9325843 out of 5

Keywords:

Id: A2FxeEl4nWw

Length: 20min 26sec (1226 seconds)

Published: Wed Jul 24 2019