Implementing a Dissolve Impact with Shaders and Particles in Three.js

I received the preliminary concept of constructing this dissolve impact from a sport that I used to be taking part in. In it zombies dissolve into skinny air upon defeat. Since I used to be already experimenting with Three.js shaders and particles I considered recreating one thing comparable.

On this tutorial, I’ll stroll you thru the method of making this cool dissolve impact, offering code snippets wherever vital highlighting the important thing elements. Additionally every step is linked to a selected commit, so you possibly can try the corresponding decide to view and run the venture at that stage.

Right here’s a short overview of the key elements that we’ll be going via

1. We’ll begin by organising the Surroundings and Lighting deciding on what sort of lighting and materials we would like, protecting in thoughts how the growth impact could alter it.
2. Subsequent we’ll work on crafting the Dissolve Impact the place, we’ll modify the already current materials by injecting our personal shader snippets
3. After that we’ll create our Particle System in order that we will have particles emitted from the sting of dissolving mesh.
4. Lastly we’ll apply Selective Unreal Bloom impact over our mesh, making the perimeters and particles glow as they dissolve.

Establishing the Surroundings

Deciding on the fabric and lighting setup

When organising the atmosphere for our impact, we have to think about the kind of materials and lighting we wish to create. Particularly, we might be working with a cloth the place one half glows whereas the opposite elements replicate the environment. To attain this, we’ll apply the bloom impact to this particular materials. Nonetheless, if there are intense reflections on the non-glowing elements, they might trigger undesirable brightness.

Since a number of atmosphere lighting choices can be found, we have to select the one which most closely fits our impact whereas contemplating how bloom would possibly affect the fabric.

HDRI or CubeMaps?

The depth of HDRI lighting may cause extreme reflections when the bloom impact is utilized to the mesh, leading to an uncontrolled look. In distinction, CubeMaps simulate environmental lighting and floor reflections with out introducing direct brilliant gentle sources. They permit for the seize of surrounding particulars with out intense illumination, making CubeMaps perfect for making use of bloom with out creating overexposed highlights.

Creating Dissolve Impact

Perlin Noise

To create our dissolve sample, we’ll use Perlin noise. Not like commonplace noise algorithms that generate utterly random values, Perlin noise produces steady output, creating natural-looking transitions.

float perlinNoise2D(vec3 p) is a noise perform that takes a 3D vector (vec3 p) as enter and returns a noise worth as a floating-point quantity b/w vary of -1, 1 roughly.

How Amplitude and Frequency impacts the noise output

float perlinNoise2D(vec3 p * frequency) * amplitude; 

1. Amplitude: Controls the depth of the noise impact, figuring out how excessive or low the noise output could be. For instance, if the noise perform outputs values roughly within the vary [-1,1] and also you set the amplitude to 10, the output will then vary roughly between [-10,10].
2. Frequency: The upper the frequency, the extra detailed the noise sample turns into.

In our case, we solely have to deal with frequency to regulate the extent of element within the dissolve sample.

Utilizing Perlin noise to information the dissolve impact

We are able to now generate a noise worth for every fragment or pixel of our object. Based mostly on these values, we’ll decide which parts ought to dissolve. This course of entails addressing three key facets:

1. Which portion of the item ought to dissolve.
2. Which portion needs to be thought of the sting.
3. How a lot of the item ought to stay unchanged, retaining its unique materials shade.

Decide which portion to dissolve

To attain this, we will create a uniform uProgress, which is able to function a threshold for every pixel or fragment. If, at a given pixel or fragment, noiseValue < uProgress, we merely discard it. It’s essential to take into account that the vary of uProgress needs to be barely larger than the noise output vary. This ensures that we will utterly dissolve the item or totally reverse the dissolve impact.

Outline the sting portion of the item

