webgl的shader系列（6）——phong光照模型和blinphong光照模型

最新推荐文章于 2024-08-07 23:18:56 发布

niuge No.1

最新推荐文章于 2024-08-07 23:18:56 发布

阅读量1.3k

点赞数 1

分类专栏： webgl

本文链接：https://blog.csdn.net/niuge8905/article/details/109013682

版权

webgl 专栏收录该内容

37 篇文章 14 订阅

订阅专栏

比较好的一篇理解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