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;

}
相关推荐
惜分飞15 分钟前
sql server 事务日志备份异常恢复案例---惜分飞
前端·数据库·php
GISer_Jing34 分钟前
WebGL实例化渲染:性能提升策略
前端·javascript·webgl
烟锁池塘柳01 小时前
【技术栈-前端】告别“转圈圈”:详解前端性能优化之“乐观 UI” (Optimistic UI)
前端·ui
How_doyou_do1 小时前
浏览器本地存储Cookie, local/sessionStorage - Token结合Cookie实现登录管理
前端
烛阴1 小时前
C# Dictionary 入门:用键值对告别低效遍历
前端·c#
极速蜗牛2 小时前
告别部署焦虑!PinMe:前端开发者的极简部署神器
前端·javascript
uhakadotcom3 小时前
Python Protobuf 全面教程:常用 API 串联与实战指南
前端·面试·github
by__csdn3 小时前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
漫长的~以后3 小时前
Edge TPU LiteRT V2拆解:1GB内存设备也能流畅跑AI的底层逻辑
前端·人工智能·edge
小福气_3 小时前
自定义组件 vue3+elementPlus
前端·javascript·vue.js