Simple object pool for immediate mode rendering using the WebAPI

[redstonedash]

// @ts-ignore
class SphereFramePool{ 
	constructor(){
		this.i=0; //the current index for the frame, also can be expressed as the current number of entities to be drawn this scene
		this.j=0; //all parts past j are disabled
		/**
		 * @type {Filament.Entity[]}
		 */
		this.entities = [];
	}
	/**
	 * @param {glMatrix.mat4} trs
	 * */
	drawObject(trs){
		var tm = engine.getTransformManager();
		//if i is less than j we don't need to create new entities or add them to scene, we only need to change their position
		if(this.i < this.j && this.i < this.entities.length){
			var e = tm.getInstance(this.entities[this.i]);
			tm.setTransform(e,trs);
			e.delete;
		}
		//if i is greater than j but less than entities.length then we need to add them to scene and change their position but we do not need to make a new entity
		else if(this.i>=this.j && this.i < this.entities.length){
			scene.addEntity(this.entities[this.i]); //enable
			var e = tm.getInstance(this.entities[this.i]);
			tm.setTransform(e,trs)
			e.delete();
		}
		//if all else fails, (and therefore i >= entites.length) we create a new entity and change it's position
		else{
			var ball = new Filament.IcoSphere(1); 
			const material = engine.createMaterial("unlit.filamat");
			const matinstance = material.createInstance(); 
			var r = createRenderable(ball, {center: [0,0,0], halfExtent: [1,1,1]}, matinstance);
			scene.addEntity(r);
			this.entities.push(r);
			var inst = tm.getInstance(this.entities[this.i]);
			tm.setTransform(inst,trs);
			inst.delete();
		}
		this.i++;
		return this.i; //this is so other datastructures can keep track of where the transform is stored so they can match it up with their own data
	}

	frameEnd() {
		this.j = this.i; // last time we drew i objects, so i objects past i are disabled
		for(; this.i < this.entities.length; this.i++){
			scene.remove(this.entities[this.i]);
		}
		
		this.i = 0; // we have drawn zero objects since last frame end (this one)
	}
}

The usage is simple, call draw object to draw a sphere, then at the end of the frame call frame end.

[redstonedash]

function createRenderable(mesh, bounds, matinstance) {
	const renderable = Filament.EntityManager.get().create();
	const engine = this.engine;
	const vertices = mesh.vertices;
	const tangents = mesh.tangents;
	const triangles = mesh.triangles;

	const vb = Filament.VertexBuffer.Builder()
		.vertexCount(vertices.length / 3)
		.bufferCount(2)
		.attribute(Filament.VertexAttribute.POSITION, 0, Filament.VertexBuffer$AttributeType.FLOAT3, 0, 0)
		.attribute(Filament.VertexAttribute.TANGENTS, 1, Filament.VertexBuffer$AttributeType.SHORT4, 0, 0)
		.normalized(Filament.VertexAttribute.TANGENTS)
		.build(engine);

	const ib = Filament.IndexBuffer.Builder()
		.indexCount(triangles.length)
		.bufferType(Filament.IndexBuffer$IndexType.USHORT)
		.build(engine);

	vb.setBufferAt(engine, 0, vertices);
	vb.setBufferAt(engine, 1, tangents);
	ib.setBuffer(engine, triangles);

	Filament.RenderableManager.Builder(1)
		.boundingBox(bounds)
		.material(0, matinstance)
		.geometry(0, Filament.RenderableManager$PrimitiveType.TRIANGLES, vb, ib)
		.build(engine, renderable);

	return renderable;
}

left this out