WebGL playground is a straightforward idea: type in your WebGL script and see the results. But the cool part is that the editor and the results are just on the same page and that you get a handful of features that make your life easier. No need to create multiple files (html/css/js/glsl), no need to save anything after each update, no need to switch between the editor and the browser, and no need to set up the skeleton code. All necessary things are added behind the scenes. Furthermore, you start new projects from templates or gallery entries which set up most of the core code for you!

The editor lets you work on the JavaScript code and the GLSL vertex/fragment shaders (if you have any) at the same time in a convenient way. Everything is organized, formatted and highlighted properly, just as you would like!

You can always save your projects and continue working on them later. Or you can freely share them in a number of ways.

The idea of the WebGL playground is to shorten the development cycle so you can spend more time on the creative part, trying "what-if" scenarios, tweaking the parameters ...

Don't forget that you can also contribute a gallery entry or a template.

Please see documentation for details, see gallery for examples, or start a new project.

Support and Contact

I do my best to improve WebGL playground, add new features, fix bugs, review submissions, and answer emails. It is a side project, so please keep in mind that I don't have as much time for it as I would like.

If there is any feature you would like to see, any bug you have spotted, you have a question, or you want to contact for any other reaseon, please let me know at:

For updates you can follow me at Twitter:

Or you can follow WebGL playground page on Google+ and/or Facebook:

Happy coding!
Krystian Samp