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

Author Topic: Shaders make my Sprite disappear  (Read 2112 times)

0 Members and 1 Guest are viewing this topic.

Cyrana

  • Newbie
  • *
  • Posts: 21
    • View Profile
Shaders make my Sprite disappear
« on: November 19, 2016, 03:33:18 pm »
Hello forum!

I'm using the normal C++ SFML and tried to use the shader being presented here: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson5

Drawing the sprite without passing the shader renders my normal sprite. Once I add the shader, nothing is being drawn but the cleared coloured background.
Moreover, this applies to a variety of attempts to use other GLSL-shaders - nothing is drawn but the cleared background colour.

When copying a full C++-SFML-shader  example from another website, everything works.

The C++/SFML-code:
#include <SFML/Graphics.hpp>
#include <iostream>

int main()
{

        sf::RenderWindow window(sf::VideoMode(1280, 720), "SFML Sandbox");

        sf::Event event;

        // Texture
        sf::Texture texture;
        texture.loadFromFile("assets/tile.png");

        // Sprite
        sf::Sprite sprite;
        sprite.setTexture(texture);
        sprite.setPosition(500, 500);

        // Shader
        sf::Shader shader;

        if (!shader.loadFromFile("shaders/glsl.vert", "shaders/glsl.frag"))
        {
                std::cout << "Error. \n";
        }


        shader.setUniform("u_texture", sf::Shader::CurrentTexture);
        shader.setUniform("resolution", 118.0f*77.0f); // width * height of my sprite
        shader.setUniform("radius", 1.0f);
        shader.setUniform("dir", sf::Vector2f(1.0f, 0.0f));

        while (window.isOpen())
        {

               
                while (window.pollEvent(event))
                {
                        if (event.type == sf::Event::Closed)
                                window.close();
                }


                window.clear(sf::Color(200, 200, 200));
                window.draw(sprite, &shader);
                window.display();
        }

        return 0;
}
 

My glsl.vert (from previous lessons, as stated in the article https://github.com/mattdesl/lwjgl-basics/blob/master/test/res/shadertut/lesson4.vert):
//combined projection and view matrix
uniform mat4 u_projView;

//"in" attributes from our SpriteBatch
attribute vec2 Position;
attribute vec2 TexCoord;
attribute vec4 Color;

//"out" varyings to our fragment shader
varying vec4 vColor;
varying vec2 vTexCoord;
 
void main() {
        vColor = Color;
        vTexCoord = TexCoord;
        gl_Position = u_projView * vec4(Position, 0.0, 1.0);
}

My glsl.frag:
//"in" attributes from our vertex shader
varying vec4 vColor;
varying vec2 vTexCoord;

//declare uniforms
uniform sampler2D u_texture;
uniform float resolution;
uniform float radius;
uniform vec2 dir;

void main() {
    //this will be our RGBA sum
    vec4 sum = vec4(0.0);

    //our original texcoord for this fragment
    vec2 tc = vTexCoord;

    //the amount to blur, i.e. how far off center to sample from
    //1.0 -> blur by one pixel
    //2.0 -> blur by two pixels, etc.
    float blur = radius/resolution;

    //the direction of our blur
    //(1.0, 0.0) -> x-axis blur
    //(0.0, 1.0) -> y-axis blur
    float hstep = dir.x;
    float vstep = dir.y;

    //apply blurring, using a 9-tap filter with predefined gaussian weights

    sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
    sum += texture2D(u_texture, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;

    sum += texture2D(u_texture, vec2(tc.x, tc.y)) * 0.2270270270;

    sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
    sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;

    //discard alpha for our simple demo, multiply by vertex color and return
    gl_FragColor = vColor * vec4(sum.rgb, 1.0);
}

I hope my code-samples did not make this post too verbose, if they did, please inform me : )

Additionally, I tried searching already:
The thread over here did not help me: http://en.sfml-dev.org/forums/index.php?topic=18191.0
Also, my image is a PNG and owns an alpha channel.

Thanks for reading! I would be very thankful if you could help me  : )

fallahn

  • Sr. Member
  • ****
  • Posts: 492
  • Buns.
    • View Profile
    • Trederia
Re: Shaders make my Sprite disappear
« Reply #1 on: November 19, 2016, 06:48:33 pm »
SFML has a fixed vertex format - so by default you don't need to create a vertex shader. In your fragment shader vColor and vTexCoord will be replaced by gl_Color and gl_TexCoord[0].xy (you don't need to define them as inputs/varyings)

Cyrana

  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: Shaders make my Sprite disappear
« Reply #2 on: November 19, 2016, 07:00:47 pm »
Thanks for your reply!
When I load the fragment shader only, I have a black spot where my tile would be rendered.

In your fragment shader vColor and vTexCoord will be replaced by gl_Color and gl_TexCoord[0].xy (you don't need to define them as inputs/varyings)

Now, the black spot became a white one with my sprite in front of it. Does not seem to be blurred, though.

Edit:
Here is my updated shader which creates a white spot with my sprite on top:
//declare uniforms
uniform sampler2D u_texture;
uniform float resolution;
uniform float radius;
uniform vec2 dir;

void main() {
    //this will be our RGBA sum
    vec4 sum = vec4(0.0);

    //our original texcoord for this fragment
    vec2 tc = gl_TexCoord[0].xy;

    //the amount to blur, i.e. how far off center to sample from
    //1.0 -> blur by one pixel
    //2.0 -> blur by two pixels, etc.
    float blur = radius/resolution;

    //the direction of our blur
    //(1.0, 0.0) -> x-axis blur
    //(0.0, 1.0) -> y-axis blur
    float hstep = dir.x;
    float vstep = dir.y;

    //apply blurring, using a 9-tap filter with predefined gaussian weights

    sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
    sum += texture2D(u_texture, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;

    sum += texture2D(u_texture, vec2(tc.x, tc.y)) * 0.2270270270;

    sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
    sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;

    //discard alpha for our simple demo, multiply by vertex color and return
    gl_FragColor = gl_Color * vec4(sum.rgb, 1.0);
}

« Last Edit: November 19, 2016, 07:50:38 pm by Cyrana »