Jump to content

pixi-spine plugin WIP GPU patch


Recommended Posts

Patch moves all vertex calculations to the shader.




Its work in progress, but its already 33% faster for heavy models which use skinned meshes and FFD animations.


Demos are coming soon.



Link to comment
Share on other sites

sounds great ! looking forward to the comparison


Ok, now that tint and interaction work, you can download and include this file just after pixi-spine and look at differences for your project :)


There is some small problem with bounding boxes, but Im working on it.


UPD. width/height of Spine as a container can be incorrect with this patch. and getBounds() are cached. So if you use width/height, please switch to getBounds(), and it'll be ok


UPD2. All fixed.

Link to comment
Share on other sites

  • 3 weeks later...

hi. i tested SkinnedMeshPatch.js 


same code and only added 



<script type="text/javascript" src="../../js/libe/pixi.3.0.8.js"></script><script type="text/javascript" src="../../js/libe/pixi-spine.js"></script>


<script type="text/javascript" src="../../js/libe/pixi.3.0.8.js"></script><script type="text/javascript" src="../../js/libe/pixi-spine.js"></script><script type="text/javascript" src="../../js/libe/SkinnedMeshPatch.js"></script>

and then i got like under 



under image is 'Before' Code



Link to comment
Share on other sites

Awesome ^^/

i tested....

this is super fast~~~with spine mesh


  does it use with normal spine? O_O/

Performance is really really good. but it seems to get problems

not with WIP GPU


with WIP GPU


some part vertices calculating has missing.. maybe.? 

and performance is really really really good..


tested on
Chrome:  46.0.2490.86 m (64-bit)
Graphic: GTX 650

data : dragon (spine example data);
count: 500


with WIP GPU.


with WIP GPU


thx ^^/ 





Link to comment
Share on other sites

Code is Ultra Simple



<!doctype html><html><head>    <title>S Proejct by Pixi 2.2.7</title>    <meta charset='utf-8'>    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0">    <link rel="stylesheet" type="text/css" href="../../css/jandi.css"/>    <style>        body { width: 100%; height:100%; margin: 0; padding: 0; background-color: #1c94c4; }    </style>    <script type="text/javascript" src="../../js/libe/pixi.3.0.8.js"></script>    <script type="text/javascript" src="../../js/libe/pixi-spine.js"></script>    <script type="text/javascript" src="../../js/libe/SkinnedMeshPatch.js"></script>    <script type="text/javascript" src="main.js"></script></head><body><select id="select"></select><input type="file"></label><div id="stat"></div><div id="main" width=1280' height='720'></div><!-- main --><script>runMain()</script></body></html>


var spineContainer = null;function runMain() {    var renderer = PIXI.autoDetectRenderer(1920, 1080);    document.body.appendChild(renderer.view);// create the root of the scene graph    var stage = new PIXI.Container();// load spine data    PIXI.loader        .add('f1', './raptor/raptor.json')        //.add('f1', './goblin/goblins-mesh.json')        //.add('f1', './goblin/goblins.json')        //.add('f1', './goblin/goblins-mesh-leak.json')        //.add('f1', './goblin/goblins-mesh_all_delete.json')        .load(onAssetsLoaded);    var dragon = null;    var dragonCage = new PIXI.Container();    spineContainer = dragonCage;    // add the container to the stage    stage.addChild(dragonCage);    function onAssetsLoaded(loader,res)    {        var count = 500;        for(var i = 0; i < count; ++i){            // instantiate the spine animation            dragon = new PIXI.spine.Spine(res.f1.spineData);            dragon.skeleton.setToSetupPose();            dragon.update(0);            dragon.autoUpdate = false;            // create a container for the spine animation and add the animation to it            dragonCage.addChild(dragon);            if(0){                var skeleton = dragon.skeleton;                skeleton.setSkinByName("goblin");                skeleton.setSlotsToSetupPose();            }            if(1){                // measure the spine animation and position it inside its container to align it to the origin                var localRect = dragon.getLocalBounds();                dragon.position.set(100 + (i*50)%1500, 200 + parseInt(((i*50)/1700))*70 );                //dragon.position.set(-localRect.x + JLib.random(-500, 1920 -  1500), JLib.random(1000, 1000));                var scale = 0.2;//JLib.randomf(0.5, 0.5);                dragon.scale.set(scale, scale);            }            // once position and scaled, set the animation to play            dragon.state.setAnimationByName(0, 'walk', true);        }        animate();    }    var elased = Date.now();    var delta = 0;    function animate() {        delta = (Date.now() - elased)/1000;        elased = Date.now();        requestAnimationFrame(animate);        for (var i in spineContainer.children) {            //stage.children[i].children[0].update(0.0166666);            spineContainer.children[i].update(delta);        }        renderer.render(stage);    }};

data is spine example!


Link to comment
Share on other sites


<script type="text/javascript" src="../../js/libe/SkinnedMeshPatch.js"></script>

if use SkinnedMeshPatch, performance is increased with normal spine data(about 10%)

but it gave some bugs with performance..


1. texture crashed for very shortest time about 0.xx sec.  after then draw normally




2.cutted spine.

  moving with filter(Outline)  . and then cut spine 



normal spine


thx a lot 

Link to comment
Share on other sites

Hi..  I'm really expecting WIP-GPU... --b wonderful..
so i'll hope to update more and more for performance up or ability up with spine.


there is no BlendMode with WIP-GPU!


i test with spine-data that blend has


and then it looked like that..

it looks like blendmode skipped..

BlendMode with ADD( Not Using WIP-GPU)


BlendMode with ADD(Using WIP-GPU) - i can look like this when i skip blend mode with 'NOT using WIP-GPU';




thx ..

Link to comment
Share on other sites


this version can draw ADDITIVE.


but there is to looks like some problem. 

blendmode is sometimes off!

for example.. 
duration of spine ani is . with 60 frame

1-40 frames seem to have ADDITIVE.  

40-43 or very short time seem without ADDITIVE
and 44-endframe seem to have ADDITIVE..

i couldn't find rule to happen this situation..




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...