three.js 实现露珠滴落动画

左手的ㄟ右手 2022-11-10 14:54 79阅读 0赞

![2b0ac1b400b54b95f416ec57adea3c21.png][]

前言

本文我们将用three.js来实现一种很酷的光学效果——露珠滴落。我们知道，在露珠从一个物体表面滴落的时候，会产生一种粘着的效果。2D平面中，这种粘着效果其实用css滤镜就可以轻松实现。但是到了3D世界，就没那么简单了，这时我们就得依靠光照来实现，其中涉及到了一个关键算法——光线步进（Ray Marching）。以下是最终实现的效果图

![4369294be9ed47ecd805951400db6c7c.gif][] ray-marching.gif

撒，哈吉马路由！

## 准备工作 ##

笔者的three.js模板：点击右下角的fork即可复制一份 https://codepen.io/alphardex/pen/yLaQdOq

## 正片 ##

### 全屏相机 ###

首先将相机换成正交相机，再将平面的长度调整为2，使其填满屏幕

class RayMarching extends Base {
      constructor(sel: string, debug: boolean) {
        super(sel, debug);
        this.clock = new THREE.Clock();
        this.cameraPosition = new THREE.Vector3(0, 0, 0);
        this.orthographicCameraParams = {
          left: -1,
          right: 1,
          top: 1,
          bottom: -1,
          near: 0,
          far: 1,
          zoom: 1
        };
      }
      // 初始化
      init() {
        this.createScene();
        this.createOrthographicCamera();
        this.createRenderer();
        this.createRayMarchingMaterial();
        this.createPlane();
        this.createLight();
        this.trackMousePos();
        this.addListeners();
        this.setLoop();
      }
      // 创建平面
      createPlane() {
        const geometry = new THREE.PlaneBufferGeometry(2, 2, 100, 100);
        const material = this.rayMarchingMaterial;
        this.createMesh({
          geometry,
          material
        });
      }
    }

![f8e0faab867e07a11062bdd4bf3aaf84.png][] 1

### 创建材质 ###

创建好着色器材质，里面定义好所有要传递给着色器的参数

const matcapTextureUrl = "https://i.loli.net/2021/02/27/7zhBySIYxEqUFW3.png";
    
    class RayMarching extends Base {
      // 创建光线追踪材质
      createRayMarchingMaterial() {
        const loader = new THREE.TextureLoader();
        const texture = loader.load(matcapTextureUrl);
        const rayMarchingMaterial = new THREE.ShaderMaterial({
          vertexShader: rayMarchingVertexShader,
          fragmentShader: rayMarchingFragmentShader,
          side: THREE.DoubleSide,
          uniforms: {
            uTime: {
              value: 0
            },
            uMouse: {
              value: new THREE.Vector2(0, 0)
            },
            uResolution: {
              value: new THREE.Vector2(window.innerWidth, window.innerHeight)
            },
            uTexture: {
              value: texture
            },
            uProgress: {
              value: 1
            },
            uVelocityBox: {
              value: 0.25
            },
            uVelocitySphere: {
              value: 0.5
            },
            uAngle: {
              value: 1.5
            },
            uDistance: {
              value: 1.2
            }
          }
        });
        this.rayMarchingMaterial = rayMarchingMaterial;
      }
    }

顶点着色器`rayMarchingVertexShader`，这个只要用模板现成的就可以了

重点是片元着色器`rayMarchingFragmentShader`

### 片元着色器 ###

#### 背景 ####

作为热身运动，先创建一个辐射状的背景吧

varying vec2 vUv;
    
    vec3 background(vec2 uv){
        float dist=length(uv-vec2(.5));
        vec3 bg=mix(vec3(.3),vec3(.0),dist);
        return bg;
    }
    
    void main(){
        vec3 bg=background(vUv);
        vec3 color=bg;
        gl_FragColor=vec4(color,1.);
    }

![3b68ed1a9a40f29df28c29f366ee4ebc.png][]

#### sdf ####

