Interactive Textual content Destruction with Three.js, WebGPU, and TSL

When Flash was taken from us all these years in the past, it felt like dropping a artistic dwelling — all of a sudden, there have been no instruments left for constructing really interactive experiences on the internet. As a substitute, the online flattened right into a static world of HTML and CSS.

However these days are lastly behind us. We’re choosing up the place we left off practically twenty years in the past, and the online is alive once more with wealthy, immersive experiences — thanks largely to highly effective instruments like Three.js.

I’ve been working with photos, video, and interactive initiatives for 15 years, utilizing issues like Processing, p5.js, OpenFrameworks, and TouchDesigner. Final yr, I added Three.js to the combo as a artistic instrument, and I’ve been loving the educational course of. That ongoing exploration results in little experiments just like the one I’m sharing on this tutorial.

Venture Construction

The construction of our script goes to be easy: one operate to preload property, and one other one to construct the scene.

Since we’ll be working with 3D textual content, the very first thing we have to do is load a font in .json format — the sort that works with Three.js.

To transform a .ttf font into that format, you need to use the Facetype.js instrument, which generates a .typeface.json file.

const Assets = {
	font: null
};

operate preload() {

	const _font_loader = new FontLoader();
	_font_loader.load( "../static/font/Instances New Roman_Regular.json", ( font ) => {

		Assets.font = font;
		init();

	} );

}

operate init() {

}

window.onload = preload;

Scene setup & Setting

A basic Three.js scene — the one factor to bear in mind is that we’re working with Three Shader Language (TSL), which suggests our renderer must be a WebGPURenderer.

const scene = new THREE.Scene();
const digicam = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGPURenderer({ antialias: true });

doc.physique.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);
digicam.place.z = 5;

scene.add(digicam);

Subsequent, we’ll arrange the scene setting to get some lighting going.

To maintain issues easy and keep away from loading extra property, we’ll use the default RoomEnvironment that “comes” with Three.js. We’ll additionally add a DirectionalLight to the scene.

const setting = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.setting = pmremGenerator.fromSceneAsync(setting).texture;

scene.environmentIntensity = 0.8;

const   gentle = new THREE.DirectionalLight("#e7e2ca",5);
gentle.place.x = 0.0;
gentle.place.y = 1.2;
gentle.place.z = 3.86;

scene.add(gentle);

TextGeometry

We’ll use TextGeometry, which lets us create 3D textual content in Three.js.

It makes use of a JSON font file (which we loaded earlier with FontLoader) and is configured with parameters like dimension, depth, and letter spacing.

const text_geo = new TextGeometry("NUEVOS",{
    font:Assets.font,
    dimension:1.0,
    depth:0.2,
    bevelEnabled: true,
    bevelThickness: 0.1,
    bevelSize: 0.01,
    bevelOffset: 0,
    bevelSegments: 1
}); 

const mesh = new THREE.Mesh(
    text_geo,
    new THREE.MeshStandardMaterial({ 
        coloration: "#656565",
        metalness: 0.4, 
        roughness: 0.3
    })
);

scene.add(mesh);

By default, the origin of the textual content sits at (0, 0), however we would like it centered.
To do this, we have to compute its BoundingBox and manually apply a translation to the geometry:

text_geo.computeBoundingBox();
const centerOffset = - 0.5 * ( text_geo.boundingBox.max.x - text_geo.boundingBox.min.x );
const centerOffsety = - 0.5 * ( text_geo.boundingBox.max.y - text_geo.boundingBox.min.y );
text_geo.translate( centerOffset, centerOffsety, 0 );

Now that we’ve got the mesh and materials prepared, we are able to transfer on to the operate that lets us blow all the pieces up 💥

Three Shader Language

I actually love TSL — it’s closed the hole between concepts and execution, in a context that’s not at all times the friendliest… shaders.

The impact we’re going to implement deforms the geometry’s vertices primarily based on the pointer’s place, and makes use of spring physics to animate these deformations in a dynamic manner.

However earlier than we get to that, let’s seize a couple of attributes we’ll must make all the pieces work correctly:

//  Unique place of every vertex — we’ll use it as a reference
//  so unaffected vertices can "return" to their authentic spot
const initial_position = storage( text_geo.attributes.place, "vec3", rely );

//  Regular of every vertex — we’ll use this to know which path to "push" in
const normal_at = storage( text_geo.attributes.regular, "vec3", rely );

//  Variety of vertices within the geometry
const rely = text_geo.attributes.place.rely;

Subsequent, we’ll create a storage buffer to carry the simulation information — and we’ll additionally write a operate.
However not an everyday JavaScript operate — this one’s a compute operate, written within the context of TSL.

It runs on the GPU and we’ll use it to arrange the preliminary values for our buffers, getting all the pieces prepared for the simulation.

// On this buffer we’ll retailer the modified positions of every vertex —
// in different phrases, their present state within the simulation.
const   position_storage_at = storage(new THREE.StorageBufferAttribute(rely,3),"vec3",rely);   

const compute_init = Fn( ()=>{

	position_storage_at.aspect( instanceIndex ).assign( initial_position.aspect( instanceIndex ) );

} )().compute( rely );

// Run the operate on the GPU. This runs compute_init as soon as per vertex.
renderer.computeAsync( compute_init );

Now we’re going to create one other one among these capabilities — however not like the earlier one, this one will run contained in the animation loop, because it’s answerable for updating the simulation on each body.

This operate runs on the GPU and must obtain values from the surface — just like the pointer place, for instance.

To ship that type of information to the GPU, we use what’s referred to as uniforms. They work like bridges between our “common” code and the code that runs contained in the GPU shader.

They’re outlined like this:

const u_input_pos = uniform(new THREE.Vector3(0,0,0));
const u_input_pos_press = uniform(0.0);

With this, we are able to calculate the gap between the pointer place and every vertex of the geometry.

Then we clamp that worth so the deformation solely impacts vertices inside a sure radius.
To do this, we use the step operate — it acts like a threshold, and lets us apply the impact solely when the gap is beneath an outlined worth.

Lastly, we use the vertex regular as a path to push it outward.

const compute_update = Fn(() => {

    // Unique place of the vertex — additionally its resting place
    const base_position = initial_position.aspect(instanceIndex);

    // The vertex regular tells us which path to push
    const regular = normal_at.aspect(instanceIndex);

    // Present place of the vertex — we’ll replace this each body
    const current_position = position_storage_at.aspect(instanceIndex);

    // Calculate distance between the pointer and the bottom place of the vertex
    const distance = size(u_input_pos.sub(base_position));

    // Restrict the impact's vary: it solely applies if distance is lower than 0.5
    const pointer_influence = step(distance, 0.5).mul(1.0);

    // Compute the brand new displaced place alongside the conventional.
    // The place pointer_influence is 0, there’ll be no deformation.
    const disorted_pos = base_position.add(regular.mul(pointer_influence));

    // Assign the brand new place to replace the vertex
    current_position.assign(disorted_pos);

})().compute(rely);

To make this work, we’re lacking two key steps: we have to assign the buffer with the modified positions to the fabric, and we’d like to ensure the renderer runs the compute operate on each body contained in the animation loop.

// Assign the buffer with the modified positions to the fabric
mesh.materials.positionNode = position_storage_at.toAttribute();

// Animation loop
operate animate() {
	// Run the compute operate
	renderer.computeAsync(compute_update_0);

	// Render the scene
	renderer.renderAsync(scene, digicam);
}

Proper now the operate doesn’t produce something too thrilling — the geometry strikes round in a kinda clunky manner. We’re about to usher in springs, and issues will get a lot better.

// Spring — how a lot drive we apply to achieve the goal worth
velocity += (target_value - current_value) * spring;

// Friction controls the damping, so the motion doesn’t oscillate endlessly
velocity *= friction;

current_value += velocity;

However earlier than that, we have to retailer another worth per vertex, the speed, so let’s create one other storage buffer.

const position_storage_at = storage(new THREE.StorageBufferAttribute(rely, 3), "vec3", rely);

// New buffer for velocity
const velocity_storage_at = storage(new THREE.StorageBufferAttribute(rely, 3), "vec3", rely);

const compute_init = Fn(() => {

    position_storage_at.aspect(instanceIndex).assign(initial_position.aspect(instanceIndex));
    
    // We initialize it too
    velocity_storage_at.aspect(instanceIndex).assign(vec3(0.0, 0.0, 0.0));

})().compute(rely);

We’ll additionally add two uniforms: spring and friction.

const u_spring = uniform(0.05);
const u_friction = uniform(0.9);

Now we’ve applied the springs within the replace:

const compute_update = Fn(() => {

    const base_position = initial_position.aspect(instanceIndex);
    const current_position = position_storage_at.aspect(instanceIndex);

    // Get present velocity
    const current_velocity = velocity_storage_at.aspect(instanceIndex);

    const regular = normal_at.aspect(instanceIndex);

    const   distance =  size(u_input_pos.sub(base_position));
    const   pointer_influence = step(distance,0.5).mul(1.5);

    const disorted_pos = base_position.add(regular.mul(pointer_influence));
    disorted_pos.assign((combine(base_position, disorted_pos, u_input_pos_press)));
  
    // Spring implementation
    // velocity += (target_value - current_value) * spring;
    current_velocity.addAssign(disorted_pos.sub(current_position).mul(u_spring));
    // velocity *= friction;
    current_velocity.assign(current_velocity.mul(u_friction));
    // worth += velocity
    current_position.addAssign(current_velocity);


})().compute(rely);

