Thanks!
My new website is finally live at GMshaders.com! Please check there for future shader tutorials as I retire this website.
Thanks!
0 Comments
Hey!
It's been a while since I've updated this blog, but here's a short update. I recently created a newsletter that you should subscribe to! I'll be sending out updates on my future tutorials via the newsletter! Thanks for patience! I think it will be worth while! You can find sneak peeks on my social media: Hello everyone! It's been too since I posted here and I think it's time for an update. I've been busy working on many Game Maker projects (I sometimes post about them on Twitter) which is why I stopped posting new tutorials. In 2019, I would like to change that and reboot my tutorial series. I've learned a lot in these past 5 years which will help me bring better content to you all. plans and ideasThese are my tentative feature plans for the new series:
I don't know for certain that I'll get to all of this, but if I'm able, then I intend to. Hey, I'm back! I haven't been very active on here for months because I was trying to make a new shader tutorial site. I still might on occasion, post a tutorial here (just simple ones for now), but I'm planning on making a more organized format on the new site. Anyway, by request I decided to make a tutorial about a 2D wind effect. Ripple effectTo make our wind, we need a simple ripple effect. We will create a vec2 and call it "Coord". This will be used for the wind distortion. We will set it to "v_vTexcoord". Now you need to change the texture2D coordinates to our Coord vector. It should look like this:
vec2 Coord = v_vTexcoord; gl_FragColor = v_vColour * texture2D( gm_BaseTexture, Coord); This is a pass-through shader. If you run the shader applied to a sprite, it shouldn't change anything. To make a ripple we will use a cosine wave. We could do it like this: vec2 Coord = v_vTexcoord + vec2(cos(v_vTexcoord.y*30.0)/30.0,0); If you run this you will see this (before and after): In the last tutorial I explained how to create 3D lights using vertex attributes. Today, I'll explain 3D distortion. The main difference is that 3D distortion is done in the vertex shader unlike our last 2 shaders. That means you can move each vertex with the vertex shader. Flattening shapesWe will first try making a shader that flattens the 3d shapes. To do this we will simply set the z position to 0 for all vertices while leaving x and y positions unchanged. Make sure to comment out the normal attribute and use the default pass through fragment shader.
An important variable is "object_space_pos". It is the variable we can use for setting the position. We will use the x and y components but will use 0 instead of z. Here is the result: In the last tutorial we made a basic flood shader. Today we'll make a basic 3D lighting shader. Lighting shader usually use normals. As you may remember from the last tutorial, normals are the vectors which are perpendicular to each triangle. I will explain them in better detail. NormalsNormal vector information can be received using the "in_Normal" attribute. This is only processed for each vertex (because it's in the vertex shader). So we'll create a varying vector called "v_vNormal" and we'll add it to both shaders (fragment and vertex). This way the normal can processed per pixel rather than per vertex. To test this shader we'll set the color to the normals so we can see what the normals look like. This is the code I used:
gl_FragColor = vec4(v_vNormal*0.5+0.5,1.0); Because normals are in the range of -1 and 1 we'll multiply it be 0.5 and add 0.5 to put it in the range of 0 to 1 (since we can't see negative colors). Here is what it looks like (downloads at the bottom): It's been I while. I've finally made time to continue the tutorial series, and I would like to make an introduction to explain how shaders handle 3D in GameMaker. This is not a 3D tutorial for the GameMaker Language, but only for the shader aspect of it. To do this it is important that you read the Vertex Shader Tutorial. getting 3D informationIn order to make a shader for 3D you will most likely need to no 3d information such as position and normals. In the Vertex Shader Tutorial I explained in briefly how to get the position with the "in_Position" vector (only in the vertex shader). In order to add this to the fragment shader you'll need a varying vec3 for position. Create one and call it "v_vPosition". Make sure it's in the fragment shader also.
To get the position in 3D we will simply use the Z component along with the X and Y components. You can also get the normals (which is essentially a vector perpendicular to the currently processed triangle) of the triangles as they are set (d3d_draw functions have the normals already). When you apply the shader to a 3D object then you can retrieve the normal which is useful for lighting. In the last tutorial we talked about converting ShaderToy shaders to GameMaker: Studio. Today we'll be converting GLSL Sandbox shaders. Today we'll convert this shader (the code can also be found below). The main differences are caused by undeclared variables. I will list the fixes to the most common ones. Shaders on glslsandbox.comShaders on GLSL Sandbox have a few differences from shaders in GameMaker. Like on ShaderToy there are no textures most of the time. However GLSL Sandbox only supports frame buffers. If a shader uses theses, there will be a uniform sampler2D with the other uniforms. It can be named anything, but it is most often called "backbuffer" or "bb". Frame buffers must be made in GameMaker outside of the shader. These can be done with surfaces in GameMaker, but because these are very rarely used I will not get in too much detail.
Shaders on websites like Shadertoy.com or GLSLsandbox.com work a little different than shaders in GameMaker: Studio. Today I'll be talking about Shadertoy.com. For this example, we will port my "Pixel Noise" shader to GameMaker (code also below), so use that for the code. Note that because the shaders are designed for Shadertoy.com, they won't always be fully optimized for GameMaker. It can often be best to just design a shader yourself. This tutorial may not cover all the differences, but it should help you convert most shaders from Shadertoy.com. The shaders on Shadertoy.com don't need textures and most of them don't even use textures (my shader does not use any textures either). If a shader does use textures it will show the textures at the bottom right (at the iChannel0-iChannel3). In GameMaker: Studio, shaders must be applied to something, so most of the shaders designed for GameMaker, are applied to sprites, backgrounds, or in 3D they can be applied to planes. That means shaders in GameMaker must have at least one texture (although that texture can be a blank rectangle). Another difference is Shadertoy shaders recently started using fragColor for gl_FragColor. To remove errors simply change those back to gl_FragColor. Also "void mainImage( out vec4 fragColor, in vec2 fragCoord )" should be replaced with this "void main( void)". Shaders on shadertoy.comI have gotten many shader requests for effects that shaders wouldn't be good at making. Today I would like to explain the uses of shaders so that you know when to use them and when to look in to other resources like particles. SHader usesShaders are for changing the color of pixels. It isn't used for anything more. Shaders can use textures or math to mix colors or blend them, but shaders can't easily be used for clickable or interactive objects in a scene. In general shaders are for recoloring or distorting. If you need textured shapes that can have gravity or motion (like rain for example), then you should use particles.
|
TutorialsNew tutorial at GMshaders.com! CategoriesArchives
October 2021
|