7 ms·

Show HN: Skeletal Animation System – a WebGL animation blender

120 points by chinedufn 10y ago

cdhanna 10y ago
That is dope. Good work!
chinedufn 10y ago
Author here - happy to hear / answer any questions, criticism and feedback!
- gravypod 10y ago
  Can you write a tutorial on mesh deformation and all of the other stuff that goes into skeleton animations?
  - santaclaus 10y ago
    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.
  - chinedufn 10y ago
    Plan to :) . Feel super free to shoot me an email and I'll let you know when I write one
- Hydraulix989 10y ago
  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 https://www.youtube.com/watch?v=xGbkumPcFb8
  - chinedufn 10y ago
    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.
santaclaus 10y ago
Is there a way to turn on non-constant shading?
- chinedufn 10y ago
  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.
supernumerary 10y ago
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 10y ago
  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 10y ago
    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 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      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 10y ago
        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!
AustinG08 10y ago
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
homanchou 10y ago
Can you explain your process of completing this? How did you do this without Three.js?
- chinedufn 10y ago
  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/src/shader/generate-vertex-shader.js 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 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/master/demo/browser.js 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 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!
verMpressv 10y ago
And it runs on iPhones!

120 points by chinedufn 10y ago

cdhanna 10y ago

That is dope. Good work!

chinedufn 10y ago

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

gravypod 10y ago
Can you write a tutorial on mesh deformation and all of the other stuff that goes into skeleton animations?
- santaclaus 10y ago
  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.
- chinedufn 10y ago
  Plan to :) . Feel super free to shoot me an email and I'll let you know when I write one
Hydraulix989 10y ago
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 https://www.youtube.com/watch?v=xGbkumPcFb8
- chinedufn 10y ago
  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.

santaclaus 10y ago

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

chinedufn 10y ago
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.

supernumerary 10y ago

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 10y ago
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 10y ago
  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 10y ago

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 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      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!

AustinG08 10y ago

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

homanchou 10y ago

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

chinedufn 10y ago
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/src/shader/generate-vertex-shader.js 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 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/master/demo/browser.js 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 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!

verMpressv 10y ago

And it runs on iPhones!