WebGL is a state-machine – whatever value you set remains set until you change it. WebGL instructions, like…
GL.useProgram( program );
…takes quite a lot of time (some instructions more than others) as the value has to be sent to the graphics card and the state has to change. Therefore it’s crucial to have a cache that makes sure that only changed values are set.
A very common example is the projection matrix, which is used by most shaders. The projection matrix only needs to be set once in the beginning of your render loop, or when you switch to a program that either don’t use it or has the projection matrix on a different location.
GLOW has a simple cache built in to handle this. There is one thing that is important to know about the cache, if you change the data of the uniform – let’s say you update a transform matrix, this doesn’t invalidate the cache and the new data might not be set. Therefore, it’s important to clear the cache before you start to draw your shaders…
shaderA.transform.setPosition( 100, 100, 100 ); context.cache.clear(); shaderA.draw(); shaderB.draw(); shaderC.draw();
There’s no to very little overhead in GLOW, the cache is one of the exceptions – because it’s worth it. Cache is King.