MVS: Animations #1606

dsehnal · 2025-08-09T06:58:43Z

Description

Python MVS PR: molstar/mol-view-spec#89

1CBS_state-snapshots.4.mp4

Actions

Added description of changes to the [Unreleased] section of CHANGELOG.md
Updated headers of modified files
Added my name to package.json's contributors
(Optional but encouraged) Improved documentation in docs

zachcp · 2025-08-11T23:52:35Z

This looks amazing!

dsehnal · 2025-08-12T15:07:46Z

@corredD I had to rename from/to to start/end because from is a reserved keyword in Python.

corredD · 2025-08-12T16:08:42Z

the kind: 'transform_matrix' is really great, can I use it to do a spin animation with multiple turn ?

dsehnal · 2025-08-12T16:59:52Z

the kind: 'transform_matrix' is really great, can I use it to do a spin animation with multiple turn ?

@corredD I've added frequency and alternate_direction params to support this (see the update code/video)

corredD · 2025-08-12T19:01:18Z

the kind: 'transform_matrix' is really great, can I use it to do a spin animation with multiple turn ?

@corredD I've added frequency and alternate_direction params to support this (see the update code/video)

this is excellent! Can you show me how to use it for a full turn rotation ? I am sorry I can't figure out how to do it. I couldn't make 0 to 2pi to be interpolated. If I trick with 2pi - 0.1 it will interpolate on the shortest path.

dsehnal · 2025-08-12T19:11:20Z

@corredD its not possible to do the 4 rotations... the quaternion interpolation will always do the shortest path.

Seems like we need the ability to interpolate axis/angle combo as well. Will have a look tomorrow. Getting more and more complicated :)

corredD · 2025-08-12T21:12:18Z

@dsehnal I found a solution that worked for me, I attached the patch file
patchrotation.patch

dsehnal · 2025-08-13T05:09:15Z

@corredD Thanks, I've included the changes to work for both rotation_ and transform_matrix and added some caching.

midlik

This is super cool.

It's a big chunk of changes. The part that i was able to understand, looks good.
See a few comments.

midlik · 2025-08-13T09:48:57Z

src/examples/mvs-stories/stories/animation.ts

+            // Uncomment this to make 2nd frame render much faster
+            // It will cause shader compilation to happen during the 1st snapshot


By chance, is there any way of detecting which shaders will be needed during the whole animation and pre-compiling them, so the users don't need to use hacks like this?

I understand this might be too much to want, just bringing up the idea.

We discussed this with Alex. In theory it might be possible to compile them ahead of time.

src/extensions/mvs/load-generic.ts

src/extensions/mvs/tree/mvs/mvs-animation.ts

midlik · 2025-08-13T10:29:18Z

src/extensions/mvs/tree/mvs/mvs-animation.ts

+
+const Vec3Interpolation = {
+    ..._Common,
+    start: OptionalField(nullable(list(float)), null, 'Start value. If unset, parent state value is used. Must be array of length 3N.'),


We have a type Vector3, you can use it instead of list(float)

This supports flat lists of vectors, so you can pass 6 numbers to it for example.

Then pls don't call it Vec3Interpolation.

If we can interpolate custom-length vectors, that means we can interpolate mesh shapes, which will look cool :)
(not sure about a use-case though)

It's still vec3 interpolation, it can just interpolate multiple vectors at the same time.

midlik · 2025-08-13T10:34:36Z

src/extensions/mvs/tree/mvs/mvs-animation.ts

+    ..._Common,
+    start: OptionalField(nullable(list(float)), null, 'Start value. If unset, parent state value is used. Must be array of length 3N.'),
+    end: OptionalField(nullable(list(float)), null, 'End value. Must be array of length 3N. If unset, only noise is applied.'),
+    spherical: OptionalField(bool, false, 'Whether to use spherical interpolation.'),


Do i understand correctly that spherical interpolation mean interpolation via the surface of a sphere rather than via a straight line?
What is the use-case for this?
Is it sufficient to have the center of the sphere always [0,0,0], or does the use-case require parametrization for this?

it's this https://en.wikipedia.org/wiki/Slerp

src/extensions/mvs/tree/mvs/mvs-tree.ts

src/mol-plugin-state/transforms/helpers.ts

midlik · 2025-08-13T12:16:06Z

src/mol-plugin/animation-loop.ts

+    // if there is a blocking operation, e.g., shader compilation
+    // The drawback of this is that sometimes the animation will take
+    // longer than intended, but hopefully that's a reasonable tradeoff
+    private properTimeT: number = 0;


I think this is fair enough in the UI. Freezing seems better then freezing+skipping.
But when i export animation, the timing will be exact, right?

Yes, this is just for the UI-driven animations.

midlik · 2025-08-13T12:49:13Z

src/mol-util/color/color.ts

