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);
}
相关推荐
爱看书的小沐19 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
郝学胜-神的一滴1 天前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
linweidong2 天前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王维志6 天前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
Zuckjet_6 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
xhload3d6 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
猪哥帅过吴彦祖6 天前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl