Three.js-Beispielcode zur Implementierung des Tautropfen-Animationseffekts

Klasse RayMarching erweitert Base {
 Konstruktor(sel: string, debug: boolean) {
 super(sel, debug);
 diese.Uhr = neue DREI.Uhr();
 diese.Kameraposition = neuer THREE.Vector3(0, 0, 0);
 diese.orthographicCameraParams = {
  links: -1,
  rechts: 1,
  oben: 1,
  unten: -1,
  in der Nähe von: 0,
  weit: 1,
  Zoom: 1
 };
 }
 // Initialisierung init() {
 dies.createScene();
 dies.createOrthographicCamera();
 dies.createRenderer();
 dies.createRayMarchingMaterial();
 dies.createPlane();
 dies.createLight();
 dies.trackMousePos();
 dies.addListeners();
 dies.setLoop();
 }
 // Erstelle ein Flugzeug createPlane() {
 const Geometrie = neue THREE.PlaneBufferGeometry(2, 2, 100, 100);
 const material = this.rayMarchingMaterial;
 dies.createMesh({
  Geometrie,
  Material
 });
 }
} 

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

Klasse RayMarching erweitert Base {
 // Erstelle ein Raytracing-Material createRayMarchingMaterial() {
 const loader = neues THREE.TextureLoader();
 const texture = loader.load(matcapTextureUrl);
 const rayMarchingMaterial = neues THREE.ShaderMaterial({
  vertexShader: rayMarchingVertexShader,
  fragmentShader: rayMarchingFragmentShader,
  Seite: DREI.Doppelseite,
  Uniformen:
  uZeit: {
   Wert: 0
  },
  uMaus: {
   Wert: neuer THREE.Vector2(0, 0)
  },
  uAuflösung:
   Wert: neuer THREE.Vector2(window.innerWidth, window.innerHeight)
  },
  uTextur: {
   Wert: Textur
  },
  uFortschritt:
   Wert: 1
  },
  uVelocityBox: {
   Wert: 0,25
  },
  uVelocitySphere: {
   Wert: 0,5
  },
  uWinkel:
   Wert: 1,5
  },
  uEntfernung:
   Wert: 1,2
  }
  }
 });
 dies.rayMarchingMaterial = rayMarchingMaterial;
 }
}

variierender Veränderlicher Vektor 2 vUv;

vec3 Hintergrund(vec2 uv){
 float dist = Länge(uv-vec2(.5));
 vec3 bg = mix(vec3(.3),vec3(.0),verteilt);
 Rückkehr bg;
}

void main(){
 vec3 bg = Hintergrund(vUv);
 vec3 Farbe=Hintergrund;
 gl_FragColor = vec4(Farbe,1.);
} 

float sdSphere(vec3 p,float r)
{
 Rückgabelänge (p)-r;
}

Float sdBox(vec3 p, vec3 b)
{
 vec3 q=abs(p)-b;
 Rückgabelänge (max(q,0.))+min(max(qx,max(qy,qz)),0.);
}

Gleitkommazahl sdf(vec3 p){
 float-box=sdBox(p,vec3(.3));
 Rücksendekarton;
}

Konstante Float EPSILON = .0001;

float rayMarch(vec3 Auge,vec3 Strahl,float Ende,int maxIter){
 Schwimmertiefe=0.;
 für(int i=0;i<maxIter;i++){
  vec3 pos=Auge+Tiefe*Strahl;
  Float dist = sdf (pos);
  Tiefe+=Abstand;
  wenn(dist<EPSILON||dist>=Ende){
   brechen;
  }
 }
 Rücklauftiefe;
}

void main(){
 ...
 vec3 Auge = vec3(0.,0.,2.5);
 vec3 Strahl = normalisieren(vec3(vUv,-eye.z));
 Gleitkommazahl Ende=5.;
 int maxIter=256;
 Float-Tiefe = RayMarch (Auge, Strahl, Ende, MaxIter);
 wenn(Tiefe<Ende){
  vec3 pos=Auge+Tiefe*Strahl;
  Farbe=pos;
 }
 ...
} 

vec2 centerUv(vec2 uv){
 uv=2.*uv-1.;
 Float-Aspekt = uResolution.x/uResolution.y;
 uv.x*=Aspekt;
 UV zurückgeben;
}

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

vec3 calcNormal(in vec3 p)
{
 Konstanten-Float eps = .0001;
 const vec2 h = vec2(eps,0);
 returniere normalisieren(vec3(sdf(p+h.xyy)-sdf(ph.xyy),
 sdf(p+h.yxy)-sdf(ph.yxy),
 sdf(p+h.yyx)-sdf(ph.yyx)));
}