Subsequent, let’s think about the perimeters. We are able to introduce one other uniform, uEdge, to regulate the width of the sting. For any given fragment, if its corresponding noise worth lies between uProgress and uProgress + uEdge, we’ll fill that pixel with the sting shade.

So the situation turns into: if (noise > uProgress && noise < uProgress + uEdge)

If neither of the above two situations is met, the fabric will stay unchanged, retaining its unique shade.

shader.fragmentShader = shader.fragmentShader.substitute('#embrace <dithering_fragment>', `#embrace <dithering_fragment>        
    float noise = cnoise(vPos * uFreq) * uAmp; // calculate cnoise in fragment shader for clean dissolve edges
    
    if(noise < uProgress) discard; // discard any fragment the place noise is decrease than progress
    
    float edgeWidth = uProgress + uEdge;
    if(noise > uProgress && noise < edgeWidth){
        gl_FragColor = vec4(vec3(uEdgeColor),noise); // colours the sting
    }
    
    gl_FragColor = vec4(gl_FragColor.xyz,1.0);
    
`);

Particle system

We are going to create a factors object to show particles utilizing the identical geometry from our earlier mesh. To attain advantageous management over every particle’s look and motion, we first have to arrange a fundamental shader materials.

Creating ShaderMaterial for particles

For the fragment shader, set fragColor to white.

For the vertex shader, we have to alter the particle dimension primarily based on the digital camera distance:

1. Use modelViewMatrix to remodel the place vector into viewPosition, representing the particle’s place relative to the digital camera (with the digital camera because the origin).
2. Set gl_PointSize = uBaseSize / -viewPosition.z, making the particle dimension inversely proportional to its z-axis distance, the place uBaseSize controls the bottom particle dimension.

Conserving particles on the perimeters and discarding the remaining

We are going to observe our earlier shader technique with some modifications. The noise calculation might be moved to the vertex shader and handed to the fragment shader as a various. To take care of constant dissolve patterns, we’ll use the identical uniforms and parameters (amplitude, frequency, edge width, and progress) from our earlier shader.

Particle discard situations:

1. Noise worth < uProgress
2. Noise worth > uProgress + uEdge

particleMat.fragmentShader = `
uniform vec3 uColor;
uniform float uEdge;
uniform float uProgress;

various float vNoise;
 
 void essential(){
    if( vNoise < uProgress ) discard;
    if( vNoise > uProgress + uEdge) discard;

    gl_FragColor = vec4(uColor,1.0);
 }
 `;

How do particle methods truly work?

Every particle usually has a number of properties related to it, corresponding to lifespan, velocity, shade, and dimension. Throughout every iteration of the sport loop or animation loop, we iterate over all of the particles, replace these properties, and render them on the display. That’s primarily how a particle system works.

Three.js implements particles by binding them to geometries (corresponding to buffer geometries or sphere geometries). These geometries comprise attributes just like particle properties, which could be modified in JavaScript and accessed through shaders. By default, any given geometry contains fundamental attributes like place and regular.

Giving velocity to particles and making them transfer

Now, let’s deal with a number of key attributes and see how they alter over time, constructing on the overall workings of a particle system that we simply mentioned.

To make our particles transfer, we want two issues: place and velocity. Then, we will merely replace the place utilizing the formulation: new_position = place + velocity.

Defining the attributes: To attain this, we will create 4 new attributes: currentPosition, initPosition, velocity, and maxOffset.

• maxOffset: The utmost distance a particle can journey earlier than resetting to its preliminary place.
• currentPosition & initPosition: Copies of the place attribute. We are going to replace currentPosition and use it within the shader to change the particle’s place, whereas initPosition might be used to reset the place when wanted.
• velocity: Added to currentPosition in every iteration to replace its place over time.

Then, we will create the next three capabilities:

1. initializeAttributes() – Runs as soon as. Declares the attribute arrays, loops over them, and initializes their values.
2. updateAttributes() – Known as on every sport loop iteration to replace the prevailing attributes.
3. setAttributes() – Attaches the attributes to the geometry. This perform might be known as on the finish of the earlier two capabilities.

