ivan.popelyshev

pixi-spine plugin WIP GPU patch

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

This plugin had DOUBLED the frame rate for most people that play my game!

Thank you Ivan for making this :)

 

Seriously, if you use Spine and PIXI, load this plugin as well!! It will throw a lot of the calculations over to the GPU and increase the performance dramatically!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

hi. i tested SkinnedMeshPatch.js 

 

and then i got like under 

 

under image is 'Before' Code

thx...

 

 

Thank you!

 
Just found that in one place it used "renderer" instead of "this.renderer". So it was working if you have renderer in global context. Now it is fixed, please try again :)

Share this post


Link to post
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 ^^/ 

 

 

 

 

Share this post


Link to post
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..

Share this post


Link to post
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 

Share this post


Link to post
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 ..

Share this post


Link to post
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...^^/







 

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.