GLSL Normal Map Shader

[PoxBear]

hi,

i am trying to add normal map functionality into my game that i have bee working on for a while now. i am using this tutorial https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson6 for the concept but i cannot seem to get it to work. there are lots of different things (not java related) that look different from how sfml works.

would anyone be kind enough to help me to get it working?

thanks,
gerald

[eXpl0it3r]

I've no idea what a tutorial about lighting with shaders has to do with a map.

Can you explain more precisely what you're trying to do?

[PoxBear]

I've no idea what a tutorial about lighting with shaders has to do with a map.

Can you explain more precisely what you're trying to do?

from the above link: "This article will focus on 3D lighting and normal mapping techniques and how we can apply them to 2D games"

i am also talking about lighting but normal mapping is a part of the article.

some code:

float DEFAULT_LIGHT_Z = 0.075f;
sf::Color AMBIENT_COLOR(0.6f * 255, 0.6f * 255, 1.0f * 255, 255);
sf::Color LIGHT_COLOR(1.0f * 255, 0.8f * 255, 0.6f * 255, 1.0f * 255);
sf::Vector3f FALLOFF(0.4f, 3.0f, 20.0f);

sf::Vector3f LIGHT_POS(0.0f, 0.0f, DEFAULT_LIGHT_Z);
sf::Vector2f RESOLUTION(800.0f, 600.0f);

sf::Texture backgroundDiffuseTex;
backgroundDiffuseTex.loadFromFile("Data/backgrounds/background-diffuse.png");
sf::Sprite backgroundDiffuseSpr;
backgroundDiffuseSpr.setTexture(backgroundDiffuseTex);
backgroundDiffuseSpr.setPosition(0, 0);

sf::Texture backgroundNormalTex;
backgroundNormalTex.loadFromFile("Data/backgrounds/background-normal.png");

sf::Shader shader;
shader.loadFromFile("Data/shaders/background-shader.vert", "Data/shaders/background-shader.frag");

shader.setParameter("u_projView", view.getTransform());

shader.setParameter("LightColor", LIGHT_COLOR);
shader.setParameter("AmbientColor", AMBIENT_COLOR);
shader.setParameter("Falloff", FALLOFF);
shader.setParameter("LightPos", LIGHT_POS);
shader.setParameter("Resolution", RESOLUTION);

shader.setParameter("u_texture", sf::Shader::CurrentTexture);
shader.setParameter("u_normals", backgroundNormalTex);
 

the vertex and fragment shader code is in the article

[eXpl0it3r]

Why do I always answer stuff regarding OpenGL when I've no idea about it?
Yeah Normal Mapping is some graphics related stuff.

But I'm not sure what you're expecting from us. Should we go read the whole tutorial and write you a shader that works with SFML?
You should provide a complete and minimal example, that shows what you have and from which we can start figuring out what goes wrong.

Also feel free to checkout GLLight2D and Let There Be Light.

[PoxBear]

sorry. here is all the code that i have for this effect.

main function

sf::View view;
view.reset(sf::FloatRect(0, 0, 800, 600));

float DEFAULT_LIGHT_Z = 0.075f;
sf::Color AMBIENT_COLOR(0.6f * 255, 0.6f * 255, 1.0f * 255, 255);
sf::Color LIGHT_COLOR(1.0f * 255, 0.8f * 255, 0.6f * 255, 1.0f * 255);
sf::Vector3f FALLOFF(0.4f, 3.0f, 20.0f);

sf::Vector3f LIGHT_POS(0.0f, 0.0f, DEFAULT_LIGHT_Z);
sf::Vector2f RESOLUTION(800.0f, 600.0f);

sf::Texture backgroundDiffuseTex;
backgroundDiffuseTex.loadFromFile("Data/backgrounds/background-diffuse.png");
sf::Sprite backgroundDiffuseSpr;
backgroundDiffuseSpr.setTexture(backgroundDiffuseTex);
backgroundDiffuseSpr.setPosition(0, 0);

sf::Texture backgroundNormalTex;
backgroundNormalTex.loadFromFile("Data/backgrounds/background-normal.png");

sf::Shader shader;
shader.loadFromFile("Data/shaders/background-shader.vert", "Data/shaders/background-shader.frag");

shader.setParameter("u_projView", view.getTransform());

shader.setParameter("LightColor", LIGHT_COLOR);
shader.setParameter("AmbientColor", AMBIENT_COLOR);
shader.setParameter("Falloff", FALLOFF);
shader.setParameter("LightPos", LIGHT_POS);
shader.setParameter("Resolution", RESOLUTION);

shader.setParameter("u_texture", sf::Shader::CurrentTexture);
shader.setParameter("u_normals", sf::Shader::CurrentTexture);

window.setView(view);

while(window.isOpen())
{
        window.clear(sf::Color(0, 0, 0));

        window.draw(backgroundDiffuseSpr, &shader);

        // Process events
        sf::Event event;
        while (window.pollEvent(event))
        {
                // Close window: exit
                if (event.type == sf::Event::Closed)
                        window.close();

                // Escape key: exit
                if ((event.type == sf::Event::KeyPressed) && (event.key.code == sf::Keyboard::Escape))
                        window.close();

        }

        // Finally, display the rendered frame on screen
        window.display();
}
 

vertex shader

//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);
}
 

 

[/b]

//attributes from vertex shader
varying vec4 vColor;
varying vec2 vTexCoord;

//our texture samplers
uniform sampler2D u_texture;   //diffuse map
uniform sampler2D u_normals;   //normal map

//values used for shading algorithm...
uniform vec2 Resolution;      //resolution of screen
uniform vec3 LightPos;        //light position, normalized
uniform vec4 LightColor;      //light RGBA -- alpha is intensity
uniform vec4 AmbientColor;    //ambient RGBA -- alpha is intensity
uniform vec3 Falloff;         //attenuation coefficients

void main() {
        //RGBA of our diffuse color
        vec4 DiffuseColor = texture2D(u_texture, vTexCoord);
       
        //RGB of our normal map
        vec3 NormalMap = texture2D(u_normals, vTexCoord).rgb;
       
        //The delta position of light
        vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);
       
        //Correct for aspect ratio
        LightDir.x *= Resolution.x / Resolution.y;
       
        //Determine distance (used for attenuation) BEFORE we normalize our LightDir
        float D = length(LightDir);
       
        //normalize our vectors
        vec3 N = normalize(NormalMap * 2.0 - 1.0);
        vec3 L = normalize(LightDir);
       
        //Pre-multiply light color with intensity
        //Then perform "N dot L" to determine our diffuse term
        vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);

        //pre-multiply ambient color with intensity
        vec3 Ambient = AmbientColor.rgb * AmbientColor.a;
       
        //calculate attenuation
        float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );
       
        //the calculation which brings it all together
        vec3 Intensity = Ambient + Diffuse * Attenuation;
        vec3 FinalColor = DiffuseColor.rgb * Intensity;
        gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);
}
 

the image i am using are at these locations:
https://raw.github.com/wiki/mattdesl/lwjgl-basics/images/e4FtQNt.png
https://raw.github.com/wiki/mattdesl/lwjgl-basics/images/cjFUm7X.png

without setting the u_projView parameter the image is black but with it set the image is a dark blue. the blue is not a colour i believe i have set.

if it is too much to ask then i will not bother you anymore

thanks

[fallahn]

If it helps I wrote a similar shader a while back specifically for sfml. There's a breakdown of it here.