KickJS Shader Editor is an online browser-based GLSL ES editor that let you easily create, tweak and share shaders. I’ll here describe how the editor is used. But first I’ll give a short introduction to WebGL and GLSL for people unfamiliar with this technology.
WebGL and GLSL ES
WebGL is a specification of an API that browsers can support to provide 3D accelerated graphics. The WebGL API basically a variant OpenGL ES 2.0, that many handheld devices support (iPhone, iPad, etc). This means it should be possible for browsers on such devices to support WebGL, however currently most implementations are found in desktop browsers (such as Chrome and Firefox). As usual Microsoft is abandoning the open technology, so WebGL is only available in IE through the plugin IEWebGL.
WebGL let your javascript communicate with the your graphics card driver. In other words WebGL let you set the state variables, send and recieve data and invoke commands. You may think that 3D graphics in JavaScript will be terrible slow, but most calculations are pushed to the graphics card.
Shaders are code written for graphics cards. Shaders determines how a 3D mesh ends up looking when displayed as pixels on the screen. Shaders are written in a programming language, and WebGL supports the language GLSL (in the variant GLSL ES – designed for OpenGL ES).
A GLSL program consist of two programs:
- Vertex shader: Responsible for transforming the vertices of the geometry from global space into clip space (which ends up being what you see).
- Fragment shader: (Also known as pixel shaders) Responsible for determine a color of a pixel on the screen. Since this color may be overwritten by other geometry, it is referred to as a fragment.
Using the WebGL shader editor
Screenshot from KickJS Shader Editor
Writing GLSL code is fun. But setting up WebGL can be a bit tricky for people unfamiliar with OpenGL. Therefor I have created a WebGL shader editor that let you play with the technology easy and besides let you share your work with the rest of the internet.
I’ll not go into details of the language itself here. There are a lot of excellent books and webpages about the topic.
To use the editor start your Chrome or Firefox browser and go to:
http://www.kickjs.org/example/shader_editor/shader_editor.html
The first two tabs let you write the vertex and fragment shader code. The code will compile as you type. If your code cannot compile, the compiler error will be listed in the log located in the upper right of your screen.
You can also add texture images to your shader. However due to security the texture images must to located on the same server. As a workaround for this, you can Base64 you image and add the texture as a Base64 string. Binary File to Base64 Encoder is a free web tool that let you do just that.
To make shader programs more configurable, you add uniforms parameters. Think of uniforms as parameters that stays the same for a single mesh. Some of these parameters is so common that editor can figure out how to set its value automatically. These automatically uniforms are all prefixed with ‘_’. All other uniforms you have to specify manually.
Another kind of value that goes into the shader is vertex attributes, meaning different values per vertex. Besides the vertex position (vertex), it also supports UV coordinates (uv1), normals (normal), tangents (tangent) and sometimes colors (color).
The editor currently supports 3 types of meshes: A Cube, a sphere and a plane.
Sharing your work
I have also added the ability to load and save you shader on the server. To do this, you must login using a Google account.
Finally you can share your work by clicking on the Share button. This will show a short url, that you can post in a forum or tweet about it (use the #KickJS hashtag). You can even track how many people has clicked on the short url, by clicking on the ‘See stats’ link.
Technical walkthrough
For a technical walkthrough of how I implemented the editor checkout this blogpost:
Morten Nobel's Blog 
Leave a Reply