feat: Support Unity Wearable Preview

[cyaiox]

Support unity wearable preview

Related PR: decentraland/wearable-preview#161

This pull request introduces the "Unity Wearable Preview" feature flag across the item editor and related modals. The changes ensure that when the feature flag is enabled (and the correct URL parameter is present), the Unity-based wearable preview is used instead of the legacy preview. The implementation includes updates to component props, Redux selectors, and conditional UI rendering. Additionally, the feature flag is now available in the Redux state and passed through relevant containers and components.

Feature flag integration and propagation:

• Added the getIsUnityWearablePreviewEnabled selector and integrated it into Redux state mappings for CenterPanel, CreateSingleItemModal, and EditThumbnailStep components, allowing the Unity preview feature flag to be accessed and used throughout the item editor UI. [1] [2] [3] [4]
• Updated component prop types (CenterPanel.types.ts, CreateSingleItemModal.types.ts, EditThumbnailStep.types.ts, EditThumbnailModal.types.ts) to include the isUnityWearablePreviewEnabled flag, ensuring type safety and consistency. [1] [2] [3] [4]

Conditional UI logic for Unity preview:

• Modified CenterPanel.container.tsx and CenterPanel.tsx to compute and use the isUnityWearablePreviewEnabled flag based on both the feature flag and the unity=true URL parameter, and to pass this flag down to the preview component and related UI controls. [1] [2] [3] [4]
• Updated UI logic to hide or show certain controls (like zoom and scene boundary toggles) depending on whether the Unity preview is active, ensuring a tailored user experience for the new preview mode. [1] [2] [3]

Component and import refactoring:

• Refactored the import/export structure for EditThumbnailStep to use a Redux-connected container, simplifying usage across modals and ensuring the feature flag is available where needed. [1] [2] [3]

Testing and feature selector improvements:

• Updated and extended feature flag selector tests to include the new Unity preview flag, improved test coverage for feature flag loading states, and ensured robust handling of feature flag availability. [1] [2] [3] [4]

These changes collectively enable controlled rollout and usage of the Unity-based wearable preview, with clear separation between feature-flagged and legacy UI paths.

Screenshots

Screen.Recording.2026-04-02.at.10.37.30.AM.mp4

Test cases

Steps before executing test cases:

1. Login and create a new collection
2. Add emotes and wearables to the collection
3. In the collection, go to "Preview on Editor"
4. You are now inside the editor, but it will show the legacy babylon preview by default. You have to modify the url of the page adding this in the end: &unity=true . Hit enter and the page will reload. Now it should be showing Unity preview 🚀 you are ready to start executing test cases now!

Here are some clues & small differences to identify babylon vs unity and ensure you are actually testing on the new unity preview!

• Shadows in the avatar are sharper on babylon vs shadows are more natural on unity.
• The cylinder button is only shown in babylon.
• You can rotate 360° in babylon vs you can rotate the avatar around itself in unity (similar to marketplace or auth avatar rotation).
  Everything else should work the same in both unity & babylon. Some wearables may look slightly different that babylon: it's ok, the expected behavior is they look exactly the same as in Explorer alpha.

See the differences of babylon vs unity in the video:

Screen.Recording.2026-04-02.at.4.56.38.PM.mp4

Test cases:

CenterPanel

