Hey!

This is WebGl!

I have this fragment shader that I found on shadertoy.com, and now I'm going to implement it via three.js. My issue is that I would really want to be able to go control the "time" of the shader. So that I can let it "play" and then "reverse" the effect to get it back to the starting point. It will also be interactive so it's not a question of an animation.

What would be the best way to do this? I'm new when it comes to fragment shaders.

Here's the shadertoy effect:
https://www.shadertoy.com/view/ldcGDX

Would really appreciate an answer, thank you!

The issue with rewinding time on that shader is that it is progressive, and destructive. That is, it modifies the input image and replaces it each frame with that frame's output, discarding the previous input. The shader is not a simple expression of a function f(x,y,t), which could easily be rewound simply by specifying a smaller value for t. The only way to rewind to a given frame would be to somehow restore the input texture for that frame, but that texture is the product of all of the frames previous to it so restoring it isn't really feasible. Unless you have some way of reconstructing it, I believe your only recourse would be to store all of the frames, a solution which would consume a great deal of memory.

Any time a shader writes to an output buffer, then uses that new output as an input for the next frame, you have a destructive aspect that makes it difficult, if not impossible, to render a frame for an arbitrary time, t.

Indeed, this particular effect could be very hard to model. You could get away with something similar/cheaper though. E.g. playing with analytic waves and sampling multiple times, or using mipmaps  

https://www.shadertoy.com/view/MtfyDN

@JTippetts @unbird

Thank you both for your helpful responses.

I played around with another fragment shader in three.js (https://threejs.org/examples/?q=shader#webgl_shader) and with the help of the animate function in javascript I managed to play it and reverse it. This was not an image based shader, but my hope is that three.js will stand above the imported and converted shader, which will make it possible to use the animate function to reverse even my shader. Is this possible? I will make a try unless you say that it's impossible for sure. Thank you!

Just also want to add, that It's completely fine if there's a way to ONLY reverse the effect. From a blurred state to a clear image. So that I can use 2 different shaders that i smoothly transition between midway.

The second shader is not progressive and destructive like the first, so it should be trivial to animate. It represents a function, f(t), where you can easily calculate the output based on the input time, t. Simply by specifying a value for t, you can evaluate the output for any time you desire, and by animating t forward or backward, you can progress and regress the image as you like.

The same is not true for your original shader. That one has no practicable way to reverse the effect, since each subsequent frame uses the previous frame's output as input. That means that in order to evaluate the frame for time t, you need to evaluate every frame that came before it, progressively altering the input image at each frame. Once the input image is altered, there is no way to get it back. And there is no way to know what the input image for time t looks like, without having evaluated all of the frames beforehand. Simply embedding the shader into a three.js framework won't solve that problem.

I understand, thank you!