Shadertoy to ISF

[Eric]

Many of you have discovered that http://shadertoy.com is a great resource for adding new effects to your Magic projects. Shadertoy-format code is supported natively in Magic via the GLSLShader module, and it works well. But it does have some limitations.

Recent versions of Magic now support the ISF shader format, which is even more versatile than the GLSLShader module, because you can add and rename parameters, directly import texture images, do multi-pass rendering, and more.

Even more importantly, ISF shaders show up as modules in Magic's main menu, allowing you to organize them much more easily.

Syd and I developed a little script that lets you automatically convert Shadertoy shaders to the ISF format. Check it out here:

https://magicmusicvisuals.com/utils/shadertoy_to_isf.php

Try it out a few times, and after you've saved some ISF files to your computer, have a look at this topic: viewtopic.php?f=3&t=412, which will teach you how to get Magic to recognize the files as modules.

Please let me know if you have any questions. And if you haven't checked out http://shadertoy.com yet, head over there with a WebGL-enabled browser (such as the latest version of Chrome) to see some amazing GPU-accelerated graphics and effects.

Have fun,
Eric

p.s.: Please respect the license of each shader. Some of them aren't for commercial use.

[skarabee]

Thank you for this cool tool!

[deskmate]

This is awesome! Thanks,Eric, it just keeps getting better and better

[deskmate]

>>Please let me know if you have any questions.

How many am I allowed?

" License Creative Commons Attribution-NonCommercial-ShareAlike"

What exactly does this mean? I can use it or I can't? Can I use it in a show, or does it mean that I just couldn't sell it ?

And now for the big one....

Msl3Rr

Would you be able to explain in layman's terms how he gets those cubes to react individually?

The links he provided, take me to pages that may as well have been written in Martian Idioma.

X,Y,Z,W for me in magic, only makes all of the cubes move simultaneously.

When it's on shadertoy, it's very cool.

[Eric]

" License Creative Commons Attribution-NonCommercial-ShareAlike"

What exactly does this mean? I can use it or I can't? Can I use it in a show, or does it mean that I just couldn't sell it ?

I'm not really an expert in this kind of thing, but personally I wouldn't use anything that says "NonCommercial" in a situation I was profiting from (ticket sales, videos with advertisements, etc.).

Would you be able to explain in layman's terms how he gets those cubes to react individually?

The cubes are reacting to the frequency spectrum of the audio. So you have to provide the spectrum to the shader somehow. In Magic, this is accomplished by using the AudioToImage module, and selecting the "Spectrum" option. Have a look at this post: viewtopic.php?f=3&t=277#p1739 (and you might want to look at the post before it also, for background). In your case, you would set it up exactly like the screenshot with the FFT Spectrogram module, except replace the FFT Spectrogram with your ISF module based on Msl3Rr.

One thing to keep in mind is that he very specifically wrote Msl3Rr to look good with the audio track he provides. Other audio might not work as nicely, due to the frequencies being different. But you can play around with it in Magic and see what happens .

Another thing is, I think he is smoothing the frequency data. If you want more info, let me know and I can try to guide you through it. It's kind of a strange yet interesting process, because you have to start applying image filters to audio.

[deskmate]

This worked, easy fix.

But more amazing is the speed of an answer to my question, thanks

[neoz]

Hey Eric!! Guyz!!
I just found my "dream shader" on shadertoy but i can't convert it properly into Magic...
Eric, i know that you're now developing update for a new GLSLmodule, could you try smth with this?
This's a very special Shader which we're waiting for the whole life...)
Any help appreciated!!
https://www.shadertoy.com/view/XddSRX

[Eric]

Yup, that is a multipass shader -- indicated by the presence of a "Buf A" tab in addition to the "Image" tab. Multipass isn't supported right now, but it will be when I update the GLSLShader module.

[neoz]

Yup, that is a multipass shader -- indicated by the presence of a "Buf A" tab in addition to the "Image" tab. Multipass isn't supported right now, but it will be when I update the GLSLShader module.

Ohh man... That will be great!! I will pray hard for this))

[borsan]

Thanks for sharing this tutorial!! having much fun with Magic

[siobhan]

Hey Eric,

knowing that you have been busy with updating MMV - but would you mind letting me know if the GSLS upgrade is something you have still on the plate?

Cheers
Heiko

[Eric]

Yes, definitely . But it's a bit more of a priority for us to get ISF v2 working first. Hopefully in one of the next two minor releases.

[neoz]

Hey Eric,
First, huge thanx for such a beautiful update v2. DarkUi = superb!!
But i'm still puzzling and can't get into this shader:
https://www.shadertoy.com/view/XddSRX#
Maybe some updates follow?

Cheeerz,
Y

[Sadler]

That shader uses multiple (in this case only one) buffers to layer effects within the shader. MMV doesn't support buffers yet but it's been on Eric's radar for a while. That's the thing about software - it is fluid so things change around you and sometimes it is hard to keep up, especially as a developer.

[neoz]

Sky is blue.. Grass is green..

[damstraversaz]

that's really a nice tool, thanks a lot Eric.
I have an issue with the image: they don't show on the page and I can't download them ( it works before so shadertoys seems to have change something).
Unfortunatly Syd's link to all the textures as a zip download seems to be broken.

[Eric]

It does seem like Shadertoy changed something. But I think I fixed the problem, so let me know if there are still any issues.

[damstraversaz]

it works perfectly, thanks a lot for the fix !

[Michael_Z_Freeman]

Hi, I'm in the midst of demo'ing your software. I've been using a few GLSL shaders and took me a while to find I could convert to ISF. One thing I wonder after having trouble getting the source textures from the Shadertoy site myself, are you having to use the Shadertoy API to retrieve the textures or are they simply visible in source code of page somewhere ?

[Eric]

Hi Michael, yes the API is necessary to retrieve the textures. That's one of the conveniences provided by my script -- it handles the texture retrieval for you.

[Michael_Z_Freeman]

Cheers. saves me puzzling over html/js code of their pages .

[Slavi]

Hi Eric,

I just wanted to mention, that you have another soul praying for a multipass support ....

Lots of epic shaders out there

Regards,
S.

[Jaysin]

Hey, just got Magic and I'm loving it so far. I gave this a try and none of the shaders I tried worked. Is this still working or did I screw up some how? Usually I'm smart

So here's a couple of the ones I tried, if anyone could give a shot converting them and let me know how it goes or have any ideas what I may be doing wrong.

https://www.shadertoy.com/view/XlsczN
https://www.shadertoy.com/view/MtfSz2
https://www.shadertoy.com/view/Md3SRM

Thanks

[Eric]

Thanks for letting me know. It looks like Shadertoy changed its spec recently, so I just updated my script and it should work with the second two. The first one is multipass so it won't work (yet).

[Jaysin]

Thanks for the quick reply and the quick fix, works now. Guess I'll start saving a list of all the multi-pass shaders in anticipation

[Slavi]

Hi,

Is it possible to use Magic with this shader:
https://www.shadertoy.com/view/4sB3WV

I don't want to use textures, but Magic generated content. I tried to do it the "tutorial way" but it gives me a "one way" module:, that doesn't have an input.
Thank you!

Regards,
S.

[Eric]

If you want to use Magic images as inputs instead of the Shadertoy textures, click the checkbox that says "Don't use IMPORTED images (advanced)".

[Carbinax]

I'm not 100% per cent sure if I've done this correctly because a lot of this is new to me.

I didnt know how to get the shadertoy content so it would work in Magic, so I googled it a bit and found this converter. I converted it, then copied and pasted it into a text file, and deleted .txt at the end and replaced it with .fs . Is that correct ?

If I've done that right, do I just link to a folder anywhere with those .fs files in it, or will it work more fluidly if that folder is placed in a specific place within the magic installation folder ??

Apologies for noob questions. I excel at audio DAWs, but this is all new to me and i'd never even heard of a shader until yesterday and thought it was simply a tool to make gradients of a colour so that red could become lighter red or blue becomes lighter blue etc....so imagine my surprise when I tried the shaders and found not shaders, but FX !!

Very cool. I see the potential for awesomeness, but feeling very green

[Eric]

Try this tutorial: viewtopic.php?f=3&t=412

[Carbinax]

thanks eric. I had a look at that and it seems easy enough.

