Show HN: Skeletal Animation System – a WebGL animation blender | Hacker News Reader

Show HN: Skeletal Animation System – a WebGL animation blender

chinedufn.github.io

120 pointschinedufn21 comments

Author here - happy to hear / answer any questions, criticism and feedback!

Can you write a tutorial on mesh deformation and all of the other stuff that goes into skeleton animations?

This course is awesome, from linear blend skinning up through the latest elasticity-inspired models. The videos are locked behind the ACM paywall but the course notes and slides are all online.

Plan to :) . Feel super free to shoot me an email and I'll let you know when I write one

Nice job!

About a year ago, I implemented skeletal animation in my OpenGL ES mobile game using a vertex shader and the assimp library. You can pass in everything you need (weights, matrices) as shader uniforms.

I don't do anything fancy like blending between successive animations (or having modifiers that only affect the upper body or arms, etc.) -- the former would require more than the number of uniforms available on OpenGL ES 2.0 on mobile.

Check it out: https://www.youtube.com/watch?v=xGbkumPcFb8

Oh nice vid thanks for sharing

So I usually blend my successive animations CPU side before passing in my uniforms so I end up using the same number of uniforms no matter what.

I recognize that 3d model from when I was learning blender. It's carl from the walking dead, from a tutorial by Sebastian Lague. His channel is full of Blender, Unity, and general Game development tutorials. All very detailed and helpful: https://www.youtube.com/channel/UCmtyQOKKmrMVaKuRXz02jbQ

Really super stuff. I like that you're building a workflow from Blender to the Browser like this. Also that it's threeJS free.

Yeah one thing that I'm really hoping to see in the graphics community is a nice selection of standalone pieces that you can combine into your own rendering pipeline.

While I think that is admirable goal, I think it is hard.

The reason is that it is hard enough to ensure that changes in one subsystem of Three.JS doesn't break another part and it has a large set of test/examples and its all in one repository.

I think the only scaleable production robust solution is to have a lot of unit tests that ensure integrations work between tools, but then you need to tie these tools together in some fashion for testing purposes. Thus while having lots of separate tools is nice, the likelihood that you can combine them into a robust whole without additional work/testing is exceedingly small unless there is some type of large scale collaboration and testing between these tools.

Right now baseline Three.JS under MrDoob's leadership serves this purpose (collaboration around a robust integration-tested core) for us at ThreeKit.com and Clara.io.

Three.js stuff always impresses me, I've been learning blender for about a month now as a hobby. Thanks for another thing to put on my list to learn from.

And thank you for the feedback!

So, it turns out that this demo doesn't use Three.js, but the idea is that, if you wanted, you totally could :)

And I'm a Blender noob as well, this tutorial series on character modeling, texturing, rigging and animation was super useful for me. Has a nice pace and doesn't skip over any details -> https://m.youtube.com/watch?v=DiIoWrOlIRw

Three.js is very useful for many cases, however it's popularity is a bit dangerous at times. Three.js is to WebGL what GitHub is to Git, and on many forums, people ask for WebGL advice, when in fact they're asking for Three.js advice.

Three.JS has support for pretty flexible "animation clip" blending via "animation actions" btw... https://github.com/mrdoob/three.js/blob/dev/src/animation And you can export out animation clips from blender.

Oh awesome and thanks a lot for the link.

I'll definitely need to spend some more time playing with and learning from all of the existing solutions

I've used the skeletal animation API (exporting from Blender). It's very cool, but the documentation isn't great (or at least wasn't last time I checked).

Key points:

* if you use the JSON loader, the animation data is in an "animations" array hanging off the geometry object

* you need to create an AnimationMixer and pass the elements of the animations array into its "clipAction" method to register these animations with it

* to animate a mesh, you need to construct a SkinnedMesh rather than a regular Mesh

* you then also need to call the AnimationMixer's "clipAction" method again (for a different purpose this time), giving it the name of the animation and the mesh you want to animate

* every frame, you need to call your AnimationMixer's "update()" method.

(I used this as part of my last couple of Ludum Dare entries - https://github.com/matt-williams/ld36/ and https://github.com/matt-williams/ld37/.)

Feel free to ask if you hit any problems and I'll try to answer, although I wouldn't call myself an expert on this!

Is there a way to turn on non-constant shading?

Oh interesting:

So the short answer is - not in the demo, but yes in your own code

---

The demo's model rendering is powered by load-collada-dae ( https://github.com/chinedufn/load-collada-dae ) which right now has a default shader (what you see in this demo) and very few options to manipulate that default shader (I'm still thinking about the API)

Planning to update load-collada-dae to allow the user to pass in their own shader (with non-constant shading if they so please)

But skeletal-animation-system works completely independently of whatever renderer you're using so you could swap out load-collada-dae with, say, regl or Three.js or your own custom library.

Can you explain your process of completing this? How did you do this without Three.js?

So the process roughly boiled down to:

1. Figure out what I wanted the input and output to be for the API. Write that down. 2. Write and implement tests against that desired input and output. So at this point the `skeletal-animation-system` API is ready. Time for the demo

3. Create the demo. The main pieces of the demo are:

A vertex shader that positions each vertex based on up to four bones that have a certain percentage of influence on that vertex. That shader looks something like this -> https://github.com/chinedufn/load-collada-dae/blob/master/sr...

A parser to get the mesh and bone data from a collada file -> https://github.com/chinedufn/collada-dae-parser

---

I don't have much of a write up right now of how this works.. But if you'd like to get a better sense you might look through the demo code. The entry point is here -> https://github.com/chinedufn/skeletal-animation-system/blob/...

Alternatively you can run the demo locally and play around with it:

```

git clone https://github.com/chinedufn/skeletal-animation-system

cd skeletal-animation-system

npm install

npm run demo

```

Really wish I could point you to something more in depth, sorry!

That is dope. Good work!

Reply on news.ycombinator.com