Multistate – Save and restore WebGL state like in a 2D canvas

Hacker News

Share card

Multistate – Save and restore WebGL state like in a 2D canvas

This project is a side effect of my other project, and I thought it's something that could be used for many other purposes. I've been working for three and half years, mostly in my spare time but also two dedicated months this year on https://font.skin (originally called Fonted). It requires using certain WebGL features that are not available in Three and most importantly I wanted the project to be universal to create plugins for Three, Babylon and PlayCanvas. By not using any framework but writing a small, bespoke renderer, every text effect can be exported to i.e. React and only takes a few kilobytes + 30kb shared player (gzipped). A few weeks ago the time had come to build a Three plugin and this is when I realised that using the same context as the current Three one is going to be difficult. Using separate contexts is prohibitively slow due to not being able to share textures between them. When using the same context I realised that Three renderer reset is too nasty for an already-busy environment and can't be used in between draw calls. Three does not provide any way of interacting with low level state like binding textures, but in the worst case scenario I thought I'd just make a plugin that only works with my modified version of Three and add whatever is necessary to the core. (I use it for my game engine running https://bad,city and it was used by a friend of mine for a couple of art exhibitions in London.) Having the text effects working only in my modified version wouldn't be ideal because I wanted to not only use them in my projects but make them available for everyone using any rendering engine. "What if after the webgl work all the state changes can be restored to where they were?" I thought. The regular 2D HTML Canvas has such a functionality with "save" and "restore" functions, but 3D WebGL context doesn't. Having these would be way too complicated. Or would it? So why not: 1. create a snapshot of the WebGL state(not going deep into individual textures or buffers, just all global settings and bindings) 2. Run Fontskin renderer which will alter WebGL state 3. Restore the state from the snapshot And that's it. Save and restore was born. It also allows having multiple snapshot containers i.e. to create presets. At this point it's well-optimized and saving the snapshot is extremely cheap. Restoring the snapshot is checking the cache so it's not creating any redundant WebGL API calls. Multistate can be used for interop between multiple WebGL frameworks i.e. Three and Pixi without having to use their nuclear reset functions. It can also be used for more predictable programming with pure WebGL and to debug issues by creating zones of isolation.