Summary of this shader tutorial: "But...I'm not gonna go into a lot of details..."
@bwabbelКүн бұрын
Bro you just made shaders make sense to me! 🤯 "You're a wizard, Barney"
@BarneyCodesКүн бұрын
So glad to hear it! They're a lot of fun :)
@ProgrammingRainbow5 күн бұрын
You're traps are not traps. Your first 1 is spot on. If you know how to do a thing then do it. If you want to spend a year learning a game engine then you can reuse that knowledge. But if you made your own engine you can also reuse that too. Your knitting a wool sweater doesnt make sense. Your not raising the sheep or creating the yarn with an engine someone else has already knitted it for you. Your just sewing it together and then telling someone you knitted a sweater and you didnt. It also doesn't sound like you had imposter syndrome. As J blow says you had an accurate feeling of your own coding ability. This video sounds like your salty. If your trying to make your first commercial steam game no matter what you choose it will be very hard road. They were not traps its just hard.
@AlexEscalante7 күн бұрын
This is so very well explained!
@BarneyCodes6 күн бұрын
Thanks, I'm glad you found it useful!
@gridmatrix636411 күн бұрын
This was really great!! I only had to reserach "this", "PVector", "constrain". Feeling I got a better hang of this after watching this.movie :p
@William-nani11 күн бұрын
the clearest explanation ever <3 or maybe this is just easy idk.....
@BarneyCodes11 күн бұрын
Maybe a little bit of both :) It's certainly easy once you know a bit of shader programming, but without that knowledge shaders can be a real mystery!
@William-nani11 күн бұрын
@@BarneyCodes i am still wondering why nobody did this explanation before. Life saver!
@RaccoonEatingCacti15 күн бұрын
Thanks for this! I was doing this with Python in the slowest way possible and decided to try it with shaders to gain some speed. This was a good exercise to help figure out how it would work in a shader. This video really helped me wrap my head around the whole thing.
@BarneyCodes15 күн бұрын
That sounds awesome! Shaders are a great thing to add to your toolbelt, good on you for figuring it out!
@Mrchingchingdingding15 күн бұрын
The visual effect caused by the initial vertex shader isn't intelligible from the structure or content of the code as-is. You vaguely mention this is the way you do it for a rectangle, but can you help explain why it works, where the *2-1 comes from and how changing the values of these variables resulted in the screen changing.
@BarneyCodes15 күн бұрын
Sorry I glossed over it, I was focusing on the fragment shader in this video and just mentioned the vertex stuff so that you'd be aware it's there! The reason behind this maths is to do with converting the vertex positions between different "spaces". The initial vertex position passed on is in "model space" which is the vertex's position within the model which goes between 0 and 1. The final output into gl_Position is in "clip space" which goes between -1 and 1. The *2 - 1 maps the position from the 0-1 range of model space into the -1 to 1 range of clip space! If you're using transforms and a camera to view a scene, and want to view the geometry in its "proper" location, you instead have to convert from model space, into world space, then into the clip space, which is done using matrices that contain the transform and camera information, which is what I do later in the video to make the sphere show up :) Hopefully that answers your question! Let me know if you've got any follow up questions! I haven't gone into detail about the matrices here because this comment is getting quite long already and there'll be resources out there that can explain it a lot better than I can! (Learn OpenGL is a great, free resource if you want to read more about it!)
@KynesisCoding16 күн бұрын
Thanks for sharing ❤ Shaders are in my future 😮
@BarneyCodes15 күн бұрын
Glad you enjoyed it! I found shaders were basically a doorway into a whole new world of cool program stuff. Have fun!
@markrolandmakes19 күн бұрын
This is fantastic, thank you! I've been casually interested in shaders for a couple of years and this video was a great introduction. I'm excited to try this out!
@BarneyCodes17 күн бұрын
Glad you found it useful! They're incredibly useful, and this video only just scratches the surface, have fun!
@DanielOlawoye21 күн бұрын
i tried copying what you're doing but it always says that there is an error
@BarneyCodes21 күн бұрын
What error are you getting?
@SmellGrow22 күн бұрын
I don't know if this comment is going to be replied to. but if I can ask, where are you coding the glsl script. Because I tried downloading a IDE on VSC and it wasn't working as I intended it to
@BarneyCodes21 күн бұрын
I used the online p5js editor (linked in the description) for it, but I think you can get it working in VS Code if you install certain plugins, it's not something I've done though so I can't give you specific advice sorry!
@drendelous22 күн бұрын
too many things left unexplained
@mitchellrcohenАй бұрын
Swizzling is my new favorite word. Thanks for the video!!! Color coding the vectors helped! I come from unreal blueprints.
@BarneyCodes29 күн бұрын
Glad you found it useful, swizzling is a great word haha
@plerok231Ай бұрын
Very good Video thank you
@BarneyCodesАй бұрын
No worries, glad you enjoyed it!
@awkovАй бұрын
I have a great drill idea. I used to love playing Sonic Colors because of the Drill Wisp (look up gameplay for reference). It would be great to have a drill modifyier that when X amount of a certain material is drilled in a row (like a drill combo), it would give you an ultra efficient drilling mode for a few seconds, or it makes you drill faster for as long as you keep the combo. This would make drilling faster, but rewarding. It would also be great to have a high mobility drill. You sacrifice drilling area (by drilling a fine line) by being able to move quickly underground. This could open up to more gameplay focused on looking for free space underground, maybe running away from obstacles like flowing lava
@BarneyCodesАй бұрын
@@awkov I'll have to check out sonic colours, I love the idea of the material combo! Thanks for the suggestions!
@jlfreundАй бұрын
Exactly what I needed and beautifully demonstrated.
@BarneyCodesАй бұрын
Thanks so much! Glad it was helpful :)
@MrKiraBRАй бұрын
Awesome tutorial, thank you!
@BarneyCodesАй бұрын
Thanks, glad you found it useful!
@MosesreeАй бұрын
This is absolutely gorgeous. I wrote a relatively inefficient GOL app that runs off the cpu using Unity, stores its values in hashmaps etc. Despite some reasonably efficient code, I was still maxing out at 15 fps when I got to about 2 million cells on screen at a time. Since I wanted to run something at least 15 times that size, I figured I'd have to learn how to write shaders. It seemed too daunting and I put it on hold. Seeing this absolutely cemented that in my mind. Not only is it way more effective, its elegant and easy to implement- I find this very encouraging. Great job!
@BarneyCodesАй бұрын
Thanks so much! Your project sounds like a lot of fun, I hope this helps in some way. Feel free to ask any questions :)
@bboyhuskyАй бұрын
Just what I was looking for! Thanks
@BarneyCodesАй бұрын
No worries, glad you found it helpful!
@JordanManfreyАй бұрын
“I’m not gonna explain these matrices” this is every graphics programming tutorial ever because graphics programming revels in avoiding helpful abstractions for some weird reason
@BarneyCodesАй бұрын
For me personally, I wanted to keep this video mostly about the fragment shader, so the vertex shader, where those transformations are happening, is out of scope. I mentioned it so that people would be aware that it's there and can have a place to start from if they want to find out more!
@JordanManfreyАй бұрын
good video, however I still am kind of baffled that people in the past were apparently cool with just overloading an existing drawing term like “shading” to describe these sorts of data transforms…. That sort of layman-inscrutable or misleading stuff doesn’t really help anyone
@BarneyCodesАй бұрын
Thanks! I think originally shaders were intended to be for just that, adding lighting calculations to 3D scenes, thus shading the rendered image. Overtime though they became a lot more versatile and used for so many various things to the point that, like you say, "shading" really no longer fits what shaders are capable of doing!
@dion9781Ай бұрын
okay i literally have a project due midnight and i wanna ask if i can do this class drop with a function? i have a function that spawns this shape i made and i wanna do this with that shape
@BarneyCodesАй бұрын
You can! Instead of having an array of the drop objects, you can have a few arrays that store information, like position and velocity. They all need to be the same length, and that way you can get all the information for a drop by looking at your arrays in the same location (eg the first drops position would be positions[0] and it's velocity would be velocities[0], etc). That way you can have 1 function to update, which iterates over all the drop information, and another to draw which goes over all the positions and uses your function to draw the shape at the location of every drop! Hope that helps!
@wata19912 ай бұрын
born too late to be a cave man, born too early to explore space, born just in the right time to learn about cool shader stuff
@bigfin202 ай бұрын
it's insane just how much stuff inigo has done for shader community. You can't read about them for five minutes without running into a reference to him
@BarneyCodes2 ай бұрын
He's truly a gem, so grateful that he's shared so much of his knowledge with us!
@PollyWantsACrack3r2 ай бұрын
hi i wonder whay you use older verison of GLSL if im not miestaken now code is diffrent than that
@MeganWilliams-v8r2 ай бұрын
would love to see some more complex division detection with triangles and custom shapes
@felfar1972 ай бұрын
thank you soo much!!!!
@BarneyCodes2 ай бұрын
No worries!
@daarkon2 ай бұрын
Really cool Barney!
@BarneyCodes2 ай бұрын
Thanks mate! It's a bit of fun haha
@Gabriel-jr4kj2 ай бұрын
zoom out
@BarneyCodes2 ай бұрын
😂😂 Thank you for the reminder hahaha
@adamrushford2 ай бұрын
yes, don't save yourself 14% of millions of dollars... 4 mil = 560,000... hand that over to the greedy bastards at unity and unreal... actually no, give it to wicked engine..... actually no I made you a game engine everyone can use for free I am god thank thank *kowtow*
@adamrushford2 ай бұрын
the way you draw it better is with a grid system so you can skip empty grid patterns and instead of searching pixel by pixel you're grouping lots of pixels and scanning faster.... cellular automata/ sand simulations
@BarneyCodes2 ай бұрын
Not sure I understand sorry 😅 The looping I'm doing is through the image that stores the particle information (not the entire screen!), so I can get the location of each particle, and then I just colour in the pixel on the screen that corresponds to that particle's location :) I think the ultimate way to do the drawing better would be with either a geometry shader or vertex shader that can read the texture with the particle information, might be something I look into in the future!
@2001herne2 ай бұрын
Hey, it's the hellswarm! Good times
@DetectiveConan990v32 ай бұрын
watching this to hopefully understand how this stuff works for my graphics class
@BarneyCodes2 ай бұрын
Hope it's helpful! Let me know if you've got any questions :)
@mikecu22492 ай бұрын
Great Guide! Amazing video!
@BarneyCodes2 ай бұрын
Thanks so much, glad you found it useful! :)
@BetaMAAXX2 ай бұрын
I learn't so much from this video, Thank you Barney :)
@BarneyCodes2 ай бұрын
No worries at all, glad you found it useful!
@marcorademan84332 ай бұрын
Hey Barney, why not have the components do things that mimic their real life application? For example, the capacitor will execute twice, a MOSFET will multiply, a diode will act as a minimum (or maximum), an inductor also do some sort of boost. Some other components - fuse; JFET; BJT; varactor diode; IGBT; LDR; LED; relay; triode tube
@BarneyCodes2 ай бұрын
Probably a good idea 😅 I was loosely basing it off that, but not very accurately (ie capacitor doubles since it stores power, resistor halves because it reduces current, the lo/hi pass filter icons are somewhat based on diodes). I'm sure I'll tweak them in the future, but to start with I wanted to make them visually distinct from the other components which look like ICs Your list of components is very helpful :) I think some of those might make an appearance! Thanks so much for the comment!
@Yahya-8712 ай бұрын
can i make a minecraft shader with rhis tutorial?
@BarneyCodes2 ай бұрын
There'll be a bit more involved with getting Minecraft shaders set up I would imagine, but this should be a good starting point for the information you'll need! I'm planning on making some Minecraft shaders in the future though, which should be fun :)
@Cookieukw2 ай бұрын
The most incredible thing about this video is the guy's sincerity. He looks at the code and says "oh, wow. I don't know how I'm going to fix this"
@timur.shhhhh2 ай бұрын
First 34 minutes: I don't understand anything Last 49 seconds: I understand, but I don't know how to use it
@Veptis3 ай бұрын
Here is a question: how to sample seamless gradient noise on the surface of a sphere? Do we have 2 or 3 values for the location? I tried to come up with something but it's quite difficult. I intentionally didn't look at references and solutions - so maybe that helps to think creatively
@BarneyCodes3 ай бұрын
I've not actually tried to do this myself, but I believe there are methods of "unwrapping" the surface of a sphere into 2D coordinates. You can either map it to the full rectangle (like a how a map is a rectangular version of the surface of the earth), which will have some distortion to it, or you can probably do a more accurate version, that would have gaps, which might make it difficult to do seamlessly. If you've got a noise generation function you could probably do it seamlessly by using the 3D point on the surface to sample 3D noise and guarantee that it's seamless? Might be worth playing around with a few different solutions and seeing what they look like!
@cocolasticot90273 ай бұрын
Alright, here we are : Witchcraft 101
@braydonfisher92733 ай бұрын
You forget factorio, the most polished game since snake. Built on a custom engine for 10+ years to massive success
@BarneyCodes3 ай бұрын
I think factorio is basically the perfect example of NEEDING to make your own engine because it's doing something super unique (just like the example I gave in the video of Noita etc)
@MiguelRodriguez-gs3pi3 ай бұрын
this video is pure gold. Thank you so much
@BarneyCodes3 ай бұрын
No worries at all, glad you found it useful!
@brentgreeff11153 ай бұрын
Very cool - but bg music is major distraction.
@BarneyCodes3 ай бұрын
Thanks, yeah haha I've learnt my lesson about the music! Thanks for the feedback :)
@JStar4000YT3 ай бұрын
how do you make it stop being able to move if you click a mouse?
@BarneyCodes3 ай бұрын
In the update function on the player, you can check the mouseIsPressed variable. If it's true you can set the mvmt vector to 0 before it's added to the x and y position of the player!
@JUN-dl7pi3 ай бұрын
is there a way to make the ink slowly disappear when mouse release?
@johnwayne80593 ай бұрын
Sure, you just overlay a new rect with a color like 'rgba(255, 255, 255, 0.2)'! The opacity causes a slowly fading out! Enjoy and much fun!😉😁 EDIT: Of course fired by the mouse event 'mouseup', and this for some animation frame iterations...
@tiagomoraismorgado3 ай бұрын
cool. perlin noise
@ColinPaddock3 ай бұрын
One thing you can do to vary the flow pattern is to use a Perlin noise with one more dimension than your display(3d on a flat screen, 4d on a 3d space), and vary that value(z for the 2d case, t for 3d) over time. That should create a smooth change in the flow pattern…