Our great sponsors
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
yeah, I've played around with a few approaches for running the timestep and for some reason I don't feel like I get the same results as liquidfun.js.
their loop [0] is pretty simple; it's scheduled by `requestAnimationFrame`, advances time by 1/60th of a second, and runs their default of 3 particle iterations. it completes the physics simulation within 3.9–5.5ms, which is easily in time for the 16ms deadline. the rendering is WebGL, which I assume fits easily into that 16ms budget too.
my loop [1] is more complicated; I don't hardcode the timestep to 1/60 seconds, because requestAnimationFrame may be scheduled less frequently than that. so instead I advance time by the time elasped since I was last scheduled. hm, I think there's a mistake there — `lastMs = nowMs` is probably on the wrong side of the physics calculation.
there's an additional technique I use: I put a `Math.min()` over the simulation interval, so that I don't attempt to simulate more than 20ms (this can happen if you get scheduled infrequently due to hot CPU or backgrounding the app) — simulating too much time will make us fail our frame deadline anyway.
furthermore, if we are calculating more than 1/60th of a second, I employ more particle iterations (i.e. 3 particle iterations for every 1/60th of a second that passes). this gave me good results, but turns out it is based on incorrect assumptions (iterations are unrelated to timestep)[3]. moreover, I may be making mistakes in my decision of whether to round this fraction up/down.
if too few particle iterations for a timestep: the particles will bounce. if too many: the particles will look too incompressible[4]. I think that's the "solid-like" structure you're describing.
the main reason I complicated this is because the last one I did[5] made me feel motion-sick. I think if "every 1/60th, or 1/30th, or 1/20th of a second: you simulate a 1/60th of a second of time": the result (if you're not scheduled consistently) is that the world speed keeps changing. I think liquidfun.js's approach should be vulnerable to this, but for some reason it looks fine to me. maybe they get scheduled more consistently than me (even though by my measurements, my physics runs slightly faster, so should be able to achieve similar results).
I think I need to remind myself of what happens if I program the timestep in the simple way that liquidfun.js did. will try that out at some point.
[0] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[1] https://github.com/Birch-san/liquidfun-play-2/blob/master/sr...
[2] https://github.com/Birch-san/liquidfun-play-2/blob/master/sr...
[3] http://google.github.io/liquidfun/Programmers-Guide/html/md_...
[4] http://google.github.io/liquidfun/Programmers-Guide/html/md_...
[5] https://birchlabs.co.uk/box2d-wasm-liquidfun/
Author here. This demo showcases liquidfun-wasm[0], my effort to revive liquidfun[1] (a fork which adds fluid simulation and soft-body physics to Box2D[2]).
to make liquidfun-wasm, I repurposed my existing box2d-wasm[3] and pointed it at a different release of Box2D — a commit obtained by rebasing liquidfun over 7 years of upstream Box2D changes[4]. the end result is that liquidfun is now distributed in WebAssembly and with TypeScript typings for the first time. The TypeScript typings are generated from WebIDL bindings via my webidl-to-ts[5] compiler.
this demo in particular aims to bring to the Web the shaders from the liquidfun EyeCandy demo[6], and show how fast JS can run if you avoid incurring the garbage collector (the main loop tries not to allocate objects). the demo repurposes gravity and drag calculations that I'd used previously in my Lunar Survey experiment[7] (a Mario Galaxy homage).
[0] https://github.com/Birch-san/box2d-wasm/releases/tag/liquidf...
[1] http://google.github.io/liquidfun/
[2] https://github.com/erincatto/box2d
[3] https://github.com/Birch-san/box2d-wasm
[4] https://github.com/Birch-san/box2d-wasm/releases/tag/v4.0.0-...
[5] https://github.com/Birch-san/box2d-wasm/tree/master/webidl-t...
[6] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[7] https://birchlabs.co.uk/lunar-survey/
yes, I compiled with -msimd128 to enable LLVM's auto-vectorization. I distribute both SIMD and non-SIMD, and the entrypoint picks whichever distribution your browser supports. for box2d-wasm, SIMD acceleration resulted in a 0.6–0.9% performance boost [0] when simulating a pyramid of boxes.
liquidfun-wasm is a fork with additional algorithms for performantly simulating particles. I have not yet built a benchmark to measure the particle code, but do intend to. I am optimistic that liquidfun's particle code could auto-vectorize better than the general Box2D code.
the Google engineers considered how to take advantage of SIMD, to the extent that they even ship a NEON SIMD algorithm[1]. I don't believe my compiler config will use that NEON algorithm (and will instead fallback to the general algorithm [2]). that's probably not a missed opportunity; many NEON features are not supported[3]. but since the engineers were thinking about SIMD, hopefully the non-NEON algorithm will try to make good use of the CPU and memory layout too, and auto-vectorize well.
[0] https://github.com/Birch-san/box2d.ts/pull/1
[1] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[2] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[3] https://emscripten.org/docs/porting/simd.html#compiling-simd...
Author here. This demo showcases liquidfun-wasm[0], my effort to revive liquidfun[1] (a fork which adds fluid simulation and soft-body physics to Box2D[2]).
to make liquidfun-wasm, I repurposed my existing box2d-wasm[3] and pointed it at a different release of Box2D — a commit obtained by rebasing liquidfun over 7 years of upstream Box2D changes[4]. the end result is that liquidfun is now distributed in WebAssembly and with TypeScript typings for the first time. The TypeScript typings are generated from WebIDL bindings via my webidl-to-ts[5] compiler.
this demo in particular aims to bring to the Web the shaders from the liquidfun EyeCandy demo[6], and show how fast JS can run if you avoid incurring the garbage collector (the main loop tries not to allocate objects). the demo repurposes gravity and drag calculations that I'd used previously in my Lunar Survey experiment[7] (a Mario Galaxy homage).
[0] https://github.com/Birch-san/box2d-wasm/releases/tag/liquidf...
[1] http://google.github.io/liquidfun/
[2] https://github.com/erincatto/box2d
[3] https://github.com/Birch-san/box2d-wasm
[4] https://github.com/Birch-san/box2d-wasm/releases/tag/v4.0.0-...
[5] https://github.com/Birch-san/box2d-wasm/tree/master/webidl-t...
[6] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[7] https://birchlabs.co.uk/lunar-survey/
yeah, I've played around with a few approaches for running the timestep and for some reason I don't feel like I get the same results as liquidfun.js.
their loop [0] is pretty simple; it's scheduled by `requestAnimationFrame`, advances time by 1/60th of a second, and runs their default of 3 particle iterations. it completes the physics simulation within 3.9–5.5ms, which is easily in time for the 16ms deadline. the rendering is WebGL, which I assume fits easily into that 16ms budget too.
my loop [1] is more complicated; I don't hardcode the timestep to 1/60 seconds, because requestAnimationFrame may be scheduled less frequently than that. so instead I advance time by the time elasped since I was last scheduled. hm, I think there's a mistake there — `lastMs = nowMs` is probably on the wrong side of the physics calculation.
there's an additional technique I use: I put a `Math.min()` over the simulation interval, so that I don't attempt to simulate more than 20ms (this can happen if you get scheduled infrequently due to hot CPU or backgrounding the app) — simulating too much time will make us fail our frame deadline anyway.
furthermore, if we are calculating more than 1/60th of a second, I employ more particle iterations (i.e. 3 particle iterations for every 1/60th of a second that passes). this gave me good results, but turns out it is based on incorrect assumptions (iterations are unrelated to timestep)[3]. moreover, I may be making mistakes in my decision of whether to round this fraction up/down.
if too few particle iterations for a timestep: the particles will bounce. if too many: the particles will look too incompressible[4]. I think that's the "solid-like" structure you're describing.
the main reason I complicated this is because the last one I did[5] made me feel motion-sick. I think if "every 1/60th, or 1/30th, or 1/20th of a second: you simulate a 1/60th of a second of time": the result (if you're not scheduled consistently) is that the world speed keeps changing. I think liquidfun.js's approach should be vulnerable to this, but for some reason it looks fine to me. maybe they get scheduled more consistently than me (even though by my measurements, my physics runs slightly faster, so should be able to achieve similar results).
I think I need to remind myself of what happens if I program the timestep in the simple way that liquidfun.js did. will try that out at some point.
[0] https://github.com/google/liquidfun/blob/master/liquidfun/Bo...
[1] https://github.com/Birch-san/liquidfun-play-2/blob/master/sr...
[2] https://github.com/Birch-san/liquidfun-play-2/blob/master/sr...
[3] http://google.github.io/liquidfun/Programmers-Guide/html/md_...
[4] http://google.github.io/liquidfun/Programmers-Guide/html/md_...
[5] https://birchlabs.co.uk/box2d-wasm-liquidfun/
Related posts
- Article reply “Godot is not the new Unity” from Juan Linietsky (BDFL of Godot)
- [AskJS] How could I implement realistic fluids simulations (SPH?) in my video game?
- Parquet-WASM: Rust-based WebAssembly bindings to read and write Parquet data
- Py2wasm – A Python to WASM Compiler
- Thetawave: A physics based, space shooter game made with Rust and the Bevy engi