1. Hello Guest! It's with a heavy heart that we must announce the removal of the Legacy GMC Archive. If you wish to save anything from it, now's the time! Please see this topic for more information.
    Dismiss Notice

Shaders How do I make a Sinewave shader?

Discussion in 'Programming' started by Locki, Oct 17, 2019.

  1. Locki

    Locki Member

    Joined:
    Oct 17, 2019
    Posts:
    2
    I want to create a wavy background (in the same lines of the battle backgrounds from earthbound).
    but there is no tutorials i could find on it, not even on youtube. (reference point the franky battle from earthbound)
     
  2. NightFrost

    NightFrost Member

    Joined:
    Jun 24, 2016
    Posts:
    2,004
    The background itself seems to be moving too, so all of it might be generated inside the shader. But important question is, how much do you know about shaders? That affects how much needs to be explained, or if you should be pointed to basic shader tutorials to get you familiar with GLSL language used in shaders. But I'll talk about the math that goes into the wave effect for now.

    The effect is horizontal, so the sine wave should be made dependent of the pixel y-position, which you'd read from gl_FragCoord.y. You'd multiply this with some frequency value to set how quickly the left-right waviness runs, and take sin() of that. Next you'd multiply it by some aplitude value to set how far left or right the wave goes. This all would create a static sine wave, as y-coordinate would (of course) start from zero every step, so you'd bring a timer variable into the shader as a uniform, and increment it in linear fashion on GMS side every step (for example by +1). So the final sine value would be fashioned like
    Code:
    float wave = sin((gl_FragCoord.y + time) * frequency) * amplitude
    
    which can then be applied to creating whatever effect you need. It might be necessary to mod the value before taking sin(), I don't remember whether shader trig functions can handle degrees beyond 0-360.
     
    Locki likes this.
  3. Locki

    Locki Member

    Joined:
    Oct 17, 2019
    Posts:
    2

    Thanks for helping but I'm fairly new to GLSL and I'm pretty sure I've messed it up somewhere. The little research I've done on it is that it requires a very basic passthrough shader (which is just automatically made when you make a shader).
    I don't really know how to declare variables that well, all I know is void (comes with nothing), int(value is an integer), varying, uniform, and attribute. They go with either a vertex/vertices (shortened to vec2,3,4), float and that's about it.

    So here's what I've put, please tell me how I've messed up.
    Code:
    //
    // Simple passthrough fragment shader
    //
    varying vec2 v_vTexcoord;
    varying vec4 v_vColour;
    
    void main()
    {
        gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
      
       #define freq = 0.1; //frequency
       #define amp = 5.0; //amplitude
       #define time = 1.0;
      
        float wave = sin((gl_FragCoord.y + time) * freq) * amp;
    }
    
    (yet again sorry if you're winsing severly at my poor approximation that is that code up there; I am practically a complete noob).

    That's wrong, sin uses radiants (or 3.14... aka pi) not degrees.
     
    Last edited: Oct 17, 2019
  4. NightFrost

    NightFrost Member

    Joined:
    Jun 24, 2016
    Posts:
    2,004
    If you're new to shaders, I'd suggest you look through some of TheReverend's shader tutorials to get an idea how they work and what they are capable of. At the very least you'll get a much better understanding how to write them.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice