Jank-free rendering & shared tickers (WIP) #10

JonDum · 2018-09-13T08:11:19Z

I added a setValue function that acts as sugar
for updating config and starting. This is somewhat akin
to setEndValue in rebound. Name of method is totally
up for debate.

Second, I added a raf config option (again, name up for
debate) that stops _step() from registering its own
requestAnimationFrames. With raf: false all spring
advancing must be done manually.

That said, I mangled the living hell out of _step
and advanceSpringToTime in order to get this to work.

It needs some cleaning up. Perhaps _step becomes
what _advanceSpring is now? Usually in GL land
step/tick functions are called by your main draw loop
to do whatever time-based advancing they need to do, so there'd
be some parity to existing convetions that way.

Finally, check out the squares demo I added (again it's messy).
If you watch the performance monitor heap allocation remains
constant and there's only a single raf frame 👍

Inner function should be free of memory allocation

Also mangles _step and `advancedToTime` pretty bad.

JonDum · 2018-09-13T08:13:37Z

src/index.ts

+    this._config.toValue = value;
+    this._config.initialVelocity = this._currentVelocity;
+    this.start();
+    this._advanceSpringToTime(undefined, true);


I definitely don't like this (undefined, true). Perhaps it'd be best to move the raf loop into start/stop and the spring logic in step?

appsforartists · 2018-09-17T12:06:51Z

demos/squares/index.html

+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./index.tsx"></script>


Not sure why you're using .tsx here. You aren't using TypeScript or JSX, and even if you were, they'd need to be converted to JavaScript before being included in a page.

The dev system transpiles it to a js when running yarn dev. I just copied from the other demo.

appsforartists · 2018-09-17T12:10:22Z

src/index.ts

-      ...this._config,
-      ...baseConfig,
-      ...updatedConfig
-    };


Not sure why you felt the need to change this. Was there a problem, or do you just prefer the iterative style?

appsforartists · 2018-09-17T12:13:09Z

src/index.ts

+    this._config.toValue = value;
+    this._config.initialVelocity = this._currentVelocity;
+    this.start();
+    this._advanceSpringToTime(undefined, true);


Is this just sugar over .updateConfig({ toValue: })?

Yes. To avoid the object literal and extra steps updating the config when you only need to update the value (which is going to be most use cases) instead of the whole config.

appsforartists · 2018-09-17T12:22:28Z

Thanks for contributing!

I'd like to see more context. Were there issues you were running into that led to these changes? Can we separate them out into individual pieces (e.g. setValue sugar, skipping raf, using loops instead of literals) so we can discuss them independently?

Personally, I'm skeptical of changes that only have theoretical benefits or suit a personal style. If you can say "it drops frames when there are more than 4 springs running on this class of device," I'm more amenable to changes than "this is theoretically faster if you have eleventy million springs instantiated per frame."

I don't mean to be a skeptic or pedant, but I would like to understand the motivation for changes before commenting on or approving them.

Also, since this is a microlibrary, I'm especially conservative about API sugar. I don't see much benefit of setValue(toValue) vs updateConfig({ toValue }), but replacing updateConfig with setters will impact file size.

JonDum · 2018-09-17T18:27:03Z

#9
#8

I've been using my fork for a while now and have significantly less jank. My use case is with webgl drawing as many thousands of verts as I can as smoothly as I can. Every major/minor GC results in a noticeable hiccup and drop from 60fps, so this pull is about providing pathways that avoid all memory allocation so gc's don't even happen.

Use class references to avoid unnecessary closures on draw calls

JonDum · 2018-09-17T19:21:40Z

Charts are nice, so here's a couple.

Here's the js heap size using wobble normally (letting it make its own requestAnimationFrames and using updateConfig({toValue: value})

Edit: forgot that the above is also on my PR branch, so this is probably a bit better still than skevy/wobble/develop because of the changes I made in updateConfig to reduce allocations

And here's the exact same demo using {raf: false}, setValue(value), and tick/_advanceSpringToTime:

Half the cpu usage, half the memory usage and no GCs. 👍

JonDum · 2018-09-28T22:41:08Z

Any thoughts?

nickschot · 2020-03-31T18:29:53Z

Any hopes of getting this PR merged? I know its been a long time 😅

JonDum · 2020-04-05T20:34:03Z

Author doesn't really seem interested. Might as well use my fork if performance is important to you.

nickschot · 2020-04-06T10:36:21Z

That is indeed what I was considering in case there was no response! Thanks 🙂

JonDum added 3 commits September 13, 2018 00:54

Avoid object literals in updateConfig

9c21523

Inner function should be free of memory allocation

Add setValue method, raf config option

f6a34f0

Also mangles _step and `advancedToTime` pretty bad.

Add squares demo

b7decbb

JonDum commented Sep 13, 2018

View reviewed changes

appsforartists reviewed Sep 17, 2018

View reviewed changes

Improve squares demo

d86a3ad

Use class references to avoid unnecessary closures on draw calls

Add commented raf, no-raf versions of squares demo

101be22

tommy-mitchell mentioned this pull request Feb 8, 2022

Merge JonDum/wobble tommy-mitchell/wobble#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jank-free rendering & shared tickers (WIP) #10

Jank-free rendering & shared tickers (WIP) #10

JonDum commented Sep 13, 2018

JonDum Sep 13, 2018

appsforartists Sep 17, 2018

JonDum Sep 17, 2018

appsforartists Sep 17, 2018

JonDum Sep 17, 2018

appsforartists Sep 17, 2018

JonDum Sep 17, 2018 •

edited

Loading

appsforartists commented Sep 17, 2018

JonDum commented Sep 17, 2018

JonDum commented Sep 17, 2018 •

edited

Loading

JonDum commented Sep 28, 2018

nickschot commented Mar 31, 2020

JonDum commented Apr 5, 2020

nickschot commented Apr 6, 2020

Jank-free rendering & shared tickers (WIP) #10

Are you sure you want to change the base?

Jank-free rendering & shared tickers (WIP) #10

Conversation

JonDum commented Sep 13, 2018

JonDum Sep 13, 2018

Choose a reason for hiding this comment

appsforartists Sep 17, 2018

Choose a reason for hiding this comment

JonDum Sep 17, 2018

Choose a reason for hiding this comment

appsforartists Sep 17, 2018

Choose a reason for hiding this comment

JonDum Sep 17, 2018

Choose a reason for hiding this comment

appsforartists Sep 17, 2018

Choose a reason for hiding this comment

JonDum Sep 17, 2018 • edited Loading

Choose a reason for hiding this comment

appsforartists commented Sep 17, 2018

JonDum commented Sep 17, 2018

JonDum commented Sep 17, 2018 • edited Loading

JonDum commented Sep 28, 2018

nickschot commented Mar 31, 2020

JonDum commented Apr 5, 2020

nickschot commented Apr 6, 2020

JonDum Sep 17, 2018 •

edited

Loading

JonDum commented Sep 17, 2018 •

edited

Loading