badlogic/gist:1232dd496a5a477d74f2d80740a8b8fe

## gistfile1.txt
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
	* { margin: 0; padding: 0; }
	body, html { height: 100% }
	canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas>
</body>
<script>

var FILE = "coin-pro";
var ANIMATION = "rotate";
var NUM_SKELETONS = 50;
var SCALE = 0.5;

var canvas, context, gl, renderer, input, assetManager;
var skeletons = [];
var timeKeeper;
var label = document.getElementById("label");
var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean();

function init() {
	canvas = document.getElementById("canvas");
	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
	gl = context.gl;

	renderer = new spine.webgl.SceneRenderer(canvas, context);
	renderer.skeletonDebugRenderer.drawBones = false;
	renderer.skeletonDebugRenderer.drawMeshTriangles = false;
	renderer.skeletonDebugRenderer.drawMeshHull = false;
	renderer.skeletonDebugRenderer.drawRegionAttachments = false;
	renderer.skeletonDebugRenderer.drawBoundingBoxes = false;

	assetManager = new spine.webgl.AssetManager(context, "assets/");
	input = new spine.webgl.Input(canvas);

	assetManager.loadTextureAtlas("aid_pos_anim_19.07.2019_export.atlas");
	assetManager.loadText("Aid_skeleton_2.json");

	timeKeeper = new spine.TimeKeeper();
	requestAnimationFrame(load);
}

function load() {
	timeKeeper.update();
	if (assetManager.isLoadingComplete()) {
		var atlas = assetManager.get("aid_pos_anim_19.07.2019_export.atlas");
		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
		var skeletonJson = new spine.SkeletonJson(atlasLoader);
		skeletonJson.scale = SCALE;
		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("Aid_skeleton_2.json")));

		for (var i = 0; i < NUM_SKELETONS; i++) {
			skeleton = new spine.Skeleton(skeletonData);
			var stateData = new spine.AnimationStateData(skeleton.data);
			state = new spine.AnimationState(stateData);

			var mixDuration = 0.8;
			var stableDuration = 2;
			stateData.defaultMix = mixDuration;

			state.multipleMixing = false;
			// state.setAnimation(0, ANIMATION, true);
			skeleton.x = 0;
			skeleton.y = 0;
			skeleton.updateWorldTransform();
			skeletons.push({ skeleton: skeleton, state: state });
		}

		requestAnimationFrame(render);
	} else {
		requestAnimationFrame(load);
	}
}

function render() {
	var start = Date.now()
	timeKeeper.update();
	var delta = timeKeeper.delta;
	delta = 0.016;

	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, false);
		renderer.drawSkeletonDebug(skeleton);
	}
	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");
}

init();
</script>
</html>
	<html>
	<script src="../../build/spine-webgl.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<style>
	* { margin: 0; padding: 0; }
	body, html { height: 100% }
	canvas { position: absolute; width: 100% ;height: 100%; }
	</style>
	<body>
	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
	<canvas id="canvas" style="background: red;"></canvas>
	</body>
	<script>

	var FILE = "coin-pro";
	var ANIMATION = "rotate";
	var NUM_SKELETONS = 50;
	var SCALE = 0.5;

	var canvas, context, gl, renderer, input, assetManager;
	var skeletons = [];
	var timeKeeper;
	var label = document.getElementById("label");
	var updateMean = new spine.WindowedMean();
	var renderMean = new spine.WindowedMean();

	function init() {
	canvas = document.getElementById("canvas");
	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
	gl = context.gl;

	renderer = new spine.webgl.SceneRenderer(canvas, context);
	renderer.skeletonDebugRenderer.drawBones = false;
	renderer.skeletonDebugRenderer.drawMeshTriangles = false;
	renderer.skeletonDebugRenderer.drawMeshHull = false;
	renderer.skeletonDebugRenderer.drawRegionAttachments = false;
	renderer.skeletonDebugRenderer.drawBoundingBoxes = false;

	assetManager = new spine.webgl.AssetManager(context, "assets/");
	input = new spine.webgl.Input(canvas);

	assetManager.loadTextureAtlas("aid_pos_anim_19.07.2019_export.atlas");
	assetManager.loadText("Aid_skeleton_2.json");

	timeKeeper = new spine.TimeKeeper();
	requestAnimationFrame(load);
	}

	function load() {
	timeKeeper.update();
	if (assetManager.isLoadingComplete()) {
	var atlas = assetManager.get("aid_pos_anim_19.07.2019_export.atlas");
	var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
	var skeletonJson = new spine.SkeletonJson(atlasLoader);
	skeletonJson.scale = SCALE;
	var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("Aid_skeleton_2.json")));

	for (var i = 0; i < NUM_SKELETONS; i++) {
	skeleton = new spine.Skeleton(skeletonData);
	var stateData = new spine.AnimationStateData(skeleton.data);
	state = new spine.AnimationState(stateData);

	var mixDuration = 0.8;
	var stableDuration = 2;
	stateData.defaultMix = mixDuration;

	state.multipleMixing = false;
	// state.setAnimation(0, ANIMATION, true);
	skeleton.x = 0;
	skeleton.y = 0;
	skeleton.updateWorldTransform();
	skeletons.push({ skeleton: skeleton, state: state });
	}

	requestAnimationFrame(render);
	} else {
	requestAnimationFrame(load);
	}
	}

	function render() {
	var start = Date.now()
	timeKeeper.update();
	var delta = timeKeeper.delta;
	delta = 0.016;

	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, false);
	renderer.drawSkeletonDebug(skeleton);
	}
	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");
	}

	init();
	</script>
	</html>