Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Re: Problem with using a Shader from shadertoy.com [SOLVED]  (Read 4389 times)

0 Members and 1 Guest are viewing this topic.

Jove

  • Full Member
  • ***
  • Posts: 114
    • View Profile
    • http://www.jestofevekites.com/
I'm just getting more involved with shaders and SFML and really fell in love with this effect on shadertoy.com which is perfect for my explosions.

https://www.shadertoy.com/view/llj3Dz#

Now shader code is new to me but I took a stab at converting it. The effect runs alright, but the source texture is upside down, mirrored and only shows half the screen.

Really starting to see the power of shaders now and thought this would be a good intro to learning more. Any pointers on what I've done wrong would be great.

Here's the test image:




and the result from my testing code:




Here's the .cpp

#include <SFML/Graphics.hpp>

int main()
{
        sf::RenderWindow window                 (sf::VideoMode(1920, 1080), "SFML window");
        window.setVerticalSyncEnabled   (true);
        window.setKeyRepeatEnabled              (false);

        sf::Texture bgt;
        bgt.loadFromFile("testcard.jpg");
       
        sf::Sprite bgs(bgt);

        sf::Shader shader;
        shader.loadFromFile("shockwave.frag", sf::Shader::Type::Fragment);

        sf::RenderStates states;
        states.shader = &shader;

        sf::Clock clock;

        while (window.isOpen())
        {
                sf::Event event;

                while (window.pollEvent(event))
                {
                        if (event.type == sf::Event::Closed)
                                window.close();
                        if ((event.type == sf::Event::KeyPressed) && (event.key.code == sf::Keyboard::Escape))
                                window.close();
                }

                shader.setParameter("source",           sf::Shader::CurrentTexture);
        shader.setParameter("sourceSize",       sf::Vector2f(1920.f, 1080.f));
        shader.setParameter("time",                     clock.getElapsedTime().asSeconds());

                window          .clear  ();
                window          .draw   (bgs, states);
                window          .display();
        }

        return EXIT_SUCCESS;
}


...and my attempt to change the fragment shader from shadertoy format.

uniform sampler2D       source;
uniform vec2            sourceSize;
uniform float           time;


void main( void )
{
        //Sawtooth function to pulse from centre.
       
        float offset = (time- floor(time)) / time;
        float CurrentTime = (time)*(offset);
   
        vec3 WaveParams = vec3(10.0, 0.8, 0.1 );
   
        float ratio = sourceSize.y / sourceSize.x;
   
vec2 WaveCentre = vec2(0.5, 0.5);
        WaveCentre.y *= ratio;
   
        vec2 texCoord = gl_FragCoord.xy / sourceSize.xy;      
        texCoord.y *= ratio;
        float Dist = distance(texCoord, WaveCentre);
       
        vec4 Color = texture2D(source, texCoord);
   
        //Only distort the pixels within the parameter distance from the centre
        if (    (Dist <= ((CurrentTime) + (WaveParams.z))) &&
                (Dist >= ((CurrentTime) - (WaveParams.z))))
        {
        //The pixel offset distance based on the input parameters
        float Diff = (Dist - CurrentTime);
        float ScaleDiff = (1.0 - pow(abs(Diff * WaveParams.x), WaveParams.y));
        float DiffTime = (Diff  * ScaleDiff);
       
        //The direction of the distortion
        vec2 DiffTexCoord = normalize(texCoord - WaveCentre);        
       
        //Perform the distortion and reduce the effect over time
        texCoord += ((DiffTexCoord * DiffTime) / (CurrentTime * Dist * 40.0));
        Color = texture2D(source, texCoord);
       
        //Blow out the color and reduce the effect over time
        Color += (Color * ScaleDiff) / (CurrentTime * Dist * 40.0);
        }
   
        gl_FragColor = Color;
}
« Last Edit: July 11, 2015, 10:17:38 pm by Jove »
{much better code}

Hapax

  • Hero Member
  • *****
  • Posts: 3379
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Problem with using a Shader from shadertoy.com
« Reply #1 on: July 10, 2015, 02:15:13 pm »
SFML uses positive y for downwards whereas OpenGL uses positive y for upwards so that will be why it's upside-down.

What size is the source texture?
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Jove

  • Full Member
  • ***
  • Posts: 114
    • View Profile
    • http://www.jestofevekites.com/
Re: Problem with using a Shader from shadertoy.com
« Reply #2 on: July 10, 2015, 06:56:41 pm »
Texture size is 1920x1080 or whatever the screen resolution will be. I'll be passing it the scene RenderTexture.

*edit* Just noticed it's doing the same thing originally on ShaderToy so there's nothing really wrong with it, functionally.
« Last Edit: July 10, 2015, 07:05:32 pm by Jove »
{much better code}

Jesper Juhl

  • Hero Member
  • *****
  • Posts: 1405
    • View Profile
    • Email
Re: Problem with using a Shader from shadertoy.com
« Reply #3 on: July 10, 2015, 07:15:47 pm »
Regarding supported texture sizes by various graphics cards, the following may be helpful: http://feedback.wildfiregames.com/report/opengl/feature/GL_MAX_TEXTURE_SIZE

Jove

  • Full Member
  • ***
  • Posts: 114
    • View Profile
    • http://www.jestofevekites.com/
Re: Problem with using a Shader from shadertoy.com [SOLVED]
« Reply #4 on: July 11, 2015, 09:24:21 pm »
I came across this guy's solution that works and it has some additional flexibility.

http://kpulv.com/309/Dev_Log__Shader_Follow_Up/#
{much better code}

 

anything