// declare attributes 
let particleCount = meshGeo.attributes.place.depend;
let particleMaxOffsetArr: Float32Array; // how far a particle can go from its preliminary place
let particleInitPosArr: Float32Array; // retailer the preliminary place of the particles
let particleCurrPosArr: Float32Array; // used to replace the place of the particle
let particleVelocityArr: Float32Array; // velocity of every particle
let particleSpeedFactor = 0.02; // for tweaking velocity

perform initParticleAttributes() {
    particleMaxOffsetArr = new Float32Array(particleCount);
    particleInitPosArr = new Float32Array(meshGeo.getAttribute('place').array);
    particleCurrPosArr = new Float32Array(meshGeo.getAttribute('place').array);
    particleVelocityArr = new Float32Array(particleCount * 3);

    for (let i = 0; i < particleCount; i++) {
        let x = i * 3 + 0;
        let y = i * 3 + 1;
        let z = i * 3 + 2;

        particleMaxOffsetArr[i] = Math.random() * 1.5 + 0.2;

        particleVelocityArr[x] = 0;
        particleVelocityArr[y] = Math.random() + 0.01;
        particleVelocityArr[z] = 0;
    }

    // Set preliminary particle attributes
    setParticleAttributes();
}

perform updateParticleAttributes() {
    for (let i = 0; i < particleCount; i++) {
        let x = i * 3 + 0;
        let y = i * 3 + 1;
        let z = i * 3 + 2;

        particleCurrPosArr[x] += particleVelocityArr[x] * particleSpeedFactor;
        particleCurrPosArr[y] += particleVelocityArr[y] * particleSpeedFactor;
        particleCurrPosArr[z] += particleVelocityArr[z] * particleSpeedFactor;

        const vec1 = new THREE.Vector3(particleInitPosArr[x], particleInitPosArr[y], particleInitPosArr[z]);
        const vec2 = new THREE.Vector3(particleCurrPosArr[x], particleCurrPosArr[y], particleCurrPosArr[z]);
        const dist = vec1.distanceTo(vec2);

        if (dist > particleMaxOffsetArr[i]) {
            particleCurrPosArr[x] = particleInitPosArr[x];
            particleCurrPosArr[y] = particleInitPosArr[y];
            particleCurrPosArr[z] = particleInitPosArr[z];
        }
    }

    // set particle attributes after modifications
    setParticleAttributes();
}

initParticleAttributes();

animationLoop(){
  updateParticleAttributes()
}

Making a wave-like movement for the particles

To create wave-like movement for the particles, we will use a sine wave perform: y=sin(x⋅freq+time)⋅amplitude

This may generate a wave sample parallel to the x-axis, the place Amplitude controls how excessive or low the wave strikes, and Frequency determines how usually the oscillations happen. The time worth causes the wave to maneuver.

To use a wavy movement to our particle motion, we will use the particle place as enter to the sine perform and create a wave offset that we will add to their velocity.

• waveX = sin(pos_y) * amplitude
• waveY = sin(pos_x) * amplitude

We are able to create a perform to calculate the wave offset for the specified axis and apply it to the particle’s velocity. By combining a number of sine waves, we will generate a extra pure and dynamic movement for the particles.

perform calculateWaveOffset(idx: quantity) {
    const posx = particleCurrPosArr[idx * 3 + 0];
    const posy = particleCurrPosArr[idx * 3 + 1];

    let xwave1 = Math.sin(posy * 2) * (0.8 + particleData.waveAmplitude);
    let ywave1 = Math.sin(posx * 2) * (0.6 + particleData.waveAmplitude);

    let xwave2 = Math.sin(posy * 5) * (0.2 + particleData.waveAmplitude);
    let ywave2 = Math.sin(posx * 1) * (0.9 + particleData.waveAmplitude);

    return { xwave: xwave1+xwave2, ywave: ywave1+ywave2 }
}

