Bare metal WASM with C using Clang - no stdlib; no emscripten - Demo

all right i'm going to show off a spike that i did this weekend which is using c compiling into wasm and being used in javascript now i've done a few of these before this one's a little bit different though because it's using clang instead of m scripting and let me show you the output and then i'll kind of talk a little bit more about it this output though if you have seizures you might want to be a little cautious because it's got a lot of things happening on it but this is this is the output um what this is doing here is it's it has a piece of shared memory and it passes that between c and javascript writes a bunch of bits to it and then takes that buffer essentially and then makes an image out of it and then puts it to the screen and it's doing that in a request animation frame so it gets a little bit of pizzazz to it so i'm gonna put i'll put the code and everything up online so you can you can go through it yourself but i thought it would be kind of fun to just walk through it really quick because there was some pretty interesting things about this um i learned a lot doing this so one thing i would say if you're going if you're if you're interested in doing wasm uh with you know c and compiling it and using it in javascript i would recommend you check out um in scriptin first depending on what you want to do because end scripting comes with a whole bunch of libraries like sdl which i think stands for simple direct media layer or something i think that's what it means and it really gives you access to opengl easier gives you a bunch of libraries that are that you that you can use which is fantastic this but again we're going to be using clang so i'm going to open up this make file here so you can see what we're doing so the cc here is clang and and we're compiling straight using using just clang now this doesn't have anything that comes with it so you can see here we have no standard lib so there's no standard libraries there's nothing so this gets like as bare metal as i think he can at the moment um with with c so here's here's the first i think uh most people who would um know anything about me or whatever watch this channel are generally uh web developers i think so we'll start out with the javascript side go through that and then kind of dig into the c side c side ah okay uh this is just css blah blah blah and here we and this page is essentially just a canvas just so the wrapper to place it in the middle and then the canvas you can see we just say what size the canvas is supposed to be get a handle to the the context of the canvas and i just set smoothing enabled uh false because what i think i'm gonna what i'm playing around with here is rendering um stuff directly to uh obviously to to an array and then blending that out to the um to a screen kind of like old i don't know if you're old like me when you learn how to program on like an apple 2e or something you used to have these things where you could like draw lines and do this very basic rudimentary stuff which i thought would be kind of fun to re-implement which is kind of where i'm probably going to go with this maybe maybe not whatever but anyway so no smoothing enabled i don't want to have any aliasing i just want the actual pixels to be drawn so that's setting up the canvas standard stuff so this is the first part we'll get a little interesting where we're going to create an instant streaming of this um wasm file that we will create in a minute and you see it's just using fetch it's just pulling it in and it's just destructoring it destructuring it and grabbing a thing called instance and then off of instance again we're destructuring that and there's a couple things in here init draw are functions that i wrote in c buffer is a uh it's a pointer to an integer array but it's it's a variable that i made in c and then memory is the entirety of the memory of the c side of the equation so you can actually get a handle to that so we'll go through that this init is creating this the buffer it's asking c to make the buffer and it's going to allocate memory of a width and a height and then this is where it starts to get a little bit interesting so what this is saying actually let's let's jump over into c and check this out so this is going to do init width and height so if we jump over to this graphics one let me just move this so we got these side by side um so we got init here and so this is kind of calling it with the width and height which was what 960x540 this comes through calls malloc which i will show you is something you have to do yourself when you when you do clang clang does not come with when you do the no standard lib you have nothing so i'll show you that but essentially this is a drop in replacement so works just like you would think there's a height and width and then multiplies it by the size of an integer to create a big block of memory that will hold everything and it saves it into this global variable called buffer and i'll show you these what these exports mean as well so now this exists when you call this function actually i think i still have this open over here so when the when the when the memory is created or when you a lock you get you get memory up in this upper area of the heap and you have the stack and it could be anywhere up here um and generally the the way that this thing that i have written you can almost always kind of guess where it's going to be so it's not as interesting but you pretend you don't know so in order to be able to access a particular thing in memory because this is just a big array of memory um that is shared it could be it could be anything in there you have to know exactly where a particular variable is pointing to and that's what this is doing this is saying that at some point wherever this is if you start reading from there that's where this memory starts so that's the offset so you have the offset then we create a little clamped array here which is let me just whatever it's unsigned integer 8 that's what the the pixels are going to be and it says you know start here so memory.buffer so remember we grab memory off of export so it's from all the memory that we have in the c side starting at this offset read everything of the same size as we want and this size of integer which is 4 is just because you just have to do that just like with this size of integer here in order to um have the correct number of bytes so this grabs all that into this thing called screen which is on the so now we're kind of still on the javascript side and then screen we call we'll call draw passing in the height and what again because c um yeah we pass in this date time offset which is just a thing and then this offset to the memory because on the c side if we look over here for draw we're getting the height and width of the thing we're going to be drawing with seed talk about that in a minute and then the buffer here whoops that should be the buffer not the offset am i huh interesting oh right because it's it's the pointer it's it's the offset is the memory address it gets a little confusing i suppose so the offset is the memory address to where in memory this thing is going to be so on the c side it's essentially so eddie says uh it's it's pointing to a memory address so it's just passing in the start position it doesn't have to pass in the array so like initially i was like well i guess you could pass the screen because that would be the point but but it's passing in from here again it's saying if the memory starts here then pass that in here and then on this side it knows okay well that in my world is where the memory lives that makes sense yeah it's that's a little bit confusing but i think that should yeah i think it makes sense i hope you hope it makes sense to you so anyway it comes in it loops over the just does a double loop over the every row and then every column and then it just does this stuff where it uh does a little sine wave thing and then the color here is actually in little idiom so it's actually alpha blue green red so then it just does this little magic thing keeps the color in a particular area um you know it kind of randomly selects one kind of and then um sets the uh opacity to be full so that the color actually shows up um otherwise the first the top part here would be zero and everything would be clear so you wouldn't see anything or it would be opaque opposite of opaque it would have opacity zero and then it just fills in the buffer with that particular color okay this right here is i just left this in here if you do check out the code have a look here this is now setting now that the memory is kind of all set up you can actually on the javascript side go in and then poke around in the memory and even change it so it's a shared block of memory is essentially what this is showing and it just shows you how to do that but anyway we come back this takes the screen data because remember it's pointing to the same thing when this offset says start here and start writing screen is still pointing to that same memory so it says make a image from that block of memory and then the width so on the top script that does that then it just throws the image onto the canvas yep that's pretty much it um that's yeah that's pretty much it uh there's a couple more things i'll talk about um but that's essentially the the crux of it having the shared bit of memory getting pointers to where it is and then passing it on either side and writing the data in either side um which is also super dangerous i don't know if it's dangerous because it's all in the browser and it's but it's it's very it could be error prone because you're writing the same memory but it's a really cool way to communicate it's how opengl communicates i believe as well because you have to create these buffers and pass them around anyway just a few more little bits just to show you this is kind of doing the exact same thing but it's just keeping it um it's just doing it in a request animation frame so the the sign here with the seed um told you get back to it uh is just doing the delta of time so that it does movement as opposed to just redrawing the same thing over and over so that that's all that really is um not really necessary for anything else so there's a couple things about this that are trippy um and again if you check out the code be sure to follow some of these links because they were super useful and very interesting but so like i said malloc doesn't exist so you have to make your own then there's a really neat one that i found uh well there's one called there's two of them that i found that were kind of neat out there one's called wallock which is a specific webassembly this guy i don't want to ruin your name so i'm not going to say it um if you just google search for ballot you can find it it's a it's a malloc implementation but specifically written for wassum um and it's fine there's another one called uh by doug lia the a um it's the same kind of thing his his version i just stole his header file here but his version requires some uh at least the ones that i found these two are floating all over space especially this one because it's public domain so everybody uses it um but uh the ones i found all required the standard lib in some capacity um but this cool this wildlife one is awesome because it doesn't require anything it's it's uh pretty cool then for stuff like math um there's no such thing as you know the math library because it doesn't exist so if you want something like center cosine uh you have to kind of roll your own i found this really nice one on stack overflow and this is where you can read about it there was there was quite a number of them in there that were all very um interesting i tried to implement my own using a very simple math um equation and it didn't give as good results as this one so i don't know check that out if you're interested um yeah so i guess that's it there's not really much else to show you uh i'll put the link again to the to the github repository so you can check this out it's a nice uh intro into this if you want to start digging into this i recommend you do there's so if you're really going to do it though you might want to check out rust has some really nice bindings it's a little more uh future proof i guess and then m script in if you want to do something you know for real with like graphics you'll have much much nicer time once you get it set up it's kind of cool but this is really neat because clang just works and you can just compile it and if you're into if you're learning c actually well oh well yeah that was it one other thing uh in this right here so i defined this export this what that does is that attach that that tells the compiler that this method should be exported into c so if we look back on graphics i just put these before the ones i want to you can also do if you want to just have a play that's where you can explore all and then that will export all the methods but um what will happen is the size of the of the wasm file will be significantly larger um and if we look here it's this one right now is 12 kilobytes and that already to me is pretty darn big i think that's that's pretty big and i think when i was playing with it if you just do wall it's like 34 kilobytes or something i mean which you know in the grand scheme of things and most you know react web app sometimes or like megabytes of size so that's pretty small but really it's not doing that much to require 12 kilobytes i don't think so the sizes aren't great you can also do optimization flags in the compiler to make it smaller um yeah so check your local documentation for that oh wait you're not even i'm i forgot you're not looking at the screen right okay well i'm going to stop talking now and hopefully um hopefully uh this is interesting and check it out and get into webassembly and slowly slowly move away from javascript maybe into something a little bit different okay see ya

Channel: Rob Rohan

Views: 343

Keywords:

Id: skK8aId86E0

Length: 17min 5sec (1025 seconds)

Published: Fri Sep 17 2021