5、片元着色器之基础光照模型：Phong模型和Blinn-Phong模型

不收藏找不到我2024-11-02 10:30

1、什么是Phong光照模型？

Phong模型就是在兰伯特模型的基础上增加了镜面反射光的计算。具体来说，兰伯特模型只考虑漫反射光，而Phong模型在此基础上引入了镜面反射光的概念，以模拟光线在光滑表面反射时产生的高光效果。镜面反射光的计算考虑了观察者的视角和光源的方向，能够产生更加逼真的高光效果。

2、示例

cpp 复制代码 
//限制光线步进的范围，防止计算过长的距离。
const float maxDistance=40.;
// 球心在原点，半径为1.0的球体
float sdSphere(vec3 point)
{
    return length(point)-1.;
}
// 光线步进，start指的是相机(视点)位置；direction表示从相机(视点)发出的光线的方向
float rayMarching(vec3 start,vec3 direction)
{
    float d=0.;
    for(int i=0;i<9999;i++)
    {
        vec3 point=start+d*direction;
        // 像素点到球体表面的距离
        float d0=sdSphere(point);
        // 当d0小于0.001时认为射线和球体表面相交了
        if(d0<.001||d>maxDistance)break;
        d+=d0;
    }
    return d;
}

vec3 getNormal(vec3 p)
{
    float d=sdSphere(p);
    vec2 e=vec2(.001,.0);
    float fdx=d-sdSphere(p-e.xyy);
    float fdy=d-sdSphere(p-e.yxy);
    float fdz=d-sdSphere(p-e.yyx);
    return normalize(vec3(fdx,fdy,fdz));
}
// 构建绕y轴旋转的旋转矩阵
mat2 rot(float angle){
    float c=cos(angle);
    float s=sin(angle);
    return mat2(c,-s,s,c);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord){
    // 将像素坐标标准化为 [-1, 1] 的范围
    vec2 uv=(fragCoord-iResolution.xy*.5)/iResolution.y;
    
    vec3 color=vec3(0.);
    // 视点在z轴正方向上,渲染结果就是相机在该位置看到的结果
    vec3 cameraPosition=vec3(0.,0.,5.);
    
    // 改变direction的z分量实际上相当于修改了fov的大小，fov越小，物体看起来越大(前提是其他参数不变)
    //vec3 direction=normalize(vec3(uv,-1.0));// fov是90°
    vec3 direction=normalize(vec3(uv,-2.));// fov是53.13°
    
    float d=rayMarching(cameraPosition,direction);
    if(d<maxDistance){
        vec3 point=cameraPosition+d*direction;
        vec3 normal=getNormal(point);
        // 定义光源位置,在xoy坐标系的第一象限
        vec3 lightPosition=vec3(5.,5.,0.);
        // 相机绕着y轴转
        lightPosition.xz*=rot(iTime);
        // 定义光源方向
        vec3 lightDir=normalize(lightPosition-point);
        
        // 光源的强度
        float lightIntensity=1.;
        
        // 漫反射系数
        float kd=1.;
        // 漫反射光强(兰伯特模型)
        float diffuseIntensity=kd*lightIntensity*max(dot(normal,lightDir),0.);
        
        //镜面反射
        vec3 reflectDir=reflect(-lightDir,normal);//reflect函数:提供入射光线和法线，返回反射向量
        //视线向量：从表面指向观察者
        vec3 viewDir=normalize(cameraPosition-point);
        // 镜面反射系数
        float ks=1.;
        //控制高光区域大小的系数。数值越大，光斑越小且越亮
        float shininess=8.0;
        //通过点乘来衡量反射光线是否接近视线方向；pow用于实现高光的集中度
        float specular=pow(max(dot(reflectDir,viewDir),0.0),shininess);
        // 灯光颜色
        vec3 lightColor=vec3(1.,.5,.3);
        // 设置球体颜色
        color+=lightColor*(diffuseIntensity+specular);
    }
    fragColor=vec4(color,1.);
}

3、Blinn-Phong模型

Blinn-Phong光照模型是Phong光照模型的一种改进，主要用于计算镜面反射光的强度。相较于Phong模型，Blinn-Phong模型在计算上更加高效，并且能够更好地模拟光照效果。Phong模型需要计算反射光线，是有一定计算量的，Blinn-Phong使用半角向量来简化计算。

4、示例

cpp 复制代码 
//限制光线步进的范围，防止计算过长的距离。
const float maxDistance=40.;
// 球心在原点，半径为1.0的球体
float sdSphere(vec3 point)
{
    return length(point)-1.;
}
// 光线步进，start指的是相机(视点)位置；direction表示从相机(视点)发出的光线的方向
float rayMarching(vec3 start,vec3 direction)
{
    float d=0.;
    for(int i=0;i<9999;i++)
    {
        vec3 point=start+d*direction;
        // 像素点到球体表面的距离
        float d0=sdSphere(point);
        // 当d0小于0.001时认为射线和球体表面相交了
        if(d0<.001||d>maxDistance)break;
        d+=d0;
    }
    return d;
}

vec3 getNormal(vec3 p)
{
    float d=sdSphere(p);
    vec2 e=vec2(.001,.0);
    float fdx=d-sdSphere(p-e.xyy);
    float fdy=d-sdSphere(p-e.yxy);
    float fdz=d-sdSphere(p-e.yyx);
    return normalize(vec3(fdx,fdy,fdz));
}
// 构建绕y轴旋转的旋转矩阵
mat2 rot(float angle){
    float c=cos(angle);
    float s=sin(angle);
    return mat2(c,-s,s,c);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord){
    // 将像素坐标标准化为 [-1, 1] 的范围
    vec2 uv=(fragCoord-iResolution.xy*.5)/iResolution.y;
    
    vec3 color=vec3(0.);
    // 视点在z轴正方向上,渲染结果就是相机在该位置看到的结果
    vec3 cameraPosition=vec3(0.,0.,5.);
    
    // 改变direction的z分量实际上相当于修改了fov的大小，fov越小，物体看起来越大(前提是其他参数不变)
    //vec3 direction=normalize(vec3(uv,-1.0));// fov是90°
    vec3 direction=normalize(vec3(uv,-2.));// fov是53.13°
    
    float d=rayMarching(cameraPosition,direction);
    if(d<maxDistance){
        vec3 point=cameraPosition+d*direction;
        vec3 normal=getNormal(point);
        // 定义光源位置,在xoy坐标系的第一象限
        vec3 lightPosition=vec3(5.,5.,0.);
        // 相机绕着y轴转
        lightPosition.xz*=rot(iTime);
        // 定义光源方向
        vec3 lightDir=normalize(lightPosition-point);
        
        // 光源的强度
        float lightIntensity=1.;
        
        // 漫反射系数
        float kd=1.;
        // 漫反射光强(兰伯特模型)
        float diffuseIntensity=kd*lightIntensity*max(dot(normal,lightDir),0.);
        
        //视线向量：从表面指向观察者
        vec3 viewDir=normalize(cameraPosition-point);
        // 半角向量
        vec3 halfVector=normalize(lightDir+viewDir);
        // 镜面反射系数
        float ks=1.;
        //控制高光区域大小的系数。数值越大，光斑越小且越亮
        float shininess=8.0;
        //通过点乘来衡量半角向量是否接近法线方向；pow用于实现高光的集中度
        float specular=pow(max(dot(halfVector,normal),0.0),shininess);

        // 灯光颜色
        vec3 lightColor=vec3(1.,.5,.3);
        // 设置球体颜色
        color+=lightColor*(diffuseIntensity+specular);
    }
    fragColor=vec4(color,1.);
}
相关推荐
Yang-Never6 天前
OpenGL ES -＞ 投影变换矩阵完美解决绘制GLSurfaceView绘制图形拉伸问题
android·java·kotlin·android studio·着色器
贵州晓智信息科技14 天前
实现动态卡通笑脸的着色器实现
前端·着色器
HahaGiver66615 天前
Unity Shader Graph 2D - 跳动的火焰
unity·游戏引擎·材质·着色器
无敌最俊朗@22 天前
14.模型，纹理，着色器
unity·着色器
你疯了抱抱我1 个月前
【VRChat · 改模】Unity工程导入人物模型；并添加着色器教程；
unity·游戏引擎·vr·着色器·vrchat
贵州晓智信息科技1 个月前
Three.js实现动态水泡效果逐步解析GLSL着色器
开发语言·javascript·着色器
Yang-Never1 个月前
Shader -＞ BitmapShader贴图着色器详解
android·开发语言·kotlin·android studio·贴图·着色器
Yang-Never1 个月前
Shader -＞ SweepGradient扫描渐变着色器详解
android·java·kotlin·android studio·着色器
周振超的1 个月前
使用Qt和OpenGL实现一个旋转的各面颜色不一致的立方体及知识点分析
开发语言·qt·着色器
山楂树の1 个月前
Threejs 自定义片元着色器 做UV动画
3d·图形渲染·webgl·着色器·uv
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04本地部署DeepSeek教程（Mac版本）05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06DeepSeek r1本地安装全指南07太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）08DeepSeek RAGFlow构建本地知识库系统09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10Page Assist - 本地Deepseek模型 Web UI 的安装和使用