[OPEN SOURCE] Multiplayer 3D RPG Using Colyseus

Thanks @Deltakosh Babylon.js rocks! :stuck_out_tongue:

Ok final PG, you can now click on each entity to change the current animation, I cannot think of anything else that needs to be added in order to debug/fine tune: https://playground.babylonjs.com/#3NIXCL#516

→ click entity to change animation
→ arrows to move player

What is the problem in the latest PG?

I can’t see any out of place helmet / sword / shield, even when playing animations?

If you can repro a problem, can you do it with less instances? It’s hard to see something with so many things on the screen!

Thanks in advance.

Ok, I was able to reproduce the bug with the death animation, where some frames aren’t correct / the animation doesn’t loop correctly (I wasn’t able to reproduce the problem with the misplaced items, though).

Here’s a PG that seems to work:

I’ve forced the death animation to play more often than the others in this PG, and I’ve also reset the animation to “idle” after 2s, so that it can be tested more easily.

Problems I spotted:

  • it seems that the knight/rat death animation is one frame too long, and the mage/rogue animation is 3 frames too long. I’ve corrected the “to” value lines 346/350. You should check all VAT animations to make sure the range (from, to) is correct, there may be other animations that have this problem.
  • when a VAT animation is looped, it is looped from from+1, not from, to avoid artifacts. So, to loop the death animation over the last frame, we need to define toFrame - 1 and toFrame as the from and to frames of the VAT vector, respectively.
  • The biggest problem was that setting vat.time = 0 at the end of the death animation caused all other animations in progress to jump to their first frame, instead of continuing their animation. Instead of resetting vat.time to 0, an offset should be calculated each time an animation is started, so that the first frame calculated for the new animation is actually frame #0. To do this, we calculate the frame corresponding to the current vat time, and use as offset totalFrames - frameCurrentVATTime (see lines 673-678). In this way, when the current frame is calculated for this animation at the next tick, the vat shader will calculate the current frame (which will be equal to frameCurrentVATTime) and add the offset, giving frameCurrentVATTime + (totalFrames - frameCurrentVATTime) = totalFrames. This corresponds to frame #0, as there is a modulus operation with totalFrames afterwards.

I think this explains most of the changes I’ve made to the code.

Don’t hesitate to ask questions if something isn’t clear!

5 Likes

Hi @Evgeni_Popov,

Thanks for the explanation, your PG works fine and it has resolve any “timing” issue I was having.

Unfortunately I’ve not managed to replicate the misplaced items issue on the playground yet, which is still happening on my project despite replicating the playground as much as possible. It just so weird it only does it for the helm… you would think all the items would be affected…

I’ve updated the PG to add a occasional height change to see if that could have had any effect

I’ll give it another try on sunday,

1 Like

And another playground that fully replicates player mouse movement,

UPDATE 1:
Added the ability to remove and equip a helmet by using the digit 1 on keyboard

UPDATE 2:
Added a simple AI so they move around too

1 Like

execllent game! Just for curious, the charactors in the game are created by “createInstance” instead of thin instance.AFAIK, the thin instance performs better, so , is it possible to use thin instance?(i’m new to babylon.js :grinning:)

Happy new year to everyone,

@Augusttty thanks, you’re probably right, but any more performance is not really needed :stuck_out_tongue:

Unfortunately, I’ve abandoned the idea trying to replicate the issue in the bjs playground, the following pg is very close to my local code and it works fine: https://playground.babylonjs.com/#3NIXCL#646

After another round of debugging on my local, here’s what I’ve proved

  • Issue only happens when I have multiple models (mage + knight for example), and multiple BakedVertexAnimationManager running
  • If all my entities(ai+player) are the same (either one work fine, mage/knight/rogue), everything works fine

Another test showed that after opening the inspector / going to textures and deleting one the vat texture, that would delete all instances related including the helm that should be linked to another vat texture… This does not happen on the PG, where it does remove all relevant model + items.

On the image below for example, I’ve deleted the mage vat texture:

I’m wondering if it’s not some sort of run order issue.

Hi All,

After trying to resolve this issue for a few months now, I’m sort of forced to abandon this project. As much as I hate abandoning, I just cannot afford to spend more time and not achieving anything.

In the end, even without instancing/vat, It’s still a great little project, and with over 300 views a day on github, it looks like people are interested too. And of course, it was a massive learning experience for me.

Moving forward, I’ll be back with an alternative project (using babylonjs of course) once I had time to sit down and put it down on paper.

Thanks for everyone who contributed and for the non-stop encouragements :wink:

Cheers,
Orion

4 Likes

