Shader Playgrounds

WebGL shaders editor with live preview, code completions, quick help and much more.

Download for macOS and Windows v0.1.4

Features

Awesome code completions. Just start typing and get help with the most used functions, variables, common language statements, local identifiers and available uniforms and attributes. Most language keywords even come with quick help. No more reference cards!

A great code editor. With custom made syntax highlighting, multiple selections, tab⁠-⁠selectable placeholders, code folding, matching brackets highlighting, auto⁠-⁠closing brackets, and more.

Uniforms editing with instant feedback. Once the code is successfully compiled, just click on any of the underlined uniforms right in the code to edit their values and see their effect immediately.

Inline errors and warnings. Easily debug your shaders with compilation errors, warnings for miss-matched shaders inputs and outputs, and more; all nicely grouped by line.

Live preview. Your shaders code is used as⁠-⁠is for program creation and applied to the scene instantaneously (almost).

Share. Playgrounds can be saved and shared as any other document. Just implement your awesome reflection model and share it.

WebGL2 ready. The editor code completions and syntax highlighting support both GLSL ES 1.00 and 3.00, and they adapt to the one you choose.

The idea behind the app was to create a great place to work on shaders, without the overhead (and chances of mistakes) that come from all the boilerplate that is usually required to see something on screen. Once they work, you can just use them on your app, knowing that if something is not working, at least the shaders are not the problem.

made with care by Agustin