+    const interpolateHcl2 = Hcl.zero();
+
+    /** Linear interpolation between two colors in HCL space */
+    export function interpolateHcl(c1: Color, c2: Color, t: number): Color {


I don't see this used anywhere, so i guess it's more for the future.
I'm wondering if interpolation in HCL is superior to RGB.

Anyway, this implementation is wrong, as hue is a cyclical property. See ugly case below (#ff8800-#ff0088):

To be honest, i'm very sceptical about HCL in general.
It tries to tell me that all colors in the first row are the same hue. The same for the second row.
And also that colors in each column have the same CL and only differ in H.

(first rows = hcl(270, 100, 0-100), second row = hcl(300, 100, 0-100))

Maybe add HSL implementation as well then? Perhaps that could be better?

midlik · 2025-08-13T13:22:00Z

I'm wondering: how does easing work in combination with alternate_direction? E.g. does quad-in become quad-out on the way back?

midlik · 2025-08-13T13:25:16Z

I'm wondering: how does easing work in combination with alternate_direction? E.g. does quad-in become quad-out on the way back?

Is easing actually implemented? I cannot find the code.

dsehnal · 2025-08-13T13:34:25Z

I'm wondering: how does easing work in combination with alternate_direction? E.g. does quad-in become quad-out on the way back?

It reverses the time. It's t = ...0.98, 0.99, 1, 0.99, 0.98..., so it will be symmetric version of the "normal direction"

Is easing actually implemented? I cannot find the code.

There was existing port of D3 easing the codebase before.

dsehnal · 2025-08-13T16:41:52Z

Gonna merge this now and do fixes in a separate PR if needed.

dsehnal added 19 commits August 9, 2025 08:51

object hash

756e6a3

hashed StateTransform.version

a1cbba0

StateTree.reuseTransformParams

cf00815

State animation data model

2523457

mvs animation tree schema and builder

f96fb9f

generate animation

3e56f30

snapshot animation ui

0d479df

async animation generation

4897107

ui tweak

4576d74

ui tweak

b6ae474

wrap loadMVS in task

cc97031

state snapshots animation

99755e7

snapshot transition animation

e2db3eb

autoplay transition

17fed0f

vector and rotation matrix interpolation

fa87628

local rotation transform

a9a1ee8

fixes and better demo

b584421

unused import

3f34afa

tweak

bf0b9cf

dsehnal mentioned this pull request Aug 10, 2025

MVS: state interpolation prototype #1605

Closed

4 tasks

dsehnal requested review from corredD and midlik August 10, 2025 14:17

dsehnal added 2 commits August 10, 2025 16:24

changelog

8628ca1

headers

f3dc153

dsehnal mentioned this pull request Aug 8, 2025

1.0 Features molstar/mol-view-stories#24

Open

68 tasks

dsehnal added 2 commits August 10, 2025 16:38

type => kind

fc5f951

mat4 interpolation

41e8f7b

dsehnal marked this pull request as ready for review August 10, 2025 15:10

dsehnal requested a review from arose August 10, 2025 15:11

use proper time in animation loop

a550b2e

resetCanvasProps

e7d6518

rename from/to to start/end

f7f0a30

transform def

a6d779c

add frequency param

6d91deb

dsehnal added 2 commits August 13, 2025 06:57

update interpolations

f3aad02

cache rotation, do not apply noise to last frame

8e17917

dsehnal added 4 commits August 13, 2025 09:35

local_rotation => rotation_center

5d3a2ed

changelog

85ea019

fix build

7931324

add animation.duration_ms

fb00472

midlik reviewed Aug 13, 2025

View reviewed changes

dsehnal added 5 commits August 13, 2025 15:35

PR feedback

91c91f5

add hsl color space

a55766b

default canvas bg

9befa1e

scalar list interpolation

af8d655

color interpolation props

549cb54

dsehnal merged commit f165cc4 into master Aug 13, 2025
1 check passed

dsehnal deleted the mvs/animations-v1 branch August 13, 2025 16:41

		// Uncomment this to make 2nd frame render much faster
		// It will cause shader compilation to happen during the 1st snapshot

MVS: Animations #1606

MVS: Animations #1606

Uh oh!

Conversation

dsehnal commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Actions

Uh oh!

zachcp commented Aug 11, 2025

Uh oh!

dsehnal commented Aug 12, 2025

Uh oh!

corredD commented Aug 12, 2025

Uh oh!

dsehnal commented Aug 12, 2025

Uh oh!

corredD commented Aug 12, 2025

Uh oh!

dsehnal commented Aug 12, 2025

Uh oh!

corredD commented Aug 12, 2025

Uh oh!

dsehnal commented Aug 13, 2025

Uh oh!

midlik left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

midlik commented Aug 13, 2025

Uh oh!

midlik commented Aug 13, 2025

Uh oh!

dsehnal commented Aug 13, 2025

Uh oh!

dsehnal commented Aug 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dsehnal commented Aug 9, 2025 •

edited

Loading

midlik left a comment •

edited

Loading