如何在光照模型中创建物体呢？我们需要sdf。

sdf的意思是符号距离函数：若传递给函数空间中的某个坐标，则返回那个点与某些平面之间的最短距离，返回值的符号表示点在平面的内部还是外部，故称符号距离函数。

如果我们要创建一个球，就得用球的sdf来创建。球体方程可以用如下的glsl代码来表示

float sdSphere(vec3 p,float r)
    {
        return length(p)-r;
    }

方块的代码如下

float sdBox(vec3 p,vec3 b)
    {
        vec3 q=abs(p)-b;
        return length(max(q,0.))+min(max(q.x,max(q.y,q.z)),0.);
    }

看不懂怎么办？没关系，国外已经有大牛把常用的sdf公式都整理出来了

公式：https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

在sdf里先创建一个方块

float sdf(vec3 p){
        float box=sdBox(p,vec3(.3));
        return box;
    }

画面上仍旧一片空白，因为我们的嘉宾——光线还尚未入场。

#### 光线步进 ####

接下来就是本文的头号人物——光线步进了。在介绍她之前，我们先来看看她的好姬友光线追踪吧。

![6ef096d6a8a7e23f4faf63d8e5b4d3df.png][]

首先，我们需要知道光线追踪是如何进行的：给相机一个位置`eye`，在前面放一个网格，从相机的位置发射一束射线`ray`，穿过网格打在物体上，所成的像的每一个像素对应着网格上的每一个点。

而在光线步进中，整个场景会由一系列的sdf的角度定义。为了找到场景和视线之间的边界，我们会从相机的位置开始，沿着射线，一点一点地移动每个点，每一步都会判断这个点在不在场景的某个表面内部，如果在则完成，表示光线击中了某东西，如果不在则光线继续步进。

![2328c9c6758a71ec23f8a01b4a13e8fc.png][]

上图中，p0是相机位置，蓝色的线代表射线。可以看出光线的第一步p0p1就迈的非常大，它也恰好是此时光线到表面的最短距离。表面上的点尽管是最短距离，但并没有沿着视线的方向，因此要继续检测到p4这个点

shadertoy上有一个可交互的例子：

https://www.shadertoy.com/view/4dKyRz

以下是光线步进的glsl代码实现

const float EPSILON=.0001;
    
    float rayMarch(vec3 eye,vec3 ray,float end,int maxIter){
        float depth=0.;
        for(int i=0;i<maxIter;i++){
            vec3 pos=eye+depth*ray;
            float dist=sdf(pos);
            depth+=dist;
            if(dist<EPSILON||dist>=end){
                break;
            }
        }
        return depth;
    }

在主函数中创建一条射线，将其投喂给光线步进算法，即可获得光线到表面的最短距离

void main(){
        ...
        vec3 eye=vec3(0.,0.,2.5);
        vec3 ray=normalize(vec3(vUv,-eye.z));
        float end=5.;
        int maxIter=256;
        float depth=rayMarch(eye,ray,end,maxIter);
        if(depth<end){
          vec3 pos=eye+depth*ray;
          color=pos;
        }
        ...
    }

![be557d5796646bb72f8d56c2d004b157.png][]

在光线步进的引诱下，野生的方块出现了！

#### 居中材质 ####

目前的方块有2个问题：1. 没有居中 2. x轴方向上被拉伸

居中+拉伸素质2连走起

vec2 centerUv(vec2 uv){
        uv=2.*uv-1.;
        float aspect=uResolution.x/uResolution.y;
        uv.x*=aspect;
        return uv;
    }
    
    void main(){
        ...
        vec2 cUv=centerUv(vUv);
        vec3 ray=normalize(vec3(cUv,-eye.z));
        ...
    }

![5683a81ad76b540d66e837cac10e2c58.png][]

方块瞬间飘到了画面的正中央，但此时的她还没有颜色

#### 计算表面法线 ####

在光照模型中，我们需要计算出表面法线

https://www.iquilezles.org/www/articles/normalsSDF/normalsSDF.htm

