WebGL, What The Hell

hi okay oh cool I got the loud voice again alright okay so my prayers yell what the hell so what the hell is WebGL it stands for web graphics library and to me this is an orbital generic name because it could apply to Twitter bootstrap that is a web graphics library if you install it with the the icon set it applies to something that makes animated gifs but that kind of gives you an idea of its antiquity its it well I'll just get to it the generic Ness reminds me of the movie repo man which everyone should see by the way you should just see this movie yeah he goes over to his folks house and he was like hey mom hey Dad I'm just going to get a can of food and then he goes you know to the the fridge or whatever and gets a can of food and that's just what WebGL is naming and it's generic Ness reminds me of like whites when they go to get drinks it just says drink on it anyway WebGL name comes from OpenGL and OpenGL has this very long history that basically goes back so far that not only is GL like oh my god a graphics library let's do that you know it comes from this time when that was a big idea it also is so old that it actually has its own name for constants it calls them uniforms but it is still happening today css3 transforms and animations are in WebKit are implemented as OpenGL at least in Safari there's a lot of filler in this because I wasn't sure I was going to figure out WebGL so long story short this is a sophisticated domain and it is valuable have domain knowledge this is the logo for cinema 4d which is a 3d modeling program and I'm just going to show you how that works real briefly okay so here we have like a space right so it's just like a wide open space and you pull down like a menu and you get yourself a sphere all right and you can make the sphere bigger and when you make the sphere bigger all you're doing all you're doing right now is you're telling the software I want to fear and all I'm going to specify is the radius so this kind of parametric object right and it's got a whole bunch of them it's got cylinders right here's a cylinder and this will come back to code in an interesting way or at least in some way which I hope turns out to be interesting but this is you know like what you can do with these things you make these cylinders you can move them around and this is the domain that WebGL well it's one of the domains that WebGL is modeling and it's the domain that I find most interesting so another thing you can do with this is you can do little boolean operations right so you can say like give me the sphere minus the cylinder right and I think that's what's happening here yeah and we you can move them around like that and let's see everyone seems bored so I'm just going to skip that part this is where you can end up right this is a TIE fighter right this is another Thai fighter I got really into making TIE fighters and Wow because the thing is all it is is a circle and two hexagons you know hexagonal plates next to each other and wow it's a spaceship so yeah here they are alright and this is going to be a TIE fighter in a web-browser let's see yeah okay so there it is whoo so the way this was created right is I went in that modelling program and I built a model and I exported the model file and I loaded it in the in this you know some JavaScript so I'll get back here okay so demo TIE fighter and web browser I don't know if you can see it you're actually not supposed to these are my notes to myself so don't read those it's cheating okay anyway domain knowledge it's good to have domain knowledge one of the things I was showing you here is parametric primitives right a sphere is defined only by having a radius right you don't have to do anything else the cylinder has you know a radius and a depth and these things are you know you can define arbitrary sizes just with the parameters you can do boolean operations the wings are typically made by like extrusion where you draw something in two dimensions and then you just extrude it into the third dimension and when you do something like that I don't know if you can see it but there's these little dots I'm going to try not to walk over there and show them to you because it drives Omar crazy but you can see these little dots over here right these are vertices singulars vertex and they define faces or fragments if I understand correctly the WebGL term is fragment for this obviously portable file formats are part of it but it's a sophisticated domain so it comes with a sophisticated vocabulary and I know there's someone in here who understands it better than I do because I was talking to him earlier but maybe he ran away and uh there is yeah so if you want to find out if anything that I'm telling you in here is actually accurate you should ask him because he'll tell you if it is or not I certainly plan to ask him so what you have over here though let me back this up this is a diagram of the graphics pipeline for WebGL and you notice I mentioned like this concept of uniforms instead of constants that's what this is over here you have things like time and the matrix which is basically the space that everything happens in and these are uniforms and then instead of variables they have these things called varying right and also attributes which are like variables that are attached to things I guess anyway you have this fairly complex process that builds the builds what you see and this one thing to keep in mind these are vertices right then nevermind this is a stupid diagram the thing is there's also things like animated fragment shaders so the idea is first you shade the vertices to get like the color of the so here's the vertices right these orange dots I guess it's a pretty good diagram these things define like the object right and you figure out the colors of those particular points and then you figure out the colors of these spaces in between them but animated fragment shaders are in a whole another option instead of just like saying it's going to be this particular color you can say figure out what color space it should be in and then animate the colors in that space so it can get pretty crazy and if you go to GLSL da Heroku comm you can see some examples of it and you will find out later in this presentation why it is GLSL Heroku comm unless you already know in which case it will not be such a revelation but the GS that stuff is on the hubs this is an octa cat is actually the 3d model of an octa cat that was 3d printed for those of you who are trivia buffs but those of you who want to learn about WebGL might like this website called learning WebGL right and the subject of this website is learning WebGL and it's got lesson 1 which is a triangle and a square and it is 197 lines of code and now that's including HTML but it's actually an underestimate it's actually over 197 lines of code because this is line 198 which is apparently a very significant line it's a performant math library for vectors and matrices so if you don't know what that is matrices right there if you've got a grid that's a matrix and vectors is like physics so take away the HTML take away that giant line you still have about 150 lines of JavaScript and GLSL which you will find out about in a moment this is including whitespace okay but you remember the name of the presentation is WebGL what the hell this is why write 197 lines of code to draw a circle I'm sorry a triangle and a square so WebGL has incredible power but is perhaps excessively verbose and this kind of comes down to the fact that javascript is neither Java nor a scripting language right sorry I had to write yeah Java web sure okay yeah that's when it comes from right I mean JavaScript is just like the worst name for a language ever they might as well call it like thing which does not run on computers because the entire name is a lie but someone who did decide to discuss this is Scott Scott Hanselman and he was like javascript is assembly language for the web yeah I'm gonna skip that part too the point is you're basically talking to the GPU at this point and you had to be very very boastful GPU because it has to be you know incredibly specific because you're going straight to a processor basically so anyway you have 150 lines of JavaScript to do this triangle in the square 24 lines for the Dom 58 for shader setup there are only two shades black and white in addition to those 58 lines to set up the shaders there's another 17 lines of GLSL which is AC like shader definition language it stands for a graphics library shader language which again just seems a bit too generic to me but enough complaining the point is there's a lot of lines of code just to do that so you have this very sophisticated domain it benefits you to get a sophisticated library and the long story short for the you know at this moment in my opinion 3 J is for the win there are perfectly good reasons to dive deep into WebGL but I think if I did in this presentation it would be as baffling for you as it would be for me but it would not be as much work for you as it would be for me so I didn't do it anyway this right this guy here where the TIE fighter you remember him right he's going around in a circle right that's 125 lines of code right so with 3 J is right and it's mostly cut and paste I'm not going to lie but this is less yeah less code than a triangle and a square so I'm going to get into that code in a minute most of it came from here so I figure I should own up to that you can also get tons of examples on the three J s website domain knowledge oh yeah so if you don't want to get cinema 4d to play with and create your models before you put them on your web pages blender is free cinema 4d costs about $3,600 so blender is cheaper than that this is a great website I don't remember why it's here oh why don't I show you this great website I'm really sorry I usually use lots of notes I saw and figured out exactly how to present without notes this website is the most amazing source of domain knowledge ever this is all WebGL 3 Jas it's and he explains it in detail and I have to tell you like before I made this presentation I read this entire explanation of how all that that you saw how it worked and I didn't understand a word of it and I went back and I've been you know studying 3d graphics and I've been you know working with WebGL a little bit you know playing with it and now I understand like one word out of five so I'm like do you anyway easily please I guess that uses GLSL quite a bit oh yeah and it's like incredibly generic but there's magic inside so yeah domain knowledge basically comes down to two things right you have to understand the 3d graphics paradigm the paradigm used by cinema 4d and blender and three Jas and WebGL is used by like you know Maya and whatever else there is all the 3d software basically uses the same body of knowledge so to do anything useful 3 jsut need to understand this paradigm and then step 2 is weird math right just understanding what kind of equations can cause interesting results and one really good way to find that out is Grapher which is built into what is it OS 10 if you have a Mac you have Grapher and you can just throw in weird equations and see what they do but this is another place to get more info Udacity has an entire course on this it's put together by Autodesk it's quite good actually anyway 125 lines of code let's check it out here's this Thai fighter right so it's a bit uh you know bit false because there's more than one hundred twenty five lines of code because you start off with requiring some things right so whatever I lied a three Jas right obviously STL Lauder Jas so STL loader loads STL files something interesting about STL files is they're not actually for putting things in web browsers they're mainly used in 3d printers which means that if you have a 3d printer you could write the software to control it in JavaScript if you felt like it which I have a feeling someone somewhere around here is going to feel like doing sooner or later I just I feel it in my bones but yeah so STL is mainly used for 3d printing oh and this is just a fashion know into what furniture furniture design done I know it's one of these things furniture does done in cinema 4d which I just think is cool as hell anyway there's also obj which you load with obj loader JSON this is not very widely used but you can actually do your 3d modeling in JSON now you do a little bit of CSS just to make the you know to make it fullscreen and up what happened hello my my did I check check hmm okay yeah I'm back yeah and then you make a little div for it and at this point you've done everything you can do without domain knowledge so we're getting some domain knowledge this in 3d in the 3d paradigm this is called a geometry right I I find that weird because you you don't look at a bird and say look at that biology but this is what you do you call this I think it come out again I'll just yell you call this a geometry oh I'm back okay and one excuse I can find for you know calling an object a geometry is that every one of these things has their own set of axes right I think the batteries are dying on this thing dude yeah it's empty anyway axes I don't know how this is going to go because the batteries keep cutting out but I guess sometimes I'll yell and sometimes the mic will handle it and hopefully we will achieve a balance of some kind anyway I'm worried what happens when I'm yelling and the mic suddenly comes on just I hope your ears don't bleed or anything but oh wow this is big well I'm just going to keep going so axes right you what okay what oh oh oh there's another one we do this whole thing okay so look hold on hold on hello hello hello I think it went down my shirt hello how's this okay I'll just yell and look to the left a lot okay so where was I it's got these axes so the thing about this is that when you tilt the object the axes tilt with it and it's kind of good to remember that because otherwise you could tell this thing move 20 units along the y axis and you're expecting it to go straight up and instead it goes like this and you're like what happened so yeah axes anyway this is a scene I don't think it's working sorry this is a scene right this is just the term and the first thing you do to create a scene is you add geometry to a material to a geometry so you see how the TIE fighter has parts of it that are grey and parts of it that are black and parts that are sort of a glowing white so those are three different geometries that are I'm sorry three different materials applied to the same geometry and when you have a combination of at least one geometry with at least one material you have a mesh okay and then you had a light oh yeah I'm going to demo really simply right here you have a thing oh I can't get to the light so you'll just have to imagine you know what light is it's like that okay and then you know you also add a camera which I'm also not going to bother to demo but you get the idea there's got to be a camera in there okay so here's how you create a camera first you say new camera right and you set it to a position and X Y & Z and you have it look at a particular point right which is also specified with X out Y & Z and these are the args for creating a camera you give it a field of view an aspect ratio a nearest plane and a farthest plane and that's for the perspective camera which is what you would expect like a camera to be there's also this weird option an orthogonal camera which is like completely flat it's useful for backgrounds but you could also do it too you could also use it to create a scene that was built like one of those orthogonal view video games which is a very unusual method anyway here's how you create a light right it's just three lines you create the light you give it a this is a hex number right just like CSS except you pass it a number instead of a string you give it a position and you add it to the scene and if you're paying attention which I doubt when it says scene add spotlight you might be wondering where's scene add camera that's going to make sense in moments hopefully so this is how you create the renderer you just say like new renderer you make it a WebGL renderer but you could make it an ASCII renderer in the past they took that out of the rendering like category and they just decided to make it an effect because it's ridiculous anyway you create it you set a background color set clear color means set background color and you give it a size and then you also say shadow map enabled which is a you know a little bit of a I don't know a pitfall by default there's no shadows because it it's kind of murder on your G pee-yew for the browser this is a cost-saving measure for now but those of you who have done sort of any kind of engineering for more than about six years know that typically something is a cost-saving measure for now lives forever so my my guess is that 10 years from now someone's going to be doing WebGL and needs to remember shadow map enabled so there you go and then you just you add it to the DOM and you have a little render function I'm going to try clipping it again I hope you're ready okay I guess that'll work is that working thank you thank you yeah here this will work okay yeah so anyway you got a render function and we'll just ignore this most of it yeah what's that sure okay yeah hello hello okay yeah so what you do here long story short requestanimationframe render right so you might be familiar with the old and busted new hotness dichotomy set interval is old and busted and requestanimationframe is the new hotness hopefully everybody knows that if not check this book which is a good book even though that guy is obviously a samurai not a ninja there's okay I mean he's in the sky yeah there's also like a brief excerpt on the res explode and it's pretty good anyway it explains at least why requestanimationframe needed to exist so what you do is instead of saying set interval you say requestanimationframe and pass the rendering function to it and then you just ask it to render this scene with the camera and there's the camera right and this is so that you can render the same scenes with multiple cameras so this is the code that actually pulls in the TIE fighter and you can see it's you know fairly simple right you have an STL loader you load it and then this you know you pass a callback function the geometry you create a material and you put it in a mesh with the geometry you just give it a little rotation and a scale and add it to the group and this here is what has it rotating because remember it's turning round and oh hold on if you've forgotten this is what it's doing going round around in a circle and that is accomplished with this little thing here group rotation Z just continually adds to the rotation and of course that results in going round in a circle oh there's also a version with hold on I wrote a version that has control from the keys it's really just amazing and by amazing I mean mostly unimpressive here it is and this is me moving the keys and moving it manually right yeah it's it's going to change your life isn't it it's just unbelievable but yeah this thing was actually just devastating my computer and I thought it would crash but it seems to be fine at the moment this code is about as obvious and simple as you would expect it to be it's just a simple key listener right and it modifies the rotation of position accordingly and then that is unnecessary for the sake of following my plan where it said demo the cube plus key control here it is this is my backup case the TIE fighter model killed my computer it's pretty amazing anyway I'm like this this plan doesn't seem to be working so I'm just going to change it this I wrote on the plane actually I flew here for various reasons and what this is Oh hold on let me show you where that came from ah no it's too much work this is just a wireframe basically I took an STL loader thingy and I I built this shape in order to create like an interesting effect in cinema 4d and then I threw it in and I just have some code that changes the rotation and occasionally randomly teleports it to new locations right and then this this one is called balls right because these are a bunch of balls bouncing around all that's happening here is they have edges right for XY and Z and if it exceeds the edge the velocity is reversed right so instead of storing an actual vector all I'm doing is X velocity is expressed as a number and you add that number to the x position right and then if it hits the invisible wall you multiply X velocity by negative one right so it keeps going until it hits the invisible wall multiply it by negative one now when you're adding it to position you're actually subtracting it so it moves in the opposite direction and yeah this is actually a fairly simple thing to do I can show you the code for it it's going to be in here somewhere probably on my computer that's where I'm expecting to find it yeah okay so up here I created a function called create sphere right that's this and it creates a sphere geometry and the sphere material ah it's called a mesh basic material and you just pass a wireframe true argument to get the wireframes which to my eyes they look cooler like a completely perfect wireframe looks cooler to me then like a poorly implemented shader you know so I don't know that that's cool and they're much much faster anyway then it just adds a you know a random velocity in each direction and a semi random well yeah random position and just adds it to the scene and then you you know I said that there are like invisible edges that you add into the code normally when I do something like this the edges are just going to be you know the max width and the max height so I tried you know window dot inner height and window inner width and stuff like that and it just failed completely so I created these variables WTF ceiling WTF edge and WTF Z which stands for the you know the Z distance and then this is the render and if the stuff exists it goes through the list of spheres and adds the velocity as I said and then it just detects the edges and bounces off them if they're there and then proceeds as normal and let's see if there's anything else in here oh yeah the planets this is really cool Oh so this I cannot claim any credit for I just found it but can you see that it's it's two planets with a background so this is an exception to the idea that you just make a scene and you point a camera at it this is actually three scenes the background is handled with an orthogonal camera and the other two I think they just have one perspective camera pointed at them but it is a very strange quirk that we are apparently able to see through two cameras at the same time and view three scenes so I don't know that might be interesting ah yeah yeah that's almost all I got except I got a cool video which is not really related and you can't see it anyway okay so yeah I did this in cinema 4d and I was trying to figure out a way to do it in the in WebGL but as far as I all I got was the balls I mean yeah okay so that's I don't know any questions thank you thank you yeah how does the time to look on a mobile device um as I understand it Chrome for Android supports WebGL and is unique among browsers on mobile devices in that regard no no I don't have anything wrong as Android but you know it's it's a rumor that I hear floating around the interwebs anyone else questions yeah but oh I can't oh sorry well your best bet is Chrome I don't really know I do know that it used to be that if you would because I pretty much only use Chrome anyway this is probably not the right answer but I do know that there's a lot of sites where you will go to you know and it says please come back with chrome and that doesn't really happen anymore I'm pretty sure that Firefox and Safari are pretty good with it although I mean I wouldn't want to find out about Internet Explorer oh really okay ie 11 does it that's pretty good cool questions from the audience for the audience takes all the work away Thanks well essentially total you could I mean if you wanted to change their acceleration what you would do is add you know you could either have like a constant factor called acceleration or you could have each sphere have its own acceleration attribute and maybe they have random amounts of acceleration so the way it works right now is you have you know position X plus equals velocity X right you just add the velocity for that direction to the position you would add I don't know say you wanted an acceleration global you would just say acceleration equals zero point three five whatever you know that's just like and then you would multiply you know velocity times acceleration and add them both to the position and then that would actually that the math for that is probably wrong but the point is you just figure out the right math I don't know I'm just figuring this out I'm gonna you know in my head right here but you have total control over that you can you can change all that stuff okay thank you

Channel: js.la

Views: 26,434

Keywords: jsla, javascript, js, 2014, giles, bowkett, webGL, gifs

Id: 34nmG-XqV5I

Length: 34min 14sec (2054 seconds)

Published: Sun Jan 31 2016