Exploring GLSL visualizations
September 29, 2021 2:22 AM Subscribe
I've been following some of the lovely animations on the #GLSL Twitter feed, which I'd like to try out and tweak on my own, so that I can perhaps figure out how they work. My efforts to bring the code posted within the tweets into online tools like GLSL Sandbox and twigl.app result in syntax errors and seem to be dead ends. Am I missing something about using these tools? Are there easier ways to explore these?
> needs a little setup the author didn't include.
And how!
The intro tweet seems to be relying on the twigl geekest pre-defined functions, variables, & aliases like rorate2D(), FC, snoise3D(), and a host of shortened variables from the classic/geek/geeker levels.
Plus a layer of standard C-style minimization/obfuscation techniques like single-line comma-spliced variable declaration/initialization and bracketless single-line for()-loops.
posted by genpfault at 10:11 AM on September 29, 2021
And how!
The intro tweet seems to be relying on the twigl geekest pre-defined functions, variables, & aliases like rorate2D(), FC, snoise3D(), and a host of shortened variables from the classic/geek/geeker levels.
Plus a layer of standard C-style minimization/obfuscation techniques like single-line comma-spliced variable declaration/initialization and bracketless single-line for()-loops.
posted by genpfault at 10:11 AM on September 29, 2021
Response by poster: I also tried Shadertoy, sorry I left out that link from my question. Just wondering why the source code that I see doesn't work as written, and what changes I'd need to make or augment to de-"minify" things properly, if there's anyone else out there a bit more familiar with it.
posted by They sucked his brains out! at 12:15 PM on September 29, 2021
posted by They sucked his brains out! at 12:15 PM on September 29, 2021
I was able to run the first tweet's source in twigl's "geekest(300 es)" regulation setting. As genpfault explained, the different "regulation" settings control how the environment is set up before the shader code you paste in is executed. I just tried different geekest variants until I hit one that worked. I think "300 es" refers to GL 3.0 ES, which is just an opengl profile.
posted by Alterscape at 1:32 PM on September 29, 2021
posted by Alterscape at 1:32 PM on September 29, 2021
This thread is closed to new comments.
It's easiest to get started by modifying other people's stuff. Take this code for instance. Edit the constant 90 on line 66 and press the little play button below the code textbox to see the effect of your changes.
GLSL code is pretty dense and cryptic. Shadertoy has a nice little compiler with inline error messages for your syntax errors.
You can do the same basic thing with the tools you linked; Shadertoy just seems to be the consensus choice. My guess is the code you're pasting in from Twitter or wherever is not complete and needs a little setup the author didn't include. Starting with a fully working program and modifying it is much easier.
posted by Nelson at 6:56 AM on September 29, 2021 [2 favorites]