I'm trying to implement bump mapping but I don't know where is the problem, the shaders seems to be ok. I'm pretty sure the normals, tangents and bitangets are well computed and the problem is in the shader but if anyone wants to look other parts of the code here it is:
(https://github.com/CarlosCarrera/OpenglElements)
VertexShader.vsh
#version 120
attribute vec3 coord3d;
attribute vec3 normals;
attribute vec2 texcoord;
attribute vec3 tangents;
attribute vec3 bitangents;
varying vec3 LightDir;
varying vec2 f_texcoord;
varying vec3 ViewDir;
//Light
uniform vec4 LightPosition;
uniform vec3 LightIntensity;
//Matrices
uniform mat4 ModelViewMatrix;
uniform mat3 NormalMatrix;
uniform mat4 mvp;
void main()
{
vec3 norm = normalize( NormalMatrix * normals );
vec3 tang = normalize( NormalMatrix * tangents);
vec3 bitang = normalize( NormalMatrix * bitangents);
mat3 toObjectLocal =mat3(
tang.x, bitang.x, norm.x,
tang.y, bitang.y, norm.y,
tang.z, bitang.z, norm.z );
// Transform light direction and view direction to tangent space
vec3 pos = vec3( ModelViewMatrix * vec4(coord3d,1.0));
LightDir = normalize( toObjectLocal * (LightPosition.xyz - pos));
ViewDir = toObjectLocal * normalize(-pos);
gl_Position = mvp * vec4(coord3d,1.0);
f_texcoord = texcoord;
}
FragmentShader.fsh
#version 120
varying vec3 LightDir;
varying vec2 f_texcoord;
varying vec3 ViewDir;
uniform vec4 LightPosition;
uniform vec3 LightIntensity;
uniform vec3 Ar; // Ambient reflectivity
uniform vec3 Sr; // Specular reflectivity
uniform float Shininess; // Specular shininess factor
uniform sampler2D mytexture,mytexture2;
vec3 phongModel( vec3 norm, vec3 diffR ) {
vec3 r = normalize(reflect( -normalize(LightDir), normalize(norm) ));
vec3 ambient = LightIntensity * Ar;
float sDotN = max( dot(normalize(LightDir), normalize(norm)), 0.0 );
vec3 diffuse = LightIntensity * diffR * sDotN;
vec3 spec = vec3(0.0);
if( sDotN > 0.0 )
spec = LightIntensity * Sr *
pow( max( dot(r,normalize(ViewDir)), 0.0 ), Shininess );
return ambient + diffuse + spec;
}
void main() {
// Lookup the normal from the normal map
vec2 flipped_texcoord = vec2(f_texcoord.x, 1.0 - f_texcoord.y);
vec3 normal = 2.0 * texture2D(mytexture2, flipped_texcoord ).rgb - 1.0;
normal = normalize(normal);
vec4 texColor = texture2D( mytexture, flipped_texcoord );
gl_FragColor = vec4( phongModel(normal.xyz, texColor.rgb), 1.0 );
}
The results I'm getting are this:
https://dl.dropboxusercontent.com/u/1015014/Captura%20de%20pantalla%202013-12-04%20a%20la%28s%29%2001.16.08.png
Ok, so I finally found the bug...It was not in the shaders, so the shaders are ok! The problem I had is that I wasn't passing the normalmap image to the shader correctly.
Related
This is my fragment shader and when ever i try to use the Cubemap in the texture function i get a error saying:
0.54 No matching function found( using implicit conversion)
0.54 texture function is not known.
The texture function works with the texture2D.
#version 330 core
out vec4 FragColor;
struct Light {
vec3 direction;
vec3 ambient;
vec3 diffuse;
vec3 specular;
};
struct Material {
vec3 ambient;
vec3 diffuse;
vec3 specular;
float shininess;
float opacity;
}; uniform Material material;
uniform vec3 viewPos;
uniform Light light;
in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoord;
uniform bool UseColorMap;
uniform sampler2D texture1;
uniform samplerCube texturecubeMap;
void main()
{
vec3 ambient = 0.2 * (light.ambient * material.ambient );
// diffuse
vec3 norm = normalize( Normal );
vec3 lightDir = normalize( -light.direction );
float diff = max( dot( norm, lightDir) , 0.0 );
vec3 diffuse = light.diffuse * diff * material.diffuse;
// specular
vec3 viewDir = normalize( viewPos - FragPos );
vec3 reflectDir = reflect( -lightDir , norm );
float spec = pow(max(dot(viewDir, reflectDir), 0.0),
material.shininess);
vec3 specular = light.specular * spec * material.specular;
vec3 result = ambient + diffuse + specular;
vec3 texDiffuseColor = texture( texture1 , TexCoord ).rgb;
if( !UseColorMap )
{
FragColor = vec4( result , material.opacity / 100.0 );
}
else
{
//FragColor = texture( texture1 , TexCoord ) * vec4( result ,
material.opacity / 100.0 ); // This works fine
FragColor = texture( texturecubeMap , TexCoord ); // Get error here
}
};
In case of a samplerCube sampler, the texture coordinate has to be 3 dimensional, because the texture coordinate is treated as a direction vector (rx ry rz) emanating from the center of a cube.
The compile error is caused because TexCoord is 2 dimensional.
Fortunately you've calculated the direction of view in world space:
vec3 viewDir = normalize(viewPos - FragPos);
viewDir is the proper direction vector for the environment map:
FragColor = texture(texturecubeMap, viewDir);
I'm making some first steps in webgl programming. Created a simple setup following this tutorial. Managed to add a few things of my own, though stumbled with adding light, particularly - specular light.
As I assume, most of it would be implemented in my fragment shader, and maybe some additions in the vertex shader and the Light module. So that's the code I provide below.
Vertex shader:
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
varying vec3 vNormal;
varying vec2 vUv;
void main() {
vUv = uv;
vNormal = (model * vec4(normal, 0.)).xyz;
gl_Position = projection * view * model * vec4(position, 1.);
}
Fragment shader:
#ifdef GL_ES
precision highp float;
#endif
uniform vec3 lightDirection;
uniform float ambientLight;
uniform sampler2D diffuse;
varying vec3 vNormal;
varying vec2 vUv;
void main() {
float lightness = -clamp(dot(normalize(vNormal), normalize(lightDirection)), -1., 0.);
lightness = ambientLight + (1. - ambientLight) * lightness;
gl_FragColor = vec4(texture2D(diffuse, vUv).rgb * lightness, 1.);
}
Light.js module:
function Light () {
this.lightDirection = new Vector3(-1, -1, -1)
this.ambientLight = 0.3
}
Light.prototype.use = function (shaderProgram) {
var dir = this.lightDirection
var gl = shaderProgram.gl
gl.uniform3f(shaderProgram.lightDirection, dir.x, dir.y, dir.z)
gl.uniform1f(shaderProgram.ambientLight, this.ambientLight)
}
I would really appreciate your suggestions here. Thanks in advance!
The most common and simplest light models are the Phong reflection model or the Blinn–Phong model model.
The following shader code, is based on your original code and implements the Blinn–Phong model model. In compare to your code, the light calculations are done in view space, because the specular highlight depends on the view position, which is (0, 0, 0) in view space. So the light direction has to be transformed to view space.
Vertex shader:
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
uniform vec3 lightDirection;
varying vec3 vPos;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 lightDirectionView;
void main()
{
lightDirectionView = (view * vec4(lightDirection, 0.)).xyz;
mat4 modelView = view * model;
vec4 viewPos = modelView * vec4(position, 1.0)
vPos = viewPos.xyz;
vUv = uv;
vNormal = (modelView * vec4(normal, 0.)).xyz;
gl_Position = projection * viewPos;
}
Fragemnt shader:
#ifdef GL_ES
precision highp float;
#endif
uniform float shininess;
uniform float ambientLight;
uniform sampler2D diffuse;
varying vec3 vPos;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 lightDirectionView;
void main()
{
vec3 color = texture2D(diffuse, vUv).rgb;
vec3 N = normalize( vNormal );
vec3 L = normalize( -lightDirectionView );
vec3 V = normalize( -vPos );
vec3 H = normalize( V + L );
float NdotL = dot(N, L);
float NdotH = dot(N, H);
float kDiffuse = max(0.0, NdotL);
// float kSpecular = (shininess + 2.0) * pow(max(0.0, NdotH), shininess) / (2.0 * 3.14159265);
float kSpecular = pow(max(0.0, NdotH), shininess);
vec3 light_col = color * (kDiffuse + kSpecular);
gl_FragColor = vec4(light_col, 1.0);
}
The value of the uniform shininess has to be a positive value in range [1, 100].
See also Phong and Gouraud Shading WebGL.
I am trying create shadow using shadow maps. I believe that shadow map is rendered well.
It seems that sphere's shadow is not in the correct place, so how would I go about fixing that? Also why is there a black ring around the sphere and how to eliminate it?
In the shadow map vertex shader
gl_Position = u_depthMatrix * worldCoord;
In the shadow map fragment shader
fragmentdepth = gl_FragCoord.z;
vs.glsl
uniform mat4 u_Model;
uniform mat4 u_View;
uniform mat4 u_Persp;
uniform mat4 u_InvTrans;
uniform vec3 u_LightColor;
uniform vec3 u_LightDirection;
uniform vec3 u_EyePos;
uniform mat4 u_depthBiasMatrix;
in vec3 Position;
in vec3 Normal;
in vec2 Texcoord;
out vec3 v_Normal;
out vec2 v_Texcoord;
out vec3 v_Position;
out vec3 v_PositionMC;
out vec4 shadowCoord;
void main(void)
{
v_Normal = (u_InvTrans*vec4(Normal,0.0)).xyz;
vec4 world = u_Model * vec4(Position, 1.0);
vec4 cameraCoord = u_View * world;
v_Position = cameraCoord.xyz;
shadowCoord = u_depthBiasMatrix * world;
gl_Position = u_Persp * cameraCoord;
}
fs.glsl
uniform sampler2D shadowMap;
uniform vec3 u_LightColor;
uniform vec3 u_LightDirection;
uniform vec3 u_EyePos;
uniform vec3 u_Ka;
uniform vec3 u_Kd;
uniform vec3 u_Ks;
in vec3 v_Normal;
in vec2 v_Texcoord;
in vec3 v_Position; //coordinate of vertex in camera coordinate system
in vec4 shadowCoord;
void main(void)
{
vec3 v_Normal1 = normalize(v_Normal);
//Diffuse Lighting
vec3 diff = normalize(u_LightDirection - v_Position);
float diffuse = max(dot(diff , v_Normal1) , 0);
vec3 diffuseColor = diffuse * u_Kd * u_LightColor;
//Specular Lighting
vec3 v = normalize(vec3(u_EyePos - v_Position));
vec3 h = normalize(diff + v);
float sl = pow(max(dot(h, v_Normal1) , 0.0), 50);
if ( diffuse <= 0 ) sl = 0;
vec3 specularColor = sl * u_Ks * u_LightColor;
vec3 v_Color;
v_Color = u_Ka + diffuseColor + specularColor ;
//Shadow Part
vec3 shadowCoord3;
float shadowFactor = 1.0;
if(shadowCoord.w > 0 )
{
shadowCoord3 = shadowCoord.xyz / shadowCoord.w ;
if ( texture2D( shadowMap, shadowCoord3.xy ).z < shadowCoord3.z)
{
shadowFactor = 0.2;
}
}
gl_FragColor = shadowFactor * vec4(v_Color , 1);
}
I am implementing a basic phong lighting GLSL shader; I have looked up some things on the internet, and found that the phong effect was created by adding an ambient, diffuse, and specular layer on the object (see image below, from tom dalling's site); problem is I have seen a lot of examples, and none of them really suits my GLSL set-up. Can any of you give me a code example of the correct way to implement the phong effect which would fit my GLSL set-up ? :
PS : This question could be put on hold because of the fact that it may be based on user opinion : In my mind, it is not, because I would like to know the most effective, and better way of implementing it.
Here is my vertex shader :
#version 120
uniform mat4 modelView;
uniform mat4 MVP;
uniform float time;
attribute vec3 position;
attribute vec2 texCoord;
attribute vec3 normal;
varying vec3 position0;
varying vec2 texCoord0;
varying vec3 normal0;
varying mat4 modelView0;
void main()
{
//Updating varyings...
position0 = position;
texCoord0 = texCoord;
normal0 = (MVP * vec4(normal, 0.0)).xyz;
modelView0 = modelView;
//set position
gl_Position = MVP * vec4(position, 1.0);
}
and my fragment shader :
#version 120
varying vec3 position0;
varying vec2 texCoord0;
varying vec3 normal0;
varying mat4 modelView0;
uniform sampler2D diffuse;
void main()
{
vec4 surfaceColor = texture2D(diffuse, texCoord0);
gl_FragColor = (texture2D(diffuse, texCoord0))
* clamp(dot(-vec3(0.0, 0.5, 0.5), normal0), 0, 1.0);
}
try this:
void main()
{
vec4 texread = texture2D(diffuse, texCoord0);
vec3 normal = normalize(normal0);
vec3 material_kd = vec3(1.0,1.0,1.0);
vec3 material_ks = vec3(1.0,1.0,1.0);
vec3 material_ka = vec3(0.2,0.2,0.2);
vec3 material_ke = vec3(0.0,0.0,0.0);
float material_shininess = 60;
vec3 lightpos = vec3(0.0,10.0,5.0);
vec3 lightcolor = vec3(1.0,1.0,1.0);
vec3 lightdir = normalize(lightpos - worldPosition);
float shade = clamp(dot(lightdir, normal), 0.0, 1.0);
vec3 toWorldpos = normalize((worldPosition) - u_eyePos);
vec3 reflectDir = reflect( toWorldpos, normal );
vec4 specular = vec4(pow(clamp(dot(lightdir, reflectDir),0.0,1.0), material_shininess) * lightcolor * material_ks, 1.0);
vec4 shaded = texread * vec4(material_kd, 1.0) * vec4(lightcolor , 1.0) * shade;
vec4 ambient = texread * vec4(material_ka, 1.0);
vec4 emission = vec4(material_ke, 1.0);
gl_FragColor = shaded + specular + emission + ambient;
}
it may have some compilation errors though as i didnt run it...
you may need to upload your eye position as a uniform (u_eyePos), and calculate the worldposition (worldPosition) for it to work
I made my own sphong shader : here is the code :
fragment shader :
#version 150
uniform mat4 modelView;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;
uniform sampler2D materialTex;
uniform float materialShininess;
uniform vec3 materialSpecularColor;
uniform vec3 lightPosition;//light settings
uniform vec3 lightIntensities;
uniform float lightAttenuation;
uniform float lightAmbientCoeff;
in vec3 position0;
in vec2 texCoord0;
in vec3 normal0;
out vec4 fragmentColor;
void main()
{
//calculate normal in world coordinates
vec3 normal = normalize(normalMatrix * normal0);
//calculate the location of this fragment (pixel) in world coordinates
vec3 surfacePos = vec3(modelView * vec4(position0, 1));
//color of the current fragment
vec4 surfaceColor = texture(materialTex, texCoord0);
//calculate the vector from this pixels surface to the light source
vec3 surfaceToLight = normalize(lightPosition - surfacePos);
//cam distance
vec3 surfaceToCamera = normalize(cameraPosition - surfacePos);
///////////////////////////DIFUSE///////////////////////////////////////
//calculate the cosine of the angle of incidence
//float diffuseCoeff = dot(normal, surfaceToLight) / (length(surfaceToLight) * length(normal));
float diffuseCoeff = max(0.0, dot(normal, surfaceToLight));
vec3 diffuse = diffuseCoeff * surfaceColor.rgb * lightIntensities;
/////////////////////////AMBIENT////////////////////////////////////////
vec3 ambient = lightAmbientCoeff * surfaceColor.rgb * lightIntensities;
/////////////////////////SPECULAR//////////////////////////////////////
float specularCoeff = 0.0;
if(diffuseCoeff > 0.0)
specularCoeff = pow(max(0.0, dot(surfaceToCamera, reflect(-surfaceToLight, normal))), materialShininess);
vec3 specular = specularCoeff * materialSpecularColor * lightIntensities;
////////////////////////ATTENUATION///////////////////////////////////
float distanceToLight = length(lightPosition - surfacePos);
float attenuation = 1.0 / (1.0 + lightAttenuation * pow(distanceToLight, 2));
/////////////////////////////////FINAL/////////////////////////////////
vec3 linearColor = ambient + attenuation * (diffuse + specular);
//finalColor with gamma correction
vec3 gamma = vec3(1.0/2.2);
fragmentColor = vec4(pow(linearColor, gamma), surfaceColor.a);
//fragmentColor = vec4(diffuseCoeff * lightIntensities * surfaceColor.rgb, surfaceColor.a);
}
I was trying to add a normal map effect to a shader tutorial I have found here but with no luck.
UPDATE 1:
I updated the code adding a tangent space matrix
Vertex shader:
#version 330
in vec3 inPosition;
in vec3 vertNormal;
in vec2 vertTexCoord;
in vec4 vertNormalMapping;
out vec3 fragVert;
out vec3 fragNormal;
out vec2 fragTexCoord;
out vec4 fragNormalMapping;
out mat3 TBNMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform mat4 camera;
void main(){
vec3 tangent;
vec3 binormal;
vec3 c1 = cross( vertNormal, vec3(0.0, 0.0, 1.0) );
vec3 c2 = cross( vertNormal, vec3(0.0, 1.0, 0.0) );
if( length(c1)>length(c2) )
{
tangent = c1;
}
else
{
tangent = c2;
}
tangent = normalize(tangent);
binormal = cross(vertNormal, tangent);
binormal = normalize(binormal);
mat3 normalMatrix = transpose(inverse(mat3(camera * modelViewProjectionMatrix )));
vec3 n = normalize(normalMatrix * vertNormal);
vec3 t = normalize(normalMatrix * tangent.xyz);
vec3 b = normalize(normalMatrix * binormal.xyz);
TBNMatrix = mat3(t, b, n);
fragTexCoord = vertTexCoord;
fragNormal = vertNormal;
fragVert = inPosition;
fragNormalMapping = vertNormalMapping;
gl_Position = camera * modelViewProjectionMatrix * vec4(inPosition, 1.0);
}
Fragment shader
#version 330
precision highp float;
uniform vec3 cameraPosition;
uniform mat4 modelViewProjectionMatrix;
uniform mat4 camera;
uniform sampler2D tex;
uniform sampler2D heightMap;
uniform float materialShininess;
uniform vec3 materialSpecularColor;
uniform struct Light {
vec3 position;
vec3 intensities; //a.k.a the color of the light
float attenuation;
float ambientCoefficient;
} light;
in vec3 fragNormal;
in vec3 fragVert;
in vec2 fragTexCoord;
in vec4 fragNormalMapping;
in mat3 TBNMatrix;
out vec4 finalColor;
void main() {
vec3 surfacePos = vec3(modelViewProjectionMatrix * vec4(fragVert, 1));
vec4 surfaceColor = texture(tex, fragTexCoord);
vec3 surfaceToLight = TBNMatrix * (light.position - surfacePos) ;
vec3 surfaceToCamera = TBNMatrix * (cameraPosition - surfacePos);
vec3 normal = normalize(texture(heightMap, fragTexCoord).xyz * 2.0 - 1.0);
//ambient
vec3 ambient = light.ambientCoefficient * surfaceColor.rgb * light.intensities;
//diffuse
float diffuseCoefficient = max(0.0, dot(normal, surfaceToLight));
vec3 diffuse = diffuseCoefficient * surfaceColor.rgb * light.intensities;
//specular
float specularCoefficient = 0.0;
if(diffuseCoefficient > 0.0)
specularCoefficient = pow(max(0.0, dot(surfaceToCamera, reflect(-surfaceToLight, normal))), materialShininess);
vec3 specular = specularCoefficient * materialSpecularColor * light.intensities;
//attenuation
float distanceToLight = length(light.position - surfacePos);
float attenuation = 1.0 / (1.0 + light.attenuation * pow(distanceToLight, 2));
//linear color (color before gamma correction)
vec3 linearColor = ambient + attenuation*(diffuse + specular);
//final color (after gamma correction)
vec3 gamma = vec3(1.0/2.2);
finalColor = vec4(pow(linearColor, gamma), surfaceColor.a);
}
The result is better but now the lighting is calculated wrong O.O
//OLD
I have tried with a blank color texture and a correct normal map texture and the result is this: The normal map is calculated correctly but... these lines are not so cool to see :-(
Any idea of what is the cause? thank you everyone for the help =D
posting here for clarity...
mv = camera * transform;//modelview
mvp = proj * camera * transform;//modelviewprojection
mvi = transpose(inverse(mv))//modelview inverse (=gl_NormalMatrix)
so you should have in place of modelViewProjectionMatrix passed to the shader the modelView and the projection separately, and compute the resulting mvp in the vertex shader.
(or precompute them all on cpu side)