THREE instancing idea

instancing.js

var geometry = new THREE.InstancedBufferGeometry();

var material = new THREE.RawShaderMaterial() ;

// For using instances you have to create an InstancedMesh
var instancer = new THREE.InstancedMesh( geometry, material ,{ 
  attributes:{
    color: {
      type: Float32Array,
      size:4,
      default: [0.2,0.2,0.2,0.2]
    },
    creationTime:  {
      type: Float32Array,
      size:1,
      default: [0.0]
    },
    someParticularAttribute:  {
      type: Uint16Array,
      size:1,
      default: [0]
    },
  },
  instancesCache:4,   // optional, sets an initial instances cache size (this number is low for this gist)
  growFactor: 2,      // optional
});
// an instancer creates some InstancedBufferAttributes with x quantity of slots (4 in this case),
// and keeps track to the number of instances that will be rendered (0 when empty)


// creates a new instance, and sets it to the first slot ( now three are free)
var instance1 = instancer.new();
// each new instance must be created on the first avaible slot in the instancer. We keep track of the 
// this new instance has getters for attributes
instance1.get('color') // -> [0.2,0.2,0.2,0.2]
instance1.get('creationTime') // -> [0.0]
//and setters
instance1.set('color', [0.5,0.5,0.5,0.5])
// when a set is called, the instancer sets it's value in the binded array, 
// and keeps a reference for updating this instance attribute into the gpu

// creates a second instance, and sets it to the second slot ( now two are free)
var instance2 = instancer.new();

// creates a third instance, and sets it to the third slot ( now one is free)
var instance3 = instancer.new();

// creates a new instance, and sets it to the fourth slot ( now none are free)
var instance4 = instancer.new();
//ok

var instance5 = instancer.new();
// there isn't space in the cache for instances, the instancer needs to resize all of their InstanceBufferAttributes for instances
// after that, the cache will grow to 8 slots (cacheSize * growFactor) and assign this instance to the fifth slot.
instance5.set("color",[1.0,1.0,1.0,1.0])

instance3.destroy(); 
// really, where not destroying, we overwrite the third slot with the fifth slot, and we keep track to render the first 4 slots,
// and then before rendering we update the data to the GPU,

// each instance object has an generated id, which the instancer manages to the pointing slot, that can vary
// after instance3 has been destroyed, the instancer knows that instance5 now has assigned the third slot, so
instance5.get("color") // -> [1.0,1.0,1.0,1.0]

// some helpers may be
instancer.exists(id); // -> true/false
instancer.get(id);    // gets the instance relative to the id, non-existent scenario it errors (precondition: check if exists)

instancer.destroyAll(); // destroy all instances and resets the memory footprint (slots)