Inspector v2: Animation Retargeting Extension#18135
Inspector v2: Animation Retargeting Extension#18135Popov72 wants to merge 23 commits intoBabylonJS:masterfrom
Conversation
… inspectorv2-art-extension
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/18135/merge/index.html#WGZLGJ#4600 Links to test your changes to core in the published versions of the Babylon tools (does not contain changes you made to the tools themselves): https://playground.babylonjs.com/?snapshot=refs/pull/18135/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/18135/merge#BCU1XR#0 If you made changes to the sandbox or playground in this PR, additional comments will be generated soon containing links to the dev versions of those tools. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18135/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18135/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18135/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18135/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18135/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18135/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18135/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18135/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18135/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18135/merge/ |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
4 participants
You can find explanations of the main user interface in the documentation, as it is virtually identical to that of the animation retargeting tool, except that it uses React instead of LilGUI:
https://doc.babylonjs.com/features/featuresDeepDive/animation/animationRetargeting/
Below you will find a brief overview of the new retargeting configuration dialog, a new feature of this extension. The configuration is saved to local storage, with the exception of drag-and-drop files (avatars and animations), which are saved to IndexedDB.
I also had to make a few minor changes to the "inspector shell" service (cc @ryantrem and @georginahalpern).
Please feel free to test the extension thoroughly and don't hesitate to suggest any changes — this was built with the help of AI, and it will happily do the work to iterate on feedback! 🤖✨
Test link: https://playground.babylonjs.com/?snapshot=refs/pull/18135/merge
Note: to show the specific viewport of the extension, click on the "Eye" icon:
🎛️ Retargeting Configuration Dialog
The configuration dialog is accessed via the Configuration icon (⚙) in the extension header. It manages all resources used by the animation retargeting tool and is organized into four tabs.
🧑🎤 Avatars Tab
Manage avatar models that appear in the main UI's Avatar dropdown.
.glb,.gltf, or.babylonfile(s) to load locally🎬 Animations Tab
Manage animation files that appear in the main UI's Animation dropdown.
🦴 Naming Schemes Tab
Manage bone naming conventions used to match bones between avatars and animations.
Use 2-space indentation to indicate parent-child hierarchy. Used solely as a visual aid in the "Scheme Remappings" tab.
Mixamo(e.g.mixamorig:Hips)Mixamo No Namespace(e.g.Hips)🔗 Scheme Remappings Tab
Define how bones map between different naming schemes.
📦 Import / Export
Two buttons in the dialog title bar:
retargeting-config.jsonwith all avatars, animations, naming schemes, and remappings. File-based entries are included as base64 data..jsonfile and offers two modes:🔍 Inspector Shell Changes
The following changes were made to the inspector shell service (
packages/dev/inspector-v2/src/services/shellService.tsx) to support the extension.headerExtraproperty onSidePaneDefinitionA new optional property was added:
An optional React component rendered at the right side of the pane header, between the title and the dock menu button. Useful for adding icon-button actions specific to the pane (e.g. enable/disable toggle, console toggle, configuration dialog).
titleContentproperty onSidePaneDefinitionA new optional property was added:
When provided, it replaces the plain text
titlein the pane header rendering, allowing extensions to embed rich content (e.g. clickable icons) directly inside the title area.title(existing)stringtitleContent(new)ReactNodeheaderExtra(new)ComponentTypeWhat changed:
SidePaneDefinition- AddedheaderExtra?: ComponentTypeandtitleContent?: ReactNodePaneHeader(internal component) - Accepts and renders both new props; renderstitleContent ?? titleinside<Subtitle2Stronger>, renders<headerExtra />after the titlePaneHeadercall sites (top and bottom pane areas) - Now passtitleContentandheaderExtrathroughReactNodeto the existing type importsBackward compatibility: The plain
title: stringproperty is preserved and continues to be used for tooltips, teaching moments, and error boundaries. Existing panes that don't settitleContentorheaderExtraare unaffected.Motivation: The animation retargeting extension uses
headerExtrafor action buttons (enable/disable viewport, toggle console, open configuration dialog) andtitleContentto embed a documentation link icon directly after the title text.