Jump to content

pixi-spine plugin WIP GPU patch


ivan.popelyshev
 Share

Recommended Posts

Patch moves all vertex calculations to the shader.

 

https://github.com/pixijs/pixi-spine/blob/gpupatch/gpupatch/SkinnedMeshPatch.js

 

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

 

Demos are coming soon.

 

YES, ITS ONLY FOR SPINE ANIMATIONS.

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 

 

Before

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

After..

<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 
post-10357-0-47174600-1448974234_thumb.p

 

 

under image is 'Before' Code
post-10357-0-12588800-1448974245_thumb.p

 

thx...
 

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
post-10357-0-65353800-1448987534.png

 

with WIP GPU

post-10357-0-65070800-1448987538.png

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.
post-10357-0-31293800-1448987640_thumb.p

 

with WIP GPU

post-10357-0-35750200-1448987644_thumb.p


thx ^^/ 

 

 

 

 

Link to comment
Share on other sites

Code is Ultra Simple

 

index.hmlt

<!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>

main.js

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!

Thx..

Link to comment
Share on other sites

hi. 

<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

post-10357-0-63513200-1448995381.png

 

 

2.cutted spine.

  moving with filter(Outline)  . and then cut spine 

post-10357-0-46539600-1448995399.png

 

normal spine

post-10357-0-04560800-1448995406.png


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)
post-10357-0-90760500-1449146815.png

 

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

post-10357-0-45661700-1449146845.png

 

 

thx ..

Link to comment
Share on other sites

hi..

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..

 

thx...^^/







 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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