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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值