Three.js Blocks

Home
Documentation
Examples
Tools

AnimationBakeMixer

@three-blocks/coreWebGPUWebGL
new AnimationBakeMixer(texture : THREE.DataTexture, options : Object)

Playback controller for baked animation textures (VAT/OAT).

  • Manages frame uniforms: frameIndexUniform, framesCountUniform, frameTimeUniform
  • Supports modes: 'vertex' (VAT) and 'object' (OAT)
  • Provides playback controls and frame interpolation
Constructor Parameters
textureTHREE.DataTexture
Baked EXR texture that contains vertex or object animation frames.
optionsoptionalObject
Configuration object for playback behaviour.
  • modeoptional'vertex' | 'object'
    Selects how the baked animation should be sampled.
    Default is 'vertex'.
  • framesCountoptionalnumber
    Optional frame count override; inferred from metadata or texture otherwise.
  • playoptionalboolean
    Start in a playing state when true.
    Default is true.
  • fpsoptionalnumber
    Target frames per second for playback.
    Default is 60.
  • playbackSpeedoptionalnumber
    Playback speed multiplier where 1 equals real time.
    Default is 1.
  • loopoptionalboolean
    Loop animation when true, clamp to last frame otherwise.
    Default is true.
See also
Example
import { AnimationBakeMixer } from '@three-blocks/core';

const mixer = new AnimationBakeMixer(texture, { fps: 60, loop: true });
mixer.registerMaterial(material);

function render(deltaSeconds) {
  mixer.update(deltaSeconds);
  renderer.render(scene, camera);
}

Properties

.duration : number

Total animation length in seconds. Filled from metadata when available, otherwise derived from frame count and frames per second.

.time : number

Current playback time in seconds within the animation clip.

.metadata : AnimationBakeMetadata|undefined

Last metadata object passed to {@link AnimationBakeMixer#init}.

Methods

init#

init(meta : AnimationBakeMetadata) : this

Initialize from metadata JSON (single entry point for configuration). Expected VAT metadata keys: mode='vertex', framesOut, vertexCount, width, height, etc. Expected OAT metadata keys: mode='object', framesOut, idCount, width, height, etc.

Parameters
metaoptionalAnimationBakeMetadata
Metadata exported by the baking pipeline.
Returns
this

getDuration#

getDuration() : number

Returns the effective duration of the baked animation in seconds. Falls back to frames / fps when metadata does not provide a duration.

Returns
number

getTime#

getTime() : number

Returns the current playback time in seconds.

Returns
number

setTime#

setTime(seconds : number, options : Object) : this

Set playback time in seconds. When wrap is true and looping is enabled the provided value wraps into the current loop duration, otherwise it is clamped.

Parameters
secondsnumber
Target playback time.
optionsoptionalObject
  • wrapoptionalboolean
    Default is true.
Returns
this

setInterpolationOverride#

setInterpolationOverride(mode : 'auto'|'force0'|'force1')

Set interpolation override.

Parameters
mode'auto' | 'force0' | 'force1'

registerMaterial#

registerMaterial(material : THREE.NodeMaterial, mode : 'vertex'|'object'|Object) : THREE.NodeMaterial

Register a NodeMaterial to use the baked animation. Pass opts.mode to override the mixer's mode per-material.

Note: You can also wire manually using

Parameters
materialTHREE.NodeMaterial
NodeMaterial instance to bind uniforms to.
modeoptional'vertex' | 'object' | Object
Force a specific sampling mode for this material. When an object is passed, it can contain { mode, geometry, positionAttribute, normalAttribute, vertexCount, instanceCount, frameIndexNode, framesCountNode, textureOffsetNode, idNode, positionInputNode, normalInputNode }
Returns
THREE.NodeMaterial
Example
 animationTexturePosition( this.texture, mixer.frameIndexUniform, mixer.framesCountUniform, mixer.frameTimeUniform, mixer.textureOffsetUniform )
	animationTextureNormal( this.texture, mixer.frameIndexUniform, mixer.framesCountUniform, mixer.frameTimeUniform, mixer.textureOffsetUniform )

play#

play()

Begin playback of the baked animation using the current configuration.

pause#

pause()

Pause playback while preserving the current frame and interpolation value.

stop#

stop()

Stop playback and seek back to the first frame.

seekFrame#

seekFrame(frameIndex : number)

Jump to a specific baked frame index.

Parameters
frameIndexnumber
Zero-based frame index to seek to.

seekSeconds#

seekSeconds(seconds : number)

Seek to a specific playback time in seconds.

Parameters
secondsnumber
Target playback time in seconds.

update#

update(deltaSeconds : number)

Advance playback by the provided delta time.

Parameters
deltaSecondsnumber
Elapsed time in seconds since the previous update.

attachGUI#

attachGUI(gui : object, opts : Object) : this

Attach a standard playback GUI to this mixer. Compatible with lil-gui, dat.gui, and Three.js Inspector.

Parameters
guiobject
Instance from lil-gui or renderer.inspector.createParameters().
optsoptionalObject
Additional GUI options.
  • folderNameoptionalstring
    Custom name for the created folder.
Returns
this

Static Methods

inferFrames#

inferFrames(texture : THREE.DataTexture, options : Object) : number

Infer frame count from a baked animation texture.

Parameters
textureTHREE.DataTexture
EXR texture to inspect.
optionsoptionalObject
Additional hints for the inference.
  • vertexCountoptionalnumber
    Vertex count for VAT data.
  • objectCountoptionalnumber
    Instance/object count for OAT data.
  • modeoptional'vertex' | 'object'
    Specifies how to interpret the texture layout.
    Default is 'vertex'.
Returns
number — Inferred number of frames.

Type Definitions

AnimationBakeMetadata#

mode:'vertex'|'object', framesOut:number, idCount:number, vertexCount:number, +6 more
Properties
modeoptional'vertex' | 'object'
Source mode of the baked texture.
framesOutoptionalnumber
Number of frames baked out.
idCountoptionalnumber
Object count for OAT data.
vertexCountoptionalnumber
Vertex count for VAT data.
widthoptionalnumber
Texture width in pixels.
heightoptionalnumber
Texture height in pixels.
originalFramesoptionalnumber
Input frame count prior to baking.
sampleStepoptionalnumber
Sampling step used during baking.
durationoptionalnumber
Duration of the baked animation in seconds.
clipDurationoptionalnumber
Duration of the baked clip in seconds.

AnimationBakeConfig#

fps:number, playbackSpeed:number, loop:boolean, play:boolean
Properties
fpsoptionalnumber
Frames per second override.
playbackSpeedoptionalnumber
Playback speed multiplier override.
loopoptionalboolean
Whether playback should loop.
playoptionalboolean
Toggle the playing state.