I'd like to simulate a 4-dimensional cloth in the web browser, since browsers don't offer great ressources for numerical computation, I'd like to know which algorithm uses the least amount of operations per frame / vertex.

Here is some naive first draft using explicit Euler. I found this paper discussing a fast method for finding approximate solutions of the implicit Euler method. What I gathered from the discussion is that implicit Euler is numerically more stable in certain scenarios, but it looks like it uses more operations than explicit Euler since it is built around iterations. Is that correct?

Also, are there any libraries using WebGL to accelerate numerical computations which might be useful for this project? I thought about looking into TensorFlow.js.

  • $\begingroup$ I actually implemented that paper not long ago. It was in a compute shader however in Unity. It boiled down for the case of non tearing cloth of a matrix vector multiplication mainly. $\endgroup$ Oct 23, 2023 at 1:41

1 Answer 1


Time integration with implicit Euler is unconditionally stable. This means you can choose arbitrary large time steps without worrying that your solution "explodes". In contrast to explicit Euler, it requires you to solve a linear equation system at least once, which is generally much slower than simple matrix-vector multiplication. If the problem is non-linear, you also need to iterate until your error is minimized. This obviously takes even longer.

However, stability issues can be a pain to deal with and all explicit methods have limitations regarding their stability. Solving stability problems might force you to reduce your time step size drastically and to calculate so many intermediate steps that the implicit version gets more effective. An additional factor is the size of the system you want to simulate. If I remember correctly, the finer your mesh (smaller cells), the smaller are the timesteps you need to maintain stability.

I'd like to know which algorithm uses the least amount of operations per frame / vertex.

I think there is no general answer to the question because it depends on many factors like the mesh size, target FPS and the maximum local velocity that might occur. You need to evaluate all relevant factors and pick a method based on your exact problem.

In case you want raw speed and do not encounter any stability problems, the explicit Euler method should be one of the fastest methods but it usually blows up rather quickly.

Additional info

A time-integration method that is quite popular in real-time engines is Runge-Kutta 4. It is also an explicit method and doesn't require you to solve a linear system. It has a good balance of stability and speed, so you might have a look at it. I have never simulated cloth myself, nor have I programmed an RK4, so I can't tell if it is a good choice here.

  • 1
    $\begingroup$ Thanks for the answer! I also found this paper, which seems to strike some compromise between speed and exactness. I work in design, so I don't want to solve a specific problem but first and foremost want to get something to look cool and behave fluently, so if my parameters lead to numerical instability, I can tweak them a bit. I think I'll try to implement explicit Euler on the GPU, even if it doesn't work, it seems like a useful practice to work with GPU.js once. $\endgroup$
    – fweth
    Apr 13, 2021 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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