Skip to content

Add TSL easing functions based on tsl-easings #64

@devallibus

Description

@devallibus

Summary

Add Robert Penner's easing functions as a TSL utility shader, sourced from @y11i-3d/tsl-easings by Yuichiroh Arai.

Upstream

Available Functions (30 total)

10 families × 3 variants (In, Out, InOut):

Family In Out InOut
Sine sineIn sineOut sineInOut
Quad quadIn quadOut quadInOut
Cubic cubicIn cubicOut cubicInOut
Quart quartIn quartOut quartInOut
Quint quintIn quintOut quintInOut
Expo expoIn expoOut expoInOut
Circ circIn circOut circInOut
Back backIn backOut backInOut
Elastic elasticIn elasticOut elasticInOut
Bounce bounceIn bounceOut bounceInOut

Back and Elastic also have custom* variants accepting parameters (overshoot, amplitude/period).

All functions accept float, vec2, vec3, or vec4 TSL nodes.

What to do

  1. Create a tsl-easings shader entry in shaders/tsl-easings/ with:

    • shader.json manifest with language: "tsl", proper provenance pointing to upstream repo, Robert Penner attribution, and Yuichiroh Arai credit
    • source.ts containing the easing functions (adapted to ShaderBase's createMaterial contract or as a utility export)
    • Recipe showing usage in a Three.js material
  2. Provenance: sourceKind: "port" with sources linking to the upstream repo and Robert Penner's original equations

  3. Compatibility: Note the higher Three.js minimum (>=0.183.0) vs our existing TSL shader (>=0.170.0)

  4. Consider: Whether to ship as one combined tsl-easings shader or split per family (e.g. tsl-ease-sine, tsl-ease-bounce). A single entry is simpler and matches how the upstream ships it.

Credit

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions