交互式文字爆炸效果：Three.js、WebGPU和TSL实战

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const Resources = {
    font: null
};

function preload() {
    const _font_loader = new FontLoader();
    _font_loader.load("../static/font/Times New Roman_Regular.json", (font) => {
        Resources.font = font;
        init();
    });
}

function init() {
    // 初始化场景
}

window.onload = preload;

1
2
3
4
5
6
7
8

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

document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 5;
scene.add(camera);

1
2
3
4
5
6
7
8

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.environment = pmremGenerator.fromSceneAsync(environment).texture;
scene.environmentIntensity = 0.8;

const light = new THREE.DirectionalLight("#e7e2ca", 5);
light.position.set(0.0, 1.2, 3.86);
scene.add(light);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

const text_geo = new TextGeometry("NUEVOS", {
    font: Resources.font,
    size: 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({
        color: "#656565",
        metalness: 0.4,
        roughness: 0.3
    })
);

scene.add(mesh);

1
2
3
4

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const initial_position = storage(text_geo.attributes.position, "vec3", count);
const normal_at = storage(text_geo.attributes.normal, "vec3", count);
const count = text_geo.attributes.position.count;

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

const compute_init = Fn(() => {
    position_storage_at.element(instanceIndex).assign(initial_position.element(instanceIndex));
})().compute(count);

renderer.computeAsync(compute_init);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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

const compute_update = Fn(() => {
    const base_position = initial_position.element(instanceIndex);
    const normal = normal_at.element(instanceIndex);
    const current_position = position_storage_at.element(instanceIndex);
    
    const distance = length(u_input_pos.sub(base_position));
    const pointer_influence = step(distance, 0.5).mul(1.0);
    
    const disorted_pos = base_position.add(normal.mul(pointer_influence));
    current_position.assign(disorted_pos);
})().compute(count);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const velocity_storage_at = storage(new THREE.StorageBufferAttribute(count, 3), "vec3", count);
const u_spring = uniform(0.05);
const u_friction = uniform(0.9);

const compute_update = Fn(() => {
    const base_position = initial_position.element(instanceIndex);
    const current_position = position_storage_at.element(instanceIndex);
    const current_velocity = velocity_storage_at.element(instanceIndex);
    const normal = normal_at.element(instanceIndex);
    
    const distance = length(u_input_pos.sub(base_position));
    const pointer_influence = step(distance, 0.5).mul(1.5);
    
    const disorted_pos = base_position.add(normal.mul(pointer_influence));
    disorted_pos.assign((mix(base_position, disorted_pos, u_input_pos_press)));
    
    current_velocity.addAssign(disorted_pos.sub(current_position).mul(u_spring));
    current_velocity.assign(current_velocity.mul(u_friction));
    current_position.addAssign(current_velocity);
})().compute(count);

1
2
3
4
5
6
7
8
9

const compute_update = Fn(() => {
    // ...之前的代码
    
    const noise = mx_noise_vec3(current_position.mul(0.5).add(vec3(0.0, time, 0.0)), 1.0).mul(u_noise_amp);
    const disorted_pos = base_position.add(noise.mul(normal.mul(pointer_influence)));
    disorted_pos.assign(rotate(disorted_pos, vec3(normal.mul(distance)).mul(pointer_influence)));
    
    // ...后续代码
})().compute(count);

1
2
3
4
5
6

const emissive_color = color(new THREE.Color("0000ff"));
const vel_at = velocity_storage_at.toAttribute();
const hue_rotated = vel_at.mul(Math.PI * 10.0);
const emission_factor = length(vel_at).mul(10.0);

mesh.material.emissiveNode = hue(emissive_color, hue_rotated).mul(emission_factor).mul(5.0);

1
2

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const composer = new THREE.PostProcessing(renderer);
const scene_pass = pass(scene, camera);

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

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

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

const ao_denoise = denoise(ao_pass.getTextureNode(), scene_depth, scene_normal, camera).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);

1
2
3
4
5
6
7

function animate() {
    renderer.computeAsync(compute_update);
    renderer.renderAsync(scene, camera);
    requestAnimationFrame(animate);
}

animate();