Live preview fragment shaders in the Atom editor, with
Make sure you install language-glsl for syntax highlighting.
The following default uniforms are available to your shader.
uniform vec2 u_resolution; // size of the previewuniform vec2 u_mouse; // cursor in normalized coordinates [0, 1)uniform float u_time; // clock in seconds
iGlobalTime can also be used for
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>
uniform sampler2D inThisDirectory; // foo.jpguniform sampler2D inOtherDirectory; // ../other_textures/bar.pnguniform sampler2D withAbsolutePath; // /Users/ford/textures/blah.bmp
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:
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 (
Example shaders can be found in the
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')
Create a new .glsl file, type
frag, and hit enter. This will output the base
fragment shader code to get started from.
@amelierosser for starting the project.
Markdown Preview for the boilerplate code.
three.js for simplifying WebGL.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.