Real-time Options for my WebGL Engine — New User Interface Elements
Sparrow WebGL Devlog 12: Sky, lighting, fog, and water options with new UI features
Real-time feedback is extremely valuable when tweaking options. When you edit an image and change the brightness you expect to see the result immediately.
The same applies to graphics programming. You can set the options in the source code, but this requires refreshing your browser to see the effects in the best case (JavaScript), or a multi-minute-long recompile in the worst case (C++).
Therefore I worked on a new user interface for my WebGL engine that enables the user to change certain options in real-time and export the settings when they are happy with the look of the scene.
UI Improvements
User interfaces are one of the most important features of any graphics engine, which is why I added them very early on in the development process of my WebGL engine. Since then, I found a few issues and wanted to make some improvements.
The biggest flaw with my original design was that the default styles for the UI elements were static. This came from their C++ origin and meant there could only be one default style. However, I changed how UIs are handled in the WebGL engine and there can now be multiple interfaces per engine instance. Think about a game, for example: There is a user interface in the main menu and when you start a match, there is a different user interface. While this could be handled by just showing and hiding different elements, it makes sense to separate the UIs in the code to make it cleaner.
Therefore, the first thing I worked on was to make the default styles non-static and members of the main UI class instead. This proved to be a bit more tricky than I originally thought because the constructors of the elements don’t require a reference to the main UI class. It’s only set after the constructor returns in the add or addChild methods. This meant I had to move the style initialization to a later point too.
The next feature I added was style classes. Style classes are very similar to CSS classes and are just a collection of options that can easily be applied to an element by…