Three.js Blocks

Home
Documentation
Examples
Tools

animationTextureMatrix

@three-blocks/coreWebGPUWebGL
animationTextureMatrix(textureNode : Node, frameIndex : Node<int>, framesCount : Node<int>, timeInterpolation : Node<float>, textureOffset : Node<int>, idIndex : Node<int>) : Node<mat4>

Sample a 4×4 transformation matrix from a baked animation texture (VAT/OAT). Supports optional frame interpolation for smooth playback.

Algorithm

  • Computes texel address from idIndex * framesCount + frameIndex
  • Fetches 4 consecutive texels representing matrix columns
  • When interpolation > 0, blends with next frame's matrix
  • Returns composed 4×4 transformation matrix

Texture Layout

  • Each matrix occupies 4 consecutive texels (columns stored as RGBA)
  • Matrices are stored sequentially: idIndex * framesCount + frameIndex
  • Compatible with EXR textures exported by {@link AnimationBakeMixer}

Use Cases

  • Vertex Animation Textures (VAT) with vertexIndex
  • Object Animation Textures (OAT) with instanceIndex
  • Custom animation sampling with manual frame control
Parameters
textureNodeNode
Baked animation texture (EXR with transformation data).
frameIndexNode<int>
Current frame index to sample.
framesCountNode<int>
Total number of frames in the animation.
timeInterpolationoptionalNode<float>
Interpolation factor [0..1] between current and next frame.
Default is 0.
textureOffsetoptionalNode<int>
Offset in the texture for packed animations.
Default is 0.
idIndexoptionalNode<int>
Index used to identify the vertex or instance (VAT uses vertexIndex, OAT uses instanceIndex).
Default is vertexIndex.
Returns
Node<mat4> — Transformation matrix for the specified frame and ID.
See also
Example
import { AnimationBakeMixer } from '@three-blocks/core';
import { animationTextureMatrix } from '@three-blocks/core';
import { MeshBasicNodeMaterial, instanceIndex } from 'three/tsl';

// Using AnimationBakeMixer (recommended)
const mixer = new AnimationBakeMixer(texture, { mode: 'object', fps: 60 });
mixer.registerMaterial(material);
mixer.play();

// Manual usage with node material
const material = new MeshBasicNodeMaterial();
material.positionNode = animationTextureMatrix(
  texture,
  mixer.frameIndexUniform,
  mixer.framesCountUniform,
  mixer.frameTimeUniform,
  mixer.textureOffsetUniform,
  instanceIndex  // Use instanceIndex for OAT, vertexIndex for VAT
).mul(vec4(positionLocal, 1.0)).xyz;