https://github.com/brunoimbrizi/threejs-serialize-animation

https://github.com/brunoimbrizi/threejs-serialize-animation

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/brunoimbrizi/threejs-serialize-animation
• Owner: brunoimbrizi
• Created: 2017-12-30T17:38:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-30T20:14:14.000Z (almost 7 years ago)
• Last Synced: 2024-10-19T00:19:35.258Z (about 1 month ago)
• Language: JavaScript
• Size: 1.25 MB
• Stars: 17
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# threejs-serialize-animation

A script that serializes animations in a Three.js (json) file and makes it smaller.

[Example](https://brunoimbrizi.github.io/threejs-serialize-animation/example/)

![Sample](https://raw.githubusercontent.com/brunoimbrizi/threejs-serialize-animation/master/example/images/screencapture.gif)

original 1,148 KB / serialized 475 KB

## Why

Three.js (json) files containing animations can get quite big. Using the Blender Exporter it is possible to reduce file sizes by turning 'Indent JSON' off, or turning 'Enable precision' on or setting 'File compression' to msgpack.

But there is a way to get even smaller files: to serialize the key values in the `animations` node.

The animation that promped me to write this script contained a skeleton with 23 joints and was 6214 frames long. Discarding the bones and the animations, the exported json would be around 200 KB, but with the animations it was 28,484 KB. 

By serializing the animations the size went down to 12,164 KB.

Some test results with different settings:

* 28,484 kb - precision 6, indent true

* 16,854 kb - precision 6, indent false

* 12,017 kb - precision 3, indent false

* 16,968 kb - msgpack compression

* 7,298 kb - precision 3, serialized

## What

`serializeAnimation.js` copies the values of each keyframe property into a single array.

i.e.

```

"keys":[{

    "time": 0,

    "scl": [1, 1, 1],

    "pos": [0, 0, 0],

    "rot": [1, 2, 3, 4]

},{

    "time": 1,

    "scl": [1, 1, 1],

    "pos": [0, 0, 0],

    "rot": [5, 6, 7, 8]

}

```

Becomes:

```

"keys":[{

    "time": [0, 1]

    "scl": [1, 1, 1, 1, 1, 1],

    "pos": [0, 0, 0, 0, 0, 0],

    "rot": [1, 2, 3, 4, 5, 6, 7, 8]

}

```

## It's a hack

Three.js is not expecting a single key containing all the values. It is necessary to hack it a bit, namely by overriding `AnimationClip.parseAnimation`. This is what `parseAnimation.js` is doing. 

What is curious is that internally the values are already serialized. This happens inside `AnimationClip.parseAnimation`, more precisely when `flattenJSON` is called.

What `parseAnimation.js` does it just to bypass that call and just use the values already serialized in the file.

## How

#### Serialize

```

$ node serializeAnimation.js 

```

// output input-file-serialized.json

#### Parse

```

import * as THREE from 'three';

import { parseAnimation } from 'threejs-serialize-animation';

// override

THREE.AnimationClip.parseAnimation = parseAnimation;

```