WebGL Fragment Shader played in Reverse

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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!

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now