void main(){
 ...
 wenn(Tiefe<Ende){
  vec3 pos=Auge+Tiefe*Strahl;
  vec3 normal = calcNormal(pos);
  Farbe=normal;
 }
 ...
} 

einheitlicher Float uVelocityBox;

mat4 rotationMatrix(vec3 Achse,Float Winkel){
 Achse=normalisieren(Achse);
 float s=sin(Winkel);
 float c=cos(Winkel);
 Gleitkommazahl oc=1.-c;
 
 returniere mat4(oc*Achse.x*Achse.x+c,oc*Achse.x*Achse.y-Achse.z*s,oc*Achse.z*Achse.x+Achse.y*s,0.,
  oc*Achse.x*Achse.y+Achse.z*s,oc*Achse.y*Achse.y+c,oc*Achse.y*Achse.z-Achse.x*s,0.,
  oc*Achse.z*Achse.x-Achse.y*s,oc*Achse.y*Achse.z+Achse.x*s,oc*Achse.z*Achse.z+c,0.,
 0.,0.,0.,1.);
}

vec3 drehen(vec3 v,vec3 Achse,Float-Winkel){
 mat4 m=RotationsMatrix(Achse,Winkel);
 Rückgabewert(m*vec4(v,1.)).xyz;
}

Gleitkommazahl sdf(vec3 p){
 vec3 p1=rotieren(p,vec3(1.),uTime*uVelocityBox);
 float-Box=sdBox(p1,vec3(.3));
 Rücksendebox;
} 

einheitlicher Float uProgress;

Gleitkommazahl smin(Gleitkommazahl a,Gleitkommazahl b,Gleitkommazahl k)
{
 Gleitkommazahl h=Klemme(.5+.5*(ba)/k,0.,1.);
 Rückgabemix(b,a,h)-k*h*(1.-h);
}

Gleitkommazahl sdf(vec3 p){
 vec3 p1=rotieren(p,vec3(1.),uTime*uVelocityBox);
 float-Box=sdBox(p1,vec3(.3));
 Gleitkomma-Kugel = sdKugel (p,.3);
 Gleitkomma sBox = smin (Box, Kugel, .3);
 float mixedBox=mix(sBox,box,uProgress);
 gebe gemischteBox zurück;
}

gleichmäßiger Gleitkommawert uWinkel;
gleichmäßiger Gleitkommawert uDistance;
gleichmäßiger Gleitkommawert uVelocitySphere;

Konstante Gleitkommazahl PI = 3,14159265359;

float movingSphere(vec3 p, float Form){
 float rad=uWinkel*PI;
 vec3 pos=vec3(cos(rad),sin(rad),0.)*uAbstand;
 vec3 Verschiebung = Position * Bruch (uZeit * uVelocitySphere);
 float gotoCenter=sdSphere(p-Verschiebung,.1);
 gibt smin zurück (Form, gehe zu Mittelpunkt, .3);
}

Gleitkommazahl sdf(vec3 p){
 vec3 p1=rotieren(p,vec3(1.),uTime*uVelocityBox);
 float-Box=sdBox(p1,vec3(.3));
 Gleitkomma-Kugel = sdKugel (p,.3);
 Gleitkomma sBox = smin (Box, Kugel, .3);
 float mixedBox=mix(sBox,box,uProgress);
 gemischteBox = beweglicheKugel(p, gemischteBox);
 gebe mixedBox zurück;
} 

einheitlicher Sampler2D uTexture;

vec2 matcap(vec3 Auge,vec3 normal){
 vec3 reflektiert = reflektieren (Auge, normal);
 float m=2.8284271247461903*sqrt(reflektiert.z+1.);
 gebe reflektiertes xy/m+.5 zurück;
}

Float Fresnel (Float-Bias, Float-Skala, Float-Leistung, vec3 I, vec3 N)
{
 Rendite-Bias + Maßstab * pow (1. + Punkt (I, N), Leistung);
}

void main(){
 ...
 wenn(Tiefe<Ende){
  vec3 pos=Auge+Tiefe*Strahl;
  vec3 normal = calcNormal(pos);
  vec2 matcapUv=matcap(Strahl,normal);
  Farbe=Textur2D(uTexture,matcapUv).rgb;
  Gleitkomma F=fresnel(0.,.4,3.2,Strahl,normal);
  Farbe=Mix(Farbe,Hintergrund,F);
 }
 ...
}