This article is about performance and how caching can improve them. In WebGL, it is important not to push the same textures multiple times to the GPU. It uselessly slow down the rendering. As a rules of thumbs, the less data are exchanged between the cpu and the gpu, the better it is for performance.
A Basic Caching
Then you use this material as many times as you want,
foo.jpg will be sent
only once to the GPU. For example, let’s create many
This solution is simple and eleguant but may not be practical with a large code, like a game. In such case, you can use microcache.js. It is a micro library to handle in-memory cache which works in node and browser.
So Let’s Cache with microcache.js
It needs only 3 lines. To install microcache.js, download it and copy this line.
To instanciate a cache, use the following line.
This is it. It is as simple as that. Now maybe you wonder “yeah but how do i know what need to be cached”… I completly agree, it is always nice to get diagnostics from the system when optimizing performance.
Now Let’s Diagnose
You can check what is pushed to the GPU with WebGL inspector. It is a firebug-like to “debug, diagnose, and explore WebGL scenes”. You can see the texture tabs on the right. If you spot duplicates in there, you found rooms for optimization :) You can embed it in your own page application with a single line.
That’s All Folks
As Terje Mathisen said, “All programming is an exercise in caching.” Caching is a efficient way to optimize your code. It is simple with microcache.js. The code is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)