Porting frame buffer Shadertoy to three.js

I want to port this shader: https://www.shadertoy.com/view/XtXyDN, to three.js. I’m new with fragment shaders but I’m using this topic as a semi-guide for how to port this type of frame buffer shader: https://discourse.threejs.org/t/basi...sl-shaders/409

Sadly, there seem to be lots of variables that needs to be converted in ways that are unknown for me. And the resources for this type of porting is sparse to say the least. So i’m asking all the shader masters out there for some kind of guidance of how to port this code/variables to make the port successful. Or if someone have good information to direct me to!

Thank you!

There are many shader examples in the examples/js/shaders directory that might be useful as an orientation. You definitely need to upload your image as a texture. The time value is passed in as an uniform and the uvs can be used from the geometry data. So it’s not necessary to calculate them via fragCoord.xy / iResolution.xy.

I think you can use this shader as a good skeleton for your application. You just have to add a time uniform and your custom code.

1 Like

Thank you! I will see what I can do with your tips! But isn’t the process completely different from your skeleton when it comes to frame buffer shaders?

Hey again!

I followed your tips as well as some other tips I found online for how to convert a shadertoy to three.js, and I´ve ended up with this code, which is built upon the initial “semi-guide”/skeleton-code that I linked in my first post, here’s the code I´ve got so far: https://gist.github.com/scummtomte/523f2e4c403c083d6983f8865ca24bc7

However, I’m stuck. I’m not really sure what to do from now on. And there are no error messages. The image is rendered but the canvas is separated from the image and the canvas is pitch black. I guess there’s something there that needs to be fixed. Would really appreciate help. Thank you!

Don’t you need a vertex shader as well as a fragment shader?

The skeleton code Im using (link in initital post) didnt need a vertex shader. But ive seen other ports that do include vertex shaders. So im unsure if its needed.

If you check the code you will see the fragment shader.

Shaders from Shadertoy don’t need a vertex shader as they are applying the fragment shaders to the whole frame. So presumably they have one built in, that looks something like the one in the example @Mugen87 suggested to you:

BTW: If you don’t attach a vertex shader to the program, you are unable to link it.