Home

Awesome

GlslEditor

Donate

Friendly GLSL Shader editor based on Codemirror compatible with glslViewer (C++/OpenGL ES) and glslCanvas (JS/WebGL).

Was originally develop to work as a embedded editor for The Book of Shaders. But now have grown as a stand alone Web app. Thanks to their compatibility with other apps of this ecosystems like glslViewer that runs in the RaspberryPi directly from console, GlslEditor interact with other projects like OpenFrame.io allowing the user to export the shaders to frames with only one button.

You can use it directly from editor.thebookofshaders.com or host one on your own website by including the two build files: glslEditor.css and glslEditor.js:

<link type="text/css" rel="stylesheet" href="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/glslEditor.css">
<script type="application/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/glslEditor.js"></script>

You can also install it through npm:

npm install glslEditor --save

And then you are ready to use it by passing an DOM element or query selector string, and a set of options;

<body>
    <div id="glsl_editor"></div>
</body>
<script type="text/javascript">
    const glslEditor = new GlslEditor('#glsl_editor', { 
        canvas_size: 500,
        canvas_draggable: true,
        theme: 'monokai',
        multipleBuffers: true,
        watchHash: true,
        fileDrops: true,
        menu: true
    });
</script>

This is a list of all the options you can set up:

Propertytypedescriptiondefault
canvas_sizenumberInitial square size of the shader canvas250
canvas_widthnumberInitial width of the shader canvas250
canvas_heightnumberInitial height of the shader canvas250
canvas_draggableboolEnables dragging, resizing and snaping capabilities to the shader canvasfalse
canvas_followboolEnables the shader canvas to follow the curserfalse
themestringCodemirror style to use on the editor"default"
menuboolAdds a menu that contain: 'new', 'open', 'save' and 'share' optionsfalse
multipleBuffersboolAllows the creation of new tabsfalse
fileDropsboolListen to Drag&Drop eventsfalse
watchHashboolListen to changes on the wash path to load filesfalse
frag_headerstringAdds a hidden header to every shader before compiling""
frag_footerstringAdds a hidden footer to every shader before compiling""
indentUnitnumberHow many spaces a block should be indented4
tabSizenumberThe width of a tab character4
indentWithTabsboolWhether, when indenting, the spaces should be replaced by tabsfalse
lineWrappingboolWhether CodeMirror should wrap for long linestrue
autofocusboolCan be used to make CodeMirror focus itself on initializationtrue

Some of the features features

Electron Version

When developing use this to automatically reload Electron on every change

npm run dev

For use just do:

npm run start

TODOs

Author

Patricio Gonzalez Vivo: github | twitter | website

Acknowledgments

Special thanks to: