露滴アニメーション効果を実装するための Three.js サンプル コード

クラスRayMarchingはBaseを拡張します{
 コンストラクタ(sel: 文字列、debug: ブール値) {
 スーパー(sel、デバッグ);
 this.clock = 新しい THREE.Clock();
 this.cameraPosition = 新しい THREE.Vector3(0, 0, 0);
 this.orthographicCameraParams = {
  左: -1、
  右: 1、
  トップ: 1,
  下: -1、
  近く: 0,
  遠い: 1,
  ズーム: 1
 };
 }
 // 初期化 init() {
 シーンを作成します。
 this.createOrthographicCamera();
 レンダラーを作成します。
 this.createRayMarchingMaterial();
 this.createPlane();
 this.createLight();
 this.trackMousePos();
 リスナーを追加します。
 ループを設定します。
 }
 // 平面を作成する createPlane() {
 const ジオメトリ = 新しい THREE.PlaneBufferGeometry(2, 2, 100, 100);
 const マテリアル = this.rayMarchingMaterial;
 this.createMesh({
  幾何学、
  材料
 });
 }
} 

const matcapTextureUrl = "https://i.loli.net/2021/02/27/7zhBySIYxEqUFW3.png";

クラスRayMarchingはBaseを拡張します{
 // レイトレーシングマテリアルを作成する createRayMarchingMaterial() {
 const ローダー = 新しい THREE.TextureLoader();
 const テクスチャ = loader.load(matcapTextureUrl);
 const rayMarchingMaterial = 新しい THREE.ShaderMaterial({
  頂点シェーダー: rayMarchingVertexShader、
  フラグメントシェーダー: rayMarchingFragmentShader、
  サイド: THREE.DoubleSide、
  制服:
  u時間: {
   値: 0
  },
  uマウス: {
   値: 新しい THREE.Vector2(0, 0)
  },
  u解像度:
   値: 新しい THREE.Vector2(window.innerWidth, window.innerHeight)
  },
  uテクスチャ: {
   値: テクスチャ
  },
  進捗状況:
   値: 1
  },
  uVelocityBox: {
   値: 0.25
  },
  uVelocitySphere: {
   値: 0.5
  },
  u角度:
   値: 1.5
  },
  u距離:
   値: 1.2
  }
  }
 });
 this.rayMarchingMaterial = rayMarchingMaterial;
 }
}

変化するvec2 vUv;

vec3背景(vec2 uv){
 浮動小数点数 = 長さ(uv-vec2(.5));
 vec3 bg = mix(vec3(.3),vec3(.0),dist);
 bg を返します。
}

void main(){
 vec3 bg = 背景(vUv);
 vec3 色=bg;
 gl_FragColor = vec4(色,1.);
} 

フロート sdSphere(vec3 p,フロート r)
{
 長さ(p)-rを返します。
}

浮動小数点ボックス(vec3 p,vec3 b)
{
 vec3 q=abs(p)-b;
 長さ(max(q,0.))+最小(max(qx,max(qy,qz)),0.)を返します。
}

浮動小数点数sdf(vec3 p){
 フロートボックス=sdBox(p,vec3(.3));
 返品ボックス;
}

定数フロートEPSILON=.0001;

float rayMarch(vec3 eye,vec3 ray,float end,int maxIter){
 浮動小数点の深さ=0。;
 for(int i=0;i<maxIter;i++){
  vec3 pos=目+深さ*光線;
  浮動小数点数=sdf(pos);
  深さ+=距離;
  if(dist<EPSILON||dist>=end){
   壊す;
  }
 }
 深さを返します。
}

void main(){
 ...
 vec3目 = vec3(0.,0.,2.5);
 vec3 ray = normalize(vec3(vUv,-eye.z));
 フロート終了=5。;
 整数最大反復回数 = 256;
 float depth=rayMarch(eye,ray,end,maxIter);
 if(深さ<終了){
  vec3 pos=目+深さ*光線;
  色=位置;
 }
 ...
} 

