# glslEditor-plus
**Repository Path**: seelingzheng/glsl-editor-plus
## Basic Information
- **Project Name**: glslEditor-plus
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-02
- **Last Updated**: 2025-06-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# [GlslEditor](https://github.com/patriciogonzalezvivo/glslEditor)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4BQMKQJDQ9XH6)
Friendly GLSL Shader editor based on [Codemirror](http://codemirror.net/) compatible with [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) (C++/OpenGL ES) and [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) (JS/WebGL).
Was originally develop to work as a embedded editor for [The Book of Shaders](https://thebookofshaders.com). But now have grown as a stand alone Web app. Thanks to their compatibility with other apps of this ecosystems like [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) that runs in the RaspberryPi directly from console, [GlslEditor](https://github.com/patriciogonzalezvivo/glslEditor) interact with other projects like [OpenFrame.io](http://openframe.io) allowing the user to export the shaders to frames with only one button.
You can use it directly from [editor.thebookofshaders.com](http://editor.thebookofshaders.com/) or host one on your own website by including the two ```build``` files: ```glslEditor.css``` and ```glslEditor.js```:
```html
```
You can also install it through npm:
```bash
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;
```html
```
This is a list of all the **options** you can set up:
| Property | type | description | default |
|----------------------|------|---|-----|
| ```canvas_size``` |number| Initial square size of the shader canvas |```250```|
| ```canvas_width``` |number| Initial width of the shader canvas |```250```|
| ```canvas_height``` |number| Initial height of the shader canvas |```250```|
| ```canvas_draggable```| bool | Enables dragging, resizing and snaping capabilities to the shader canvas |```false```|
| ```canvas_follow``` | bool | Enables the shader canvas to follow the curser |```false```|
| ```theme``` | string | Codemirror style to use on the editor |```"default"```|
| ```menu``` | bool | Adds a menu that contain: 'new', 'open', 'save' and 'share' options | ```false```|
| ```multipleBuffers``` | bool | Allows the creation of new tabs |```false```|
| ```fileDrops``` | bool | Listen to Drag&Drop events |```false```|
| ```watchHash```| bool | Listen to changes on the wash path to load files |```false```|
| ```frag_header``` | string| Adds a hidden header to every shader before compiling |```""```|
| ```frag_footer``` | string| Adds a hidden footer to every shader before compiling |```""```|
| ```indentUnit``` | number | How many spaces a block should be indented | ```4``` |
| ```tabSize``` | number | The width of a tab character | ```4``` |
| ```indentWithTabs``` | bool | Whether, when indenting, the spaces should be replaced by tabs | ```false``` |
| ```lineWrapping``` | bool | Whether CodeMirror should wrap for long lines | ```true``` |
| ```autofocus``` | bool | Can be used to make CodeMirror focus itself on initialization | ```true``` |
## Some of the features features
- Inline Color picker and 3D vector picker for '''vec3''
- Inline Trackpad for '''vec2'''
- Slider for floats
- Inline error display
- Breakpoints for variables
## Electron Version
When developing use this to automatically reload Electron on every change
```bash
npm run dev
```
For use just do:
```bash
npm run start
```
## TODOs
- [ ] Twitter sharing options
- [ ] Facebook sharing options
- [ ] Open modal from url, log or file
- [ ] Uniform widgets
- [ ] Time widget
- [ ] Texture inspector
## Author
[Patricio Gonzalez Vivo](https://twitter.com/patriciogv): [github](https://github.com/patriciogonzalezvivo) | [twitter](https://twitter.com/patriciogv) | [website](http://patriciogonzalezvivo.com)
## Acknowledgments
Special thanks to:
- [Lou Huang](@saikofish): glslEditor born from learned leassons on [TangramPlay](http://tangrams.github.io/tangram-play/). His code and wizdom is all arround this project.
- [Brett Camper](@professorlemeza): media capture and texture class (on GlslCanvas) are totally his credit.
- [Jaume Sanchez Elias](@thespite): thanks for the big help with the profiler tester.
- [Kenichi Yoneda (Kynd)](@kynd.info): helped with the UI and presentation mode
- [Thomas Hooper](@tdhooper): performance improvements