• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Graphics GM Shaders

Xor

Xor

@XorDev
GM Version: GMS 2+
Target Platform: ALL
Download: N/A
Links: GMshaders.com

Summary:
A collection of shader resources designed specifically for GameMaker users.

Tutorial:
When I first began learning shaders, I found it to be quite difficult to find appropriate resources for my needs. I found some shader tutorials worked while others didn't and no clue as to why.
This prompted me to begin writing shader tutorials specifically for GameMaker, giving a complete shader overview. I came up with a 4-part overview series and a glossary for all functions and variables:

#1 Shaders in GameMaker
A quick tutorial to introduce you to shaders, texture pages, and how to apply your first shader.

#2 Variables and Data Types
Variables in shaders are a little more complicated than in GML. This tutorial covers all the different types of variables you can use and how to use them.
Learn about vectors, sizzling, arrays, and structs! By this point, you no longer need to wonder what "attribute" or "varying" means!

#3 Functions and Operations
Let's make sure you're comfortable with operators from "+" and "-", to "&&" and "^^". I put all of the shader functions in one neat list so that you can experiment with them at your own rate!
We also should go over if statements and for loops, but don't worry, they're not that different (just make sure to get the syntax right)!

#4 Tips and Tricks
At this point, you already have a pretty solid overview of shaders (that wasn't too bad)! Now we can go over some of the fun tricks I've learned over many years to make the process a bit easier!
Learn about optimization, some useful math functions, and how to read error messages!

Shader Glossary
Anytime you wanna know what something does, try looking it up here! I've written a complete list of all the shader functions and the built-in variables you might encounter!
Hope this helps!


This will give you the best, most solid introduction to shaders that I can provide! I have plenty more tutorials on the way so keep an eye out!
 
Last edited:
gnysek

gnysek

Member
Xor said:
I have plenty more tutorials on the way
Click to expand...
I'm waiting for all of them.

I must say that shaders and using matrices are two topics on which I'm not an expert, and it's even harder to learn them if I'm not a native English speaker, as lot of words are scientific specific, and it's hard to understand them when I wasn't attending to English school, while I'm understanding most of those terms in my native language (for example it's still hard to remember for me which is even and which is odd, without word "uneven" it wouldn't be possible to directly link it with matching words in my language :p).

So such complex description is really, really helpful. Simpler = better.
 
  • Like
Reactions: Xor
gnysek

gnysek

Member
Xor said:
What is your native language?
Click to expand...
It's Polish, but I think that current version is easy enough to understand, as there's really lot of explanation to every element :) I really appreciate that level of details!
 
  • Love
Reactions: Xor
rui.r6o

rui.r6o

Member
I'm still working my way through the tutorials but these are wonderful!!! High quality content and a must for anyone wanting to learn about shaders in GameMaker! Thank you Xor :D

I do have a question regarding precision: If I always decide to specify the precision (following the guidelines you mention for what they are more useful), will that only impact memory/bandwidth usage in the GPU (due to potentially constraining the data types it uses) or did you find that it might also affect the shader's performance (for either better or worse)?
 
  • Love
Reactions: Xor
Xor

Xor

@XorDev
rui.r6o said:
I'm still working my way through the tutorials but these are wonderful!!! High quality content and a must for anyone wanting to learn about shaders in GameMaker! Thank you Xor :D

I do have a question regarding precision: If I always decide to specify the precision (following the guidelines you mention for what they are more useful), will that only impact memory/bandwidth usage in the GPU (due to potentially constraining the data types it uses) or did you find that it might also affect the shader's performance (for either better or worse)?
Click to expand...
Thanks! Glad to hear!

As for the precision, I've heard it can make a big difference on mobile in terms of performance, but also in quality. I have not confirmed this yet so I didn't put it in there but do know using lower precision can cause issues.
 
Xor

Xor

@XorDev
Slow Fingers said:
Did you merge the old site stuff on the new site? I'm still regularly referring to it, it's really gud.
Click to expand...
I did not. I have plans to work back over to those effects, but they need to be rewritten from scratch. I've learned so much since then about better coding practices and can no longer endorse my old stuff!
 
Slow Fingers

Slow Fingers

Member
Xor said:
I did not. I have plans to work back over to those effects, but they need to be rewritten from scratch. I've learned so much since then about better coding practices and can no longer endorse my old stuff!
Click to expand...
Looks like your web design skills went up a notch as well, the new thing is much more pleasing to the eye, by a long shot!
Keep at it, this stuff is all golden.
 
  • Love
Reactions: Xor
Xor

Xor

@XorDev
Slow Fingers said:
Looks like your web design skills went up a notch as well, the new thing is much more pleasing to the eye, by a long shot!
Keep at it, this stuff is all golden.
Click to expand...
I have to give TonyStr credit for doing most of the web dev work. He's helped me learn a lot along the way and I would definitely recommend him.
Thanks for the kind words :)
 
Xor

Xor

@XorDev
Update! I added better mobile support (thanks to TonyStr)

I noticed a significant portion of users were visiting on mobile devices so it needed a couple of improvements.
 
rui.r6o

rui.r6o

Member
Thanks to your tutorials I've managed to create a very simplistic shader that filters out a colour!

GML: 
//
// Passthrough vertex shader.
//
attribute highp   vec3 in_Position;
attribute lowp    vec4 in_Colour;
attribute mediump vec2 in_TextureCoord;

varying mediump vec2 v_vTexcoord;
varying lowp    vec4 v_vColour;

void main() {
  gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * vec4(in_Position, 1.0);
  v_vColour   = in_Colour;
  v_vTexcoord = in_TextureCoord;
}
GML: 
//
// Filters out a given colour from the texture (effectively making it
// act as if it was transparent).
//
varying mediump vec2 v_vTexcoord;
varying lowp    vec4 v_vColour;

