Shaders - Pygame & ModernGL Tutorial

Shaders aren't natively supported in Pygame, but with ModernGL and some tricks, we can add OpenGL shaders using GLSL to any Pygame game!
Related Documentation:
pyga.me/docs/r...
moderngl.readt...
Code Written in Video:
dafluffypotato...
Patreon:
/ dafluffypotato
Hue Flowing:
dafluffypotato...
My Discord:
/ discord
ModernGL Discord:
/ discord
Potato Tier Patrons:
Agent Effe
Chris Birster
Eivind Teig
Fatcake
RyDawgE
Sam Cork
GaryTMSFruitcake
Kirat=1
Dale Topley
#python #pygame #gamedev

[@DaFluffyPotato]

This should be my last of the shader videos. ModernGL made it simple enough to make a single tutorial on it and I got comfortable enough with the subject to talk about it in depth.

[@costelinha1867]

Yes, now all that remains is to wait for whatever crazy new subject arrives next. (Seriously, first you make that v-tuber Avatar in Pygame, then you make some open gl stuff, and you make, procedural generation. I expect pretty much anything now lol.)

[@smosa605]

@@costelinha1867 at this point, hes going to make a 3d game in pygame after saying pygame cant handle 3d lol

[@costelinha1867]

@@smosa605 TECHNICALLY, he already did made a 3d stuff in pygame, but it was very simple. But I actually agree, having meddled with ModernGL and Pygame, doing actual 3d stuff in Pygame IS A FUCKING NIGHTMARE!

[@smosa605]

@@costelinha1867 hey no swearing and pygame is 🔥

[@costelinha1867]

@@smosa605 Why no swearing? Also yeah pygame is fire, but making 3d stuff in it???? not so much, ngl.

[@MegaFuze]

dude thank you so much for making this! I learnt a bit of glsl through shadertoy a few months back but hesitated on setting it up in pygame due to how intimidating the whole setup process looks (ngl it still kinda is but this tutorial made it a bit easier to understand).

[@Alister222222]

The problem I had trying to make apps in opengl libraries like Pyglet was that it was so hard to assemble screen elements, such as gui elements like buttons and icons built on the fly and so on, compared to Pygame. That I could have the best of both worlds is scary good. Thanks for this.

[@brent9129]

I've watched (tried to) dozens of tutorials on moderngl and this is by far the best. Great video, thank you so much!

[@owencmyk]

I didn't know this was possible, thank you so much

[@PaulHindt]

A small optimization: you probably don't want to be allocating and freeing a texture object every frame. All you need to do is allocate the texture once up front and copy the surface data into the texture each frame. The texture object itself can live on while your main loop is running. The only time you'd want to release and re-create it is if the display resolution changed, or if you wanted to change other parameters of the texture, such as the mipmapping or filtering.

[@DaFluffyPotato]

Initially I had a part discussing that but removed it. Doing it this way for the tutorial puts some emphasis on memory management and creating just one texture per frame (for the post-processing usecase) doesn't have a perceivable difference in performance.

[@PaulHindt]

You would still be managing memory but not allocating one texture per frame, rather at the startup and shutdown of the program. For the sake of this example it doesn't really matter, it's true. Any performance impact from allocating a texture every frame is imperceptible here. But in a real game project, potentially with many textures being juggled, those allocations can start to add up and impact frame rate.

[@PaulHindt]

@@DaFluffyPotato Keep up the good work. You're doing some very impressive stuff. I love your art style!

[@noTmeDev]

Really cool, great work.

[@achrafparkour382]

Thank you very much for this is exacltly what i needed before developping UI system in my game engine

[@costelinha1867]

