Hey!

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/basic-feedback-and-buffer-implementation-with-glsl-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!

I would be very, very, very grateful if someone can help me with this, I could be even pay a bit for the port because its important to me to complete this asap.

Thank you!

usually you'll just want to follow the logic of the shader, rather than copy paste, change a couple things and hope it works (although sometimes that works too).

You know what the shader is doing, so just follow it through, and write a webgl shader as you go along. if you see a keyword that's unsupported in webgl, you can look up how to implement it in webgl.

If you have more specific questions I'm sure you'll get more help

Also, something i've found extremely useful when using webgl, download mozilla firefox if you don't have it already, open developer tools, go to settings, enable shader debugger, refresh the page, choose the shaders tab, and you will be able to view and debug the webgl vertex and pixel shaders

Firefox is the only browser i know that does this right now

Thanks for your response! I definitely agree regarding following the logic of the shader. This time though, I'm making this for a big birthday party in just a few of days so learning how to code shaders in a proper way isn't really viable this time around. But I will dig into it in the future because it does seem good to know. Also, from other examples I´ve seen, there are quite minor changes that needs to be done for the port. It's just that I gotta know what to change.

I´ve found some tips online for how to go from converting 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 (fixed the links btw), 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!