Oh, it’s sad to hear that. You’ve done so much work on this.

Maybe take a step back and come back to it. Sometimes after a good break, we find another solution when we come back.

1 Like

Over the weekend, I spent some thinking and testing, and I’m now 100% sure somehow my items are not correctly attached to the right VAT texture / bakedController, that’s why my items keeps jumping around (as each model has slightly different animation ranges). Note, the models + baked animations (without items) is working absolutely fine.

So the funny thing is it looks like I resolved my items behaving weirdly by changing only 2 lines in 1 file…

// https://github.com/orion3dgames/t5c/blob/feature/vat-skin/src/client/Controllers/VatController.ts

// line 172
// previous was: let rawMesh = this._game._loadedAssets["ITEM_" + item.key].meshes[0];
// note: this._game._loadedAssets[key] is an array of ContainerAssetTask
let rawMesh = this._game._loadedAssets["ITEM_" + item.key].meshes[0].clone();

// line 234
// commenting the line below was necessary too
// itemMesh.setEnabled(false);

Just tested and I had 400+ entities (3 models with different equipment) and NO animation issue on any of the items.

Now, the $100 question: why has this resolved my issue?

I’ve setup a demo if any one is curious to see it in action
Note this is a free instance and it will spin down with inactivity, which can delay requests by 50 seconds or more.
Debug demo: https://t5c-debug.onrender.com

7 Likes

Glad to hear you’re back in business :hugs: Also, comforting to hear you are ‘struggling’ at times (and have your moments where you think of giving up)…where I thought it was just me :face_with_hand_over_mouth: :grin:

I clearly don’t have your dev skills, but my 2 cents for the ‘$100 question’ I’d say that when you set a clone, you actually set a new reference for all. Let me know if I won the challenge with this ridiculeous noob answer, so I can send you my banking details for the transfer :money_mouth_face: :rofl:

Anyways, jokes apart, I guess I just wanted to say that we are still here, watching and supportive of your incredible skills and making. Please don’t give up… Never give up :man_superhero: And meanwhile, have a great day :sunglasses:

So this is getting fed to this. There you merge all child meshes of the root item node, i.e. rawMesh.

Then what does Mesh.clone() do so that Mesh.MergeMesh succeeds? What did it do before again?

Well it is using the results of the preloader which is a AssetContainer as you can see on this line #227

To be honest, there is probably an issue elsewhere as the playground (PG) I did to replicate this issue does not have any similar issues (something is wrong with the animations currently but the items are all behaving correctly).

@mawa haha, I originally put $1,000,000 but brought it down to $100 just in case someone took it literally :slight_smile: TBH I haven’t struggle too much until now on this project, but this one I just cannot make any sense of it… yet. anyway thanks for the encouragement :stuck_out_tongue:

1 Like

Don’t know why the above fixes my items animation issue, but it does work. The code is well separated now so once I eventually find the solution it should be easy to fix.

Moving on, I’ve done some tidying up and have fully implemented vat animation + instances and I’m getting great performance (near constant 60 on a crappy computer) with nearly all features activated.

EDIT: Please note that all items (shield/sword/helmet) are attached dynamically to each different entity via bone weighting and uses the same vat animation as their owner. Very funky!

Firefox now allows to upload a profiling test, so here you are (maybe someone will spot some obvious issues): Firefox Profiler

3 Likes

Hi,

A few updates,

  • I’ve been working on tweaking animations, and resolved some of them but there are still some small situations where animations get out of sync.
  • I’ve been also on performance, for example only updating UI on update (previously it would be updating on each gameloop).
  • Massive performance increase by removing BJS GUI for the nameplates and damages bubbles,

With all the above improvements, I can still have over 300+ entities with equipped items + nameplates at over 60fps per seconds.

Slow progress but progress is progress :slight_smile:

8 Likes

After trying multiple to get decent shadows without a big hit to performance, I decided to add fake shadows (plane + texture).

It looks decent, and has no visible hit to FPS, what do you guys think?

4 Likes

That’s one of the very standard way of faking shadows for multiple entities. Alternatively, you can pre-bake the shadows to a texture if you want something more accurate.

Just a quick browse on this thread… a small suggestion if you will. During development, keep a perf tracking div on screen, it can be a small one like this. It will keep you from going too far and ensure you are resource-attentive.

Hope it helps, cheers ! :slight_smile:

1 Like

Thanks @phaselock Appreciate the tips.

Yes, I need to bake shadows onto the environment.

Added to a little fog, it’s looking good.

2 Likes

Please don’t be too impressed by my writing skills :slight_smile:

4 Likes