Now we’ve received all the pieces we’d like — time to begin fine-tuning.

We’re going so as to add two issues. First, we’ll use the TSL operate mx_noise_vec3 to generate some noise for every vertex. That manner, we are able to tweak the path a bit so issues don’t really feel so stiff.

We’re additionally going to rotate the vertices utilizing one other TSL operate — shock, it’s referred to as rotate.

Right here’s what our up to date compute_update operate seems like:

const compute_update = Fn(() => {

    const base_position = initial_position.aspect(instanceIndex);
    const current_position = position_storage_at.aspect(instanceIndex);
    const current_velocity = velocity_storage_at.aspect(instanceIndex);

    const regular = normal_at.aspect(instanceIndex);

    // NEW: Add noise so the path by which the vertices "explode" isn’t too completely aligned with the conventional
    const noise = mx_noise_vec3(current_position.mul(0.5).add(vec3(0.0, time, 0.0)), 1.0).mul(u_noise_amp);

    const distance = size(u_input_pos.sub(base_position));
    const pointer_influence = step(distance, 0.5).mul(1.5);

    const disorted_pos = base_position.add(noise.mul(regular.mul(pointer_influence)));

    // NEW: Rotate the vertices to offer the animation a extra chaotic really feel
    disorted_pos.assign(rotate(disorted_pos, vec3(regular.mul(distance)).mul(pointer_influence)));

    disorted_pos.assign(combine(base_position, disorted_pos, u_input_pos_press));

    current_velocity.addAssign(disorted_pos.sub(current_position).mul(u_spring));
    current_position.addAssign(current_velocity);
    current_velocity.assign(current_velocity.mul(u_friction));

})().compute(rely);

Now that the movement feels proper, it’s time to tweak the fabric colours a bit and add some post-processing to the scene.

We’re going to work on the emissive coloration — which means it gained’t be affected by lights, and it’ll at all times look brilliant and explosive. Particularly as soon as we throw some bloom on high. (Sure, bloom all the pieces.)

We’ll begin from a base coloration (whichever you want), handed in as a uniform. To verify every vertex will get a barely totally different coloration, we’ll offset its hue a bit utilizing values from the buffers — on this case, the speed buffer.

The hue operate takes a coloration and a price to shift its hue, type of like how offsetHSL works in THREE.Colour.

// Base emissive coloration
const emissive_color = coloration(new THREE.Colour("0000ff"));

const vel_at = velocity_storage_at.toAttribute();
const hue_rotated = vel_at.mul(Math.PI*10.0);

// Multiply by the size of the speed buffer — this implies the extra motion,
// the extra the vertex coloration will shift
const emission_factor = size(vel_at).mul(10.0);

// Assign the colour to the emissive node and enhance it as a lot as you need
mesh.materials.emissiveNode = hue(emissive_color, hue_rotated).mul(emission_factor).mul(5.0);

Lastly! Lets change scene background coloration and add Fog:

scene.fog = new THREE.Fog(new THREE.Colour("#41444c"),0.0,8.5);
scene.background = scene.fog.coloration;

Now, let’s boost the scene with a little bit of post-processing — a type of issues that received manner simpler to implement because of TSL.

We’re going to incorporate three results: ambient occlusion, bloom, and noise. I at all times like including some noise to what I do — it helps break up the flatness of the pixels a bit.

I gained’t go too deep into this half — I grabbed the AO setup from the Three.js examples.

const   composer = new THREE.PostProcessing(renderer);
const   scene_pass = move(scene,digicam);

scene_pass.setMRT(mrt({
    output:output,
    regular:normalView
}));

const   scene_color = scene_pass.getTextureNode("output");
const   scene_depth = scene_pass.getTextureNode("depth");
const   scene_normal = scene_pass.getTextureNode("regular");

const ao_pass = ao( scene_depth, scene_normal, digicam);
ao_pass.resolutionScale = 1.0;

const   ao_denoise = denoise(ao_pass.getTextureNode(), scene_depth, scene_normal, digicam ).mul(scene_color);
const   bloom_pass = bloom(ao_denoise,0.3,0.2,0.1);
const   post_noise = (mx_noise_float(vec3(uv(),time.mul(0.1)).mul(sizes.width),0.03)).mul(1.0);

composer.outputNode = ao_denoise.add(bloom_pass).add(post_noise);

Alright, that’s it amigas — thanks a lot for studying, and I hope it was helpful!