RayMarching 入门

原理

RayMarching和传统的RayTracing很相似,在RayTracer,根据方程确定物体表面交点,从而直接获得表面位置等信息进行光照渲染,但是如果我想渲染体积云,液体,地表,分形等等多边形难以表达的效果,传统光线追踪就很难完成了,所以对于某些效果参数化描述比三角面片描述简洁很多, raymarching就是专门来解决这些问题的

首先RayMarching是按照摄像机方向(Ray)逐步前进(March) 进行采样,是以迭代方式一步一步向前步进的,那如何确认步长呢,如果以固定步长去运算的话,步长设置的很大很容易直接穿过物体不能达到物体表面,如果步长设置的很小又会很浪费运算需要跑很多次运算才能达到物体表面。

如果步进太大直接穿过,步进太小浪费运算

这里引入一个很重要的概念"距离场"按距离物体表面最小距离进行迭代的步进, 如果出现某些射线在步进一次并没有达到表面时,可以以此时距离物体的距离场再次按照原方向进行步进。如果某条线在步进多次后一直逐渐远离,也就是说明这根射线永远无法与物体相交,如果一根射线在步进多次后距离场的值越来越小,如果设值为0.01,那么就可以确定这个点的位置就是物体表面。

介绍

1.1 绘制一个地板和球体

c 复制代码
precision highp float;
#define MAX_STEP 100
#define MAX_DEPTH 10.0
#define SURF_DIST 0.01

uniform vec2 u_resolution;

struct Ray {
    vec3 origin;
    vec3 dir;
};





float getDist(vec3 p){
    vec4 sphere=vec4(0.0,0.0,6.0,1.0);
    float sphereDist=length(p-sphere.xyz)-sphere.w;
    float planeDist=length(p.y+1.0);
    return min(sphereDist,planeDist);
}

float RayMarch(Ray ray){
    float depth=0.0;
    for(int i=0;i<MAX_STEP;i++){
        vec3 p=ray.origin+depth*ray.dir;
        float dist=getDist(p);
        depth+=dist;
        if(dist>MAX_DEPTH||dist<SURF_DIST) break;
    }

    return depth;
}

void main(){
    vec2 uv=(gl_FragCoord.xy-u_resolution*0.5)/u_resolution.y;
    Ray ray;
    ray.origin=vec3(0.0,0.0,0.0);
    ray.dir=normalize(vec3(uv,1));
    float depth=RayMarch(ray);   
    gl_FragColor=vec4( vec3(depth),1.0);
}

1.2 添加光照

c 复制代码
vec3 getNormal(vec3 p){
    float d=getDist(p);
    vec3 normal=d-vec3(
        getDist(p-vec3(0.001,0,0)),
        getDist(p-vec3(0,0.001,0)),
        getDist(p-vec3(0.0,0,0.001))
    );
    return normalize(normal);
}

float getLight(vec3 p){
    //灯光位置
    vec3 lightPos=vec3(0,3,7);
    lightPos.xz+=vec2(sin(u_time)*3.0,cos(u_time)*3.0);
    vec3 lightDir=normalize(lightPos-p);
    vec3 normal=getNormal(p);
    float diffuse=dot(lightDir,normal);
     return diffuse;
}
...
 vec3 p=ray.origin+depth*ray.dir;
    //计算漫反射
float light=getLight(p);
gl_FragColor=vec4( vec3(light),1.0);

1.3 添加阴影

c 复制代码
float getShadow(vec3 p,vec3 lightPos,vec3 normal){
    //计算点p到太阳的距离,
    float distLight=length(lightPos-p);
    //计算p在太阳方向上的最近距离
    Ray ray_light;
    ray_light.dir=normalize(lightPos-p);
    ray_light.origin=p+SURF_DIST*normal*2.0;
    float dist=RayMarch(ray_light);
    // return dist;
    //在阴影中
    if(distLight-dist>0.0){
        return 0.6;
    }else{
        return 1.0;
    }
    
}

float getLight(vec3 p){
    //灯光位置
    vec3 lightPos=vec3(0,3,7);
    lightPos.xz+=vec2(sin(u_time)*3.0,cos(u_time)*3.0);
    vec3 lightDir=normalize(lightPos-p);
    vec3 normal=getNormal(p);
    float diffuse=dot(lightDir,normal);
     float shadow=getShadow(p,lightPos,normal);
    return shadow*diffuse;

}
相关推荐
o***Z44815 小时前
前端性能优化案例
前端
张拭心15 小时前
前端没有实际的必要了?结合今年工作内容,谈谈我的看法
前端·ai编程
姜太小白15 小时前
【前端】CSS媒体查询响应式设计详解:@media (max-width: 600px) {……}
前端·css·媒体
HIT_Weston15 小时前
39、【Ubuntu】【远程开发】拉出内网 Web 服务:构建静态网页(二)
linux·前端·ubuntu
百***060115 小时前
SpringMVC 请求参数接收
前端·javascript·算法
天外天-亮16 小时前
Vue + excel下载 + 水印
前端·vue.js·excel
起个名字逛街玩16 小时前
前端正在走向“工程系统化”:从页面开发到复杂产品架构的深度进化
前端·架构
用户479492835691516 小时前
React 渲染两次:是 Bug 还是 Feature?聊聊严格模式的“良苦用心”
前端·react.js·前端框架
b***748817 小时前
前端GraphQL案例
前端·后端·graphql
云飞云共享云桌面17 小时前
无需配置传统电脑——智能装备工厂10个SolidWorks共享一台工作站
运维·服务器·前端·网络·算法·电脑