Help Porting ShaderToy fragment to Three.js

Hi all,

I’m kind of new to shaders and I often struggle to understand what is going wrong.
I know this question has been already asked here and there but having read articles, stackoverflow and whatnot, I’m still stuck.

I’ve been trying to port this ShaderToy code to Three.js, but I’m encountering some issues. It works perfectly fine in ShaderToy. When I try to implement it in Three.js, the output appears different or doesn’t work at all.

May load your GPU by a lot!
Link to sandbox (doesn’t show the result I have locally although the code is the same, also disregard fragment_test.glsl):

Expected result:

What I got so far:

I tried to rewrite the Noise2D to map texture coordinates within the [0, 1] range by dividing by 255 but it didn’t help. It seems like there might be some differences in how ShaderToy and Three.js handle certain operations or uniforms. Also, I tried changing various noise textures but it was useless for the most part.

It’s almost as if the current version has zoomed into the noise too much… I’m obviously doing something wrong but, unfortunately, my research, trial and error haven’t produced any meaningful result, so I really hope someone can help me here.

Turns out the way the texture was loaded was the problem. Also, as a certified scatterbrain, I didn’t include the original Noise2D function but I’m glad that the solver has found it.
Thanks to a redditor MooFuckingCow for figuring out the issue.

Here’s an updated codepen for anyone interested.

1 Like