
Show HN: Skeletal Animation System – a WebGL animation blender - chinedufn
https://chinedufn.github.io/skeletal-animation-system/
======
chinedufn
Author here - happy to hear / answer any questions, criticism and feedback!

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

~~~
santaclaus
Check out: [http://skinning.org](http://skinning.org)

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.

------
AustinG08
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](https://www.youtube.com/channel/UCmtyQOKKmrMVaKuRXz02jbQ)

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

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

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

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

~~~
chinedufn
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](https://m.youtube.com/watch?v=DiIoWrOlIRw)

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

~~~
chinedufn
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

~~~
maffydub
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/](https://github.com/matt-
williams/ld36/) and [https://github.com/matt-
williams/ld37/.](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!

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

~~~
chinedufn
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](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.

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

~~~
chinedufn
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...](https://github.com/chinedufn/load-collada-
dae/blob/master/src/shader/generate-vertex-shader.js)

A parser to get the mesh and bone data from a collada file ->
[https://github.com/chinedufn/collada-dae-
parser](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/...](https://github.com/chinedufn/skeletal-animation-
system/blob/master/demo/browser.js)

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

```

git clone [https://github.com/chinedufn/skeletal-animation-
system](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!

------
cdhanna
That is dope. Good work!

