Support curve editing

[bmcbarron]

Incorporate functionality like the Animation Curve Editor.

Implementation notes

• Should be a React component.
• Should act on Animation.
• Curve Rendering
  • @julien-moreau suggested taking a look at RaphaelJS.
  • Graph Editor has a similar look and uses litegraph.js, nothing obviously sharable there.
  • Babylon ACE is part of Inspector and uses raw SVG for drawing curves. (snippet 8I7FZW for reference)
• Some related works exists, but does not seem connected ATM.
• Should support undo/redo, unlike ACE, both for consistency with the rest of Editor, and usability in general (curve editor involves a lot of fine-tuning).

Questions

1. Is the current animation-editor code/design the right starting point?
2. Should this be optimized as a pop-out, or as a docked panel?
3. Is real-time updating of the scene (a la ACE) a must-have, nice-to-have, or not wanted?
4. Is the idiom here to batch all changes and commit as an explicit save operation? Or, should the data be kept in sync with the main scene? Probably related to (3).

Regarding (2): IMO, I found the separate window of ACE more hassle than helpful, even as a multi-monitor user. Ideally, it'd be great to have each of these tools dockable and/or floating, but obviously that's a whole different issue.

Regarding (3+4): I found the real-time updating of the scene in ACE to be helpful, and appreciated being able to manipulate objects in the scene and pull values from there. In which case, it seems like having the curve editor make changes directly to the scene animation data might make the most sense.

[julien-moreau]

Hi @bmcbarron ! Thanks for creating this issue!

I suggested RaphaelJS but if you find a supported library which fits better, don't hesitate to use the best! :) I approve undo/redo support and I can help for that if needed!

Here are my answers:

1. unfortunately not, the current "animation-editor" tool was more a POC than a real feature. Anyway, I can clean it as an empty tool so you'll be free to add your component in it and why not create the overall tool.
2. Concerning the curve editor, as it is just a react component we don't take care. Concerning the animations-editor tool, beginning with a docked panel is great (as you said). Using popups we'll face problems of Electron (communication via messages etc. to sync data). I suggest to have popups support in future or once animation-editor tool is done.
3. It is a must have. But we can of course set an option to disable this auto-sync. For UI this option can be a checkbox or a combo box in the animation-editor tool.
4. I'm not sure to understand but looking at Unity (for example), animations are modified in-memory and then saved once the user saves the project, I think we should go the same way. As you said, having everything updated and be able to pull values is a must have. I hope it answers :)

[bmcbarron]

Sorry for the delay. The Babylon.js vscode extension I've been working on took a week longer than I expected. Starting tomorrow, the curve editor will have my full attention.

[bmcbarron]

Hi @julien-moreau ! Some questions for you:

1. We want animations stored in the .babylon file, correct? One of the issues I'm having is finding examples of working animations in a .babylon file. It appears that the babylon exporter from blender has several known issues with animations. When I view the same .blend exported as .babylon vs .gltf, the former doesn't work and the latter does. Do you have suggestions where to find some good examples?
2. I'm having trouble getting my debug-attached vscode to electron to use breakpoints (they're unbound, even when I set them directly in the .js). Do you have that working at the moment? Also, I noticed you're using Electron 8, when the LTS version is 17. Is there a reason you haven't updated?
3. Do you usually have to restart the editor to get it to use your changed code? If so, is there a way to specify the project it opens by default, so I can skip that screen?
4. Is there a better venue for me to ask these sorts of questions than on this bug? Thanks!

[bmcbarron]

Update: I figured out my debugger issues with (2). It was two things: 2a. Need to prefix outFiles with ${workspaceRoot}, or the files weren't being found. Maybe this is OS sensitive. I'm on Windows 10, what are you using? 2b. Need to run the Attach Electron Renderer (or Editor compound) launch config to get the renderer breakpoints. I made a few tweaks to the launch.json. I'll send a PR, but feel free to reject if you're not interested in the changes!

[bmcbarron]

(Note: I see now that you're Babylon 5 chore includes updating electron... let me know if there's anything I can do to help with anything on that chore)

[julien-moreau]

Hi @bmcbarron !

Your extension is awesome !!

You are right, animations should be serialized by Babylon.JS so stored in the .babylon files. In the editor, each node (mesh, light, transform node, camera) is saved in distinct JSON files (to help when having git conflicts) using the serialization helpers of Babylon.JS. The idea is the animation editor tool (or whatever) will populate the .animations array property of nodes in the scene running in the editor. Once saving the project or generating the scene, animations will be serialized automatically by the helpers of Babylon.JS (see BABYLON.SceneSerializer etc.). In that way I think you don't need any .babylon file as example but I'll try to create one for you

For the debugger, unfortunately I quickly switched to the integrated debugger of electron because the remote debug often creates desynchronization between the TS code and the real source maps being loaded. Simply run the launch task "Electron With DevTools". Then, go to "Edit -> Preferences..." in the maintoolbar and enable the electron devtools in it.

I recently pushed on the next release branch feature/workspace-assets with the support of Electron 11.5 and I hightly recommand that you can use it :)

Let's use the Babylon.JS forum for next messages don't related to this issue :)