[3.8.95/webgl] Exact same code running at different speeds on different machines

lcddem

When using the same code even the demo and tests it runs around 4x faster on my desktop vs my laptop. timeScale is 1 in both situations. Is there a way to limit how fast an animation plays so faster machines don't blaze through them?

Davide

lcddem

Could you tell me the version of your Spine assets?
I guess that it is something related to framerate.

Spinebot

To address the issue of animations running at different speeds on different machines, you can implement frame rate-independent animation timing. This involves using a delta time approach, where you calculate the time elapsed between frames and adjust the animation playback accordingly. This ensures that the animation speed remains consistent regardless of the machine's performance. In the context of Spine, you can adjust the TrackEntry.timeScale for specific animations to control their playback speed independently of the global time scale. This allows you to fine-tune the animation speed to ensure consistency across different hardware.

Nate

How are you rendering? Can you show the code? You should be increasing the animation time based on wall time, so it doesn't matter if a computer is faster or slower.

lcddem

I was using the test-binary.html code with only the file paths changed before i noticed the issue. this is the provided render function. the version of my assets are 3.8.99

function render() {
	var start = Date.now()
	timeKeeper.update();
	var delta = 0.016; // timeKeeper.delta;
	for (var i = 0; i < skeletons.length; i++) {
		var state = skeletons[i].state;
		var skeleton = skeletons[i].skeleton;
		state.update(delta);
		state.apply(skeleton);
		skeleton.updateWorldTransform();
	}
	updateMean.addValue(Date.now() - start);
	start = Date.now();
	gl.clearColor(0.2, 0.2, 0.2, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);
	renderer.resize(spine.webgl.ResizeMode.Fit);
	renderer.begin();
	for (var i = 0; i < skeletons.length; i++) {
		var skeleton = skeletons[i].skeleton;
		renderer.drawSkeleton(skeleton, true);
	}
	renderer.end();
	requestAnimationFrame(render)
	renderMean.addValue(Date.now() - start);
	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
}

Nate

You are advancing animations at a fixed 16 milliseconds per frame:

var delta = 0.016; // timeKeeper.delta;

Use timeKeeper.delta to advance the animations using the time elapsed since last frame.

I see the timeKeeper is commented out even in 4.2. We'll fix that!