// inside replace attribute perform
let vx = particleVelocityArr[idx * 3 + 0];
let vy = particleVelocityArr[idx * 3 + 1];

let { xwave, ywave } = calculateWaveOffset(idx);

vx += xwave;
vy += ywave;

Including distant-scaling, texture and rotation

So as to add extra variation to the particles, we will make them scale down in dimension as their distance from the preliminary place will increase. By calculating the space between the preliminary and present positions, we will use this worth to create a brand new attribute for every particle.

let particleDistArr: Float32Array; // declare a dist array

// contained in the initialiseAttributes() perform
particleDistArr[i] = 0.001;

// contained in the updateAttributes() perform
const vec2 = new THREE.Vector3(particleCurrPosArr[x], particleCurrPosArr[y], particleCurrPosArr[z]);
const dist = vec1.distanceTo(vec2);
particleDistArr[i] = dist;

// contained in the particle vertex shader 
particleMat.vertexShader = `
...
    float dimension = uBaseSize * uPixelDensity;
    dimension = dimension  / (aDist + 1.0);
    gl_PointSize = dimension / -viewPosition.z;
... 
`

Now, let’s speak about rotation and texture. To attain this, we create an angle attribute that holds a random rotation worth for every particle. First, initialize the angleArray contained in the initializeAttributes perform utilizing: angleArr[i] = Math.random() * Math.PI * 2;. This assigns a random angle to every particle. Then, within the updateAttributes perform, we replace the angle utilizing angleArr[i] += 0.01; to increment it over time.

Subsequent, we cross the angle attribute from the vertex shader to the fragment shader, create a rotation transformation matrix, and shift gl_PointCoord from the vary [0,1] to [-0.5, 0.5]. We then apply the rotation transformation and shift it again to [0,1]. This shifting is important to set the pivot level for rotation on the heart quite than the bottom-left nook.

Moreover, don’t overlook to set the mixing mode to additive mixing and allow the transparency property by setting it to true.

particleMat.clear = true;
particleMat.mixing = THREE.AdditiveBlending;

// replace particle fragment shader 
particleMat.fragmentShader = `
uniform vec3 uColor;
uniform float uEdge;
uniform float uProgress;
uniform sampler2D uTexture;

various float vNoise;
various float vAngle;

void essential(){
    if( vNoise < uProgress ) discard;
    if( vNoise > uProgress + uEdge) discard;

    vec2 coord = gl_PointCoord;
    coord = coord - 0.5; // get the coordinate from 0-1 ot -0.5 to 0.5
    coord = coord * mat2(cos(vAngle),sin(vAngle) , -sin(vAngle), cos(vAngle)); // apply the rotation transformaion
    coord = coord +  0.5; // reset the coordinate to 0-1  

    vec4 texture = texture2D(uTexture,coord);

    gl_FragColor = vec4(uColor,1.0);
    gl_FragColor = vec4(vec3(uColor.xyz * texture.xyz),1.0);
 }
 `;

Making use of Selective Unreal Bloom

To use the bloom impact solely to the item and never the background or atmosphere, we will create two separate renders utilizing Impact Composer.

Earlier than the primary render, we set the background to black, apply the Unreal Bloom cross, and render it to an off-screen buffer.

As soon as that’s finished, we reset the background atmosphere. After that, we create a brand new render that takes the bottom texture of the scene (tDiffuse) and the bloom texture from the off-screen render, then combines them. This fashion, bloom is utilized solely to the item.

And there you have got it—a dynamic dissolve impact full with glowing particles! Be at liberty to experiment with the parameters: strive completely different noise patterns, alter the glow depth, or modify particle conduct to create your individual distinctive variations.

I hope you discovered this tutorial useful! Preserve experimenting and have enjoyable with the impact!