Porting GLSL from Shadertoy to Processing

Gallery
1

A few years ago, I wrote an example on how to port GLSL shader code from Shadertoy.com to Processing. Since then, Shadertoy has changed quite a lot (adding a lot of new uniforms and input methods) so an update was long overdue.

You can find it here: https://github.com/SableRaf/Shadertoy2Processing

There is still work to be done, but it should be a good starting point for anyone wanting to learn about shaders from the great material available at Shadertoy, and experiment with it in Processing.

I hope that will be helpful to some of you :slight_smile:

001
001.png1320Ɨ1060 201 KB

5 Likes
2

Hi Raph :slight_smile: Nice work!

In the TODO I see ā€œsupporting multipass shadersā€. The PixelFlow library does that somehow. Maybe it can be useful to study how it works there. See https://github.com/diwi/PixelFlow/tree/master/examples/Shadertoy (Expansive Reaction Diffusion).

1 Like
3

Very interesting! Thanks hamoid. :slight_smile:

4

Hi Raph:

In the TODO, I want to know how to do ā€œinput Soundā€. I have a project about ā€œmusic visualizationā€. Help :dog2:

5

I suspect the only way would be using one of the Processing audio libraries (like Sound, Minim, Beads or something else). With such libraries you can load a sound file, play it, get the FFT analysis, and send the FFT values to the shader as a uniform.

Shadertoy plays Soundcloud using their JavaScript API but Soundclound for Java or Processing seems to be no longer maintained since 4 ~ 5 years ago:


But: you could use p5.js, access the Soundcloud API, get the FFT, and forward the data to a shader, everything in the browser (unfortunately without using @sableRaphā€™s library).

3 Likes
6

Hi Hewes,

Iā€™ve been working on the sound input example. You can follow this issue on the repository for updates:

7

@hamoid And here it is. Not ā€œexpansiveā€ though :slight_smile:

8

Update:

  • The sound issue has been solved! Now features both FFT and Waveform. Thanks @hamoid for the tips!
  • @morisil, your multipass example is now merged. Thanks a lot for the contribution!
2 Likes
9

How exactly did you copy the Shadertoy and make a .glsl file? I thought I could just make a .txt file and replicate what you had and save it as a .glsl file but that did not work. So how do I save as .glsl files?

10

Hi Spenc and welcome to the forums :slight_smile:

You will have to remove text formatting from your file or (better) use a dedicated text editor such as SublimeText, Atom, Brackets, or any of the many text editors designed for code. Copy the glsl code inside the editor, make your changes, and save it directly as a .glsl file. There is no need to go through a .txt step.

2 Likes