If you are interested in knowing how the KickJS was created, I’ll here discuss the technologies used for creating the editor.
KickJS will shield away some of the complexity of WebGL and provide meaningful abstractions for game programmers (such as cameras, materials and game objects).
I’m creating KickJS as a part of my master thesis and the engine is still under heavy development. Expect to see more to this engine in the future. I’ll give a feature walkthrough in a later blog post, when the engine is more mature. In the meantime feel free to dig into the code on GitHub.
Even though KickJS Shader Editor is not a game, it is build using KickJS. This keeps the source code of shader editor fairly simple.
KickJS (including the shader editor) is open source under the BSD and is available at GitHub (github.com/mortennobel/KickJS).
For the source editor I decided to use ACE (ace.ajax.org). The ACE editor provides languages support for many languages, but not for GLSL. However since it already provided support for C, it was fairly easy to modify the C code to write a syntax highlighter for GLSL.
ACE is open source under the Mozilla tri-license (MPL/GPL/LGPL).
Google App Engine
As web hosting provider I use Google App Engine (code.google.com/appengine/) – an easy way to host scaleable web applications.
I also use the Google App Engine for authenticating the users. To keep things simple only Google accounts are supported, but this could be extended to OpenID at a later point in time (also supported by App Engine).
The web-server code for KickJS is currently not released as open source, but I’m planning to do so in the near future.
When a shader is saved, the database key is stored in the url as a hash. If the browser sees a hashtag when loading the editor, it requests the associated shader from the server using a blocking AJAX request, and then remove the hash from the url.
One problem with keys in Googles data store is that they can be very long. And since long urls are ugly, I uses Google’s URL Shortener web service (code.google.com/apis/urlshortener/) to give me very short urls that the users can use for sharing. Another benefit of doing so, is that the users can use the shortened URL to track hit of their shader.
For UI component framework I choose YUI (yuilibrary.com), simple because it provides a nice abstraction over the browser DOM.
YUI is open source under the BSD License.
To give an idea of how the different components interact, I have created the following diagram: