Importing shaders from ShaderToy

I have written a little snippet that lets importing shaders from ShaderToy. It creates a set of 3 files: frag, vert and j3md which can be used on your textures right away! The frag file is the port of the original shader from the website, the vert file is a simple placeholder, and the j3md is a simple template which gives the dynamic access to the fragment shader. ShaderToy features only fragment shaders (as of now), so the importer only takes care of that. The resulting material is ready for use, although, IRL, surely, you’ll get to customizations.

Usage:

run from command line with “java -jar sti.jar [params]”. There is only 1 set of params and all of them are required. Them are:

  1. the name of the resulting material, i.e. MyMaterial
  2. the EXISTING path where to place the material, i.e. D:/temp
  3. the local path which will be specified in the j3md file and which is usually relative to the assets folder, i.e. Materials/ShaderToy
  4. the ShaderToy shader id, i.e. Msf3D7
  5. true or false, whether the shader will be used as a screen filter or as a texture for an object.

My example call I used for testing:
java -jar sti.jar B E:/temp "material" Msf3D7 false

The example shader that worked for me: https://www.shadertoy.com/view/Msf3D7 (note the shader id at the end)

Notes:

  1. If you don’t see a correct shader result, try setting Resolution to Vector3f(1,1,1);
  2. Explore the resulting j3md to see what parameters you can set. Actually, they are verbatim translation from those of ShaderToy.
  3. Animated shaders require to specify the GlobalTime parameter on every frame. It must be a float. If you just add your tpfs up, it should do.

Here is the link for the alpha version:
alpha-version

So this is alpha, nothing fancy, but I plan to improve it at least as long as it goes hand-in-hand with my current project and I am satisfied with it.

Any feedback is appreciated. Bug reports are very welcome.

12 Likes

Cool. You could add conversion support to the SDK by making a filetype for ShaderToy files.

@noncom This is really cool… I meant to post to this last night… but… well… there are so many things wrong with me (personality, brain, looks)… why just list the one from that moment in time :wink:

I did, however, want to mention something concerning the animation time you listed as a bullet point.

Since you are writing the j3md, you could add Time to the list of globals for the main technique and then just swap out the current uniform for:

uniform float g_Time

JME will take of the rest for the user.

@normen what do you mean by ShaderToy files? A shader text saved to a file or a virtual folder for shaders on the website? I looked at filetypes for NetBeans briefly, it looks like it is possible to make a virtual folder… no? I would make a plugin, but could you give me some more insight on this?

@t0neg0d: thanks! I have added the feature!

The tool now has its “website” here. Jar download is available from the “builds” folder.

2 Likes
@noncom said: @normen what do you mean by ShaderToy files? A shader text saved to a file or a virtual folder for shaders on the website? I looked at filetypes for NetBeans briefly, it looks like it is possible to make a virtual folder.. no? I would make a plugin, but could you give me some more insight on this?

@t0neg0d: thanks! I have added the feature!

The tool now has its “website” here. Jar download is available from the “builds” folder.

Hey this is super cool! Did yiu try to make any tests to run ShaderToy with JME? Or Where i can test it?
For example try to convert and run in JME like this one: https://www.shadertoy.com/view/MdX3zr

@mifth: thanks! Umm, I do not really get what you mean by “run ShaderToy with JME”… ShaderToy is a website (with the ShaderToy web application) where people post shaders, and it can be seen as a repository of opensource shaders. The tool simply downloads the shader text from the website and adapts it in the way that it becomes a ready-to-use JME material… You can test it by following the instruction on the bitbucket page. Usually the workflow is as follows: 1) go to ShaderToy, 2) pick a shader you like, 3) remember its ID, 4) use the tool to fetch the shader and generat a JME material, 5) customize the result if required, 6) use as a regular material in your program… or there is an option to create a screen post-effect shader, but I did not really test how it works.

Answering to your post edit: the shader id in the link is “MdX3zr” - simply use it to taget the tool on that specific shader. Did you try the instructions on the bitbucket page? Let me know if you have problems with it.

@noncom said: @mifth: thanks! Umm, I do not really get what you mean by "run ShaderToy with JME"... ShaderToy is a website (with the ShaderToy web application) where people post shaders, and it can be seen as a repository of opensource shaders. The tool simply downloads the shader text from the website and adapts it in the way that it becomes a ready-to-use JME material.. You can test it by following the instruction on the bitbucket page. Usually the workflow is as follows: 1) go to ShaderToy, 2) pick a shader you like, 3) remember its ID, 4) use the tool to fetch the shader and generat a JME material, 5) customize the result if required, 6) use as a regular material in your program.. or there is an option to create a screen post-effect shader, but I did not really test how it works.

Answering to your post edit: the shader id in the link is “MdX3zr” - simply use it to taget the tool on that specific shader. Did you try the instructions on the bitbucket page? Let me know if you have problems with it.

Ok, cool. But did you try to run the same effect like in ShaderToy? Can you show any screenshots from JME?

@mifth oh I got what you mean - it works as a screen-filter even if you specify otherwise. Sorry! Messed up the “then” and “else” branshes in the ifs :D… 'twas latest nite… :)) ok the bug is fixed, the new version is uploaded to bitbucket. Thanks!

Here are the screenshots of the shader from the example command and the one you asked about (note the fps is so low because every quad has a different material, it is not the same one, although they look the same. So i got 64 quads with 64 shaders. This is intended):


Ok, Thank you a lot!!!

@noncom said: @normen what do you mean by ShaderToy files? A shader text saved to a file or a virtual folder for shaders on the website? I looked at filetypes for NetBeans briefly, it looks like it is possible to make a virtual folder.. no? I would make a plugin, but could you give me some more insight on this?

Yeah I thought about downloaded text files. If you make a new filetype with the wizard in the SDK (install “NetBeans Plugin Development” plugin) then its pretty obvious what happens and how. You get an action that you extend and access to the DataObject the action was called on (your file).

@normen said: Yeah I thought about downloaded text files. If you make a new filetype with the wizard in the SDK (install "NetBeans Plugin Development" plugin) then its pretty obvious what happens and how. You get an action that you extend and access to the DataObject the action was called on (your file).

Alright, I think I got it! Looks pretty easy. However, now I need your advice, related to the SDK philosophy - what do I better do with such a file? I mean, do I somehow convert it into the three files (frag, vert, j3md) to form up a material, do I present a conversion wizard dialog for the user, or do I do something else? If I create new files, where do I better put them according to the SDK philosophy?

1 Like
@noncom said: Alright, I think I got it! Looks pretty easy. However, now I need your advice, related to the SDK philosophy - what do I better do with such a file? I mean, do I somehow convert it into the three files (frag, vert, j3md) to form up a material, do I present a conversion wizard dialog for the user, or do I do something else? If I create new files, where do I better put them according to the SDK philosophy?

You should put them in the assets folder. The Project Lookup should contain a reference to the “ProjectAssetManager” which you can use to find and manipulate the assets folder. I don’t know if you’ll need a wizard or anything as I don’t know exactly how the import process looks but if theres choices to make by the user then sure, present them :slight_smile:

Ahh, sorry, not much time I have now… I will take on this when I have some more free time!

@noncom sorry to necro this, the Dropbox link you provided is no longer available. Is your tool open source?

It’s on bitbucket:

https://bitbucket.org/noncom/shadertoy-jme3-importer/src/default/

4 Likes

I did not even know about this. Does it still work with 3.3?

Hi! Yeah, all open source and available as Ali_RS points out. Feel free to use it anyway you like.

But tbh I think that there’s not much use in it… it’s written in Clojure and most people would simply be irritated by this :smiley: and the program itself is very simple, it’s just a glorified text replacer. I seriously think that you’d benefit more if you’d just re-write it to Java/Kotlin and update to what were the latest changes to ShaderToy and JME (and maybe contribute it to JME Asset Store?). Would probably take only an hour or two.

Otherwise the build is available in the “builds” folder in the repo. Maybe it even works still, if ShaderToy did not change a lot since then.

PS: Updated the link to point to the Bitbucket repo instead of the GoogleDrive file.

2 Likes

Yes thanks, it was just my inability to read past the link and @Ali_RS helped me through that :slight_smile: I did look at the source code yes, it was a big help. I’m just learning shaders and I have no idea what is the best way to do it so I just stumbled upon Shadertoy and this software of yours.

I didn’t end up trying it actually. I used the source code to port one experiment from Shadertoy manually. But if it becomes a thing, maybe a fork is in order. And perhaps the jME SDK integration as well.

1 Like