Morten Nobel's Blog

If you are interested in knowing how the KickJS was created, I’ll here discuss the technologies used for creating the editor.

KickJS

So first of all, what it KickJS? KickJS is a new game engine written in JavaScript for 3D games. KickJS uses modern JavaScript and WebGL. At the time writing, this means that it can run in Chrome and Firefox but not in Internet Explorer or Safari.

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).

ACE

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.

KickJS Shader Editor is a static html file and it’s dynamic behavior is created by JavaScript and AJAX request to the server. I decided to implement a JSON based protocol to make communicating with the server easier for both client and server.

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.

goo.gl

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.

YUI 3.x

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.

Architecture

To give an idea of how the different components interact, I have created the following diagram: