npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vinxi/ossos

v0.0.3

Published

Character Animation System

Downloads

14

Readme

ossos

npm twitter youtube Ko-Fi Patreon

Character Animation Library

This project is working toward a complete character skinning & animation library for the web. First most, this library is focused on being independent from any rendering engine with examples of how to use it in webgl based engines like threejs. The one big focus is recreating the IK Rig & IK Animations type system that was demoed several years ago from Ubisoft's GDC talk on IK Rigs. With many game engines like Unity and Unreal developing their own IK Rig like systems, this project helps fill the void for web based engines like threejs, babylon, etc. Hopefully with enough help we can create something just as good as the big boys, maybe even better since its free & open source.

Setup

npm install
npm run dev

Usage

This example is the basic boiler plate example of how to pull mesh & skeletal data from a GLTF2 file then using a custom THREE.JS Material to render mesh that can be posed or animated.

const gltf = await Gltf2.fetch( '../_res/models/nabba/nabba.gltf' );

//--------------------------------
// Setup Armature
const arm  = new Armature();
for( let j of gltf.getSkin().joints ){
    arm.addBone( j.name, j.parentIndex, j.rotation, j.position, j.scale );
}

//--------------------------------
// Setup Skinning : Matrix
arm.bind( SkinMTX, 0.07 ); 
const mat = SkinMTXMaterial( 'cyan', arm.getSkinOffsets()[0] ); 

//--------------------------------
// Load Mesh
const mesh  = Gltf2Util.loadMesh( gltf, null, mat );
App.add( mesh );

Current Features

  • Armature System built around 'Bones' instead of 'Joints'
  • Several Skinning Plugins
    • Matrices : Typical Skinning, easiest to use in GLSL
    • Dual Quaternions : For better bending of vertices, typically used in places like Disney. It can only handle Rotation & Translation, scaling individual bones don't work.
    • DQ Transform : Experimental & unique to this library. It uses Transform instead of matrices or dualquats to handle the transformation hierarchy & bind pose. When the data is prepared for shader use the worldspace transform gets converted to Dual Quaternions to handle rotation & translation along with an extra buffer that contains scale. The hopes of this hybrid approach is to get the quality of DQ while still being able to scaled individual bones like when using matrix skinning.
  • Bone Springs ( Rotation & Translation )
  • Basic Animator based on Tracks
  • Basic Animation Retargeting for similar skeletal meshes
  • IK Rigs - Basic Biped
  • IK Animation Retargeting using IK Rigs
  • IK Solvers - Aim/SwingTwist, SwingTwistEnds, Limb
  • GLTF2 Asset Parsing for cherry picking what you need to load.
  • Several examples using ThreeJS for rendering
    • Some extra fun examples like converting animations to Data Textures
    • Running Full Skinned animation on the GPU with GLSL Example
    • Using Instancing & Data Texture to animate a collection of randomly placed & rotated meshes.

Future Plans

  • [x] Rewrite IK Rigs
  • [x] Port over starting IK Solvers ( Aim / SwingTwist, Limb, SwingTwistEnds )
  • [x] Rewrite IK Animation Retargeting
  • [ ] Port over extra single pass IK Solvers ( Z, Piston, Arc, ArcSin, Trapezoid, Spring )
  • [ ] Create an implementation of FABIK
  • [ ] Create solver based on Catenary Curve
  • [ ] Port over Trianglution Solver ( Alternative to CCD )
  • [ ] Port over Natural CCD ( Extended version of CCD )
  • [x] Complete FullBody IK Prototype
  • [ ] Revisit FullBody IK, Make it mores stable & user friendly
  • [ ] Figure out how to implement VRIK
  • [ ] Bone Slots / Attachments
  • [ ] Actions or State Machine based Animator
  • [ ] Build Examples in other Rendering Engines like BabylonJS
  • [ ] Remake Auto Skinning ( Need WebGPU compute shaders for this )
  • [ ] Bone Constraints
  • [ ] Procedural Animation ProtoTyping
  • [ ] Far Future - Create & Share animations with a Web Editor Tool

Nice To Have

There are some things I've been wanting for my prototyping for awhile. Here's a list of things if people want to donate Or create for the project for a negotiable sum.

  • Project Character ( Ossos-Chan? )

    • Purpose : A nice character to prototype with for everyone. Can also end up being the project mascot. Being female with some features like hair, cat ears & tail is something that will be used for working with bone springs. If the parts are detachable then it can work into the Slots/Attachments future prototype feature.
    • Thoughs :
      • Would like a female with detachable cat ears & tail
      • Prefer stylized designs ( Really digging the Art Direction of Arcane )
      • Just a base mesh, does not need to be skinned or textured
  • Collection of Mobility Animations

    • Purpose : Less data overall if not baked which gives me a chance to experiment with different interpolations for animation beyond just linear / cubic. Would be a nice thing to have for the community to use as a starting point for their projects.
    • Thoughs :
      • Something that looks nice & blends well together, doesn't look choppy
      • Walk, Run, Idle, Crawl, Jump. Maybe Flying & Swimming
      • Prefer not to be baked