在3D世界中,模拟点光源实现对墙壁的光照。效果还是非常不错的。
思路如下:
- 准备一张墙壁图像。
- 自动生成墙壁的法线纹理。
- 模拟点光源。
- 添加漫反射。
- 随着时间变换进行规律性移动。
代码如下:
#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;
}
// 随着时间流逝,来模拟点光源动态移动
float msin()
{
// 因为sin把区间固定在[-1, 1],1.0是范围因子,0.5将改变sin函数的中点位置,不懂就画图。
return sin(iTime)*1.0 + 0.5;
}
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);
// 设计一个点光源p, 座标在(0.5, 0.5)中心位置, 由于uv纹理是[0.0, 1.0]范围的
vec2 p = vec2(msin(), 0.5);
// 计算uv和p的距离
vec2 d = p-uv;
// 光源方向,0.125是z向量,从2维到3维
vec3 ligthDir = vec3(d, 0.125);
// 计算光照在uv像素上面的强度, 因为越近的应该越强, 所以使用除法.length计算的是长度
float q = 0.4/length(ligthDir.xyz);
// 光源颜色
vec3 ligthColor = vec3(0.9922, 0.4667, 0.1137);
// 光源颜色*漫反射*光源强度
vec3 diffuse = ligthColor * max(dot(n, normalize(ligthDir)), 0.0) * q;
// 纹理贴图
vec4 color = texture(iChannel0, uv);
fragColor = vec4(diffuse * color.rgb, 1.0) + 0.1;
}
原图如下:
效果如下:
效果链接