ThreeJS: InstancedMesh with different 3D Text on Each Mesh Instance

  javascript

I want the InstancedMesh to take an array for the geometry property and produce a different geometry with the same material for each of the instances, which it "can". It can even clone that entire array too. In fact, Ive rewritten a lot of the code in the Three.js (r115) file to accomplish this and I am fairly close. Ill port to the new version once its done.

My Method:

new THREE.InstancedMeshes(
     textGeometries, // <-- array of text geometries    
     materials[ options.textMaterial ], 
     1, 
     1, 
     0, 
     0 
);

But the InstancedMesh wrapper approach is best as it keeps the mesh copies on the geometry indexes. I have a rough working model but I dont have all the layers rendering yet. I just have one. I replaced the main geometry:

InstancedMesh.geometry: <object> { uuid:5ATRBU... } 

with an ”'< array >”’ of objects to

InstancedMesh.geometry: <array> (44) [ 
  0: { uuid:5ATR780F...}, 
  1: { uuid:4BVX771G... }...]

Which works (it passes the objects with their props in tact and is 100% still an array. I am currently in the middle of hacking the final element buffers to accept the, formerly single, object parameter as an array of objects and iterate through all of it with the single added dimension[ i ]. Of course this creates a new set of arrays for each instance but thats ok. Its still not a new draw call as the its all mapped into the current geometry. The position index can be shared. In my case, the number of instances is set to 1 as the the array of geometries is passed into the original InstancedMesh object. The length of the array now controls the number of instances created instead of this._numInstances . I called my new prototype "InstancedMeshes" and then duplicated all the functions and prototypes that are called and rewrote most of them to accept arrays of geometries. In fact it all happens in a single drawcall and ive had to push through numerous "to big for drawcall" errors as I go. I check for the case of ".length" to trigger my set of methods in the prototypes and method chain. My goal is simply to place different 3D text on each instance and have it indexed so its vertex/position can still be manipulated via

meshCache[ i ].geometry.position 

I know that each material counts as a drawcall but instancedMesh doesnt really care if each instances geometry is the same as long the same material is used (thats my hope). The geometry is actually removed anyways. So in essence you can clone any existing array of meshes and as long as they all use the same "material" it should not have to be a separate drawcall. The use case is obvious – have unique text on many different meshes. Very simple concept. I submitted the question after taking the solution a very long distance but got roadblocked with – "Perhaps InstancedMesh isnt what youre looking for…" or something like that. It was my 3rd question on the subject and they didnt seem to thrilled to help me out on this one.

Ive continued cracking on it in my spare time and now have a solution that actually is rendering 90%. Im in the worst part of the code though setting up the buffers. I constantly wonder if there is an easier way… please someone tell me there is and make my year. I’ll start a new thread and provide an example. My biggest fear is im going to hack it into place and discover the drawcalls explode anyways.

Please someone either slap some sense into me or push me in the right direction OR show me an easier approach.

Source: Ask Javascript Questions

LEAVE A COMMENT