I'm able to translate the code and run it, but it behaves diferrent from the orginal fork.

https://www.shadertoy.com/view/llS3zc --orignal

https://editor.p5js.org/jorgeavav/sketches/i9cd4lE7H - translate

Here is the code:

uniform vec2 resolution;
uniform float time;
uniform float mouse;
uniform sampler2D texture;
uniform sampler2D texture2;

void main() {

    vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec4 texCol = vec4(texture2D(texture, uv+time/10.0));
    mat3 tfm;
    tfm[0] = vec3(texCol.z,0.0,0);
    tfm[1] = vec3(0.0,texCol.y,0);
    tfm[2] = vec3(0,0,1.0);    
    vec2 muv = (vec3(uv,1.0)*tfm).xy - 0.1*time;
    texCol = vec4(texture2D(texture2, muv));
    gl_FragColor = texCol;


  • It's probably a good idea to put the error you are getting in your question. I am guessing its "texture3d" and "gl.texture" that are the problem. They should probably both be "texture2d"
    – 2pha
    Nov 20 '21 at 22:50
  • Hi thanks, is running but is not behaving the same. I will update my question and place the links.
    – Alivajorg
    Nov 20 '21 at 23:39
  • I edited can you give it a look when you have time please?
    – Alivajorg
    Nov 20 '21 at 23:44

You have two issues:

  1. Your textures are a lot larger than the shader toy ones, either use smaller textures or scale down the uv coordinates (uv*=0.1 results in a similar scale).
  2. Your textures are not wrapping and their dimensions are not a power of two(which is required to enable wrapping [in WebGL1]), you need to resize the textures and apply wrapping using textureWrap(REPEAT) or wrap in the shader, for example by using fract to wrap the lookup coordinates in your texture2D calls.
  • hey! thanks go it. Just in the second part i will prefer to do it in the webgl side, but not sure how to wrap the lookups can you give me a hint ? thanks.
    – Alivajorg
    Nov 22 '21 at 0:52
  • also how i get the textures at power of two?
    – Alivajorg
    Nov 22 '21 at 1:45
  • thanks! getting there i thinks i was able to do what you respones, but still working abit diferent i update the p5.js llink
    – Alivajorg
    Nov 22 '21 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.