尝试模拟点光源照射平面基础光照模型

之前写过一个通过2dshader写一个地球仪效果的帖子
那个是通过基础光照模型模拟配扭曲的uv模拟的球体,这个帖子要写的简单点,单纯的通过点光源和平面来计算,最后用法线贴图做法线偏移。
首先我们要做一个简单且朴实无华的平面渲染。
//采样主纹理
vec4 col = texture(texture, v_uv0);

下一步我们要确定视角方向,法线方向以及光线方向,因为模拟的只是一个单纯2D平面,所以视角方向和法线方向都是垂直于平面的向量 都可以写成vec3(0.0,0.0,1.0);
vec3 normalDir = vec3(0.0,0.0,1.0);
vec3 viewDir = normalize(vec3(0.0,0.0,1.0));
由于是点光源,所以先假定一个在图片中点的点光源,点光源减去uv位置就可以算出光照方向向量了,光照方向向量的大小也就是距离点光源的距离,所以也可以用来求光线衰减。
vec3 lightPos = vec3(0.5,0.5,layOutDist);
//计算光线方向
vec3 lightDir = normalize(vec3(v_uv0.x-lightPos.x,v_uv0.y- lightPos.y,lightPos.z));
//计算光照衰减
vec3 lightDis = vec3(v_uv0.x-lightPos.x,v_uv0.y- lightPos.y,0.0-lightPos.z);
float attenuation = 1.0/(1.0+ dot(lightDis,lightDis));
//计算半角向量
vec3 halfDir = normalize(viewDir + lightDir);
之后就可以套用基础光照模式里面的漫反射和高光公式,就能获得最基本的光照效果了
float diffusValue = clamp(dot(normalDir,lightDir),0.0,1.0) * attenuation;
float specularValue = pow(clamp(dot(normalDir,halfDir),0.0,1.0),500.0);
单纯漫反射效果

漫反射加高光效果

在做进一步升级,想要光线和平面做跟多的交互形成更好的效果这里可以采样一张法线贴图来形成更好的效果

//确定法线方向
vec4 normalCol = texture(normalTexture, v_uv0);
vec3 normalDir = normalCol.rgb;
normalDir = normalDir * 2.0 -1.0;
normalDir = normalize(normalDir);
通过修改发现我们就能获得质感更真实的表面和光照关系了

可以选择加点高光,具体看需要吧

好了 基本效果已经完成 接下来可以加一些变量来控制效果
例如可以设置变量来控制光源位置
vec3 lightPos = vec3(-lightPosX + 0.5,-lightPosY + 0.5,layOutDist);

也可以通过修改光照公式来调整光线颜色
float diffusValue = clamp(dot(normalDir,lightDir),0.0,1.0) * attenuation;
vec3 specularColor = pow(clamp(dot(normalDir,halfDir),0.0,1.0),500.0) * lightColor.rgb* attenuation;
col.rgb *= diffusValue;
col.rgb *= lightColor.rgb;
col.rgb += specularColor;

还可以通过修改衰减公式来添加光线强度
float attenuation = lightStrength/(1.0+ dot(lightDis,lightDis));

好了 剩下的就还没想到了,最后附上这个effect
wall.effect.zip (1.3 KB)
