Uniforms....so many uniforms

Working on making an application with high levels of instancing (in webgl 1.0). I was hoping to utilize uniforms to some extremes but I noticed I hit a snag:

Whenever I switch programs I was noticing threejs does a LOT of recommitting uniforms

image

So, I guess I was curious to better learn my WebGL. Everything you google says an individual program has it’s own set of uniforms and when you swap programs the uniforms you uploaded for that program remains and should be ready to go for you.

However, what I see threejs doing seems to contradict that.

So, i’m hoping to clear this thought up once and for all: If you use all of the uniforms up to gl_max_vertex_uniform_vectors in each program and you have 10 programs. Do you have to re-upload the uniforms? Or is something else at play here that I may not understand?

Would it possibly be faster to just keep a single program mounted and rapid swap out the uniforms?

And for threejs understanding if I do a material.clone() does that generate an additional program down lower?

Of course as I look at the performance. It actually looks like there aren’t a whole whole lot of uniform updates, the issue seems to be that it just takes a long time to upload the little bit of uniforms that are being updated.

Could it perhaps be lag in how long it takes to switch programs more than uniform update delays? Which would imply I need to have 1 program that I use and call renderer.render(scene, camera) many times with uniform updates between each call?

Just not so sure how to handle this best. Thanks for any input from anyone.