glslViewer Build Status

Donate

Live-coding console tool that renders GLSL Shaders. Every file you use (frag/vert shader, images and geometries) are watched for modification, so they can be updated on the fly.

Install

Installing on Ubuntu

Install the GLFW 3 library and other dependencies:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install libglfw3-dev git-core

Download the glslViewer code, compile and install:

git clone http://github.com/patriciogonzalezvivo/glslViewer
cd glslViewer
make
sudo make install

This was tested with Ubuntu 16.04.

These instructions may not work for all users. For example, it seems that libglfw3-dev conflicts with the older libglfw-dev. The previous Ubuntu install instructions direct you to download and compile glfw3 manually:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core cmake xorg-dev libglu1-mesa-dev
cd ~
git clone https://github.com/glfw/glfw.git
cd glfw
cmake .
make
sudo make install

Installing on Debian testing (Buster)

Install the GLFW 3 library, build tools, and other dependencies:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install libglfw3-dev xorg-dev libglu1-mesa-dev git-core dh-make fakeroot build-essential

Download the glslViewer code, compile and install. These instructions use deb-helper to build a native debian package, to build a simple binary, follow the Ubuntu instructions above.

git clone https://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
fakeroot dh binary
cd ..
sudo dpkg -i glslviewer_1.5_amd64.deb

(The arch part of the .deb filename will differ on other cpu architectures.)

This was tested with the Debian testing distribution on January 28th 2018.

Installing on Raspberry Pi

Get Raspbian, a Debian-based Linux distribution made for Raspberry Pi and then do:

sudo apt-get install glslviewer

Or, if you want to compile the code yourself:

cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer
cd glslViewer
make
sudo make install

Installing on Arch Linux

sudo pacman -S glu glfw-x11
git clone http://github.com/patriciogonzalezvivo/glslViewer
cd glslViewer
make
sudo make install

Or simply install the AUR package glslviewer-git with an AUR helper.

Installing on macOS

Use Homebrew to install glslViewer and its dependencies:

brew update
brew upgrade
brew install glslviewer

If you prefer to compile from source directly from this repository you need to install GLFW, pkg-config first and then download the code, compile and install.

brew update
brew upgrade
brew tap homebrew/versions
brew install glfw3 pkg-config
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer
cd glslViewer
make
make install

If glfw3 was installed before, after running the code above, remove glfw3 and try:

brew install glfw3 pkg-config
export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
make
make install

Use

In the most simple scenario you just want to load a fragment shader. For that you need to:

cd examples
glslViewer test.frag
vim test.frag

Note: In RaspberryPi you can avoid taking over the screen by using the -l flags so you can see the console. Also you can edit the shader file through ssh/sftp.

Note: On Linux and macOS you may used to edit your shaders with Sublime Text 2, if that's your case you should try this Sublime Text 2 plugin that launch glslViewer every time you open a shader.

Loading Vertex shaders and geometries

You can also load both fragments and vertex shaders. Of course modifying a vertex shader makes no sense unless you load an interesting geometry. That's why glslViewer can load .ply files. Try doing:

glslViewer bunny.frag bunny.vert bunny.ply

Pre-Defined uniforms and varyings

The following variables are used for fragment shaders that mimic a 3d model. See examples/menger.frag.

ShaderToy.com Image Shaders

ShaderToy.com image shaders are automatically detected and supported. These conventions are also supported by other tools, such as Synthclipse.

To be recognized as a ShaderToy image shader, a fragment shader must define ```c++ void mainImage(out vec4 fragColor, in vec2 fragCoord)

It must not define `main()`, because this is automatically defined for you.

The following ShaderToy uniforms are automatically defined,
you don't declare them:
* `uniform vec3 iResolution;` <br>
  `iResolution.xy` is the viewport size in pixels, like `u_resolution`.
  `iResolution.z` is hard coded to 1.0, just like shadertoy.com and synthclipse,
  although it was originally supposed to be the pixel aspect ratio.
* `uniform float iGlobalTime;` <br>
  Shader playback time (in seconds), like `u_time`.
* `uniform float iTimeDelta;` <br>
  Render time for last frame (in seconds), like `u_delta`.
* `uniform vec4 iDate;` <br>
  [year, month (0-11), day of month (1-31), time of day (in seconds)],
  like `u_date`.
* `uniform vec4 iMouse;` <br>
  `iMouse` is initialized to 0, and only changes while the left mouse button
  (LMB) is being held down.
  * Mouse coordinates are integers in the range `[0,0]..iResolution.xy`.
  * `iMouse.xy` is the current mouse coordinates in pixels, while the LMB
    is being held down. When the LMB is released, `iMouse.xy` is set to the
    current coordinates, then stops changing.
  * `iMouse.zw` is set to the current mouse coordinates at the instant when
    the LMB is pressed, remains constant as long as the LMB is held down,
    and is set to `-iMouse.zw` when the LMB is released.
  * If the LMB is up, then `iMouse.xy` is the mouse location at the most recent
    mouseup event, and `iMouse.zw` is the negative of the mouse location at the
    most recent mousedown event.
    For example, after a mouse click, `iMouse` might be `[216,320,-216,-320]`.

Demo: `examples/numbers.frag`

### Textures

You can load PNGs and JPEGs images to a shader. They will be automatically loaded and assigned to a uniform name according to the order they are passed as arguments: ex. `u_tex0`, `u_tex1`, etc. Also the resolution will be assigned to `vec2` uniform according to the texture uniform's name: ex. `u_tex0Resolution`, `u_tex1Resolution`, etc.

```bash
glslViewer test.frag test.png

In case you want to assign custom names to your textures uniforms you must specify the name with a flag before the texture file. For example to pass the following uniforms uniform sampled2D imageExample; and uniform vec2 imageExampleResolution; is defined in this way:

glslViewer shader.frag -imageExample image.png

Other arguments

Beside for texture uniforms other arguments can be add to glslViewer:

Inject other files

You can include other GLSL code using a traditional #include "file.glsl" macro. Note: included files are not under watch so changes will not take effect until the main file is saved.

Console IN commands

Once glslViewer is running the CIN is listening for some commands, so you can pass data through regular *nix pipes.

glslLoader

glslLoader is a python script that is installed together with glslViewer binary which let you download any shader made with The book of shaders editor (editor.thebookofshaders.com) . Just pass as argument the log number

glslLoader 170208142327

It will also download a shader shared through the ShaderToy's by passing the ID glslLoader. Ex:

glslLoader llVXRd

Examples

glslViewer examples/test.frag
glslViewer examples/test.frag examples/test.png
glslViewer examples/bunny.frag examples/bunny.vert examples/bunny.ply
glslViewer examples/grayscott.frag
glslViewer examples/platform.frag
glslViewer examples/temp.frag
u_temp,30
u_temp,40
u_temp,50
u_temp,60
u_temp,70
examples/.temp.sh | glslViewer examples/temp.frag
glslViewer examples/cross.frag --headless -s 1 -o cross.png
glslViewer examples/cross.frag --headless -s 1 -o cross.png
convert cross.png cross.pnm
potrace cross.pnm -s -o cross.svg
glslViewer examples/numbers.frag
glslLoader llVXRd
glslLoader 170208142327

Author

Patricio Gonzalez Vivo: github | twitter | website

Acknowledgements

Thanks to:

Check the Git Repository