Advertisement Jump to content

WebGL Porting frame buffer Shadertoy to three.js

This topic is 495 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts


I want to port this shader:, 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:

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!

Edited by scummtomte

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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:

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!

Share this post

Link to post
Share on other sites

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!