diff --git a/spine-ts/webgl/demos/additiveblending.html b/spine-ts/webgl/demos/additiveblending.html
new file mode 100644
index 000000000..06a0fcf6b
--- /dev/null
+++ b/spine-ts/webgl/demos/additiveblending.html
@@ -0,0 +1,21 @@
+
+
+IK Constraints - Spine Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/additiveblending.js b/spine-ts/webgl/demos/additiveblending.js
new file mode 100644
index 000000000..178b6dfd4
--- /dev/null
+++ b/spine-ts/webgl/demos/additiveblending.js
@@ -0,0 +1,158 @@
+var additiveBlendingDemo = function(canvas, bgColor) {
+ var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
+ var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
+ var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
+ var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
+ var HANDLE_SIZE = 0.10;
+
+ var gl, renderer, input, assetManager;
+ var skeleton, state, bounds;
+ var timeKeeper, loadingScreen;
+ var target = null;
+ var dragging = false;
+ var handle = new spine.Vector2();
+ var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
+ var isPlaying = true;
+
+ var left, right, up, down;
+
+ var DEMO_NAME = "AdditiveBlendingDemo";
+
+ if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
+
+ function isMobileDevice() {
+ return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
+ };
+
+ function init () {
+ canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+ gl = canvas.ctx.gl;
+
+ renderer = new spine.webgl.SceneRenderer(canvas, gl);
+ assetManager = spineDemos.assetManager;
+ var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+ assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+ assetManager.loadText(DEMO_NAME, "atlas2.atlas");
+ assetManager.loadJson(DEMO_NAME, "demos.json");
+ timeKeeper = new spine.TimeKeeper();
+ }
+
+ function loadingComplete () {
+ var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+ return assetManager.get(DEMO_NAME, path);
+ });
+ var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+ var skeletonJson = new spine.SkeletonJson(atlasLoader);
+ var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["owl"]);
+ skeleton = new spine.Skeleton(skeletonData);
+ state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+
+ state.setAnimation(0, "idle", true);
+ left = state.setAnimation(1, "blink", true);
+
+ left = state.setAnimation(2, "left", true);
+ right = state.setAnimation(3, "right", true);
+ up = state.setAnimation(4, "up", true);
+ down = state.setAnimation(5, "down", true);
+
+
+ left.mixBlend = spine.MixBlend.add;
+ left.alpha = 0;
+ right.mixBlend = spine.MixBlend.add;
+ right.alpha = 0;
+ up.mixBlend = spine.MixBlend.add;
+ up.alpha = 0;
+ down.mixBlend = spine.MixBlend.add;
+ down.alpha = 0;
+
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+ var offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+
+ renderer.camera.position.x = offset.x + bounds.x / 2;
+ renderer.camera.position.y = offset.y + bounds.y / 2;
+
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+
+ setupInput();
+ }
+
+ function calculateBlend (x, y, isPageCoords) {
+ if (isPageCoords) {
+ var canvasBounds = canvas.getBoundingClientRect();
+ x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x));
+ y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y));
+ }
+ x = x / canvas.width;
+ y = y / canvas.height;
+ left.alpha = (Math.max(x, 0.5) - 0.5) * 2;
+ right.alpha = (0.5 - Math.min(x, 0.5)) * 2;
+ up.alpha = (0.5 - Math.min(y, 0.5)) * 2;
+ down.alpha = (Math.max(y, 0.5) - 0.5) * 2;
+ }
+
+ function setupInput () {
+ if (!isMobileDevice()) {
+ document.addEventListener("mousemove", function (event) {
+ calculateBlend(event.clientX, event.clientY, true);
+ }, false);
+ } else {
+ var input = new spine.webgl.Input(canvas);
+ input.addListener({
+ down: function(x, y) {
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
+ dragging = true;
+ }
+ },
+ up: function(x, y) {
+ dragging = false;
+ },
+ dragged: function(x, y) {
+ if (dragging) {
+ renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+ handle.x = coords.x;
+ handle.y = coords.y;
+ calculateBlend(x, y, false);
+ }
+ }
+ });
+ }
+ }
+
+ function render () {
+ timeKeeper.update();
+ var delta = timeKeeper.delta;
+
+ state.update(delta);
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+
+ renderer.camera.viewportWidth = bounds.x * 1.4;
+ renderer.camera.viewportHeight = bounds.y * 1.4;
+ renderer.resize(spine.webgl.ResizeMode.Fit);
+
+ gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ renderer.begin();
+ renderer.drawSkeleton(skeleton, true);
+
+ if (isMobileDevice()) {
+ gl.lineWidth(2);
+ renderer.circle(true, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_INNER);
+ renderer.circle(false, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_OUTER);
+ gl.lineWidth(1);
+ }
+
+ renderer.end();
+ }
+
+ additiveBlendingDemo.loadingComplete = loadingComplete;
+ additiveBlendingDemo.render = render;
+ additiveBlendingDemo.DEMO_NAME = DEMO_NAME;
+ init();
+};
\ No newline at end of file