Shadow not rendered correctly - glsl

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

Related

GLSL having strange black faces with the second mesh

platform: Windows10
context: OpenGL, glew, Win32
So I loaded 2 meshes(using a simple OBJ parser, which only reads the triangulated mesh), with vertexpos,uv and normal data. The first mesh is lighted okay. No black faces.The second one looks like this.
The Strange Effects
my vertex shader:
#version 440
in vec3 pos;
in vec2 tex;
in vec3 nor;
uniform float Scale;
uniform mat4 perspective;
uniform mat4 model;
out vec3 normaldir;
out vec2 texOut;
out vec3 FragPos;
void main()
{
normaldir = normalize(mat3(transpose(inverse(model))) * nor);
gl_Position = perspective * model * vec4(pos.xyz, 1.0);
texOut = tex;
FragPos = vec3(model * vec4(pos, 1.0));
}
my fragment shader:
#version 440
uniform float Scale;
uniform sampler2D diffuse;
uniform sampler2D normal;
uniform vec3 viewPos;
//uniform sampler2D normalMap0;
in vec3 normaldir;
in vec2 texOut;
in vec3 FragPos;
layout(location = 0) out vec4 FragColor0;
void main()
{
vec3 lightPos = {2,6,0};
lightPos.x = sin(Scale)*5;
lightPos.z = cos(Scale)*5;
vec3 lightDir = normalize(lightPos - FragPos);
vec3 lightColor = {1.0,1.0,1.0};
float specularStrength = 1.6;
float diff = max(dot(normaldir, lightDir), 0.0);
vec3 diffuseD = diff * lightColor;
vec3 viewDir = normalize(viewPos - FragPos);
vec3 reflectDir = reflect(-lightDir, normaldir);
vec3 ambient = {0.0,0.2,0.4};
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 25);
vec3 specular = specularStrength * spec * lightColor;
vec3 diffuseCol = texture(diffuse, texOut).xyz;
vec3 result = (ambient + diffuseD+ specular) * diffuseCol;
FragColor0 = vec4(result, 1.0);
}
Sorry I made a very dumb mistake. Thank you for all your support #Rabbid76 (Yes I did inverted the normals yes) #paddy
The problem was Binding the normal buffers. I bind glm::vec2 * size instead of glm::vec3 * size for normals' buffers

WebGL: adding specular light without the help of THREE.JS

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.

Errors on phong shading (over texture) implementation in my shaders

I am trying to learn webGL, tried to implemement phong shading following this sample code on the link http://voxelent.com/html/beginners-guide/chapter_3/ch3_Sphere_Phong.html
I get two errors on shader compilation, and consequently there is no moon displayed, which is supposed to be display as i am following Lesson11 of GitHUB where they make sphere from rectangles , the errors i got are :
ERROR: 0:49: '*' : wrong operand types no operation '*' exists that takes a left-hand operand of type 'mediump 3-component vector of float' and a right operand of type 'mediump 4-component vector of float' (or there is no acceptable conversion)
And my full code is :
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler;
uniform float uShininess; //shininess
uniform vec3 uLightDirection; //light direction
uniform vec4 uLightAmbient; //light ambient property
uniform vec4 uLightDiffuse; //light diffuse property
uniform vec4 uLightSpecular; //light specular property
uniform vec4 uMaterialAmbient; //object ambient property
uniform vec4 uMaterialDiffuse; //object diffuse property
uniform vec4 uMaterialSpecular; //object specular property
varying vec3 vNormal;
varying vec3 vEyeVec;
void main(void)
{
vec3 L = normalize(uLightDirection);
vec3 N = normalize(vNormal);
//Lambert's cosine law
float lambertTerm = dot(N,-L);
//Ambient Term
vec4 Ia = uLightAmbient * uMaterialAmbient;
//Diffuse Term
vec4 Id = vec4(0.0,0.0,0.0,1.0);
//Specular Term
vec4 Is = vec4(0.0,0.0,0.0,1.0);
if(lambertTerm > 0.0) //only if lambertTerm is positive
{
Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; //add diffuse term
vec3 E = normalize(vEyeVec);
vec3 R = reflect(L, N);
float specular = pow( max(dot(R, E), 0.0), uShininess);
Is = uLightSpecular * uMaterialSpecular * specular; //add specular term
}
//Final color
vec4 finalColor =Ia + Id + Is;
finalColor.a = 1.0;
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor;
uniform bool uUseLighting;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
varying vec3 vNormal;
varying vec3 vEyeVec;
void main(void)
{
//Transformed vertex position
vec4 vertex= uMVMatrix * vec4(aVertexPosition, 1.0);
//Transformed normal position
vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
//Vector Eye
vEyeVec = -vec3(vertex.xyz);
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
EDIT2:
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler;
uniform float uShininess; //shininess
uniform vec3 uLightDirection; //light direction
uniform vec4 uLightAmbient; //light ambient property
uniform vec4 uLightDiffuse; //light diffuse property
uniform vec4 uLightSpecular; //light specular property
uniform vec4 uMaterialAmbient; //object ambient property
uniform vec4 uMaterialDiffuse; //object diffuse property
uniform vec4 uMaterialSpecular; //object specular property
varying vec3 vNormal;
varying vec3 vEyeVec;
void main(void)
{
vec3 L = normalize(uLightDirection);
vec3 N = normalize(vNormal);
//Lambert's cosine law
float lambertTerm = dot(N,-L);
//Ambient Term
vec4 Ia = uLightAmbient * uMaterialAmbient;
//Diffuse Term
vec4 Id = vec4(0.0,0.0,0.0,1.0);
//Specular Term
vec4 Is = vec4(0.0,0.0,0.0,1.0);
if(lambertTerm > 0.0) //only if lambertTerm is positive
{
Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; //add diffuse term
vec3 E = normalize(vEyeVec);
vec3 R = reflect(L, N);
float specular = pow( max(dot(R, E), 0.0), uShininess);
Is = uLightSpecular * uMaterialSpecular * specular; //add specular term
}
//Final color
vec4 finalColor =Ia + Id + Is;
finalColor.a = 1.0;
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb, textureColor.a)+finalColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor;
uniform bool uUseLighting;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
varying vec3 vNormal;
varying vec3 vEyeVec;
void main(void)
{
//Transformed vertex position
vec4 vertex= uMVMatrix * vec4(aVertexPosition, 1.0);
//Transformed normal position
vNormal = vec3(uNMatrix * vec3(aVertexNormal));
//Vector Eye
vEyeVec = -vec3(vertex.xyz);
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
How to display moon with phong shading effects. Could someone please help me ?
The error message is unambiguous: You try to multiply a vec3 by a vec4, which obvoiusly does not make sense at all. It also tells you that the error is in line 49 of the shader:
gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
// ^ finalColor is a vec4!
You probably meant to tuse finalColor.rgb here.

Modern GLSL ( opengl 3+ ) : Implementing phong effect correctly;

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

Bump mapping with GLSL

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.