uniform lowp  vec4  u_uTransparentColour;
uniform highp float u_uEpsilon;

void main() {
  vec4 texture_colour = texture2D(gm_BaseTexture, v_vTexcoord);
  if (all(lessThan(abs(texture_colour - u_uTransparentColour), vec4(u_uEpsilon)))) {
    gl_FragColor = vec4(0.);
  } else {
    gl_FragColor = v_vColour * texture_colour;
  }
}
It probably isn't the best way of doing it, but at least I've managed to get it working easily by referring to your tutorials :)
 
Xor

Xor

@XorDev
Hey folks! Some small updates:

New Variables Docs!

I added a bunch of new variable documentation to the glossary.
You can now read about all the gm_* variables and the gl_* variables that are built-in. These can be used in any shader and are helpful to know.

Extra Info On Matrices

I've added more detail on matrices to my Functions and operations tutorial. Feel free to read up on it if you're curious!


Join the GMshaders Subreddit

I created the r/GMshaders subreddit, which can be used to share shader tutorials, tips, examples, or just show off cool shaders you're working on. Please join us!
Thanks :)
 
Xor

Xor

@XorDev
Cool. Here is some additional information (from Twitter).

Ideally looking for someone who I can work with for the next few dozen or so tutorials. I have the next several tutorials planned and can provide all the code, but I'd like help writing these in a beginner-friendly manner (so if you're new to the topics, perfect!) It'd also be helpful to have another pair of eyes to look over the code and examples. I want to make sure the coding practices are consistent and understandable. I will be making plenty of shader examples, so a second opinion would be great!

Send me an email (xor @ GMshaders.com) and we can talk about this further.
 
MFcoffee

MFcoffee

Member
Awesome stuff! Really well explained and informative. You definitely help make shaders feel way less intimidating to work with. Thanks!
 
  • Love
Reactions: Xor
Xor

Xor

@XorDev
Thank you!

GM Shaders Mini: Two Textures
1664590845345.png
A tale of two textures! This is a guide on how to sample two textures properly! You'll also learn everything you need about texture UVs along the way.

There have been some requests to make some beginner tutorials. I think this one is a little more approachable, but it also has something for intermediate coders!
 
Xor

Xor

@XorDev
I'll be sharing a newsletter special tonight about my story and future plans. This will be exclusive to the newsletter and I'll be deleting it after so if you want to read it, you have to be subscribed now! Thanks
 
rui.r6o

rui.r6o

Member
Hey @Xor , I have a simple question about shaders and I thought this thread would be the best place to ask it :)

I currently have a shader that requires the draw colour that is currently set in GameMaker. I was wondering if this is available as a built-in GM variable in the shader or if I need to continue supplying this information as a uniform to the shader.

Thanks! :D

EDIT: Forgot to mention I'm using a custom vertex format that only includes position and normal information
 
Last edited:
  • Like
Reactions: Xor
Xor

Xor

@XorDev
rui.r6o said:
Hey @Xor , I have a simple question about shaders and I thought this thread would be the best place to ask it :)

I currently have a shader that requires the draw colour that is currently set in GameMaker. I was wondering if this is available as a built-in GM variable in the shader or if I need to continue supplying this information as a uniform to the shader.

Thanks! :D

EDIT: Forgot to mention I'm using a custom vertex format that only includes position and normal information
Click to expand...
Nope, use a uniform. in_Colour will contain the draw_set_color/alpha values for things like draw_circle, image_blend, etc because the GM builds a vertex buffer using these colors. If you create your own vertex buffer GM will not add this data to your buffer or shader.
 
rui.r6o

rui.r6o

Member
It's me again! (let me know if you feel this doesn't really fit the purpose of this thread and I'll start creating threads of their own for these questions, I just feel that these can be helpful here since they aren't super specific questions about a particular shader)

I have a question about shaders and mismatched vertex formats. I am currently building a library for rendering splines which uses a shader with a custom vertex format for the different rendering modes of each spline. But I want to make a set of features conditional, so I created a macro on GameMaker that allows me to (at compile time) decide whether the vertex format includes per-vertex colour information or not.

The problem is that the shader won't work due to the missing verrtex colour information when the feature set is disabled on the GameMaker side, and I can't use that macro on the shader side to conditionally include the logic for the per-vertex colouring feature set. Which leaves me with two options that I can think of:
  1. Mirror the GameMaker macro with a shader-specific macro that then conditionally includes the per-vertex colour information. This means I still only ship one shader with the library but the users of the library need to then configure this feature in two separate places.
  2. Create two versions of the shader, one that takes the per-vertex colour information and one that doesn't. This means that the user only needs to configure the feature in one location, but the library now includes two shaders that are mostly the same.
TL;DR: Is there any way where we can use a GameMaker defined macro as a shader macro (#define)? This would be the cleanest solution to the above problem.
 
  • Like
Reactions: Xor
Xor

Xor

@XorDev
Hi again,

Unfortunately, no GM doesn't support GML-defined macros (it would make for a neat addition though). I would recommend either creating two copies of the shader or using an extension like Xpanda.
I wish there was a better solution, but that's what we're working with here.
 
B

Baikal

Member
Hello Xor
I have a problem with shader
I tried to implement shader from shadertoy. And it does work! But untill i move around. For example, i can move my view and the screen turns black
I noticed that the screen turns black when x or y coordinates of view gets to 1280 or 720 respectively
How do i solve this? Thanks for your help!
 
  • Like
Reactions: Xor
You must log in or register to reply here.
Top