Fluffy: OpenGL is not as simple as "Hey take a texture, put it on the screen, run shaders". Me: Oh yeah, so true... if only it was that simple lol.... if only.... and then there's Vulkan which apparently is EVEN MORE complicated than OpenGL, thankfully you don't have to use Vulkan to do shader stuff in Pygame. (Hell, I don't even know if Pygame has any support for Vulkan lol.)

[@herikgiammaria9961]

U are my Hero!!! I love your Videos, they help me a Lot!!!

[@ivannasha5556]

Was perfect for someone who just wants to get going without reinventing the wheel first!

[@jsparger]

This helped me a lot. I was having trouble understanding how to use the vertex_array and how to define a quad. I have a totally unrelated application but these basics were hard to understand from the examples. Maybe you should contribute some examples to moderngl!

[@Magicalbat]

Hey, this video was great, and I learned a lot more about pygame and the moderngl library. Although, if I am not mistaken, you can just have one texture that you update every frame instead of creating a new one. Is there a reason I am unaware of not to do this? Anyways, thank you for making this tutorial! def make_texture(surf): tex = ctx.texture(surf.get_size(), 4) tex.filter = (moderngl.NEAREST, moderngl.NEAREST) tex.swizzle = 'BGRA' return tex t = 0 frame_tex = make_texture(display) frame_tex.use(0) program['tex'] = 0 while True: display.fill((0, 0, 0)) display.blit(img, pygame.mouse.get_pos()) t += 1 for event in pygame.event.get(): if event.type == pygame.QUIT: frame_tex.release() pygame.quit() sys.exit() frame_tex.write(display.get_view('1')) program['time'] = t render_object.render(mode=moderngl.TRIANGLE_STRIP) pygame.display.flip() clock.tick(60)

[@DaFluffyPotato]

Yep, in practical settings that's better. I actually had a part about that which ended up getting cut. The overhead of creating/freeing a texture isn't that large compared to the conversion that has to happen either way. Doing it the way I did it in the tutorial covers the fact that textures need to be freed as well, which is important.

[@ilguardiano8718]

pls make videos, i don't care if they are tutorials, devlogs, or anything else. Just make videos, your quality is insane. Thanks you very much

[@Fullrusher]

Yeah this wasn't very beginner friendly lol but glad to see your getting into deeper topics , also what's your opinion on chat gpt ruining development in different areas of I t ?

[@DaFluffyPotato]

Purple backgrounds in my Pygame tutorials mean it's an advanced topic. I don't see how AI "ruins" IT. I've been using gpt-2 based code autocompletion for years.

[@Fullrusher]

@@DaFluffyPotato ok I didn't know about the significance of the background colors as I'm a fairly new sub (only a year I think , definitely wasn't here from the start lol) also there's some speculation as to current chat gpt being a threat to multiple industries in as lil as 2 to 3 years a.i in general is causing a major uproar for several industries even as early as now ... Only ask cause of your back ground with other areas of coding and your experience in the I t industry as a whole

[@costelinha1867]

I mean, I had dabbled in ModernGL before, but this is pretty neat.

[@mysticalpiano9535]

Great Video! I had a quick question, how would you add a shader that makes everything glow, basically like a bloom shader?

[@DaFluffyPotato]

There are tutorials for bloom shaders. That's not Pygame sprcific

[@sudharsandas5779]

Ran your code, all I got was a black screen :(

[@enesbaytekin]

an idea to debug something, create a debug file and write into that file instead of standard output

[@aureleaumont-vesnier2353]

I was wondering, is it possible to apply shaders to a surface, but not an other ? I'll explain myself. The issue I see is that currently, the whole display_surface is transformed into texture and have shaders applied on it. But if i try to do a game with shaders, in order to add shadows or vignetting, I don't want to apply it on the GUI. So can we create two separated textures, apply shaders on only one, and the make a fusion in order to display them in the screen ? I assume that it's possible, but idk if it's possible without really huge knowledge of opengl, and without sacrifing to much performances.

[@DaFluffyPotato]

Send 2 surfaces into the shader and merge them together with the UI on top. That's what I did in Hue Flowing. You can also render to a normal framebuffer instead of the display then pull a new texture from there. Converting back to a surface is also possible.

[@retroboi128thegamedev]

@@DaFluffyPotato How would I convert back to a surface?

[@azaias]

@@retroboi128thegamedev This works: def texture_to_surface(texture): texture_data = texture.read() surface = pygame.image.fromstring(texture_data, texture.size, 'RGBA', True) surface.set_colorkey((0, 0, 0)) return surface

[@azaias]

Since my previous reply I've found a couple other ways to do this. My favorite way is to just do: texture.read_into(surface.get_buffer()) You can also do this with a framebuffer: framebuffer.read_into(surface.get_buffer(), components=4) Another way is to create a surface that shares data with a separate buffer, then you just have to worry about reading into the buffer: tex_size = texture.size surface_buffer = bytearray(tex_size[0] * tex_size[1] * 4) texture.read_into(surface_buffer) rendering_surface = pygame.image.frombuffer(surface_buffer, tex_size, 'RGBA')

[@zeperoxx]

just wondering, since we're using a surface which we then give to opengl, does the surface functions (like surface.blit) still consume the CPU?

[@DaFluffyPotato]

Anything done while it's a surface uses the CPU. When it's a texture, it's on the GPU.

[@victornoagbodji]

Is it possible to reuse a texture at each render pass, instead of allocating and freeing one each time? 🤔

[@DaFluffyPotato]

Yes.

[@Kraaven2026]

hmmmm, i would like to ask, what are your thoughts about Pyglet? another graphics framework for python. There is another framework: arcade, based on pyglet for game dev specifically, but yea pyglet, your thoughts?

[@DaFluffyPotato]

afaik, pyglet isn't being maintained. I'd probably use ModernGL and Pygame to fill that usecase nowadays anyways.

[@Kraaven2026]

@@DaFluffyPotato huh, i did not know that. Btw, i heard that pygame had some synchronization issues, hence why some ppl preferred pyglet, i assume that problem has been fixed, so yea. Anyways, if its not your cup of tea, then no problem really. Whatever you have been doing to till now seems to be working and it has definitely shown results. Just some guy with minimal experience making a comment lol

[@rrplaygames2883]

Hi, I am working on a small project which is virtual try on for rings in python. I am able to detect hand index finger using opencv and also have 3D object model for ring. Next I want to overlay it on detected finger but have no idea how to proceed. Can you please guide me or point to some resources/libraries in python that can be useful. Any help is much appreciated. Thanks

[@DaFluffyPotato]

Might be easier to do with MediaPipe instead of OpenCV. You may be able to segment the image with it and render 2 layers.

[@rrplaygames2883]

@@DaFluffyPotato You're right. I am actually using Mediapipe's hand landmarks to detect finger and have no issues with it. However I am not sure about how I can overlay my 3d ring model on detected finger in real time. I am looking into PyOpenGL right now but not sure how to use it. Can you please elaborate more on what you mean by render 2 layers. Thanks

[@FrogTesseract]

Thanks so much for this

[@koss165]

Hi! Can you help me to find out why source code for game "Hue Flowing" is not working properly. I only see black screen. It's interesting to know that it worked earlier. Maybe python or pygame updates broke something?

[@curlydev2]

Hello, How to separate the HUD from the actual game, I tried to use a "normal" shader on HUD display, and then apply shaders to the shader_display, and the HUD display, and then showing them, but only the shader_display appears, how to fix that ?

[@smosa605]

hes back!!!!

[@costelinha1867]

The Return of the King.

[@Extner4]

This is such a godsend. thanks!

[@_manana]

Hello, how do I apply two shaders at once?

[@DaFluffyPotato]

For many shaders it's better if you can merge them into one. If you can't or shouldn't (like gaussian blurs), you render to a framebuffer and render again using the framebuffer's texture as an input.

[@twisted7258]

might be a dumb and really obvious question but what ide are you using

[@tuhkiscgibin6627]

I think that he's using vscode in this

[@costelinha1867]

He's using VSCode.

[@nixiidev]

when vaegrant comes out, will you port it to mac eventually? i know how.

[@DaFluffyPotato]

Dunno. Macs have OS specific Pygame bugs and PyInstaller bugs.

[@nixiidev]

@@DaFluffyPotato You can package modules into an application, so that fixes one thing

[@himanshujangid9493]

@@DaFluffyPotato Py2app is a simple library that takes your files and compiled them into a .app which macs can run.

[@curlydev2]

Hey, how to apply shaders on only few object on the screen ?

[@DaFluffyPotato]

That's not very efficient to do if you're passing Pygame stuff to OpenGL unless you just mask what you need (I do this to separate the HUD from the game for example). If masking won't work, you should probably just be working with OpenGL.

[@curlydev2]

@@DaFluffyPotato I'm making an rpg, I have a tile system and everything is working well, I want to apply shaders on certain tiles only, how to do it ?

[@themathforyou]

What if we wanted to have a shader effect just on the player, like a flash? Or the ground?

[@DaFluffyPotato]

Most of the stuff you would do at that scale can be done without shaders. If not, you can still just pass a mask into the main shader and do some special stuff for that part.

[@themathforyou]

@@DaFluffyPotato how would I add a mask? I meant like how you added shadows to your character

[@thatfennek8296]

Hey starting with pygame rn and cant imagen how you are doing your maps. Is there a way to not place everything itself with cordinates?

[@onemangamer587]

I know this comment is already 3 months old, but I have an answer that might help. As of writing this comment, in his latest video titled "Pygame Platformer Tutorial - Full Course", there's a section where he builds a custom level editor. If you're making a game using Pygame, you can use what he teaches in that video and customise it for your own projects. I hope this helps! Link to the video: kzbin.info/www/bejne/aJikc4yDarJjrdk

[@minhn-kx1rg]

Great video! Have you ever heard of arcade? It runs almost exactly like pygame!

[@jonasnoblet6200]

Good content thank you

[@sc0820]

CoOl !！!!

[@pigeon4422]

having no syntax highlighting for glsl hurts

[@mr.potato8314]

OMG, ITS YOU, BROTHER! I KNEW POTATOS ARE INVOLVED IN CODING!

[@PizzerGames]

THANK YOU SO MUCH

[@erlking9910]

I've done research and can't find an answer yet. When I move the texture off screen it repeats the texture is there even a way to stop the repeating of the texture on the screen?

[@themathforyou]

Where did you learn how to code in shaders? I have been looking everywhere

[@de.tected]

I get an error when I try to load an image pygame.error: Failed loading libwebp-7.dll: The specified module could not be found.

[@DaFluffyPotato]

Are you loading a PNG? If so, your Pygame install might be messed up.

[@simonmaracine4721]

Don't create a brand new OpenGL texture every frame for rendering. Create only one at the beginning and update its contents every frame. ModernGL should supply such an API.

[@developspinrolespinroledev4046]

nice tutorial, although I don't use python and pygame lol

[@filip2865]

10:10

[@Shitai-4ever]

hey there i just have question regarding pygame pls reply: How can i run my game made using pygame on website?? (and tge pybag module i tried but it showed black screen) pls i need help kindly guide . THankyou

[@bbdd5609]

Hi