vec2 中心紫外線(vec2 紫外線){
 uv=2.*uv-1.;
 フロートアスペクト=uResolution.x/uResolution.y;
 uv.x*=アスペクト;
 uv を返します。
}

void main(){
 ...
 vec2 cUv = centerUv (vUv);
 vec3 ray = normalize(vec3(cUv,-eye.z));
 ...
} 

vec3 calcNormal(vec3 p 内)
{
 定数float eps = .0001;
 定数vec2 h = vec2(eps,0);
 正規化を返す(vec3(sdf(p+h.xyy)-sdf(ph.xyy),
 sdf(p+h.yxy)-sdf(ph.yxy)、
 sdf(p+h.yyx)-sdf(ph.yyx)));
}

void main(){
 ...
 if(深さ<終了){
  vec3 pos=目+深さ*光線;
  vec3 正規分布 = calcNormal(pos);
  色=通常;
 }
 ...
} 

均一な float uVelocityBox;

mat4回転行列(vec3軸、float角度){
 軸を正規化します。
 s = sin（角度）を浮動小数点数化します。
 フロート c=cos(角度);
 フロート oc=1.-c;
 
 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 回転(vec3 v,vec3 軸,float 角度){
 mat4 m=回転行列(軸、角度);
 戻り値: m*vec4(v,1.)).xyz;
}

浮動小数点数sdf(vec3 p){
 vec3 p1 = rotate(p、vec3(1.)、uTime*uVelocityBox);
 フロートボックス=sdBox(p1,vec3(.3));
 返品ボックス;
} 

ユニフォームフロート uProgress;

フロートsmin(フロートa、フロートb、フロートk)
{
 フロートh=クランプ(.5+.5*(ba)/k,0.,1.);
 mix(b,a,h)-k*h*(1.-h) を返します。
}

浮動小数点数sdf(vec3 p){
 vec3 p1 = rotate(p、vec3(1.)、uTime*uVelocityBox);
 フロートボックス=sdBox(p1,vec3(.3));
 浮動小数点球=sdSphere(p,.3);
 float sBox=smin(ボックス、球、.3);
 float mixedBox=mix(sBox,box,uProgress);
 混合ボックスを返します。
}

均一な float uAngle;
均一な float uDistance;
均一な float uVelocitySphere;

定数浮動小数点数 PI=3.14159265359;

float movingSphere(vec3 p, float shape){
 浮動小数点rad=uAngle*PI;
 vec3 pos=vec3(cos(rad),sin(rad),0.)*u距離;
 vec3 変位 = pos*fract(uTime*uVelocitySphere);
 フロート gotoCenter=sdSphere(p-変位,.1);
 smin(shape,gotoCenter,.3) を返します。
}

浮動小数点数sdf(vec3 p){
 vec3 p1 = rotate(p、vec3(1.)、uTime*uVelocityBox);
 フロートボックス=sdBox(p1,vec3(.3));
 浮動小数点球=sdSphere(p,.3);
 float sBox=smin(ボックス、球、.3);
 float mixedBox=mix(sBox,box,uProgress);
 混合ボックス = movingSphere(p, 混合ボックス);
 混合ボックスを返します。
} 

均一サンプラー2D uTexture;

vec2 matcap(vec3 eye,vec3 normal){
 vec3 反射 = reflect(eye,normal);
 浮動小数点数 m=2.8284271247461903*sqrt(reflected.z+1.);
 reflected.xy/m+.5 を返します。
}

float fresnel(float バイアス、float スケール、float パワー、vec3 I、vec3 N)
{
 バイアス+スケール*pow(1.+dot(I,N),power)を返します。
}

void main(){
 ...
 if(深さ<終了){
  vec3 pos=目+深さ*光線;
  vec3 正規分布 = calcNormal(pos);
  vec2 matcapUv = matcap(ray,normal);
  色=texture2D(uTexture,matcapUv).rgb;
  float F=fresnel(0.,.4,3.2,ray,normal);
  色=ミックス(色、背景、F);
 }
 ...
}