Changing shapes' geometries on every frame [SOLVED]

Questions
,
1

Hi All,

TL;DR: What would be a better way to achieve changing shapes to arbitrary geometries on each frame?

Background
I’d like to create animated pixel art with a twist: the “pixels” can change shape to any arbitrary shape over time and would not be tied to two dimensions.
Other visual effects and items could also be used, and three.js certainly has tons of features to achieve this.
The number of shapes and their complexity easily slows down any 3D engine if done incorrectly.

My current implementation switches to a new geometry object for each shape with code akin to this:

this.squareMesh.geometry.dispose();

// This can be any number up to 1000:
const max = 100;

const square = new THREE.Shape();

const size = 3;
const x = -this.conf.pos[0] * size + 40;
const y =  this.conf.pos[1] * size - 50;

square.moveTo(x, y);
square.lineTo(x + size, y);
for(let i = 0; i < max; i++) {
  square.lineTo(x + size + Math.random(), y + size + Math.random());
}

const geometry = new THREE.ShapeGeometry(square);
this.squareMesh.geometry = geometry;

(In the future I hope to use shapes that make sense aesthetically based on a model that keeps track of the base art, shape effects over time and others.)

It makes sense that:

  1. to create new geometry objects, and
  2. load them to the GPU en masse on every frame

…gives poor performance when the number of objects goes up or they become complex.
It’s not the intended design in the three.js engine to switch to a new geometry object on every frame — at least not in the way it’s done in my example.

Live early draft with three.js:
https://mattivartiainen.com/atest001/
^Some performance statistics appear in the browser’s console.

An example of what kinds of things could be fun to do with arbitrary shapes (in 2D, move mouse):
https://mattivartiainen.com/interactivegraphic/

Here the very first performance tip is to not create new geometry objects too often:

“Always try to reuse objects such as geometries, materials, textures etc.”

How could this be done better?

thx

PS.
A couple of screen capture videos with varying settings:
~8000 shapes with IIRC 100 geometry points each, very low FPS:

A large number of shapes with large number geometry points but the geometry isn’t updated on every frame; instead the shapes just move around; good FPS:

3

Found a way forward by using this.squareMesh.geometry.attributes.position.array and this.squareMesh.geometry.attributes.position.needsUpdate = true