这一篇将由OpenGL生成法线贴图的基础上再增加光照效果。
思路如下:
- 准备一张墙壁图片A。
- 通过A自动生成法线贴图。
- 设计一个平行光,指定平行光的光照颜色和光照方向。
- 使用漫反射光照公式,法线贴图和光照方向进行点乘。
- 计算出光照渲染出的高光部分和阴影部分,和A进行乘法操作。
原图如下:
首先验证是否生成法线贴图,代码如下:
#iChannel0"file://./wall.jpeg"
float getVal(vec2 uv)
{
return length(texture(iChannel0,uv).xyz);
}
vec2 getGrad(vec2 uv,float delta)
{
vec2 d=vec2(delta,0);
return vec2(
getVal(uv+d.xy)-getVal(uv-d.xy),
getVal(uv+d.yx)-getVal(uv-d.yx)
)/delta;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord)
{
vec2 uv = fragCoord.xy / iResolution.xy;
vec3 n = vec3(getGrad(uv, 1.0/iResolution.y), 150.0);
n = normalize(n);
fragColor = vec4(n,1);
}
法线效果图:
接下来增加纯白色光照:
#iChannel0"file://./wall.jpeg"
float getVal(vec2 uv)
{
return length(texture(iChannel0,uv).xyz);
}
vec2 getGrad(vec2 uv,float delta)
{
vec2 d=vec2(delta,0);
return vec2(
getVal(uv+d.xy)-getVal(uv-d.xy),
getVal(uv+d.yx)-getVal(uv-d.yx)
)/delta;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord)
{
vec2 uv = fragCoord.xy / iResolution.xy;
vec3 n = vec3(getGrad(uv, 1.0/iResolution.y), 150.0);
n = normalize(n);
fragColor = vec4(n,1);
// 光源方向
vec3 ligthDir = vec3(5.0, 0.0, 10.0);
// 光源颜色
vec3 ligthColor = vec3(1.0);
// 漫反射
vec3 diffuse = ligthColor * max(dot(n, normalize(ligthDir)), 0.0);
fragColor = vec4(diffuse, 1.0);
}
效果图如下,可以见到明显的高光和阴影部分:
最后增加纹理贴图:
#iChannel0"file://./wall.jpeg"
float getVal(vec2 uv)
{
return length(texture(iChannel0,uv).xyz);
}
vec2 getGrad(vec2 uv,float delta)
{
vec2 d=vec2(delta,0);
return vec2(
getVal(uv+d.xy)-getVal(uv-d.xy),
getVal(uv+d.yx)-getVal(uv-d.yx)
)/delta;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord)
{
vec2 uv = fragCoord.xy / iResolution.xy;
vec3 n = vec3(getGrad(uv, 1.0/iResolution.y), 150.0);
n = normalize(n);
fragColor = vec4(n,1);
// 光源方向
vec3 ligthDir = vec3(5.0, 0.0, 10.0);
// 光源颜色
vec3 ligthColor = vec3(1.0);
// 漫反射
vec3 diffuse = ligthColor * max(dot(n, normalize(ligthDir)), 0.0);
fragColor = vec4(diffuse, 1.0);
// 纹理贴图
vec4 color = texture(iChannel0, uv);
fragColor = vec4(diffuse * color.rgb, 1.0);
}
效果图如下,感觉效果不是那么好:
将ligthColor设置为vec3(0.9922, 0.4667, 0.1137),效果图如下: