webgl的shader系列(6)——phong光照模型和blinphong光照模型
比较好的一篇理解phong光照模型的文章
const VSHADER=`varying vec3 v_Normal;varying vec3 v_position;void main(){gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );v_position=position;//计算变换后的法向量并归一化//v_Normal=normalize(vec3(normalMatrix*normal));v_Normal=normal;}`const FSHADER=`precision mediump float;uniform vec3 u_LightColor;uniform vec3 u_LightDirction;uniform vec3 u_AmbientLight;varying vec3 v_Normal;uniform vec3 u_Color;varying vec3 v_position;void main(){//环境光vec3 ambient=0.1*u_LightColor.rgb*u_Color.rgb;//漫反射光float diff=max(0.0,dot(v_Normal,u_LightDirction));float hLambert=diff*0.5+0.5;vec3 diffuse=hLambert*u_LightColor.rgb*u_Color.rgb;//高光vec3 viewDir=normalize(cameraPosition-v_position);vec3 reflectDir=reflect(-u_LightDirction,v_Normal);//Specular = Ks* pow(saturate(dot(R,V)),Gloss) //Ks为高光强度(范围0-1) Gloss为光滑度(范围1-100)float spec=0.5*pow(max(dot(viewDir,reflectDir),0.0),10.0);vec3 specular=spec*u_LightColor.rgb;//把三种光叠加起来gl_FragColor=vec4(ambient+diffuse+specular,1.0);}`
blinphong光照模型是在phong模型的基础上,优化算法提出的一种光照模型。
const VSHADER=`varying vec3 v_Normal;varying vec3 v_position;void main(){gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );v_position=position;//计算变换后的法向量并归一化//v_Normal=normalize(vec3(normalMatrix*normal));v_Normal=normal;}`const FSHADER=`precision mediump float;uniform vec3 u_LightColor;uniform vec3 u_LightDirction;uniform vec3 u_AmbientLight;varying vec3 v_Normal;uniform vec3 u_Color;varying vec3 v_position;void main(){//环境光vec3 ambient=0.1*u_LightColor.rgb*u_Color.rgb;//漫反射光float diff=max(0.0,dot(v_Normal,u_LightDirction));float hLambert=diff*0.5+0.5;vec3 diffuse=hLambert*u_LightColor.rgb*u_Color.rgb;//高光vec3 viewDir=normalize(cameraPosition-v_position);vec3 halfVector=normalize(u_LightDirction+viewDir);//Specular = Ks* pow(saturate(dot(R,V)),Gloss) //Ks为高光强度(范围0-1) Gloss为光滑度(范围1-100)float spec=0.5*pow(max(dot(v_Normal,halfVector),0.0),10.0);vec3 specular=spec*u_LightColor.rgb;//把三种光叠加起来gl_FragColor=vec4(ambient+diffuse+specular,1.0);}`
源码地址:
https://gitee.com/niuge8905/webglsample
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
