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);
}
相关推荐
程序员_三木1 小时前
从 0 到 1 实现鼠标联动粒子动画
javascript·计算机外设·webgl·three.js
m0_748248022 天前
WebAssembly与WebGL结合:高性能图形处理
webgl·wasm
程序员_三木3 天前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
汪洪墩4 天前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
m0_748234344 天前
webGL硬核知识:图形渲染管渲染流程,各个阶段对应的API调用方式
图形渲染·webgl
MossGrower5 天前
36. Three.js案例-创建带光照和阴影的球体与平面
3d图形·webgl·three.js·光照与阴影
MossGrower5 天前
34. Three.js案例-创建球体与模糊阴影
webgl·three.js·3d渲染·阴影效果
程序员_三木6 天前
Three.js资源-贴图材质网站推荐
javascript·webgl·three.js·材质·贴图
程序员_三木6 天前
React和Three.js结合-React Three Fiber
前端·javascript·react.js·前端框架·webgl·材质
MossGrower7 天前
37. Three.js案例-绘制部分球体
3d图形·webgl·three.js·球体几何体