這一篇將由OpenGL生成法線貼圖的基礎(chǔ)上再增加光照效果。
思路如下：

準(zhǔn)備一張墻壁圖片A。

通過A自動生成法線貼圖。

設(shè)計一個平行光，指定平行光的光照顏色和光照方向。

使用漫反射光照公式，法線貼圖和光照方向進行點乘。

計算出光照渲染出的高光部分和陰影部分，和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設(shè)置為vec3(0.9922, 0.4667, 0.1137)，效果圖如下：

總結(jié)

以上是生活随笔為你收集整理的OpenGL生成的法线贴图并增加光照的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。