I have implemented a web-worker to load a .json file that contains an animated 3D model. To optimize performance, I am transferring Float32Array buffers for the main arrays (vertices, normals, etc.) back to the UI thread, leveraging the benefits of transferable objects for almost instantaneous data transfer.
Interestingly, WebGL (and by extension, Three.js) also utilizes Float32Array buffers internally. This leads me to believe that I can potentially load this 3D animation without duplicating any data, thereby minimizing the time spent in the main thread. A promising prospect indeed.
However, I am facing a challenge in figuring out how to efficiently create a functional Geometry (or BufferGeometry) using the array buffers for vertices, normals, morph vertices, morph normals, and faces available in the main thread, without the need for data translation or duplication.
var scene,
vertices, normals, faces,
morphVertices, morphNormals; // <-- we have all these as typed arrays
var geometry = ...; // <-- insert code here
var material = new THREE.MeshLambertMaterial({ morphTargets: true });
var object3D = new THREE.MorphAnimMesh(geometry, material);
scene.add(object3D);
A specific answer provides some insight, although only point 7 seems applicable and assumes the presence of a pre-existing Geometry instance, failing to address morph-targets.