This video demonstrates how to implement post-processing shaders in Raylib, including asset management systems for loading textures, sounds, and shaders, and practical examples of CRT effects and god rays. The presenter explains that shaders consist of vertex shaders (which transform vertex positions) and fragment shaders (which determine pixel colors), and shows how to apply full-screen effects by rendering to render textures first, then applying shaders to the captured images. The video also covers collision detection optimization techniques like spatial partitioning and quad trees for improving game performance.
Install our extension to search inside any video instantly.
[zig+raylib] shaders
Added:Hello. Hello. Hello, penguin.
All right, we're back.
Uh, yes. Um yeah, the game jam had me uh tired, so uh I have taken a little bit of break, but now we're back. And uh yeah.
Um so today I was thinking we were going to look at a little bit of uh shader action and um I've basically already done like a well in the now I'm in my template project and I've done like a a kind of default setup here. And so we do have um I can show you around here get actually because um I made a different uh implementation here for assets.
And so uh hopefully this will be a little bit more generic and uh useful for more games. So uh I have this assets uh sig file where I have asset containers which is essentially a wrapper around a hashmap where you have a key and a value and then we have some uh you know convenience functions here. You can load uh stuff and uh um and how do we know how to load things? Well, we pass in options which give which you pass in function pointers to functions that actually do the loading for you and also uh getting the file name to load and uh uh and also we have unload as well. So basically it's a little wrapper around the map with like loadable and unloadable things and also file names.
And then we have this general like assets strct which h holds basically all assets that are you know loaded right now and the possibility to load in more assets. And how we do it is we have these keys for each type of asset. We have a key where in textures you have their own texture keys, sounds, music and then shaders. So we can easily like talk about okay hey load this shader or use this shader or uh play this music you know um and then we have all of our types here for the container. So here's the texture container and we supply the functions that will be used to do the actual loading and unloading. And I'm just I'm just using like ray lips load texture unload texture because these actually just uh take a file name and it can be an error as well but uh that's our function takes care of that um and returns the texture. So that's the payload of this uh hashmap or the value type. So this is the key here texture key and then the value type here. So, so that means that we can like create an empty at first and then dynamically load in any key based on the key that we want um and use it. So we can like, you know, load uh everything that's needed for a level for say for example and unload it when we're done or keep the things that are like common between everything. All right. And then we have sounds, we have music and we also have shaders. So let's look at shaders because shaders is a little bit uh trickier because load shader uh rail load shader actually takes two arguments. takes the uh VS which is the vertex shader I believe it's called and then you have the FS which is the fragment shader. So there's two shaders. Now the the difference is that the I believe is that the vertex shader can kind of move the vertex around where the vertex will end up. So you can kind of change the geometry of the thing you're trying to draw.
Uh and then the fragment shader is taking care of the color of the thing that you're trying to draw. So those two things are uh supplied here. I believe that's the kind of the there might be, you know, a better definition of those things. But uh uh but yeah uh and I have a little script here sort of that kind of uh parses my thing here because because my interface only had one file name. I had to kind of do a little bit of hack here to kind of separate by semicolon. So as you can see down at um here's the file names. So for example, my key for sprite sheet, I just say that, hey, that's just sprite sheet.png. And then we have these ones, which doesn't actually exist. So here we're basically mapping all the keys to the file names. And here's the shaders.
So the shaders are a little bit different. Uh they're kind of the same but also different because you have to have a semicolon here where to the left of the semicolon is the vertex shader and to the right is the fragment shader.
But if you don't have a vertx shader, you can just have it empty.
And then if you have a fragment shader, you can do it like this. But if you have if I had a vertx shader, I can like put it there. If I don't have a fragment shader, I can do this, you know.
Um yeah. So uh yes. So there we go. And then the little script out here will handle separating them and uh you know getting the real file names out and uh passing it to RAID there. So anyway, that's our first step like actually loading the shaders and I showed you this uh this um uh assets thing and then you know how I use the assets uh this asset structure is I simply initialize it with an allocator and uh these init options where it's like okay do you want to load like if you have a small game you might want to just load everything in once uh or you maybe you just want to load the textures and the sounds but not the music or something like that. Uh or you just start out with an empty and you load everything as you as you go.
Uh so empty would be not loading anything but yeah we can call load on a specific uh resource to or asset to actually load it. Okay. Uh so yeah so so we simply just add this to as a singleton and then I have an assets function here which um yeah it it just gets the singleton out for assets and then you can use assets to for example uh load well you type where do we do this actually assets Let's dot something here.
Uh oh yeah here for example. So if I want to get the texture with and I can supply the texture key. This is a convenience function also in um in um in game here. Uh I can get the assets. I can select textures and then I can load uh with the key. And this load function actually uses them if we've already loaded it in uh if it's like already in the cache.
Let's say uh we're not going to actually load the file in even though we call load here.
We're just going to use like return the cache. So if you call this function uh it's going to call this one and it's like here it's like okay well we're looking in our map do we already have the key then we extract the value out and we return the value otherwise we will get the file name we will load using the load function that comes from the options which is for textures is array.load load texture for example and then we get our value out and we uh put this in our maps saving this value and then we return this uh thing.
So this load function will get you the thing even if it's not loaded or if it's already loaded it will return the cache value. So there we go.
Uh so you don't technically you don't have to like preload using the system. However, then you know you will might get some lag if you if you like dynamically load everything like this. But uh but you will probably want to have some I'm probably going to add like a a scene loader thing or like a preload thing where you can gather all the different uh resources that you need in a a strct and then you just uh pass that into the assets uh container and it will like load all of those things and maybe unload everything else that's not needed or something like that. I'm not sure.
Um so yeah that's the thing and then uh but let's go back to the shaders. So for shaders we have the same thing we have a shaders container and we just load the shader. So here now we get our ray shader here and we just call uh now you can just call begin shader mode from ray. However there is a uh prerequisite of this. Let me go to draw and where is this happening? So basically what's changed here is that now we have a render texture as well. So the render texture is basically So, it's basically how does the shader work, you know, if it it depends on the shader that you want to use, I guess, but it's like uh this is kind of like a 2D full screen shader that I am currently looking at. So, I can show you the shader actually here. Uh actually, why do I have this one? I don't think this is the this is this is not correct here.
I think I copied some other shader here.
I'm going to remove you.
And then this is the actual shader here.
So this is um it's kind of a combination. I I kind of copied some code and then I made some own uh my own and uh and u uh but yeah in the end uh it's a lot like what you would find like online here but essentially uh in Ray Lib you get these input things automatically I think cuz I'm pretty sure you have to like manually set this up if you're using like you know if you're just using like OpenGL or something like you don't get these once.
I'm not sure actually. Uh but like inve there there's some things you have to set up but this is automatically set up.
You don't have to do anything in our code for these to get populated essentially. So n means like an input variable essentially. This can vary between each um render I guess or each uh yeah each um what's it called? Uh each call to this shader essentially. So every time you get a new So how the shader works essentially, it's like you're going through each like kind of like pixel or thing in on that on the texture of the um uh of the shape that you're drawing. And since and the thing that we're drawing actually is this render texture. So that that's the thing like we're drawing the whole screen.
Hello, Ivana Yusanka. What's up? What's up? Welcome. Welcome. Uh, so for a full screen 2D effect and this the the shader that we're using is a CRT effect. Okay, so it's basically going to be a full screen effect. And so what we're doing is we're turning our whole screen into a texture.
So how you can do that is essentially you create a a render texture. You begin texture mode in Ray Lib.
Um, and then you draw on just draw use usual draw functions and then you end texture mode cuz now you're drawing to this texture instead. It's a render texture. You can draw on to it with the begin texture mode and you end texture mode. Now we have a bunch of things drawn to this texture.
And now we do the actual drawing to the screen. So we do begin drawing. And now we want to apply our CRT shader. So we begin shader mode there.
And then we draw the texture.
Uh one thing to note here is where we flip the Yaxis because the texture is kind of like upside down for some reason. So you always have to like negate but it's easy enough. We just you just have to negate the Y here. Uh but yeah. So that's why that's like that.
And then you end the shader mode and then we end the drawing. So that one now now we're we've drawn the whole uh we've first drawn onto this random texture and then we draw the the texture out with shader on. So the shader will apply to the whole screen uh like that as a texture like so essentially this shader is going to be called on the whole screen and so yeah um and essentially we only have like a fragment shader which only changes like the color of the of the thing. Uh well if I show I can show you the results here.
Uh so this is the this is the CRT shader and um you can you can change a bunch of things. So what we have is essentially we have a uh a kind of a bending effect.
So it kind of looks like those old time screens. We have those the scan lines which makes you know a t like lines here.
And we also have uh a vignette which makes the corners darker and center a little bit brighter or Yeah. Um so now it kind of looks like you know a an old monitor screen here basically. Um and what we can set uh here uh we can set let's say the radius. This isn't used.
Yeah, I'll get rid of these. I'm not sure if these are used. These are used actually.
Yeah.
Uh this is set from outside actually. So these are one of few things that are actually you can like all everything that is uniform here uh we can set from outside these things are actually popular um populated by ray I think so you don't need to set these but yeah they are automatically populated by ray uh so you can access like the texture colors or the texture you know pixels and the diffuse color which I believe is like the current the color on the current of the thing.
I'm not sure.
Uh I seem to remember diffuse some but I don't actually remember exactly what that means. Right. Actually, let me look this up here. graphical graphics program color matte color. Okay. So, it's just the Yeah, it's like the unlit color of the current pixel.
Uh, actually, I'm not sure why we use that.
Oh, right. We use that because we want to No.
Okay. I'm not sure actually because the the final like color is supposed to since we're bending the screen, the position of the collar is like ending up somewhere else. So I I don't know how this makes sound. What happens if we just remove this?
Nothing.
What also what's cool about this is you can you can modify the shader and because that's going to that's like compiled in real time. So if I modify this I can also like modify let's say I can change the distortion of the curvature and you can see it changes. I don't have to recompile the program. Uh, it's it's going to recompile the the shader in runtime.
And if I go over to the side, well, the lines look really weird.
Maybe it's just because they are like pretty thin. And then there's other things that we can do. Uh, distort X, for example.
Now the other side is like distorted. We can do both.
Now it looks like this. So yeah.
Um and then we have like scan line intensity. If we set this to zero, there's no scan lines basically. If we set it to one, the the scan lines are basically going to be like black. You're you're basically not seeing what's in between. Now uh if we then we can also change the thickness of the scan line. So if I set this to 10 or 20 or something then the scan lines are way uh larger and if I set this to like 0.1 or 1.0 zero. You can see that yeah, it changes the things around something like this or maybe something like this. I'm not sure actually what the size of the scan lines. I mean, I guess you would have to see what you would want there.
Uh but yeah, those are the kind of the settings that you could set in this particular uh shader that I made here.
Um and this is available on if you want to check it out like on the uh GitHub.
Maybe I should actually I should update the uh I should update the description here to actually uh to this template project actually.
So, let me do that real quick here.
And all right, so it's in the description now. Okay, cool. So, basically, yeah, that's it. I mean, now we have shaders.
Uh the only thing is like how we actually like make the shaders do what we want to make them to do. But yeah, this is like one example. You can do a whole bunch of things with shaders.
There's a lot of examples on ray. I can show you here as well. Uh ray.
So let me show here ray uh shader examples.
And you can go to examples and click on shaders. And here's a whole bunch of different shaders. Now, these shaders are also they can be different types of shaders like basic lighting. This is more like a 3D. I'm I'm just focusing on 2D. Here's like an ASI rendering shader.
That's very interesting how that works. I'm not sure. Would be cool to check it out. Uh model shader.
So that's essentially how you can also apply different shaders to different like objects because it's only applied to the things that you draw uh when you like draw it like when the shader is enabled and you can enable another shader or another group of shaders maybe even I'm not sure actually can you have multiple shaders at the same time I'm not sure actually maybe you can't uh but anyway Uh what's this? Shapes textures.
Yeah. So, and then this one custom uniform. So, yeah, this one this this is the one that uh I was like basing my shader on because it it like applies to the whole screen sort of. It just uh so this shader is like, you know, it's swirling around the mouse pointer. So essentially you're passing in like where's the mouse pointer and you're passing in how large is the screen and a couple of other things and it's going to calculate okay how do I need to modify the colors uh to look like it's swirling. So a lot of things in shaders like a lot of mathsy things that you have to do uh to make it work or you can just find a shader that you because shaders are like universal because you know it's its own programming language or it's like you can easily find like OpenGL or GLSL um uh shaders.
And um also one other thing here, if you want to actually look at these shaders, you have to go to the cuz you can't find the shaders in this particular screen or page. You have to actually go to the GitHub of Railib and then go to examples I believe uh Railib GitHub and you have to go to examples and here we have like shaders for example and so here you have the resources and then here's a bunch of uh textures and then shaders and then select the version. I'm not exactly sure which version is is best to use. I assume it might be the latest one, but there has to be a reason why we still are on like one O. Maybe it's like um you know compatibility with older graphics cards or something like that. I don't know. I just chose three version three for some reason. No reason at all actually. Um and uh yeah. And here's the swirl fragment shader. So that's the only shader that existed for the swirl. So here's the whole shader to make that swirly effect essentially. So it's pretty simple actually cuz it's like it's just a bunch of maths happening here. Dot products and yeah s cosine and uh stuff happening here. Not sure exactly how it works but there you go. So you don't have to kind of be an maths expert to do this stuff.
And there's probably even if you don't find source code, you could probably find like some kind of equation or algorithm or just ask you know AI to make the shader for you or something like that cuz that's what I did also like I asked AI to kind of hey could you help me with this one particular thing with this shader and it it did actually help me out there. So that went really well.
Um yeah but uh what I was wanted to do actually I wanted to kind of investigate how we can do god race and let's so let's see first of all um and I guess if you want to have multiple shaders one thing if you even if you can't enable multiple sha multiple shaders at the same time. Maybe uh what you can do is you can draw actually I'm just going to try this if let's say we begin shader mode two times. What's going to happen then? It's going to crash.
I don't actually know. H it didn't crash. Maybe it just over over um overrided it. Overrode it.
Hello, Mabdo 88. What's up? What's up?
Welcome.
Okay. What if we said what if we made another? So, this is how I'm I'm adding another shader. I'm just going to do a a quick example here. So, we're adding another shader. Now, if I save this, uh, I get these errors that I have to fix. So, we need a file name for this shader, which I'm just going to say it's it's this.
And that's it. Uh, and now the shader can exist in our game, but we have to also actually make this file exist.
So, I'm going to go here. I'm going to copy this.
I'm going to edit CRT2.fs.
And I'm just going to keep it the same.
Maybe maybe I'll do a bunch more distortion so we can see like a difference here.
Okay.
Uh and then we'll go to draw. And now we can activate both of these shaders and see what that does.
Maybe it just overrides the thing. And I'm going to I'm going to change the angle or the order here.
Okay. So, it seems that we can only have one shader and the shader that is on is essentially the latest one that is enabled. So, cool. And but what I was thinking is that okay, well, what if we want to have multiple shaders? So if we want to have multiple shaders, I believe one thing we can do is essentially um if I draw this texture.
So okay, let me create another render texture.
So this is my idea like you create one render texture for each shader that you want.
So, I want to create another texture.
Although, this is kind of weird. Will this even work? Yeah, it will. It will probably work. Uh, it's just the order of what I have to apply CRT last because it's going to distort and stuff and do weird stuff. So, uh, so render texture to this is essentially going to be like create render or uh render texture load render texture.
There we go.
screen size X.
And of course, I have to cast here.
Uh, is that it? And then this could be an error. So, I'm just going to catch unreachable here.
Okay. And we don't have screen size.
Screen size.
That's strange.
Oh, it's down there. Okay.
Well, let's do it like this.
Okay. So, now we have render texture 2.
And we can uh begin texture mode to draw onto render texture 2. Instead of drawing to the screen, we're going to draw to render texture 2.
However, we are going to then in the end apply the shader mode to render texture 2 texture.
Uh, but we do begin texture mode and we end texture mode. We also begin shader mode CRT 2 and then we end shader mode again and we also draw the whole thing.
Okay. So first time around we're drawing on to render texture.
Oh, one second there.
All right. Sorry about that.
Okay. I'm not sure how good a method this is. I mean, we probably I mean, of course, we don't want to create this uh texture every frame. We probably want to keep a texture around, you know, uh and not create it every frame. But I'm just doing it a test here. So, first we're drawing onto texture onto this render texture. We're drawing every like you know the game the the raw game stuff and then we're applying then we're drawing onto texture 2 to apply CRT2 and we're drawing the render texture onto this other render texture.
And then I just realized you only need two render textures cuz you can just flip between them now cuz the old one is essentially you can it's just discorded essentially.
So we don't we we don't need more than two if we want to if we want to keep doing this. We don't need one render texture per shader. We just need two render textures.
Okay. And then we actually draw to the screen. We draw the render texture two.
And here we apply the second uh shader.
So this is how you probably can uh you like have several shaders like full screen shaders at the same time. And now it's kind of looks super weird here because yeah, it's interesting that I thought we would got like a lot more weird stuff going on since we're applying two distortions to the screen, but we just get like a mix of both things here. Yo, code guy.
What's up? What's up?
Okay. Um, so because what I was trying what I was what I want to do is like have the god race happening here.
So let's say this is gold race and I'm going to rename it to gold Nice.
Okay. Um, we should still have the same thing happening here. All right. So, the gold race I'm going to remove basically everything here.
Uh, do we need render? Yeah, we probably won't that maybe um for some reference here.
Oh, excuse me.
And here's the distortion. We're not going to distort.
You know what? I'm just going to do this.
And I'm going to check here.
Okay, we got an we got actually got a a compile error for the shader. Undefined variable color diffuse. Oh, the color diffuse is in ve for I think.
What the hell?
No, we Oh, cold diffuse.
Wait, why is this uniform? Because uniform essentially means that it doesn't change during the render.
Interesting. Uh okay. So Frank color them.
No.
Okay.
Let's go back here. We got the text coordinates UV texture texture zero texture. Okay, so we are going to Okay, here we go.
This is the color that we want.
Frank color diffuse.
That's the texture color.
Okay. And then we ensure that we have full alpha there.
Okay. There we go.
Uh, however, it's still not wait. Okay, there we go. No, still compile error distorted.
Oh, frag text. Uh there we go. Okay. So, um I don't know why my face is full of football. Don't even watch one. Is it like the the finals now or something?
Holy Sigma Mel. You know it.
Uh right.
So this is now kind of like an empty shader here where I'm I'm fragment shader. I'm just uh passing in these things here.
Now we want to supply render width and render height I believe. So I'm going to do that as well. But it's they are defined kind of like a default value. If you don't supply them, they will get 800 450.
Um, uh, but we can supply them. And to do that, we have to go over to here. And I'm going to go to uh, what's it called? The shader location, right? Setup shader. So, here's the CRT shader. We're setting up the CRT shader.
And then I'm going to copy you for the gold race shader.
And here's the render width location for the god rays.
You know what? I'm going to make separate functions here because it's annoying to have to rename these val V valuables.
Setup CRT shader.
And I guess I'll just copy you and set up uh god rays shader.
And then up in here we're going to say set setup set shader and setup go shader.
Okay. Now we don't have these things.
Actually this doesn't have like center either. So center is not even a thing.
We don't even care about center here because that was from the swirl thing.
Okay, this is the shader. I'm going to rename you the shader just to keep things generic here.
And we don't have center location. There we go. So now we're actually we're just we're setting width and height to the screen size that it should be.
All right.
And of course, nothing's changing because it doesn't actually do anything yet. However, I was asking like, okay, how can you make like a nice, you know, uh, god race shader in uh, well, yeah, a shader. Um, and I was asking AI here, of course.
I mean there's probably tons of examples.
Uh but you just get like No, that was not it. This one here actually maybe there is uh post-processing.
That's okay. So yeah, actually hang on. You don't see it. Uh we have more examples here in RA. I thought that maybe we could see if there was something here for uh god race.
We got texture rendering. Uh one second here.
Right. I'll be like a couple minutes here. I have to go down and uh talk to someone here. So be right back.
Okay, sorry about that. I'm back.
Make an earth using rail.
I don't I don't think I've ever done that.
Um, okay. Well, I immediately think of two different approaches, but or maybe three actually.
You could do maybe like sign distance fields.
Uh or maybe I don't know. Or you could do vertex shader things.
uh just making a model I guess or just a flat planet which is probably the most accurate if you want to render it from like you know a lot of distance it's going to look like a flat sphere.
Thank you cold guy. I appreciate it.
Thank you for the welcome back.
All right. Uh, let's see. What's this?
Texture waves.
Oh, nice. Looks like a surface of water.
The Julia set, which is uh, of course.
Oh. Oh, so you're using the shader to render a Julia set.
Cool.
I can change the speed.
Wait.
Oh, what? What happened?
Uh, not sure what's happening when I press the things. I can zoom pretty far.
Oh, here we go. Oh, here's the limit here.
Yeah, you have to do more iterations if you want to go further down, but that's nor here nor there.
Uh, do another game jam. I plan to I plan to do other game jams.
Um, it does go infinite if you well, you know, mathematically it's infinite, but you're limited by the re the computer resources to actually render it. And here's the manderboard set.
Do you know what this is called, guy?
Oh, you can actually change number of iterations. So, look at this.
This it's a it's a dynamically changing the number of iterations actually as you zoom in because you can kind of see things re gets revealed and here here's the limit. Why is it limited so like this?
This looks weird.
Use one H.
Is it like precision?
We're getting to the precision limits here.
Yeah, probably maybe.
But yeah, anyway, uh yeah, that's cool. We got color correction.
Okay, we've got What the hell is this?
Sieve of Easertoies, earliest known prime number se.
Oh, okay.
Fog rendering. That's pretty cool.
Simple mask.
Oh, so you draw like behind. I see.
Cool. Cool.
Hot reloading.
Oh, so you're like uh changing the shader in real time.
H mesh instancing multi-ample 2D interesting normal map spotlight.
This is kind of what I'm looking for.
However, this one is like super simple here.
I mean, I would essentially guess that you just render everything like you have a couple of the points where you have lights and you also have like a radius and perhaps like a fall-off or something.
And if the and then you calculate what's the distance from this from these points if it's like close enough you render it full color.
If it's uh outside render it dark and in this zone you render it like somewhere in between.
Deferred rendering.
Hybrid rendering.
Yeah. So, different shaders for different objects maybe texture tiling.
Ah, nice shadow maps.
H, here we go. Vertex displacement. You could use this to like do like the surface of a of a of of a sphere if you wanted to do like a planet. That looks, you know, unrealistic.
Depth writing, at least in what I'm thinking in my mind.
Light maps.
Man, there's a lot of things here.
depth rendering game of life in a shader RLG compute uh cell shading. Okay.
Um right so there you go. Here's there's all the examples in Ray here. Uh kind of curious about this post-processing thing.
Grayscale posterization. This like decreases number of uh colors.
So you kind of get this like I guess old quake feeling here or something.
Dream vision. I'm not sure what this is.
It's just okay.
A kind of like a cinematic thing.
Pixelizer.
I mean, I'm a fan of this.
I know maybe a lot of people are not.
I'm not sure when this is used artistically or like in a cinematic maybe.
I mean I know about uh Return of Oberdin which used not really this technique but a different technique which looked awesome actually cross stitching predator view. Okay.
It says like a hue rotation or something. I don't know. Scan lines.
There you go. There's the scan lines.
Although these look more like white things going over the actual colors instead of black lines. Fish islands.
So, like edge detection, which is actually pretty cool because if you have an edge detection shader, you can use that if you want to like draw a model that is currently uh uh being selected or something like that or hovered. If you want to draw an effect like a line, an outline.
And here's bloom where everything is bright and blur.
Is it just me or is this kind of blurry as well? Not really blurry, but the kind of I'm getting like double vision here a little bit.
Maybe it's just me. Okay, there we go.
That's all of them. And all of these shaders are available over at here. So, ray liib and then example shaders, resources shaders, and then a version here. And here's all of the uh all of these shaders here. So, scan lines, for example, very simple.
I have two different versions as well.
Uh what was that called? The bloom.
Pretty simple here as well actually.
And then we also have ASI is kind of interesting. I'm not sure how they do this.
Do they load in like a texture of characters that you also look at?
Get character.
Okay.
So we have pixel size but cell UV cell color we have gray gray scale N is 4,96 character set is from this create new bit maps Wait are these so Are these actually like small like bit maps or it's like pixels like on or off?
So essentially it's like a a raw data of this encoding like this symbol into some type of uh how large.
Okay. Well, anyway, um yeah, so that's that.
But what we wanted to do was this god rays.
Uh so according to AI here, 2D god rays are created by layering an oscillating noise gradient over the screen and using a blend mode additive or screen. So light shines through atmospheric dust.
To implement this in GDO, you can apply official code snippet, a colorrect node spanning your camera's viewport.
Uh oh, so essentially something that spans the whole viewport. Okay.
Implemented 2D god arrays is generally split between screen shaders and ray marching screen space techniques.
Uh, yo man, do you know how to make the slice file in React Redux?
It went too long after the create async thunk.
I I basically never used redux. Like I I I've used I I've used it a little bit but not to that extent. Are you actually What do you mean slice file?
How to make the slice file in React Redux? I'm not I I'm not sure what you're talking about.
How to make it smaller and modular.
I would have to look at the code and understand what you're trying to do in order to help you. Like I can't I can't really answer as such that question straight up.
So unless you can unless you can explain that in another way or give me more context, I can't help you.
Uh but I can help you. I mean I'm up to helping you, but uh you have to kind of provide me with more information.
One simple 2D screen shader.
This shader creates shimmering angled beams of light over your background without needing complex occlusion masks.
Add a color rect to your scene. Resize it to cover your viewport and create new shader material.
Okay. Well, we can do this without that anyway. Uh okay. So, we have like a color. We have a bunch of stuff. So, this is only one ray. No, there's two rays, I guess.
I mean, what we could do is we could just try and copy this over and use it directly and then translate it to whatever method we're using here.
So, I'm going to do this and instead of color, it's going to be final color.
Um, I think though that this is probably something that will have some like this is not the entire story here.
And this is main uh UV is I think Frank text cord is kind of weird. here because it goes from it seems to go from -1 to one and so to get the UV coordinate which I believe um conventionally is from 0 to one I think.
So we have to do plus one. So now we got uh from wait or is it the other way around?
Let's look at CRT actually just to make sure here.
Yeah, this is the thing. It times 2 minus one. Wait, no. It's the other way around then. Then UV becomes minus one to one.
I don't think.
Oh, because we want the center to be zero. Maybe that's why. I don't know.
All right, let's look at let's look at what you've got here. Oh, why is it not okay?
Uh, okay.
By the way, why are you using this function? Like, are you following some sort of tutorial or something?
Check this one. Ignore the interface port. Check from create slice port.
Okay.
Yeah. So, as I said, I'm not super familiar with Redux. I' I've been using like I'm not I haven't created a Redux like architecture. I've only used it before. So, I am not exactly sure what a slice is or what this is actually doing.
Uh but you know it's it's obviously creating some sort of observables thing in some way that you can do actions to or something like that.
Yeah, we have actions clear task error and reducer. Okay. So, slice I mean to me slice insinuates multiple things but here it could mean uh just you know a a technical term in redux to mean some like a collection of a slice of everything essentially it's good way to use asynth for the API instead of using a different folder.
Okay. Okay.
So we have to initial state okay uh reducers okay extra deducers.
Uh so what? So what is the what? Okay.
Create async thunk.
Where do you have it?
Fetch task. Create task.
So is it here? You mean that this is taking time?
Could you please join on Twitch instead?
Cuz this is going to take forever otherwise because every question I have to wait like a minute for the answer.
Also genuine question like why are people using Axios like why just not use the built-in fetch function?
Why do we still need a library for this?
What does what do we give from this?
I've never used Axio before actually.
Hey, cool guy.
All right. So, just where is the issue? Where's the error happening?
I'm not I'm not I don't think I can help you here actually because I'm not super familiar with this uh with create async thunk or uh you know red like uh redux in general and that was that cannot we make the crate slice part modular like you want to break out I mean yes why couldn't you you already have it modular because this is defined somewhere else, right? And then you're just using it here to create the slice.
So just break out like just take this, put it somewhere else, import that here, put extra reducers, you know, I'm not sure what the issue is.
Okay. Yeah, no problem.
I I I I was thinking that you wanted help with the error you got.
I mean, you're it's still going to take uh as long it's still going to take uh you know uh the same amount of time because we're not optimizing it.
We're just breaking it out.
Okay. Well, I don't know.
You should just I guess you should look into like how to optimize that. Uh cuz I don't know.
Okay. Um No, I know. But but Redux might have strategies that you can use to optimize the usage of that function or something like that.
Like why does it even take time? Like what what what are you waiting for?
You love shaders.
Cyber bugs. Welcome. Welcome.
Uh, no it's not me.
I don't I don't have never seen that before. Ka.
Uh, okay. Anyway, um, wait. So this one if it if frag test cord was -1 to 1 then this would be like -2 to 2 minus one which will be -3 to 1 which doesn't make sense. So it it has to be that the other way around like we're creating Yeah. Yeah. Okay. Uh so let's go back here. So frack chord is I think it's already the way we want it to be.
Frag text chord uh color.
Okay. Plus one.
No, no, no. So that's just that's just that.
And I'm going to remove No, I'm not going to remove these.
So we have all this. We have a noise thing. Hybrid noise.
What shader lang is that? Uh, so this is rays.
I'm I'm using the shaders with ray lib.
The language is uh I mean uh I think it's GLSL.
Um, I'm not super I'm not like an shader export expert or anything. I'm just I basically copied a thing from AI in here and I'm trying to make it so that it works with braid li here.
So, I mean, and what I've done uh is essentially the UV should be probably be good now. I'm not exactly sure how what this is going to produce, but I guess we'll see. And then the final color, this color is uh it's the actual color on the screen out. So, it's I think this was meant to be used in conjunction with some other effect in GDO, but uh I mean, I guess I could ask AI to hey, could you do this in Ray Lip instead?
But uh we'll just uh we'll just see what this is going to do. So let me go over to draw here and see. Uh one thing that I will do is move this creation of the render texture out from each frame and put it in a thing instead. So let's go to I guess Where are we doing this? Actually, we're doing it here.
Um, I'm just I'm going to do this. I'm I'm making a strct called render buffer. And in here we'll have two render textures.
So we'll have render texture A and render texture B.
And I will have guess we'll put an init function here.
Uh and actually oops the 12 you remember the 12hour triangle.
Yeah, my beer is uh is unfortunately uh empty now. So try configure and reream. You can show both channel one go. Uh maybe I don't know I mean I I am seeing like I am seeing both chats but you're not seeing both chats.
So render text a is equal to try really load render texture uh width and height actually. Yes. Yes it is. And then you are same thing.
And what we need here is the screen size.
And no, that's it, I think. And that width is an i32 in from float screen size x.
Okay, there we go.
And then setup is actually not creating this. We're creating uh we're getting let's actually do this.
Render buffer is import render buffer buffer.
So now we can say render buffer. If let's try a render buffer in it string size and we add that as a single time and now we can have now we can access both of them.
Cool.
Uh okay.
So now in draw we will get render buffer A.
Uh actually render buffer is texture B.
This is texture A.
And this is texture B.
Uh Oh, dot texture. Right.
Okay, cool. Um, it's kind of slow actually. Yeah, it goes down to 30 fps.
Okay.
Is it like Okay. What if we did the CRT twice?
Kind of hard to tell, but I think it's like 60 FPS now.
I was thinking if the action of drawing twice and doing things twice if that slowed FPS down or maybe it's the god race thing itself that Yeah. Interesting. Which we change the shader. This drastically drops FPS on me.
30 FPS. So, what if we only do what if we do not do this, but we only draw texture A instead?
Okay, 60 fps. I can see it. And then we change to gold race.
Interesting. Why is this so slow?
It's almost like it's locked at 30 now.
H.
Yeah, I'm going to disable CRT for now.
I will check. Do you travel?
Not that much. Why do you ask?
Wait, God race. Oh, wait. There's a whole bunch of errors.
Maybe that's why things are not working.
I should have looked at this first.
Okay. OpenGL does not allow CG style semantics. Okay. So, there's some issues with the code that I got from uh uh good or uh uh AI here. So, let's look at this 18.
Okay. Hint range does not allow CG style semantics. unexpected thing expected uh blah blah blah. Okay, so I guess this is not working here.
Ray color source color like yeah I don't actually know what this is doing. I think maybe Godo has its own kind of language here.
So I'm Yeah. Yeah. Yeah.
So it's like I guess it's like auto connecting the source color here. here is like you know you can only set it in uh some range. What I'm going to do is I'm going to make a macro here. I'm going to find you.
I'm going to delete you and then delete until equal and insert a space. We're going to go over here, do this, paste that in.
Uh, go back to this.
Okay.
And then there was some stuff missing maybe.
Okay.
Oh, undefined variable Frank text chord, right? It's text cord, not text cord.
And then it was also undefined variable time.
H. So time is something we need to pass in, I believe. I'm not sure if Ray li does that automatically. I'm going to check this.
Ray li shader time.
Okay. So we can p we can pass it in cuz it does but because rail does pass in a bunch of stuff like automatically. So uh but essentially yeah we have to create a location which essentially is just going to be uh it's going to be something here. So, it's going to be like uniform float time.
And I guess if we don't put in time, it's just going to be zero.
And so instead of saying time here, we do time like this. Okay. So now we get Oh, hey.
Yeah. So this but this only works. Okay.
So, this is kind of the idea, I guess.
Uh, but it only works, it's like an overlay. It's supposed to be kind of blending into the background. Who's your favorite programmer? I don't have one favorite programmer.
It's me.
I don't know. Um, yeah, that was actually kind of cool effect. Uh but uh it also did not do what I wanted it kind of to do.
So are we doing anything with the original colors here? I don't think so. Right.
So, we can do that.
And then I'm not sure how to blend here.
Like, I don't know how to do that.
What if we just uh do this?
How's that going to look? Oh my god.
Whoa.
Why do I get like a I get like a weird like echo effect or follow kind of thing happening here.
Okay. One thing that I want to do is I wanna How do we make this into kind of like an overlay like a blend effect?
Now, I mean, I guess we could just ask AI actually.
So, where's that thing?
Uh, okay. So now uh how do I implement this shader in rail?
Um wait. So now I've Oh my god, I hate it when that happens.
I've implemented the shader in Ray Lib. However, I'm having trouble with blending the rays onto the screen onto the I mean game graphics.
How can we do this in the shader code if we have access to the original screen color of the current coordinate the blending code in your fragment app the blending Okay.
Additive of screen blending formulas.
Since you already access to the screen, you perform the math blending right before assigning file code. Here's how you do it.
Okay.
So, yeah, we have original plus final ray additive branding. BL blending blending uh can blow out to pure white screen blending software cinematic never blows out past pure white formula 1 - 1 - target time 1 - source H.
So you're kind of inverting I guess the target and the source and then minus or tsing them and then inverting that. Okay, let's try this. I mean we could try both I guess cool.
So original color is just going to be uh that's just as color and did we have final ray?
Was it called final ray?
Now it's called ray color.
And we'll try this one first.
And oh final ray is okay.
W is it w three?
Wait, where's ray color?
Oh, it's up here. Okay.
Like four ray final is ray color times ray intensity.
And then blended color is interesting that it changed the it now it's really the convention changed.
However, we're in zig so we can choose our convention to be this instead.
Okay.
interesting because the alpha of the ray does not translate here.
And here we actually put in 0.8 as a default alpha. So, I'm not sure what that I'm pretty sure the alpha just discarded here cuz this is a ve 3 and this is a ve 3 and this is a ve 4. But if you want the target to be vec 3 and you do this operation, I'm pretty sure it just throws away the alpha, I think. Okay, cuz it's not like it knows it's a the fourth thing in the vector is a color is the alpha. So it automatically does things here. But yeah, anyway, um, so yeah, so that's now the final color. And let's see how that looks now.
Interesting. I mean, what if we drew Let's just draw a bunch of lines. I guess I can actually Let me just draw like a background here. Hello, Subara.
What's up? Welcome back. Long time no see. Yeah, how are you doing? I'm also using Rail to make an engine. Nice with C++. Sorry, no egg. Oh, man. That's no good, man. But anyways, I hope the progress is good for your project. Yeah, just I'm just I'm just doing a bunch of random stuff now. I'm taking a little bit of a break.
Someone got bit by a snake. Well, oh man.
That Yeah, that Yeah, that is um Ouch.
Um I'm going to create a new image. It's going to be like uh Hello, Phil. What's up? What's up?
Uh, I'm just going to make it like um 300 by 300 maybe.
And it's going to be I don't know, man.
Why is the mode set to grayscale?
Actually, can you do like a gradient?
Uh, okay. It doesn't have to be super good here. I'm just doing that.
Oh, interesting.
Let's keep it like that.
Well, Oops.
Okay, there we go.
Okay, I just want something that will show up.
So this one is okay. Uh right. And then we copy over that as face shader.
Yeah. To sources.
Wait, I don't have that.
Okay, let's just do BG PNG.
Oh, uh, right where I'm in the wrong folder here.
Uh, BG into templates source resources.
There we go.
Cool. And let's go over to our demo.
Let's actually go to assets and we'll add a background texture.
There we go.
And now we can use that. So we can draw that somewhere here.
I guess we'll draw it first here. Draw background.
Oops.
So we get the texture is assets textures load and the key is uh background.
So there we go. Now we get this or we don't do anything. We don't get it. So now we have the texture and now we can draw it. So we can do draw texture I guess. V texture position. I'm just going to do 0 0 tint white.
There we go.
Okay. So there's our little texture.
Uh, and I don't really see the gold rays doing anything.
Maybe I picked it too bright. No, because we have undefined variables. Oh, right.
Uh, original color does not exist. This is color. Final color does not exist actually.
Final color like this.
Was that it?
See if we got some errors here. Yeah.
Uh cast implic from veford to ve 3 70. Okay. So, this wasn't actually this didn't actually work. I'm actually going to use I'm going to do vec 4. Is vec 4?
I believe you can do this here with an overload.
No, that doesn't work. No, wait.
Uh, no. It's just going to be color times no plus uh ray final except maybe the al no the alpha won't be plus but okay I guess it's kind of weird the alpha of the ray. How do we blend that with the alpha of the original color?
So, I guess this makes sense. We do this instead.
Okay, there we go. Wow. There we go. We got some uh god rays happening here. This is the additive version. Of course, we can change other things as well.
Um and then now let's try the screen blending version. I believe here we also have to say RGB here.
Okay. So this one is a little bit softer.
Uh still extremely bright in the center here.
I'm just going to refill my uh water. I'll be right back.
Okay.
So, now I mean I I probably want to change this around a little bit, but but before we do that, I want to try and see if we enable the um uh the what is it? the uh the CRT shader.
So we'll do that.
U R C of T U R texture B.
Yeah.
So now we should like combine kind of both shaders here. So first we have the uh rail the ray god ray shader being applied and after that we have the uh CRT shader being applied. So there we go. We have two different shaders going on at the same time.
Uh yeah. So I mean that's the basics there. And now we have to basically uh I guess I mean what we could do is change this to look better. Also the CRT is also pretty like we get these what are these called mosars.
I'm not sure what they're called these patterns here, but we're getting some uh weird things going on here. So, I'm just gonna actually disable CRT for now.
Uh and change it to god race back and go back to a there. So, now we're back to this here. Cool.
And then Okay. So, what I want to do is I want to see if we can uh change this up here a little bit. So the gold rays I mean essentially it does kind of go down like this and then it's like a band here a band of noise that limits. So I think the limitation here is like based on a cone up here. But then down here is also or and the kind of noise that the pearly noise or whatever noise function is doing here.
Oh man.
Well, I think what we can do maybe we can um remove the mask uh the cone mask and have it like do all the way but lower the pearling lower the noise magnitude a little bit so you get like less overall but we spread it out over the whole screen.
So, let's see if we can do that. I'm not sure where the cone is uh is applied.
Maybe it's this one here.
Spread 0.5.
Okay. What if we change you to two? What happens then?
Okay. This is kind of more like what I want.
Uh, I don't know. Maybe there shouldn't be a mask. Like, what if we just not use the mask at all? Okay, now it's more like how I was thinking, except the noise is kind of it's like very magnetized here.
or it has a lot of magnitude. I want to basically decrease that.
Um, so I mean, yeah, we could just decrease the intensity of the rays.
Interesting that there's like Yeah, there's two rays the densities.
Does that mean there there's two rays?
I'm not sure what that means. Is this even used? Yeah, it's used over here. Okay. Position one, position two.
Oh, I see. So, these are like two different noises happening.
Hybrid noise.
There's a whole bunch of stuff happening in here. Uh, okay.
What if we introduce?
So we got fall of edge fade, right?
Let's do like 0.02 maybe.
Not sure or let's do zero.
Okay, that broke it.
Smooth step 0 to zero UV1.
Okay. What if we don't do this?
Then we don't care, right? Why do we even have this uh fall off? I'm not sure what that is.
Oh, so this might actually be the thing that I'm looking for.
Cut off and fall off. Okay, so fall off and cut off is like determining the intensities of all the rays. So there we go. Now we got like something that is more what I was thinking about.
Oops.
Now, the thing about the god race though is that they don't really look like this in real life because they kind of look like they all come from the same place or they ex like they look like they come from the sun, of course. Uh well I mean if you would look I guess if you would look without a perspective this would actually be how it looks if the sun is like up to the left here.
But if you if you were looking uh with a perspective projection you would actually see the god rays like come at different angles.
But I guess this is uh this is fine.
Cool. Okay. So there we go. We got a little uh shader demo going on here. Are we creating Super Mario?
No. But this but okay, I'll show another thing that I did with this template project. I did a preset. So I implemented like basic controls for both like top down and platformer and some settings as well like dra gravity, air drag and stuff. So, I can if I want to make a platformer, I can go in here and change the preset to platformer.
And now we're a platformer. So, now we have gravity.
Uh, I can jump.
I have coyote time.
If I can uh actually use it properly.
See uh I have input buffer to jump. Yeah.
So, I implemented all the basic like platformer stuff here. And then if I change this back to top down, now we're in top down mode or twin stick shooter mode or whatever. So, now I can, you know, float around on on the screen here.
Um, yeah.
Cool, cool, cool, cool.
Hm.
Okay. Another thing that I want to try is essentially having like a shader for one object. Maybe see how that works.
So, what we could do is like attach a shader to a one entity perhaps.
So let's do that. So let's see if we let's say we go to draw and now we have like draw renderables for example and we will draw a renderable but we also want to get a shader.
try get a shader, which I'm actually going to I'm just going to do this here.
Okay. So, if we have a shader attached to our entity, we are going to use it.
So um if we have a shader actually we can just do this. If this we get a shader and we can do really begin shader mode shader.
Uh actually you know what you know what I want to do instead? I want to get actually I want to attach a shader key and then the game is going to like begin shader mode with this shader key instead. Yeah. So we don't have to copy the whole thing and and now we can also load it and everything properly here.
And here we end the shader mode. If we had the thing okay so technically now we have support for shadering uh any object right now.
So, uh, what I'm going to do is I'm going to, well, first we need to create a shader, I guess. So, first, let's go to assets.
Need to add another shader.
And I'm going to do like soal cuz I'm going to copy the one from Ray Lib.
So, we have soal, which I'm guessing, do we need Okay, I'll go to the I'll go to Ray Lib and see what we need for this uh rail GitHub examples, uh shaders, resources, shaders, Um, what was that? So, so there's only a fragment shader. Interesting because it's like how does it paint like outside of the actual model. Maybe it doesn't actually do that. But I'm going to copy this.
Will you play games any day? I don't know if people want to see me play games.
I played a little uh animal. Well, what?
Okay, code guy. What game do you want me to play?
Oops.
Uh, no. There we go.
So, there's the thing. And we don't really need Well, resolution is actually something we do want to set, I think.
Oh, wait. Is this a full screen shader?
Hang on.
You know what? Let's just try. Let's just try. So, this might be a full screen shader.
play soul games like Saro Ghost of Tsutsyama.
You know what the thing is about the Souls games? I'm I'm actually not I'm not that great at the Souls games. I've tried Elder Ring.
I have Elder Ring. I think I have maybe Seo or maybe the other one. I'm not sure.
I just don't have the patience for those games. That's the thing.
And uh apparently I don't have like the reaction times either.
Like I played Elden Ring and I came to I basically I I think I killed like one boss. I uh I killed the I killed something at least something that was like in the beginning of like a well it was like a a bridge I think.
I'm not even sure if that was a boss or just a major enemy or something. Uh, but then I made it to some castle and I started to kind of go into that castle.
It's like a large castle of some kind and uh like in the beginning area and then I came into some other like everything went great until Oh yeah, I also tried to like out directly outside of the castle there was like a camp which I tried to defeat. I I could defeat like every enemy no problem except for the last enemy that was like some kind of lancer type enemy that I just I tried over and over and over again killing all the enemies over and over and over again and then I just gave up.
So, it's like I don't know. It for me it's not fun. It's fun when I win, but it's not fun when I try it over and over and over again. I have to do it over like everything over once again and die each time. And yeah, it's I I have I have limited patience, limited time for that. And then there was another enemy like in the castle that was like in one of the rooms. It seemed to be optional, but I was like, "Hey, I'm going to defeat this guy cuz I know it can be done."
But I I just Yeah, I couldn't.
That guy was too fast. It was like um a night in a dark room waiting for you.
Uh, it didn't work on my laptop. Mine's potato laptop. He played Seo.
Yeah, it challenges ego. Yeah, I guess man. I wanted to beat I wanted to be like good at the game, but yeah, I didn't have the patience to like continue until it's done.
Okay. Um anyway, I don't know how they do it here.
Oh, they're like looking at texture stuff. I guess we'll just try and uh do this here.
So, let's cuz what I'm thinking for this is essentially you could since this is meant to be used in like a larger like the whole screen like a full screen shader. Maybe what we could do is we could take the original shape that we're drawing, render that to a texture, increase the size of that texture a little bit, and then um render that texture with the increased size with like this thing. So you would get the outlines as well maybe.
We'll see.
Uh, okay. So, we got the soul bowl thing.
Now, let's go back here.
Okay, that should be good.
Uh, let's go to set or demo, I guess.
Uh, I don't No, we don't need this right now. I'm going to go to where's the player and here I'm just going to add assets shader key uh soil. So the player should now be rendered with the soil shader and it is. However, we're not getting like edge detection since it's kind of like outside, but that's cool.
Okay.
I died more than 500 times to bosses in Seo. Oh man.
like yeah like I've played a little bit of like Dark Souls one and two.
Uh I didn't have them myself though, but uh the it's I don't know. There's something about those games that it's not really my cup of tea. It's like when you only focus on like the difficulty or like cuz the story is like I don't know. I'm not a huge story guy either. So, I'm I like game play, but it's but I don't know. It it has to be fun as well without having to be super super patient for me personally. Like I don't I don't say that it's a bad game. of course it's a really really good game uh or the games the series but um yeah it's not for me unfortunately like I just don't have I just feel stressed because I don't have the time to sink into it like first it's fun and I like I love exploring so I love the open world aspect of Elden Ring and stuff as well, but then fun gets replaced with frustration and stress and like like then it's not fun anymore.
And it doesn't it it also feels like I'm not improving as well. Like like I can sit and play I can sit and try and try and try and try again and the the the bad thing is like it feels like I'm not improving. That's the thing. There's like a such a small uh layer where you do like one small mistake and you're effed, you know, which is yeah, it's challenging and of course when you defeat the boss, of course, it's going to feel amazing and stuff, but like it I don't know. I just give up.
Um, so in essence for me creating a game is sort of easier because you know I you can't really fail in a sense like as long as you keep working on something you're going to get like you're going to do progress.
But it it didn't feel like that in in Elder Ring for me.
Uh, okay. I mean, probably if I if I kept going, I could probably beat it at some point, but I I just don't have patience for that.
Okay.
Um Okay.
The thing about the soil, let let's look at the soil effect because I want to try this as well.
The soil.
Uh, so how large are these outlines?
Not sure.
resolution XY.
What if we What if we change you to like 32 by 32? I'm not sure how large the player is.
What if we change to 4x4?
Okay.
Nothing seems to uh change there. What I'm thinking is like since this is just drawing this part and the outline is like outside, right? So if I draw if I draw this thing onto a render texture that is like this size and then draw with a shader that texture onto the screen. So, I'm going to go to renderables and I'm going to make a new one called like I don't know shader sprite shader.
Please try de level devil kind of game with twist make one please.
What is a level devil? Is that what could you explain that? I've never heard that term.
Level devil.
Uh actually what I'm going to do no you can't actually have a renderable in here because then that would be like an infinite size strct.
Try once it's a web game. Super famous.
You cannot beat in one go unless you're ultra pro max player.
Okay.
Uh okay. We'll take a little break. I'll I'm uh I guess I'll try this. I'll I'll try it like for a couple of minutes.
Level Devil.
It's a troll game.
I knew it. It it it s it you know you can hear it on the on the name.
Just making sure we're not going in some weird ass thing. Okay.
Is this it?
It will be fun. Great.
How do you play?
Why is this changing?
Press space.
You know, I've seen I've seen like a a thing about this. There's something gonna come up here. Yeah, there we go. I hate these kind of games.
It's like trial and error. I really, really hate these games.
I understand it's like content or something. Yeah, there we go. I failed.
I mean, I will say the one thing that is kind of nice is like the anticipation of something that's going to happen, right?
Okay.
Oh my god. Okay.
Yeah.
is playing with your uh the previous experience you had.
Whoa.
Are you going to move? Yeah.
Okay, I see two ways down. One that doesn't lead to death and another that does. Is this a double trick though? Why is there an open space to the left?
Oh man, I try I was trying to to jump but okay.
I still do the sameish error. Okay, there we go.
Super diffic.
Yeah, the thing. Yeah, I don't know, man. I just hate these kinds of games.
Okay, that was super easy, though.
Okay. Uh Okay. A couple of more levels.
Is it going to come again?
Okay.
Oh, that was too quick for me.
Okay.
What?
What? Thank you for being a platform for me.
Now, this is more like Super Mario. That that that kind of gameplay I like.
What's gonna happen? What's gonna Okay.
Sometimes it it's also fun maybe sometimes to I mean I guess you know if you played uh what's it the Super Mario uh Maker? There's a bunch of troll levels in Super Mario Maker.
I was guessing there was like an invisible fall there.
That was a trick.
Like in Super Mario uh Maker, there's like a whole genre of troll levels and you can kind of Oh.
Uh try to anticipate where the trolls like where where the tricks and traps are.
There's a there's a few of these games coming out every now and then. Okay. Is everything everyone going to be like this?
Well, you don't have to get them, though.
Oh, it's timed perfectly somehow.
Okay. Okay. A couple more levels, then I'll continue.
Okay, this is the last level. No. Okay, not the not that. Okay, there we go.
That was the last level because that's the last level that you saw there.
Okay. Well, as I said, I hate that kind of game because it's like a trial and error and I don't know it. Yeah. But uh but yeah, I I understand how it gets views and stuff.
Like Triander is not always bad, but this is like a purely almost like a pure Triander game. I don't know. It I I don't really like that.
Uh but it's fun to watch. It's it's uh it's fun to watch when people are like Yeah.
getting uh uh what the hell am I doing here? Okay.
So, okay, we can't have a renderable. We could have a pointer to render all.
Uh, I guess we'll just have a I guess we could have a sprite.
and then shader which is uh assets shader key.
All right.
And what we also need is like a render texture that we will draw onto.
I'm not sure how good this is going to be, but uh essentially yeah, it's just going to be like really render texture.
I guess it doesn't have to be 2D. Is that the same thing or is I don't know.
Yeah, it's the same thing. Okay.
I think maybe their ego gets hurt when they're rage baited. Uh, so people watch them. I think it's more like you just get frustrated because you're you're trying to you're trying to complete the level and you maybe sometimes you get frustrated yourself because you do the same mistake twice. I did that a few times. Uh, I don't know.
Okay, so we got a render texture. We have a shader key and a sprite. Okay. So then let's do so draw will um so we will draw onto now this is the thing uh because right now it's like What if so does the sh So if could I get the previous render texture from rail? Get texture.
What shape drawing?
What the hell is this?
Cuz uh what I'm thinking of if I say for example begin texture mode then I won't know the pre like if we already had a texture mode. I'm pretty sure we're kind of overwriting that now.
Cold guy. I mean, why do you care?
Just uh just leave them there.
I don't know. You have more than me then, I think.
Uh, I mean, I guess we could we could store the current texture mode, I guess, in in game. Use game begin texture mode instead and have that as a kind of like a stack of textures being rendered to.
How could we do this otherwise? This Service dead noise.
All right, you do what you want to do.
Uh I'm going to look this up first. Ray li texture mode stack sprite stacking.
No, that's not what the hell's this blend mode.
Oh, cool.
Uh, no.
However, there are examples in RayB on how to render.
Wait, ray examples, shaders.
Okay. shapes, textures, model shader.
Okay. But how do I?
No.
Um.
Oh, open jail 1.1 does not support sh.
What?
So what is version 100 then?
Okay. Anyway, so we have a grayscale shader, watermill diffuse, watermill object.
So you just draw directly. Where's the shader?
Where's the shader used?
What?
Oh, okay. Model materials.
10 years of webdev then you got bored of webdev right I mean not I'm not bored like 100% like it's still a very useful skill to have to be able to like build things you know it's very popular it's very it's a very good skill to if you want to find a job um and I'm not s I'm not like I I'm well I'm kind of bored more what I'm bored with is like working for some other, you know, for some group of people.
I don't know. I I I I want to work for myself or I mean I I don't know maybe I haven't found like a a work place where I feel like hey I'm feel like this is you know I'm making like a difference or something like that. I don't know.
I'm just tired of working. I I just want to I've tasted the freedom of kind of working for myself a little bit and I want to go get back to that.
Try for meta.
Meta like Facebook.
You want to be free from Matrix?
Uh I don't want to put it like that.
But sort of I guess.
Okay. So here they're using like the 3D the stuff here where you have like a materials.
So this is like specifically for 3D, right?
And this one is wait.
Yeah, this is like the gray the gray. Uh why can't I move? Oh, I'm like moving with the mouse scroll wheel.
Okay.
Uh, so that was not really what I was thinking about.
Pallet switch texture rendering texture outline. Oh, actually this is kind of exactly I mean this is kind of adjacent to what I'm thinking here.
Change scroll. Scroll to change the outline.
Interesting. Interesting how it happens over here where you have a thin if the outline is thicker than the thing it's trying to draw.
It's sort of like drawing a bunch of sh I guess a bunch of shadows. It's like four different shadows. It's drawing in different positions and then it's just changing the positions of those shadows or something.
Why not do like PewDiePie as a gamer, coder, artist, allrounder guy, same as you?
I think it's more Yeah, I don't know.
That's so easy to say though. Hey, why not just do like this? Uh I mean, why not just do like, you know, Bill Gates or uh Elon Musk or something?
There is Russian guy who had only 1k subs. He got laid off from Okay, we posted a video. Video went viral. [ __ ] Yeah. I mean, good for them.
I'm out here. I'm just, you know, I'm okay. So, I'm I'm kind of trying to do two things at once almost. like I'm trying to grow my channel and also what I'm trying to do is build games that I can sell. So that that's th those two things that I'm doing.
learning about making games and I'm building trying to build games that I can then sell and then um and also grow but in the same time I'm streaming everything and like trying to grow my channel like that. So that's what I'm trying to do. You're not posting shorts or videos. You should have reached 1k but yeah but the thing is like I didn't really have time for that like to make videos. It takes so long like to stream. It's just the time that I stream. That's the only time I put in to the streams. That's the only time I have to put in and that's super easy. So that's why it's like to get to make shorts and videos, I have to put in a lot of effort.
Uh which is cool. I mean, yeah, I think videos gives you more uh gives way more uh like uh stuff like views and stuff than live streams.
I mean, even just a simple video takes a long time. like you have to edit, you have to like cut a bunch of stuff, you have to sometimes put stuff in there, you know, it's it's not it's not easy just because it's uh you know, if you look at some of the YouTube videos that people are making, you don't realize like how much effort they're actually making like doing putting down to actually make those videos. And the the thing is like I just didn't have the time to do that. That's the thing. I was working uh my day job. I have a family.
So, it's like there's no time uh basically to do that.
If I want to also work on games at the same time as well. So like Yeah, I'm not married, but I have a family. We've been through this code guy.
In my country, you can have a family without being married cuz marriage is like it's not as important as in other countries.
Yes. Living. Yes.
That's why it takes up time from me.
Other it wouldn't have taken up time if I had a a dead family.
Okay. Anyway, let's look at this here.
Uh, so here's the texture. Here's the outline. Now, are you just going to do a full screen of this?
I guess what we could do, maybe we could have a reusable shader that we could or reusable texture that we could draw to maybe uh actually this Yeah, this this draws like everything here.
Okay.
Cuz what I wanted really was to have like multiple and then maybe like another full screen.
So this outline is not like for every like it's only for some objects and not for all objects.
What's this?
Background is painted and animated on the shader. Okay.
Texture way fog rendering hot reloading simple mask mesh instancing multi- sample to do.
What is this? Multis sample 2D multi- sample 2D.
So, we're making a red texture the size of the screen and then a blue texture.
And then we have a shader that and we put in another texture.
Where are we doing that?
Wait. Oh, so we're doing it here. Why do we why do we do need to do it after we do begin shader mode? No, because we're setting shader values here as well cuz what I'm thinking like this shouldn't change, right? So, we need to do this every time. Maybe like removes yeah overrides it or something.
Additional textures are enabled for all draw calls in the batch but end shader mode forces batch drawing and resets active textures. Okay, there we go. This way other textures can be activated consequent drawings. Uh the downside of this approach is set shader value must be called inside the loop to be set again after every end shader won't reset. Okay, that's why it's in here.
And also it will be for every other draw thing in here. But that's fine. We're drawing text red using default uh sampler 2D texture two texture zero but an additional texture enable text blue sample 2D texture one. Right? So we're basically passing in two textures.
The first texture is automatically passed from ray and then we manually pass in the other texture here.
And then we draw the red texture.
Okay. And then the shader takes care of like mixing those two. Okay. But that's not a huge mystery now, I guess.
Spotlight rendering hybrid deferred shadow map texture tiling.
Okay. Well, whatever.
So basically we can have like per you know we can have per uh entity shaders.
It's just that I'm going to delete this by the way. It's just that um the shaders can't really draw like the area that you're drawing does not is not larger than it's not it's like as the same size as the um the entity like the the actual sprite.
right there.
Unless we Well, okay. Unless we increase the size of the texture from the start when we load it in, we draw.
Then it's kind of like we're expanding the texture out a little bit.
Maybe or or what we also could do is let's say we draw We draw the thing.
Let's say we have a soable shader that's in like full screen mode and then we pass in to the shader. We pass in like a filter that filters out No, I don't know.
Like we can maybe mask it somehow.
I don't know. Anyway, we have uh kind of like done uh sort of basic shader things now. Um, I'm going to try do this. I'm going to try and add the soable shader to this animated sign thing as well.
And it becomes dark here.
Yeah, that makes sense.
Okay, what do we want to do? Do you want to do something else this stream here or do we want to Am I too tired and uh need to go to eat?
How How much How far have we gone?
Uh six uh sorry two okay almost 3 hours.
What else? What do we want to do?
Do we want to do something with shaders?
cuz I was thinking another thing that I do want to have is the spatial grid system. Uh I want to have like dynamic objects uh checking for collisions. So basically optimizing collision detection using the spatial grid system or we could also implement a sweeping algorithm actually.
Yeah.
Um, okay. So, here's my game jam project that I did for Rail 6. uh game jam and um it's working fine on desktop, but when it's running on uh web, it's it's like it starts to lag after you get to a certain point. It probably does as well when you're playing on uh desktop and now I'm just playing my game here.
Uh so what I'm thinking is that I want to do some uh performance testing. So let's go to the game and I'll sit dev here. I have to don't I have to remember to change that later.
And we're going to set you to like debug.
Okay. Okay, so we have a special debug mode and we need debug update function and a debug draw function.
Okay.
Oops.
And draw debug is essentially just draw game play.
Uh update debug also going to be yes performance test. Exactly.
Uh it's also going to be like update game play and that's basically it. Um the only difference is the setup essentially actually. So uh where so actually it's this that we need to change uh setup entities create player. Yes. Uh create systems.
Now I think if Yeah. If we have well I guess we can still add the system but the update update game play actually yeah then we don't want to do this. So, we're going to do like if uh screen state is equal to debug, but if it's not equal to debug, then we do this.
Okay, so that was essentially just uh disable all the the ships.
Do you have Evo Fox Ronin keyboard? Now I have dash keyboard. Yeah. So now there's no ships. There's also no way to actually complete the level because the system that handles that is disabled. So this is going to keep on forever. But what I want to do is I want to what I want to do what I want to do is I want to create a bunch of things.
So create entities where is that set of entities.
So we're going to say like if we are in debug mode uh create entities debug.
So, uh, I'm going to fill the screen essentially with a bunch of stuff.
So, we'll have columns is going to be maybe 40 and rows 80 perhaps.
And we're going to calculate.
We're going to get fx is a float x float from int x and f_sub_y.
And then we're going to get the position. It's going to be get absolute position of fx and f_sub_y.
However, these are going to be divided by columns and height of rows uh divided by columns divided by rows.
Okay.
And now we should have a position that is good to use. So now we can create our short.
Uh oh wait, we already have this function create debug shorts.
Oh, okay.
So, I'm just gonna create the debug shorts calling this function. This basically does the same thing. Uh, but I was over here. Okay. And this was the last thing that I need to do. Just create a thing, add a short and stuff.
Okay.
So, we should be getting a whole bunch of shorts now.
Interesting. I think at some point the mouse position was at top left and so you got a little distortion up there. It's kind of like a black hole.
Oh yeah, I was using this to be able to see uh also what's going on on the right side of the screen. I was using this to be able to see if the glimmer effect or the shimmer effect was working.
H. It almost looks like you're dragging a fabric around.
Okay. Well, anyway, this is to be able to uh test a little bit the FPS here.
So, there we go. Now, the thing about what's happening here is that every short you're seeing on the screen, every green piece you're seeing on the screen is being checked against the player for collision, right? That's what's happening. Now, what we want to do is we want to optimize that. That's called a brute force algorithm.
uh sort of like it's because we're checking out every possibility instead of trying to optimize to reduce the amount of checks that we want to do.
So what I want to implement is the sweeping algorithm I think for this but the sweeping algorithm is like the sweeping algorithm is good for uh checking all bodies against all other bodies I think.
Um, now you could also do like a chord tree where everything is uh being entered into a chord tree and then when you check things against other things, you only have to check some of the things because you kind of partition everything into separates rectang rectangles.
That's what you do with a quad tree. you kind of separate into regions and then you know if like if I'm in this region I can check against everything that is in this region and I don't have to check other regions because I know I'm not in those regions but the sweeping alg let me see if I can remember this correctly here um yeah so essentially we can use the sweeping algorithm But I have to modify it to be only for one body, I think.
But it's very good for checking everything at once, like getting collision detections for everything at once.
Uh, but what to do there? Or we could also do that great spatial thing.
I got a laptop stand for $4. Now my laptop is cool. A laptop stand. What is that?
Let's go over to where this is happening. So, this is happening in the grid.
No, no, no, no. It's happening in short.
No player system pick up shorts. Right. So here we're iterating through all the shards and we're getting the distance to the player square distance square. So we're not doing a square root here. I wonder how much the thing will go down if we use the square root if at all cuz sometimes you get like hardware powered square roots I think or something like that anyway.
Okay. So then we're just checking okay distance we okay so we don't do like a an abb check we just we actually just get the the distance. So it's a little bit more efficient, I guess, maybe than checking for AB collisions.
So they're kind of like circles. This makes like the player like a circle in this sense.
And all the different shorts also.
So how Okay. So, how do we improve this?
The problem is iterating through all shards at once and checking against the player distance.
So what you could do is I mean we could divide like if we did like a very basic quad tree we could divide the checking in in a quarter by making four regions.
uh that divides the screen in four regions and then inserts every entity into those four regions. And then when we do a distance check, we only need to do the check for the ones in the region that we're concerned about.
And then you can do even more if you do this recursively.
So that's that would be a quad tree.
I'm just thinking what the best approach here would be or the not the best but the but a reasonable approach with the tools that I have.
Uh let me actually go here and search for sweeping algorithm one object.
Okay, sure. That's Let's see.
Um yeah, the thing where sweeping algorithm is really good for like if you like it like eliminate it quickly eliminates a bunch of candidates essentially.
Okay. You know what? I'm too tired actually to do this right now.
Uh I' I've been a bit a little little bit sick actually. So, uh I'm going to cut off here. I've been going for long enough. So anyway, but yeah, that was uh really cool. We got the we got like uh shaders uh going and uh yeah, that's really cool. Um now I can actually figure out if I want to employ that in my game and make the graphics a look a little bit cooler.
Um, yeah, there's so much work to do though in the in the Metroid vania, but I'm I'm not sure if I'm going to make uh like a game in between here before I get back to that one.
Um, but we'll see. I've been working on the template project a lot and um yeah, that that could be used to, you know, start up new projects pretty more quickly than I could before.
But um but yeah, I'll see you tomorrow and have a nice day. In the meantime, thank you much for watching.
Related Videos
6:13
Computer Science
TOP 15 Data compression Interview Questions and Answers 2019 Part-2 | Data compression | Wisdom jobs
wisdomjobs
281 views•2019-06-28
27:51
Computer Science
CTS 158: 802.11w Management Frame Protection
ClearToSend
4K views•2019-02-04
23:21
Computer Science
NDSS 2019 Send Hardest Problems My Way: Probabilistic Path Prioritization for Hybrid Fuzzing
NDSSSymposium
496 views•2019-04-02
12:48
Computer Science
How realistic is Cities: Skylines?
CityBeautiful
159K views•2019-02-14
46:39
Computer Science
GUIs & TUIs: Choosing a User Interface for Your Python Project | Real Python Podcast
realpython
2K views•2025-04-04
25:15
Computer Science
The OSI Model - Explained by Example
hnasr
225K views•2019-05-12
1:10:47
Computer Science
Cloud Computing - Introduction
elithecomputerguy
98K views•2019-10-07
2:24
Computer Science
From Traveler's Dilemma to Dynamic Routing | Demystifying Networking
IITBombayJuly
5K views•2019-08-04
Trending
5:07
Philosophy
One Must Imagine Sisyphus Happy
vlogbrothers
61K views•2026-07-21
25:15
Business
Future of Taylor Farms
maighstirtarot5385
11K views•2026-07-21
12:30
Business
The Downfall of OnePlus!
techwiser
65K views•2026-07-21
23:12
Engineering
My Friend Locked Up The Engine On His K-Swapped Bug...
boostedboiz
128K views•2026-07-21