GLSL Preview package

Live preview fragment shaders in the Atom editor, with ctrl-shift-G.

Make sure you install language-glsl for syntax highlighting.

Uniforms

The following default uniforms are available to your shader.

uniform vec2 u_resolution; // size of the preview
uniform vec2 u_mouse; // cursor in normalized coordinates [0, 1)
uniform float u_time; // clock in seconds

The variants iResolution, iMouse and iGlobalTime can also be used for legacy reasons.

Textures

Textures can be loaded by defining a uniform with a comment containing the path to the file. The syntax is:

uniform sampler2D <texture_name>; // <path_to_file>

For example:

uniform sampler2D inThisDirectory; // foo.jpg
uniform sampler2D inOtherDirectory; // ../other_textures/bar.png
uniform sampler2D withAbsolutePath; // /Users/ford/textures/blah.bmp

Shader errors

If the shader fails to compile, the tab and line number will subtly highlight in red.

If enabled in the package settings, a notification will show the error message:

Capture images

Right click on the preview to copy or save a still image of the shader. This can also be done by running the command "Glsl Preview: Copy Image" or "Glsl Preview: Save Image" from the command palette (cmd-shift-P).

Examples

Example shaders can be found in the examples/ directory.

glslify

Supports glslify for importing glsl modules.

// Import from local file:
#pragma glslify: map = require('./map')
 
// Import from npm installed module:
#pragma glslify: rainbow = require('glsl-colormap/rainbow')

Frag snippet

Create a new .glsl file, type frag, and hit enter. This will output the base fragment shader code to get started from.

Credits

@amelierosser for starting the project.

Markdown Preview for the boilerplate code.

three.js for simplifying WebGL.