才能给材质赋予颜色

vec3 calcNormal(in vec3 p)
    {
        const float eps=.0001;
        const vec2 h=vec2(eps,0);
        return normalize(vec3(sdf(p+h.xyy)-sdf(p-h.xyy),
        sdf(p+h.yxy)-sdf(p-h.yxy),
        sdf(p+h.yyx)-sdf(p-h.yyx)));
    }
    
    void main(){
        ...
        if(depth<end){
          vec3 pos=eye+depth*ray;
          vec3 normal=calcNormal(pos);
          color=normal;
        }
        ...
    }

![31bae63cabc2aa96a3a9922c6076f40f.png][]

此时方块被赋予了蓝色，但我们还看不出她是个立体图形

#### 动起来 ####

让方块360°旋转起来吧，3D旋转函数直接在gist上搜一下就有了

https://gist.github.com/yiwenl/3f804e80d0930e34a0b33359259b556c

uniform float uVelocityBox;
    
    mat4 rotationMatrix(vec3 axis,float angle){
        axis=normalize(axis);
        float s=sin(angle);
        float c=cos(angle);
        float oc=1.-c;
        
        return mat4(oc*axis.x*axis.x+c,oc*axis.x*axis.y-axis.z*s,oc*axis.z*axis.x+axis.y*s,0.,
            oc*axis.x*axis.y+axis.z*s,oc*axis.y*axis.y+c,oc*axis.y*axis.z-axis.x*s,0.,
            oc*axis.z*axis.x-axis.y*s,oc*axis.y*axis.z+axis.x*s,oc*axis.z*axis.z+c,0.,
        0.,0.,0.,1.);
    }
    
    vec3 rotate(vec3 v,vec3 axis,float angle){
        mat4 m=rotationMatrix(axis,angle);
        return(m*vec4(v,1.)).xyz;
    }
    
    float sdf(vec3 p){
        vec3 p1=rotate(p,vec3(1.),uTime*uVelocityBox);
        float box=sdBox(p1,vec3(.3));
        return box;
    }

![b830ca23526fa2b0f2a9fc589afd7192.gif][]

#### 融合效果 ####

单单一个方块太孤单了，创建一个球来陪陪她吧

如何让球和方块贴在一起呢，你需要smin这个函数

https://www.iquilezles.org/www/articles/smin/smin.htm

uniform float uProgress;
    
    float smin(float a,float b,float k)
    {
        float h=clamp(.5+.5*(b-a)/k,0.,1.);
        return mix(b,a,h)-k*h*(1.-h);
    }
    
    float sdf(vec3 p){
        vec3 p1=rotate(p,vec3(1.),uTime*uVelocityBox);
        float box=sdBox(p1,vec3(.3));
        float sphere=sdSphere(p,.3);
        float sBox=smin(box,sphere,.3);
        float mixedBox=mix(sBox,box,uProgress);
        return mixedBox;
    }

把`uProgress`的值设为0，她们成功地贴在了一起

![382efe03e88500ca94e72ee4b6bb7a88.png][]

把`uProgress`的值调回1，她们又分开了

#### 动态融合 ####

接下来就是露珠滴落的动画实现了，其实就是对融合图形应用了一个位移变换

uniform float uAngle;
    uniform float uDistance;
    uniform float uVelocitySphere;
    
    const float PI=3.14159265359;
    
    float movingSphere(vec3 p,float shape){
        float rad=uAngle*PI;
        vec3 pos=vec3(cos(rad),sin(rad),0.)*uDistance;
        vec3 displacement=pos*fract(uTime*uVelocitySphere);
        float gotoCenter=sdSphere(p-displacement,.1);
        return smin(shape,gotoCenter,.3);
    }
    
    float sdf(vec3 p){
        vec3 p1=rotate(p,vec3(1.),uTime*uVelocityBox);
        float box=sdBox(p1,vec3(.3));
        float sphere=sdSphere(p,.3);
        float sBox=smin(box,sphere,.3);
        float mixedBox=mix(sBox,box,uProgress);
        mixedBox=movingSphere(p,mixedBox);
        return mixedBox;
    }