Having problems with shadertoy though. I can see 1 page and the video is moving but i click to the next page, they take an age to load, and then get a message about webGL being disabled, so i went into firefoxes config page ( the here be dragoons page ) and went down to webGL.disable.angle or something like that and changed it from true to false, or vice versa ( cant remember ), and it worked for a few minutes and screwed up again. I tried this several times, changing back and forth from true to false, but firefox wont play the videos now.
Without the videos, the code doesn't appear either, so I can't copy / paste and do the .fs thing without it.

Any ideas ??

[Eric]

Hmm... well I can't say I'm an expert on Firefox or WebGL or Shadertoy itself... but I might suggest trying a different browser, such as Chrome...

[Carbinax]

yeah I tried Chrome, and its just a little bit better, but does the same thing. Im new to graphics so a lot of it is double dutch to me, and was hoping you might know. Thanks anyway

[mulherje]

Hey everyone!

I am trying to get a pixel sorting type shader for live performances. I have been trying one with no success in Magic and then read that you can't use ones with multiple buffers. I found this one (https://www.shadertoy.com/view/MstyDl) but the program still closes every time I try to use it. I am very new to uploading these myself so any help on how to get them into Magic would be much appreciated.

[Eric]

When you say that the program closes, do you mean that Magic crashes? If so, you may want to try updating your graphics drivers...

[IslandGhost]

Thanks Eric,

Very useful indeed.

If you are considering any updates to the conversion script, I've needed to manually add the following line:

float iFrame = FRAMEINDEX;

to the converted code for shaders that use the iFrame variable (similar to the way the code handles iTime). Not sure how common this is, but might be worth adding at some point if you are making any other changes.

[Terry Payman]

I wanted to use the awesome Shadertoy XY Audio Oscilloscope in Magic. https://www.shadertoy.com/view/3t23Rt
The current shadertoy_to_isf script only produced minimal output, so I used the VIDVOX ISF editor to import from Shadertoy which managed much better. I highly recommend this editor for Windows users.

With David Lublin's help I managed to get it working very nicely in their ISF editor's preview window, getting results just like those in the Shadertoy environment.

When I try the same shader in Magic it only works partially, with just vertical deflection (and that mainly in the +X direction).
Help!

[Eric]

Yes, that's a multipass shader and my conversion script won't handle it. If the Vidvox editor works for multipass then I'd definitely recommend it over my old script.

I ran your .fs file on my everyday laptop and it makes Magic run at 2 fps with nothing else in the scene though...?

[Terry Payman]

Odd. I've attached a project that I tried on two of my systems (both GTX1070) and it runs at good speed, running 720p at nearly 200fps at the same time as the ISF editor. With no music input there's normally a small dot in the centre of the screen.

Here's a screenshot of the attached project running, with the ISF window alongside for comparison.

In order to see something more than just a dot or vertical line in the attached Magic project I turned the persistence way up - and then there's a trail drifting towards the top right corner. I used a low persistence setting for the ISF instance of the shader for clarity.

David Lublin did mention that I might need to change his ISF editor into OpenGL 4 mode, but I found enabling OpenGL 4 made no difference (although I couldn't confirm that the editor was indeed changing modes accordingly).

Perhaps you can spot something in the ISF editor's output code that Magic doesn't handle.

Magic project and display vs ISF editor display. When the shader persistence isn't turned up there's just a vertical line in the Magic window in the +X direction, pulsating with the music.

XY scope problem 2.jpg (103.46 KiB) Viewed 1229 times

[Terry Payman]

Oops, I just noticed that my Magic project has the XY scope module in Points rather than Lines mode. It makes the trail a little more responsive when the persistence is maxed out. In the ISF editor I much prefer the Lines mode.

[Eric]

Ok. I guess I can't guarantee that the ISF editor will behave exactly the same as Magic, and I can't guarantee that the code between them is 100% compatible. But I will have a look when I get a chance.

Shouldn't your AudioToImage module have Spectrum selected, not Waveform? Maybe not, I dunno.

[Terry Payman]

... I will have a look when I get a chance.

Thanks Eric! This shader is particularly interesting with its built-in DSP audio filtering. It will be great if that's possible in Magic.

Shouldn't your AudioToImage module have Spectrum selected, not Waveform? Maybe not, I dunno.

It's definitely AudioToImage Waveform for all oscilloscope-like shaders, although it can sometimes give interesting effects if the "wrong" setting or a combination is used.