PARTICLE DEMO! // Code Review

what's up guys my name is the channel welcome back to another code review yeah this series is still alive so basically for those of you who have not heard of this series i'll have like the last episode linked up there there's like a whole playlist and everything this is basically just me taking a look at the code that i received from the community from you guys and this can be absolutely anything uh in fact i've kind of like i've been thinking about this series and i think that rather than me trying to critically you know uh judge your code as if i'm like you know somehow authorized to do that or whatever i'm not your academic professor right um this would be more of like a little fun series you know fun trying to transpire fun in my life and in yours as well where basically i would just look at interesting code from the community give my thoughts you know i might give some suggestions i might just you know speak my mind but it is not supposed to be like a you know hand in your homework and i will churno will mark you and then probably discourage you from ever programming again which can be the case so yeah so that that's kind of long story short of what this series is today we have alexander alexander valenov volnov i don't know hi y'all my name is alexander i'm 26. good start i'm also 26. privet is receive also an excellent start first of all thank you for your content in particular the game engine series you've developed my 3d game engine for a long time as a hobby but about it five years ago um that's understandable game engines are very difficult to make but recently i discovered your channel and your videos gave me some new ideas inspired me to continuous development cool i wanted to share a demo that implements a simple particle rendering technique in c plus an opengl i came up with it while i was developing my engine and later extracted it into a separate demo the demo also has some music and it fits in in just a single 4k executable cool so it's like literally like a demo like a demo scene style demo that's really cool because i have not looked at anything close to this um and that's actually one of the reasons why i selected this here is a link to the repository all right let's take a look at these particles um i haven't taken a look at this really i mean i've skimmed through it to make sure that it's going to be decent content for you guys but i haven't really uh examined it yet so this is what it looks like i guess um it's a demo gpu particle system technique written in simple slots and open gel 3 also simple procedural music inside cool so i guess the music gets created by the actual software um there's a pre-built 4k binary that i might open that um before you do so see control section below blah blah blah with cmake demo vlogs a demo um oh and good some interesting controls so i might save these controls how it works that's cool seeing a little how it works section so i don't have to explain that to you guys i guess unlike most existing methods my technique doesn't do any step-by-step simulation instead particle trajectory size color and other parameters are defined as functions of time yeah so that's pretty common to see like on cheddar toy um for those of you who don't know by the way that's probably a good kind of thing if you guys are interested in stuff like this if the stuff that i'm about to show today interests you you should definitely check take a look at shader toy shader toy is a website um it sounds like they're sponsoring this video shady toy is a website um that basically just has people writing various shaders that do things and because there's no real state like you can write to textures and you know do stuff like that but there's no real state like this isn't like a an application or a program it's kind of all generated you know using this kind of shader text and essentially it's a fragment shader running like on a quad so because of that um you know a lot of it is like a function of time or a function of like the mouse you know uh location stuff like that so this is cool it's kind of similar and i always love looking at this stuff to be honest speaking of sponsors though however this video is sponsored by skillshare so for those of you who don't know skillshare is an amazing online learning community where millions of creative and curious people from all around the world can come together into one place to learn some new skills through their amazing selection of high quality classes whether you're trying to learn a new skill or polish up an existing skill skill share is the perfect place for you they have classes on literally everything if you're interested in photography videography marketing video editing in fact there's a fantastic course that i've just been watching today by mkbhd that just teaches you all about youtube because clearly i have no idea what i'm doing i also really like a lot of their illustration classes and the best thing about these classes is that they're so concise and high quality and to the point they're not going to be these like hour long courses that you have to do they're extremely easy to consume if you don't have much time available i mean take a look at this mkbhd course as an example look at those times these classes are perfect for you if you're busy and i mean who isn't coming in at just under 10 a month for an annual subscription it's absolutely fantastic value but skillshare is also giving the first 1000 people who click the link in the description below a free trial of skillshare premium so that you can check it out for yourselves and see what's on their platform huge thank you to skillshare for sponsoring this video and let's take a look at some particles okay so here we have the cloned repository now it is uh it does build using cmake so i'm just going to go ahead and quickly run cmg making a little build directory as per usual to get some of these project files generated for visual studio great so he did mention there was a i guess in bin yeah there is this kind of four kilobyte executable 3.62 kilobytes that's pretty impressive um yeah demos are always really cool to look at but let's let's just go ahead and build it ourselves so that we can examine the code as well okay so let's expand this up uh source files okay demo main i guess is probably a good place to start let's just build it and run it and see what we're looking at i've got to make sure to set that as the startup project it's got some music look at that particles i'm going to enjoy the full experience so okay so controls he mentioned let me just bring them up because they are useful okay so one to nine is number of particles can't tell if that's like more particles or less particles because these look like they're so wide and condensed but these look like they're just more spread out okay that's cool shift and control is running speed okay i see you can slow it down and you can speed it up left and right arrows changes the time direction p is to pause and resume and eyes to restart or it just clears everything until i do that okay cool so that's the particle system let's take a look at how it's built okay so the first thing that i want to point out quickly as i look through this code for the first time is this is a demo right i mean this is clearly a demo it's like a four kilobyte demo it's supposed to be as short and to the point as possible this is not some game engine that's going to just be written in a super easy to understand way probably or using all the libraries this is supposed to be really simple and you can actually see the way that it starts up here as well we're just using the win32 api to create a window linking glow or sdl would be would massively increase the binary size and that's not something that we need for a demo platform apis like windows clearly capable of providing us with a window so why not just do that so my point is that this is not good code to to kind of read i guess to learn from if you're interested in making like actual applications or games because it's a demo by the way link to this code will be in the description every single one of these episodes does have the link in the description so you can just unless it was like sent to me in a zip file or something this is on github so the link will be in the description below if you want to check it out of course and actually one thing i um forgot to mention was that um i noticed this at the bottom as well so there's a webgl version there's also an android version which is more advanced which is really cool so you can check this out on android if you want okay so step one is let's see we created we created gl window i guess and this is just all pretty much 132 api code to create an opengl window i guess we load various opengl functions which of course are all kind of done using wgl get proc address because it's trying to be as small of a binary as possible we're not trying to link any libraries i guess this doesn't use any libraries at all i'm sure if we went into like properties and we take we took a look at the linker um the only stuff that it links is all of this stuff that that's all available for you with windows it all ships with windows i also assume there aren't too many kind of advanced um opengl functions i would imagine like if i was writing this demo i'd probably try and keep it i mean he said open gel 3 i think but i would try and keep it as low as possible i assume he's going to need shaders to actually you know create the particles and stuff um but you know you wouldn't you wouldn't try and use all the latest features because you don't need them it's a demo um then we instantiate this demo class we're on the constructor which creates a whole bunch of stuff cool all right so screen width and height sure guesses the metric so it's actually getting the physical like width and height of the display you're running on particle effect description i guess um we have a bunch of cons char pointers so these are actually stored in the binary so if we if we take a look at let's see build i guess debug there's the executable i'm going to open in hxd which is my favorite uh hex kind of binary editor i guess um and then let's make this a little bit wider um scroll down okay so you can see that like the shader code let me just kind of make this a little bit maybe easier to see um the shader code is literally just stored statically in the binary itself now because the the final output binary was 4k um i'm sure he's probably using some techniques to compress that because text text of course compresses extremely well right these are also gel draw regional enabled those are probably all the names of the functions he's retrieving um using that kind of wgl uh get you know whatever it was here it is wgl get proc address gl and then he's concatenating the name of the function he wants so that kind of it's a macro it expands and it it's in the binary now but anyway as i was saying because the text compresses extremely well he's probably further compressed that so i imagine if we opened up the 4k um and i'm not like some kind of demo expert by the way i don't think i've ever made a demo in my life um at least not intentionally uh yeah like this is the entire 4k file right i mean there's no text here so i imagine it's probably like compressed or magic some way i don't know but that's basically where all of that code will end up so these are all kind of just const chart pointers they don't need to be strings or anything like that would only like heap allocate anything um or try and do that we can just kind of store them in the static memory of our application which is what's going on there okay i've i have lost everything as usual so let's see demo that's that's where we were we were instantiating the demo and running through the constructor okay so we have all of these kind of construct pointers to uh shaders to shaded code obviously these aren't complete cheddar codes they're just individual functions i guess which is interesting then we do effect dot 2 shader which uh sprint f's the vertex shader code with the shader template and then the color phone okay all of these get like concatenated um let's take a look at this uh well not concatenated actually this is the format and then this is these are like all the like i guess percentage sign s um kind of strings that get get put in there so this is really the key um so let's i don't know where this can where this lives vertex shader code let's just quickly i don't know i'll just search for it um yeah where does that it get set oh hang on vertex trader template oh sorry that's the target that's the format my bad so this is the buffer in which it's going to um you know put the resulting string into this is the template and this is i guess the actual um the format right so as if you were doing printf and then you'd have your actual format string and then these are like all the arguments for the format string so this is the actual shader okay and then yeah so you can see like there's like get position or like get emitter position get size get color and then they just have percentage sign s right percent s which just means like take in the appropriate argument it's a little bit dodgy right because obviously the order of these matters so much if you just mess them up then your color function will be your size function and vice versa so it's a little bit dogecoin but um you know it's a demo that's great you know that that's the best excuse write a demo and then be like no i had to do it this way man it keeps the binary size smaller best um okay so yeah version 130 pretty old um define particle ideas gel vertex id so we're probably what are we how are we actually rendering this maybe we'll start with there um so we do demo step which what does that do right okay so we're just doing some i guess this is what's query performance counter is a 132 api function that will actually retrieve like the current time for you um and this kind of sets it up as well so this is like the current cpu time so this is what we're using for time um it's like 128 bit uh number which is why quad part gets the kind of 32 bit out of it so it's a long long now maybe it's even a 64 bit um because it is a long long right how big is a large integer these days anyway whatever um get uh async key state um i so that's us just basically saying if the key is pressed sending resetting time to zero which is what's supposed to reset the particle simulation um rates okay okay right one plus i so this is actually how many particles there are yeah so the lower number the less particles right so this is two thousand particles i assume if we press the one key and then if we press like the three key it'll be ten thousand particles right so that's just making sure that we do uh that we retrieve the current key and then use it to actually uh write okay and if it's not that key we continue so we basically run this 10 times to get the async key set of all of our um well not ten times nine times um to get all the all of the uh key states of the one through nine number keys if it's not pressed we just skip if it is pressed um then we'll do all of this and we'll break right this sets a bunch of uniforms and just figures out how many particles we actually want cool delta time um shifting control just increases speed or decreases speed we know that left right set speed to be negative right so um if speed is greater than the zeros it's just that's reversing time i guess which is what runs it backwards uh pause okay yeah anyway this stuff is pretty straightforward render frame this is what i want so we clear the color buffer we load identity translate rotate um uniform one f time uh yeah so we set the time into the shader as a uniform and then gel draw arrays gel points zero and this is the count okay so we're drawing everything as points that's cool um i think actually as i was skimming this he did mention that um this method is the only way in order to simulate particles on gpu that can be implemented in unextended opengl es 2.0 for example it works with mali 400 gpu which is like a an android gpu which has no support for vertex textures pbo like pixel buffer objects transform feedback or compute shaders yeah so we're dealing with like a pretty old kind of thing but you know that's not necessarily a bad thing as i mentioned for a demo because i'm sure that this is going to be less verbose than like having to compile compute shaders and stuff like that um which is going to be pretty good and it seems to perform pretty well um okay so we're drawing a raise so what is the array that we're drawing so we're probably creating it somewhere here um [Music] time rate okay these are all uniform locations oh here we go gen buffers array buffer so we're generating an array buffer it's four bytes large and no data is being set into there i don't think we do actually need data if we're going to emit things um and then we enable point spread okay so point spread and program points right this is a blast from the past so this is basically a way for you to be like i'm rendering points but i want to give them like a size and program point size means that you can set that size from within the shader so if we were to take a look at the shader which we will in a minute um he's probably setting the size of the particles and so we're basically just rendering these kind of sprites and that's what the particles actually are and this is the amount that we're rendering so it's going to be the minimum of time and lifetime times the rate that's just how many points we draw and obviously the shader works out where they're supposed to be you know how big they are what the color currently is and all of that all of that is figured out from the one uniform that is just the time so we fit in this value into the shader it runs all of the functions all of the equations and then we then have a resulting you know position on the screen a resulting time sorry a resulting color a resulting size all of that kind of stuff just based off of this one variable that we run through all of those algorithms so that's how all of this is working um and again you know we're rendering a lot of these so here's a good example so was that even supposed to be gel size i'll be nice gel size i count equals that and then i'll just print out i'll be in the spirit of um c or whatever and we'll just do what is this unsigned long long or something uh it's in it wow that's that's easy um uh we'll just do count here so this is this is the amount of particles that we're rendering printf is undefined ah do i have to use like oh we don't have a console do we oh that's annoying no okay i'm going to destroy his binary by just including standard io.h i don't think we do we actually yeah we did create a console right so we've got this is how many particles we have right so it's growing because we're spawning more and more particles did that just pause um we're spawning more and more particles obviously the life they're not dying but at some point i think this is going to stabilize let's maybe make this a bit smaller except now we can't resize it great um okay so 50 000 right and at that point i guess we just those old ones are dying and stuff but if i change this now we have 8 000 if i change that now we have what is that a million um escape closes and unfortunately i was trying to release the mouse but um anyway you get the point right so this is how many points we're telling opengl to draw and then each one of those points is going to go through the vertex shader and then eventually the fragment shadow right so let's take a look at that shader quickly um let's see on the music stuff we haven't even taken this there's so much stuff to take a look at this these are always going to be kind of long these videos i think let me know what you guys think of this format at least because i'm just having fun looking at this to be honest um and it's i just think it's a pretty cool project that obviously you guys can check out for yourselves um using the link below so uh the shader i think isn't shaded.h yeah okay so this is the shader we've got all the uniforms here the viewport size um uh let's see just random random number generation functions um rotation i guess getting a rotation matrix back from like some euler angles um get colors i mentioned is a product of that so i guess we can take a look at one of those shaders as an example so the color function for example right so first of all what does that take in um let's go to shadow.h it takes in just time right so we have a t variable for like all of these functions right um [Music] and then we're basically i guess generating a random number um for the main color which is obviously going to be at some point oh we have birth time as well so birth time is that just something to get set yeah birth time is something that we create here and i guess yeah get color and get time takes them in and birth time i guess is going to be based on time and lifetime where does lifetime come from lifetime is a uniform that we pass in okay cool so we do keep track of some things i guess um like there's more than just time that goes into this there's like i guess lifetime being just the lifetime um the age of like the particle uh or rather should it be the total right okay um the total lifetime i guess lifetime let's take a look so lifetime location and we set that yeah so we set that based on the number that we press and also at the beginning it's set to something um it sets just five okay um we have start color which is just a function based on the birth time by the way these random number generators just so that you guys are aware this is not like calling a random number generator in like c plus plus this is all very deterministic so if we look at um the actual function the generated random number you can see what it basically does so it is based off of a seed that you pass in right and then it will give you like a number that you know mathematically will be quite different from the seed that you obviously pass in but if you're passing the same seed you're going to get the exact same number again right everything has to be deterministic we don't want particles flashing around the screen or doing something weird like that right everything needs to be recreated based off of a single value and that single value in this case is that time variable so that eventually comes into this so if we go back to like shader.h or sorry this was in demo.cpp so this is all based off of birth time it's a random value but it is also determined by birth time if i pass in the same birth time and this is just the y value of the seed if i pass in the same birth time i'm going to get the same random number out right so it's not really random it's um just i guess different very different than what you pass in originally and that's a lot of what like shader random numbers are so if you see like random numbers being used in shaders most likely unless they're being passed in like by some uniform or whatever usually they're deterministic because just like if you wanted you know your shadow to kind of be you know smoothed out and scattered somewhat randomly you wouldn't actually want it to be random because then it would change every frame and that would be like weird it'd be flickering so what you actually want is a way to make it seem random but also to be stable and predictable right and that's what these functions are basically doing um and then we just return a mix of like a whole bunch of different colors based on a factor and you know whatever i mean this is the kind of stuff that you could probably sit down and play with for hours just tweaking these algorithms i love stuff like this honestly but i don't think there's much point in me trying to walk you through this code it's all very like straightforward it's all just maths right so you could definitely um if you're interested take a look at this stuff and maybe even learn some stuff and try it out in your own code as well or on shaded toy as i mentioned okay so that's all the kind of rendering stuff so the point is we just render all these points and i'm assuming there's something in the vertex shader that actually yeah so we set the point size to be a particular value here that's like the size of that sprite and then we set the position to be somewhere on the screen and so we're actually so we are actually rendering geometry kind of right this isn't like running on a quad kind of like you might do if you were running this through a compute shader or just in a fragment shader you can see that this is all kind of happening on the vertex shader and then on the fragment shader all we're really doing um is getting that i guess coordinate and then just drawing like the color right but the color is also based off of the factor because i assume we want it to kind of fade out toward towards the edges because this is the vector color meaning um it's also going to be affecting the alpha right so you'll probably get that fade fade off and that's why you get the blending and stuff i'm assuming he has blending enabled um otherwise nothing would work um where would that be uh blend i'll just search for blend jill enabled your blend right so if we didn't do this it would look very it would look very different yeah so this is actually a really good way to see what's happening if you're a little bit confused you're looking at this and you're like a little bit confused i'll just pause it by holding the title bar if you're looking at this and you're a little bit confused as to what's going on this is how it's being rendered right it's very very obvious now um it's just the music's still going but whatever must be running on a different thread um or something that's annoying that i did that but whatever anyway you can see kind of what's going on here um it's just kind of drawing at that point which i had the mouse cursor but you can kind of see where it's drawing hopefully new particles and then if i change these um so this is me pressing like the nine key now you can see just how many points there actually are but furthermore you can see what the sprites kind of look like right and because they don't have blending they don't really fade out um they just kind of remain as uh squares and then you have that kind of black border but the color still fades out it kind of gets darker and darker towards black in like a circle kind of radius and that's why um you know the very corners are black and you get this kind of nice radial pattern i guess um and obviously if we were to enable blending back everything would um fade out very smoothly and then the kind of blending effect because that's the other thing right let's take a look at this um you know this isn't your typical blend function right it's not source alpha one minus source alpha it's source alpha one right so you get that kind of additive effect which is why it's so bright right because when stuff blends it kind of gets added um actually uh blend funk i don't think the blend equation is being set anywhere but that's kind of what you end up with if you're confused how opengl blend functions and stuff like that work i actually have an opengl video up there with like a powerpoint presentation and everything going over some of the common blend functions and what they do so check that out if you want some more information all right and last but not least let's take a look at how the music works um now i'm not an audio programmer um even though i love audio um so let's take a look at this yeah so it is running on a different thread we have a music synth thread wave wav header okay cool so i guess this creates some kind of wav file or something um because it's got like a header here with a particular sample rate 44.1 k pretty standard um and then yeah we just have some mathematical functions which at some point i guess get fed into some kind of synthesizer um and that's what actually creates this sound so guitar note we have some like certain amplitudes i guess that create actual you know notes and actual music and then we pass in like i guess a frequency so what tone what pitch we want the note to be um and then what does that actually do so i guess it adds it to like some kind of yeah destination buffer right and then we eventually so this is the temp buffer destination and then we eventually i guess we play that so guitar was like a call from destination vibraphone notes cool all these different notes going on that's all going into music synth um which is going to the thread function right um that's calling so that's the okay whatever it goes into this destination i guess and then how do we actually play the music though where's that being fed into something ah here we go so this actually took me a little bit of um time to find but basically music init right this this spins off another thread which is this music synth function over here that's running that probably takes a little bit of time to run right because it's actually going through and generating all this stuff um i don't know how long exactly it takes but it's doing its thing on a different thread meanwhile though we create all this stuff store it in this kind of buffer that we uh you know have inside this music init function and then we play this right so we're passing this buffer to snd play sound which is like a win32 sound player right and then it's just playing the buffer and i guess that buffer obviously contains like the header for like a wav file and everything so this is if we it's really as if we like just um you know read a wav file from disk and then just passed it into this function right except we've generated it all ourselves including like the header information and stuff and then obviously created the actual music using code which is really cool so if you're interested in some audio programming this might be a little rough but jump in and take a look at this kind of stuff because uh yeah it's really cool how we're able to generate music and this isn't just some stupid sound it's actually like a little bit of a song which i think is pretty cool all right i think that's pretty much it so we've covered like the music we've covered the rendering um yeah i think it makes sense overall this was a pretty cool project to look at we haven't really looked at utilities but this is like stuff like create windows and whatever yeah i love looking at demos i love looking at cool little projects like this let me know what you guys thought if you enjoyed this don't forget to hit the like button below as well and check out the project for yourselves if you want to if you want to send in some code or a project for me to look at there'll be an email address in the description below that you can send your code to channel review gmail.com don't forget to check out skillshare by using the link in description below and i will see you guys next time [Music] goodbye [Music] you

Channel: The Cherno

Views: 27,885

Rating: 4.9483285 out of 5

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, code review, particles, particle system, demo scene, demoscene, demo, c++ demo, c++ particles, c++ code review

Id: kdJhCv7lCD4

Length: 29min 25sec (1765 seconds)

Published: Fri May 07 2021