![1226f3eb0ce9ceb50b34792c7fa4d803.gif][]

#### matcap贴图 ####

默认的材质太土了？我们有帅气的matcap贴图来助阵

uniform sampler2D uTexture;
    
    vec2 matcap(vec3 eye,vec3 normal){
        vec3 reflected=reflect(eye,normal);
        float m=2.8284271247461903*sqrt(reflected.z+1.);
        return reflected.xy/m+.5;
    }
    
    float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
    {
        return bias+scale*pow(1.+dot(I,N),power);
    }
    
    void main(){
        ...
        if(depth<end){
          vec3 pos=eye+depth*ray;
          vec3 normal=calcNormal(pos);
            vec2 matcapUv=matcap(ray,normal);
            color=texture2D(uTexture,matcapUv).rgb;
            float F=fresnel(0.,.4,3.2,ray,normal);
            color=mix(color,bg,F);
        }
        ...
    }

![19253b35144ba5a8498aac26972ff425.gif][]

安排上了matcap和菲涅尔公式后，瞬间cool了有没有？！

## 项目地址 ##

Ray Marching Gooey Effect：

https://codepen.io/alphardex/pen/BaQYXvy

转自：掘金 - alphardex

https://juejin.cn/post/6934461126977519629

![edf56465b74186e9ac74598231197b1d.png][]

[2b0ac1b400b54b95f416ec57adea3c21.png]: /images/20221022/6f8e19786a8048819cdcaf252098e7a2.png
[4369294be9ed47ecd805951400db6c7c.gif]: https://img-blog.csdnimg.cn/img_convert/4369294be9ed47ecd805951400db6c7c.gif
[f8e0faab867e07a11062bdd4bf3aaf84.png]: https://img-blog.csdnimg.cn/img_convert/f8e0faab867e07a11062bdd4bf3aaf84.png
[3b68ed1a9a40f29df28c29f366ee4ebc.png]: https://img-blog.csdnimg.cn/img_convert/3b68ed1a9a40f29df28c29f366ee4ebc.png
[6ef096d6a8a7e23f4faf63d8e5b4d3df.png]: https://img-blog.csdnimg.cn/img_convert/6ef096d6a8a7e23f4faf63d8e5b4d3df.png
[2328c9c6758a71ec23f8a01b4a13e8fc.png]: https://img-blog.csdnimg.cn/img_convert/2328c9c6758a71ec23f8a01b4a13e8fc.png
[be557d5796646bb72f8d56c2d004b157.png]: https://img-blog.csdnimg.cn/img_convert/be557d5796646bb72f8d56c2d004b157.png
[5683a81ad76b540d66e837cac10e2c58.png]: https://img-blog.csdnimg.cn/img_convert/5683a81ad76b540d66e837cac10e2c58.png
[31bae63cabc2aa96a3a9922c6076f40f.png]: https://img-blog.csdnimg.cn/img_convert/31bae63cabc2aa96a3a9922c6076f40f.png
[b830ca23526fa2b0f2a9fc589afd7192.gif]: https://img-blog.csdnimg.cn/img_convert/b830ca23526fa2b0f2a9fc589afd7192.gif
[382efe03e88500ca94e72ee4b6bb7a88.png]: https://img-blog.csdnimg.cn/img_convert/382efe03e88500ca94e72ee4b6bb7a88.png
[1226f3eb0ce9ceb50b34792c7fa4d803.gif]: https://img-blog.csdnimg.cn/img_convert/1226f3eb0ce9ceb50b34792c7fa4d803.gif
[19253b35144ba5a8498aac26972ff425.gif]: https://img-blog.csdnimg.cn/img_convert/19253b35144ba5a8498aac26972ff425.gif
[edf56465b74186e9ac74598231197b1d.png]: https://img-blog.csdnimg.cn/img_convert/edf56465b74186e9ac74598231197b1d.png