Three.js sample code for implementing dewdrop animation effect

Preface

Hello everyone, this is the CSS wizard - alphardex.

In this article, we will use three.js to implement a cool optical effect - falling dewdrops. We know that when dew drops fall from the surface of an object, a sticky effect is produced. In a 2D plane, this adhesion effect can actually be easily achieved using CSS filters. But in the 3D world, it is not that simple. We have to rely on lighting to achieve this, which involves a key algorithm - Ray Marching. The following is the final effect diagram

Shoot, Hajima Route!

Preparation

My three.js template: Click fork in the lower right corner to copy a copy

positive

Full screen camera

First, change the camera to an orthographic camera, and then adjust the length of the plane to 2 so that it fills the screen.

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
 };
 }
 // Initialization init() {
 this.createScene();
 this.createOrthographicCamera();
 this.createRenderer();
 this.createRayMarchingMaterial();
 this.createPlane();
 this.createLight();
 this.trackMousePos();
 this.addListeners();
 this.setLoop();
 }
 // Create a plane createPlane() {
 const geometry = new THREE.PlaneBufferGeometry(2, 2, 100, 100);
 const material = this.rayMarchingMaterial;
 this.createMesh({
  geometry,
  Material
 });
 }
}

Creating Materials

Create a shader material, which defines all the parameters to be passed to the shader

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

class RayMarching extends Base {
 // Create a ray tracing material 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;
 }
}

Vertex shader rayMarchingVertexShader , just use the ready-made template

The focus is on the fragment shader rayMarchingFragmentShader

Fragment Shader

background

As a warm-up exercise, let’s create a radiant background.

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.);
}

sdf

How to create objects in the lighting model? We need sdf.

SDF means signed distance function: if a coordinate in the function space is passed, it returns the shortest distance between that point and some plane. The sign of the return value indicates whether the point is inside or outside the plane, so it is called a signed distance function.

If we want to create a ball, we have to use the sdf of the ball to create it. The sphere equation can be expressed using the following glsl code

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

The code of the block is as follows

float sdBox(vec3 p,vec3 b)
{
 vec3 q=abs(p)-b;
 return length(max(q,0.))+min(max(qx,max(qy,qz)),0.);
}

What should I do if I don’t understand? It doesn't matter, there are already experts abroad who have sorted out the commonly used SDF formulas

Create a block in sdf first

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

The screen is still blank because our guest - light - has not yet entered.

Light Stepping

Next up is the headliner of this article – the ray stepper. Before introducing her, let’s take a look at her good friend ray tracing.

First, we need to know how ray tracing works: give the camera a position eye , put a grid in front of it, emit a beam of ray from the camera's position, pass through the grid and hit the object, and each pixel of the image corresponds to each point on the grid.

In ray marching, the entire scene is defined by a series of sdf angles. To find the boundary between the scene and the line of sight, we start from the camera's position and move each point along the ray, little by little. At each step, we determine whether the point is inside a surface of the scene. If it is, then we are done, indicating that the ray hits something. If not, then the ray continues to move forward.

In the above figure, p0 is the camera position and the blue line represents the ray. It can be seen that the first step p0p1 of the light is very large, which happens to be the shortest distance from the light to the surface at this time. Although the point on the surface is the shortest distance, it is not along the line of sight, so we need to continue detecting point p4.

There is an interactive example on shadertoy

The following is the glsl code implementation of ray marching

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;
}

Create a ray in the main function and feed it to the ray stepping algorithm to get the shortest distance from the ray to the surface.

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;
 }
 ...
}

Lured by the light steps, wild blocks appear!

Center Material

The current block has two problems: 1. It is not centered 2. It is stretched in the x-axis direction

Centering + stretching quality 2 steps

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));
 ...
}

The cube instantly floated to the center of the screen, but at this time she had no color

Calculating surface normals

In the lighting model, we need to calculate the surface normal to give the material color

vec3 calcNormal(in vec3 p)
{
 const float eps=.0001;
 const vec2 h = vec2(eps,0);
 return normalize(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(depth<end){
  vec3 pos=eye+depth*ray;
  vec3 normal = calcNormal(pos);
  color=normal;
 }
 ...
}

At this time, the cube is given a blue color, but we can't see that it is a three-dimensional figure yet.

Get moving

Let's rotate the block 360 degrees. You can find the 3D rotation function by searching on gist.

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;
}

Fusion Effect

A single cube is too lonely, create a ball to keep her company

How to make the ball and the block stick together? You need the smin function

uniform float uProgress;

float smin(float a,float b,float k)
{
 float h=clamp(.5+.5*(ba)/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;
}

Set the value of uProgress to 0, and they are successfully attached together.

Set the value of uProgress back to 1, and they separate again.

Dynamic Fusion

Next, the animation of the dewdrops falling is realized, which is actually applying a displacement transformation to the fused shape.

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;
}

matcap map

The default texture is too earthy? We have cool matcap maps to help

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);
 }
 ...
}

After arranging matcap and Fresnel formula, it instantly becomes cool, right? !

Project gallery

Ray Marching Gooey Effect

This is the end of this article about the sample code for implementing dewdrop animation effect with three.js. For more relevant content about implementing dewdrop animation with three.js, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Three.js realizes Facebook Metaverse 3D dynamic logo effect
Detailed process of drawing three-dimensional arrow lines using three.js
Use three.js to achieve cool acid style 3D page effects
How to achieve 3D dynamic text effect with three.js
Detailed explanation of the use and performance testing of multithreading in three.js
First experience of creating text with javascript Three.js

<<: Introduction to Linux File Compression and Packaging

>>: MySQL installation and configuration methods and precautions under Windows platform

Detailed explanation of VUE responsiveness principle

Three.js sample code for implementing dewdrop animation effect

Preface

Preparation

positive

Creating Materials

Fragment Shader

Light Stepping

Center Material

Calculating surface normals

Fusion Effect

Dynamic Fusion

Detailed explanation of VUE responsiveness principle

Linux uses Rsync+Inotify to achieve real-time synchronization of local and remote data

Make a nice flip login and registration interface based on html+css

Implementation of Docker to build Zookeeper&Kafka cluster

Native Js implementation of calendar widget

Teach you how to build a react+antd project from scratch

Docker installation and configuration steps for RabbitMQ

SQL injection vulnerability process example and solution

Diving into JS inheritance

Solution to the problem that the background image of a label does not display in IE8

Recommend

Docker nginx example method to deploy multiple projects

Detailed explanation of Vue configuration request multiple server solutions

A brief talk about the knowledge you need to master when getting started with Vue

Building a selenium distributed environment based on docker

VUE implements a Flappy Bird game sample code

Detailed Example of MySQL curdate() Function

React implements paging effect

VMware Workstation download and installation detailed tutorial

A Deep Dive into JavaScript Promises

js to achieve 3D carousel effect

MySQL database optimization: detailed explanation of table and database sharding operations

Detailed steps to install MYSQL8.0 on CentOS7.6

Use HTML and CSS to create your own warm man "Dabai"

Docker image import and export code examples

Steps for using the non-installed version of MySQL and solutions for forgetting the password