OpenGL fragment shader app for convenient graphics design

Hey guys,

Here to follow up on my journey into learning OpenGL in JUCE. I took some time to make an app for conveniently developing fragment shaders that respond to JUCE mouse/touch events.

Just load your shaders into the app’s “CWD” folder that gets generated in your Documents folder after you run it. Or you can drag and drop them directly onto the toolbar to load into all panels, or onto a single panel.

Hit Live Compile while editing and saving shaders in your IDE and the app will update its display with your changes. Open the app’s console if you need feedback on the state of the mouse listeners or if you run into any compile errors.

I’m still in the very early stages in learning OpenGL so I haven’t figured out how to support textures or 3D objects yet. But it should prove useful for anyone that wants to just add simple 2D animations in their JUCE apps using OpenGL. Enjoy!

4 Likes

This looks great! I was actually thinking about building something like this when I started playing around with fragment shaders in JUCE. Looks like you built something way more comprehensive than I was planning. Thanks for sharing, look forward to trying it out.

No problem at all. It was supposed to be much simpler but I got carried away.

1 Like

When I tried to develop a new add-on package myself, I had to learn GLSL, and it’s not as easy to learn as JavaScript. It is strongly typed and often uses vector and matrix operations. To speed up development, my friend and I used the Three.js API. He worked as a designer at https://magnnetic.com/ebook-design-service, and has experience with some programs. We tried this with Forge, but the .jar file as an external mod for Forge. It works on versions up to 1.12.2 only. By the way, did anyone have a problem with this? We noticed bugs in the game profile and in the shaderpacks/subfolder. Maybe someone will share their experience of changing shaders, because I am interested in the technical side of creating the code, and not in the result itself.