Making an animated JavaScript and WebGL gradient of approximately defined shape to achieve glowing effect

Viewed 687

I'm trying to achieve wavy gradient effect like here, but with approximately defined shape and customizable color of gradients from JavaScript with the help of uniform variables which can be passed to GLSL.

required appearance

I've created a draft of animated shape changing, but I don't know how to implement glowing animation inside this shape.

Is it a good way to implement glowing shape changing with the help of THREE.Shape() and splineThru()? Is any better way to change shape of the same mesh instance instead recreating it like I do?

function animate() {
    requestAnimationFrame( animate );
    scene.remove(object);
    object.texture?.dispose();
    object.material?.dispose();
    geometry.dispose();
    geometry = new THREE.ShapeGeometry(getShape());
    object = new THREE.Mesh(geometry, material);
    scene.add(object);
    render();
}

0 Answers
Related