简体   繁体   English

SFML着色器不起作用

[英]SFML shader not working

I'm trying to create a outline effect to my buttons when they are clicked but atm I'm just testing stuff with shaders... whenever I draw something with my shader tho it renders the shape completely black 我试图在单击按钮时为按钮创建轮廓效果,但是atm我只是在用着色器测试材质...每当我用着色器绘制某些东西时,它就会使形状完全变黑

#include <SFML\Graphics.hpp>

int main(){
    sf::RenderWindow window(sf::VideoMode(500, 500), "hello world", sf::Style::Close);

    sf::RectangleShape rect;
    rect.setSize(sf::Vector2f(100, 100));
    rect.setFillColor(sf::Color::Red);

    sf::Shader blur;
    if (!blur.loadFromFile("blur.frag", sf::Shader::Fragment)){
        return 1;
    }
    if (!blur.isAvailable()){
        return 1;
    }
    blur.setUniform("texture", sf::Shader::CurrentTexture);
    blur.setUniform("blur_radius", 0.002f);

    while (window.isOpen()){

        sf::Event evnt;

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

        window.clear(sf::Color(0, 100, 100));

        sf::RenderStates state;
        state.shader = &blur;
        window.draw(rect, state);

        window.display();
    }
    return 0;
}

and my shader code. 和我的着色器代码。

uniform sampler2D texture;
uniform float blur_radius;

void main()
{
    vec2 offx = vec2(blur_radius, 0.0);
    vec2 offy = vec2(0.0, blur_radius);

    vec4 pixel = texture2D(texture, gl_TexCoord[0].xy)               * 4.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offy)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offy)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx - offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx + offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx - offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx + offy) * 1.0;

    gl_FragColor =  gl_Color * (pixel / 16.0);
}

I would expect a blurred red rectangle to appear in the top left cornor but instead theres a black solid rectangle. 我希望一个模糊的红色矩形会出现在左上角或角落,但是会有一个黑色的实心矩形。

这是上面代码的结果

Because rect does not have a texture attach to it, all the pixels used in blur.frag are invalid, I guess in this case it use black pixels, hence the black rectangle. 由于rect没有附加纹理,因此blur.frag中使用的所有像素均无效,我猜在这种情况下,它使用黑色像素,因此使用黑色矩形。

You should create a texture (use sf::RenderTexture ), draw whatever you want on it, then create a sf::Sprite on top of it and draw this sprite. 您应该创建一个纹理 (使用sf::RenderTexture ),在其上绘制任何内容,然后在其上创建一个sf::Sprite并绘制该Sprite。 Alternatively you may load a texture from an image . 或者,您可以从图像加载纹理。

#include <SFML/Graphics.hpp>

int main(){
    sf::RenderWindow window(sf::VideoMode(200, 200), "hello world", sf::Style::Close);
    window.setFramerateLimit(60);

    sf::RectangleShape rectBlue;
    rectBlue.setSize(sf::Vector2f(100, 50));
    rectBlue.setFillColor(sf::Color::Blue);
    sf::RectangleShape rectYellow;
    rectYellow.setSize(sf::Vector2f(100, 50));
    rectYellow.setFillColor(sf::Color::Yellow);
    rectYellow.setPosition(0, 50);

    sf::RenderTexture renderTexture;
    if (!renderTexture.create(100, 100)){ //create a render texture
        return 1;
    }
    renderTexture.clear();
    renderTexture.draw(rectBlue); //draw blue rect on the render texture
    renderTexture.draw(rectYellow); //draw yellow rect
    renderTexture.display();
    sf::Sprite sprite(renderTexture.getTexture()); //create a sprite from the created texture

    sf::Shader blur;
    if (!blur.loadFromFile("blur.frag", sf::Shader::Fragment)){
        return 1;
    }
    if (!blur.isAvailable()){
        return 1;
    }
    blur.setUniform("texture", sf::Shader::CurrentTexture);
    blur.setUniform("blur_radius", 0.05f);

    while (window.isOpen()){

        sf::Event evnt;

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

        window.clear(sf::Color(0, 100, 100));
        window.draw(sprite, &blur); //draw the sprite with blur shader
        window.display();
    }
    return 0;
}

Result: 结果:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM