Shader 3d RayMarching2 阴影

IQ的这篇文章中iquilezles.org/articles/rm... 讲述了他给予raymarching与sdf技术探索一些阴影方法。 使用有符号距离场(Signed Distance Fields,简称SDFs)的众多优势之一是,查询全局信息非常容易, 在经典的rasterizer场景中,每个物体独立渲染,并不知道其他物体的信息,再做全局光照的时候就会非常困难。

硬阴影

在 raymarching 中渲染阴影通常涉及对场景进行额外的采样,以确定光源和表面点之间是否存在遮挡物。最简单直接的方式是硬阴影

如上图所示为了确定一个点是否被阴影遮挡,你可以从该点沿着指向光源的方向进行 raymarching。如果在达到光源之前找到一个遮挡物(即场景中的另一个表面),则该点处于阴影中。转化为代码非常简单

glsl 复制代码
float distanceRayMarch = RayMarch(p, -incidentLight);
if (distanceRayMarch < length(lightPos - p)) diffuseRatio *= .1;

但是运行之后,发现世界都在阴影中 原因是我们的P点离世界的表面距离小于SURFACE_DIST,这个时候只要沿着发现方向稍微挪动一点距离,便可以得到正确的结果

glsl 复制代码
    float distanceRayMarch = RayMarch(p+surfaceNormal*SURFACE_DIST*1.5, -incidentLight);
    if (distanceRayMarch < length(lightPos - p)) diffuseRatio *= .1;

当然我们可以抽象出一个 GetShadow的函数,基本结构就是Raymaching的结构

glsl 复制代码
float GetShadow(vec3 ro, vec3 rd, float mint, float maxt) {
    float t = mint;
    for( int i=0; i<MAX_STEPS && t<maxt; i++ )
    {
        float h = GetDist(ro + rd*t);
        if( h<SURFACE_DIST )
            return 0.0;
        t += h;
    }
    return 1.0;
}

    float shadow = GetShadow(p + SURFACE_DIST * 2.0 * surfaceNormal, -incidentLight, 0.0, distance(p, lightPos));

然而,这种方法产生的阴影边缘是硬的,没有半阴影或软阴影效果。

软阴影 (Shadow Penumbra)

在现实生活中,人看到的阴影通常具有软边缘,其中一个原因是散射与漫反射:当光线照射到一个物体上时,它会在不同方向上散射,这种现象被称为漫反射。在阴影边缘的地方,部分光线仍然能够到达并被物体散射,造成了柔和的渐变效果,而不是锐利的界限。

根据这个物理事实可以假设如果阴影点距离物体表面越近,他应该阴影程度更剧烈,如果距离物体表面越远,阴影程度更加模糊。 也就是在每一次求distance的时候,记录一下dinstance, 得到最小的dinstance之后,如果这个distance越小 阴影因子越大. 同时引入系数K,可以进行软阴影程度的调整

glsl 复制代码
float GetShadow(vec3 ro, vec3 rd, float mint, float maxt, float k) {
	float res = 1.0;
    float t = mint;
    for( int i=0; i<MAX_STEPS && t<maxt; i++ )
    {
        float h = GetDist(ro + rd*t);
        if( h<SURFACE_DIST )
            return 0.0;
		res = min( res, k*h/t );
        t += h;
    }
    return res;
}

当k=8便可以获得上面的半影效果,感觉非常不错啊。

IQ的两次优化

IQ文章后面有提到了两个优化的点

  1. 一个是解决尖角漏光的问题,基本思路是不仅 raymarching距离与表面距离作为阴影参数,还通过三角测量法将 表面到ray的距离作为考虑。代码如下
glsl 复制代码
float softshadow( in vec3 ro, in vec3 rd, float mint, float maxt, float w )
{
    float res = 1.0;
    float t = mint;
    for( int i=0; i<256 && t<maxt; i++ )
    {
        float h = map(ro + t*rd);
        res = min( res, h/(w*t) );
        t += clamp(h, 0.005, 0.50);
        if( res<-1.0 || t>maxt ) break;
    }
    res = max(res,-1.0);
    return 0.25*(1.0+res)*(1.0+res)*(2.0-res);
}
  1. 另外一个是通过将raymacher穿过物体以找到最深的影子。raymarch的中值条件变成了是否阴影够深,另外clamp函数用的也非常有意思, 避免过小导致无限循环,避免负数导致ray回退,避免过大错过细节,同时最后返回值也很讲究,用了一个非线性的函数.
ini 复制代码
float softshadow( in vec3 ro, in vec3 rd, float mint, float maxt, float w )
{
    float res = 1.0;
    float t = mint;
    for( int i=0; i<256 && t<maxt; i++ )
    {
        float h = map(ro + t*rd);
        res = min( res, h/(w*t) );
        t += clamp(h, 0.005, 0.50);
        if( res<-1.0 || t>maxt ) break;
    }
    res = max(res,-1.0);
    return 0.25*(1.0+res)*(1.0+res)*(2.0-res);
}
相关推荐
刘皇叔code3 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
xhload3d9 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
iloveas201413 天前
three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
webgl
失忆爆表症15 天前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
串串狗xk16 天前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
刘皇叔code18 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
掘金安东尼20 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
郝学胜-神的一滴23 天前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质
Tetap23 天前
pixijs实现绿幕抠图和视频
前端·webgl
山西第一大怨种24 天前
我的浏览器下雨了进水了
前端·webgl