1. A loading spinner is shown while the wearable preview is initializing
2. The loading spinner disappears once the preview finishes loading
3. The loading spinner reappears when the preview reloads after a prop change (base avatar, skin, wearables, etc)
4. The wearable is displayed on a male avatar when male body shape is selected
5. The wearable is displayed on a female avatar when female body shape is selected
6. The avatar's skin color updates in the preview when skin color is changed
7. The avatar's eye color updates in the preview when eye color is changed
8. The avatar's hair color updates in the preview when hair color is changed
9. The avatar wears the selected base wearables selected in the preview menu
10. The preview updates when a wearable from the current collection is equipped or unequipped in the left panel
11. Controls in the left panel interact correctly with the preview without delay or mismatch (hide/show wearables, select/play/pause emotes)
12. The currently edited item is visible on the avatar in the preview
13. The preview updates when the item being edited changes
14. The selected emote plays on the avatar in the preview
15. The preview updates when a different emote is selected
16. The avatar performs the JUMP emote or other base emotes from “Play emote” dropdown on loop
17. Animation playback controls appear in the toolbar when an emote item from the collection is selected
18. Animation playback state stays in sync with the actual animation playing in the preview (progress, seconds counter)
19. Clicking play in the animation controls starts the emote animation
20. The animation controls show a playing state while the emote is animating
21. The animation controls show a paused state when the emote is paused or stopped
22. The animation controls show a stopped state when the emote finishes playing
23. Zoom controls appear in the top-left corner and work as expected
24. Emotes dropdown is hidden in the preview when playing an emote from the current collection
25. Scene boundaries button (bottom-right corner) is not visible on unity wearable preview
26. Social emotes play correctly on the avatar in the preview (it uses babylon preview)
27. The preview background is transparent
28. The avatar does not auto-rotate in the preview
29. Dragging the avatar rotates the preview camera around the avatar

Legacy Wearable Preview

1. The preview uses Unity rendering when the Unity wearable preview feature flag is enabled and the &unity=true query param is included on the url.
2. The preview falls back to legacy babylon rendering when the Unity feature flag is disabled.
3. The preview falls back to legacy babylon rendering when the &unity=true query param is not included on the url.
4. The preview falls back to legacy babylon rendering when the WebGL is not supported in the browser

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
builder	Ready	Preview, Comment	Apr 9, 2026 6:43pm

[coveralls]

Coverage Report for CI Build 24207225895

Coverage increased (+0.1%) to 49.815%

Details

• Coverage increased (+0.1%) from the base build.
• Patch coverage: 2 uncovered changes across 1 file (30 of 32 lines covered, 93.75%).
• No coverage regressions found.

Uncovered Changes

File	Changed	Covered	%
src/modules/features/selectors.ts	31	29	93.55%

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	12091
Covered Lines:	6656
Line Coverage:	55.05%
Relevant Branches:	5207
Covered Branches:	1961
Branch Coverage:	37.66%
Branches in Coverage %:	Yes
Coverage Strength:	31.56 hits per line

---

💛 - Coveralls

[cyaiox]

all good 🚀 🚀

[anicalbano]

✅ Tested through the checks:

• A loading spinner is shown while the wearable preview is initializing
• The loading spinner disappears once the preview finishes loading
• The loading spinner reappears when the preview reloads after a prop change (base avatar, skin, wearables, etc)
• The wearable is displayed on a male avatar when male body shape is selected
• The wearable is displayed on a female avatar when female body shape is selected
• The avatar's skin color updates in the preview when skin color is changed
• The avatar's eye color updates in the preview when eye color is changed
• The avatar's hair color updates in the preview when hair color is changed
• The avatar wears the selected base wearables selected in the preview menu
• The preview updates when a wearable from the current collection is equipped or unequipped in the left panel
• Controls in the left panel interact correctly with the preview without delay or mismatch (hide/show wearables, select/play/pause emotes)
• The currently edited item is visible on the avatar in the preview
• The preview updates when the item being edited changes
• The selected emote plays on the avatar in the preview
• The preview updates when a different emote is selected
• The avatar performs the JUMP emote or other base emotes from “Play emote” dropdown on loop
• Animation playback controls appear in the toolbar when an emote item from the collection is selected
• Animation playback state stays in sync with the actual animation playing in the preview (progress, seconds counter)
• Clicking play in the animation controls starts the emote animation
• The animation controls show a playing state while the emote is animating
• The animation controls show a paused state when the emote is paused or stopped
• The animation controls show a stopped state when the emote finishes playing
• Zoom controls appear in the top-left corner and work as expected
• Emotes dropdown is hidden in the preview when playing an emote from the current collection
• Scene boundaries button (bottom-right corner) is not visible on unity wearable preview
• Social emotes play correctly on the avatar in the preview (it uses babylon preview)
• The preview background is transparent
• The avatar does not auto-rotate in the preview
• Dragging the avatar rotates the preview camera around the avatar

✅ Issues found during testing:

• #3376
• #3375

✅ Video evidence:

08.04.2026_08.46.20_REC.mp4