feat: rework UI for gizmo snapping

cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor-cli",
-	"version": "5.4.1-rc.0",
+	"version": "5.4.1-rc.6",
 	"description": "Babylon.js Editor CLI is a command line interface to help you package your scenes made using the Babylon.js Editor",
 	"productName": "Babylon.js Editor CLI",
 	"scripts": {

cli/src/pack/assets/ktx.mts

@@ -95,7 +95,7 @@ export async function compressFileToKtxFormat(absolutePath: string, options: Com
 			break;
 
 		case "-dxt.ktx":
-			command = `"${pvrTexToolAbsolutePath}" -i "${absolutePath}" -flip y -pot + -m -dither -ics lRGB ${hasAlpha ? "-l" : ""} -f ${hasAlpha ? "BC2" : "BC1"},UBN,lRGB -o "${options.destinationFolder}"`;
+			command = `"${pvrTexToolAbsolutePath}" -i "${absolutePath}" -flip y -pot + -m -dither -ics lRGB ${hasAlpha ? "-l" : ""} -f ${hasAlpha ? "BC3" : "BC1"},UBN,lRGB -o "${options.destinationFolder}"`;
 			break;
 
 		case "-pvrtc.ktx":

cli/src/pack/scene.mts

@@ -226,6 +226,7 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sprite managers
 	const spriteManagersResult = await Promise.all(
 		options.directories.spriteManagerFiles.map(async (file) => {
 			const data = await fs.readJSON(join(options.sceneFile, "sprite-managers", file));
@@ -248,6 +249,7 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sprite maps
 	const spriteMapsResult = await Promise.all(
 		options.directories.spriteMapFiles.map(async (file) => {
 			const data = await fs.readJSON(join(options.sceneFile, "sprite-maps", file));
@@ -270,6 +272,29 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sound nodes
+	const soundNodesResults = await Promise.all(
+		options.directories.soundNodeFiles.map(async (file) => {
+			const data = await fs.readJSON(join(options.sceneFile, "soundNodes", file));
+
+			if (data.metadata?.doNotSerialize) {
+				return null;
+			}
+
+			if (data.metadata?.parentId) {
+				data.parentId = data.metadata.parentId;
+			}
+
+			return data;
+		})
+	);
+
+	transformNodes.push(
+		...soundNodesResults.filter((soundNode) => {
+			return soundNode !== null;
+		})
+	);
+
 	// Lights
 	const lightsResult = await Promise.all(
 		options.directories.lightsFiles.map(async (file) => {

cli/src/tools/scene.mts

@@ -16,6 +16,7 @@ export async function ensureSceneDirectories(scenePath: string) {
 		fs.ensureDir(join(scenePath, "sceneLinks")),
 		fs.ensureDir(join(scenePath, "gui")),
 		fs.ensureDir(join(scenePath, "sounds")),
+		fs.ensureDir(join(scenePath, "soundNodes")),
 		fs.ensureDir(join(scenePath, "particleSystems")),
 		fs.ensureDir(join(scenePath, "morphTargetManagers")),
 		fs.ensureDir(join(scenePath, "morphTargets")),
@@ -38,6 +39,7 @@ export async function readSceneDirectories(scenePath: string) {
 		sceneLinkFiles,
 		guiFiles,
 		soundFiles,
+		soundNodeFiles,
 		particleSystemFiles,
 		morphTargetManagerFiles,
 		morphTargetFiles,
@@ -57,6 +59,7 @@ export async function readSceneDirectories(scenePath: string) {
 		readdir(join(scenePath, "sceneLinks")),
 		readdir(join(scenePath, "gui")),
 		readdir(join(scenePath, "sounds")),
+		readdir(join(scenePath, "soundNodes")),
 		readdir(join(scenePath, "particleSystems")),
 		readdir(join(scenePath, "morphTargetManagers")),
 		readdir(join(scenePath, "morphTargets")),
@@ -78,6 +81,7 @@ export async function readSceneDirectories(scenePath: string) {
 		sceneLinkFiles,
 		guiFiles,
 		soundFiles,
+		soundNodeFiles,
 		particleSystemFiles,
 		morphTargetManagerFiles,
 		morphTargetFiles,

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor",
-	"version": "5.4.1-rc.0",
+	"version": "5.4.1-rc.6",
 	"description": "Babylon.js Editor is a Web Application helping artists to work with Babylon.js",
 	"productName": "Babylon.js Editor",
 	"main": "build/src/index.js",

editor/src/editor/dialogs/command-palette/command-palette.tsx

@@ -8,7 +8,7 @@ import { FaCirclePlus } from "react-icons/fa6";
 import { IoSparklesSharp } from "react-icons/io5";
 import { HiMiniCommandLine } from "react-icons/hi2";
 
-import { Node, IParticleSystem, Sound } from "babylonjs";
+import { Node, IParticleSystem } from "babylonjs";
 
 import { normalizedGlob } from "../../../tools/fs";
 import { isNodeVisibleInGraph } from "../../../tools/node/metadata";
@@ -168,10 +168,7 @@ export class CommandPalette extends Component<ICommandPaletteProps, ICommandPale
 	private _refreshEntities(): void {
 		const scene = this.props.editor.layout.preview.scene;
 
-		let objects = [...scene.meshes, ...scene.lights, ...scene.cameras, ...scene.particleSystems, ...scene.transformNodes] as (Node | IParticleSystem | Sound)[];
-		scene.soundTracks?.forEach((soundTrack) => {
-			objects.push(...soundTrack.soundCollection);
-		});
+		let objects = [...scene.meshes, ...scene.lights, ...scene.cameras, ...scene.particleSystems, ...scene.transformNodes] as (Node | IParticleSystem)[];
 
 		objects = objects.filter((o) => {
 			if (isNode(o) && !isNodeVisibleInGraph(o)) {

editor/src/editor/layout/assets-browser.tsx

@@ -96,6 +96,7 @@ import { EditorAssetsTreeLabel } from "./assets-browser/label";
 import "babylonjs-loaders";
 
 import { AssimpJSLoader } from "../../loader/assimpjs";
+import { isSoundNode } from "../../tools/guards/sound";
 
 const HDRSelectable = createSelectable(AssetBrowserHDRItem);
 const GuiSelectable = createSelectable(AssetBrowserGUIItem);
@@ -481,13 +482,10 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 		});
 
 		// Sounds
-		scene.soundTracks?.forEach((soundtrack) => {
-			soundtrack.soundCollection.forEach((sound) => {
-				if (sound.name === oldRelativePath) {
-					sound.name = newRelativePath;
-					sound["_url"] = newRelativePath;
-				}
-			});
+		scene.transformNodes.forEach((node) => {
+			if (isSoundNode(node) && node.soundRelativePath === oldRelativePath) {
+				node.soundRelativePath = newRelativePath;
+			}
 		});
 
 		// Scripts

editor/src/editor/layout/cinematic/inspector/sound.tsx

@@ -1,8 +1,9 @@
-import { Sound } from "babylonjs";
 import { ICinematicSound, ICinematicTrack } from "babylonjs-editor-tools";
 
 import { CinematicEditor } from "../editor";
 
+import { SoundNode } from "../../../nodes/sound";
+
 import { EditorInspectorNumberField } from "../../inspector/fields/number";
 import { EditorInspectorSectionField } from "../../inspector/fields/section";
 
@@ -13,14 +14,13 @@ export interface ICinematicEditorSoundKeyInspectorProps {
 }
 
 export function CinematicEditorSoundKeyInspector(props: ICinematicEditorSoundKeyInspectorProps) {
-	const sound = props.track.sound as Sound | null;
-	const buffer = sound?.getAudioBuffer();
+	const node = props.track.sound as SoundNode | null;
 
-	if (!sound || !buffer) {
+	if (!node || !node.sound?.buffer) {
 		return null;
 	}
 
-	const endFrame = buffer.duration * props.cinematicEditor.cinematic.framesPerSecond;
+	const endFrame = node.sound.duration * props.cinematicEditor.cinematic.framesPerSecond;
 
 	return (
 		<EditorInspectorSectionField title="Sound">

editor/src/editor/layout/cinematic/serialization/parse.ts

@@ -1,11 +1,12 @@
-import { Scene, Sound, Vector3, Animation } from "babylonjs";
+import { Scene, Vector3, Animation } from "babylonjs";
 import { ICinematic, ICinematicKey, ICinematicKeyCut, ICinematicTrack, parseCinematicKeyValue, getAnimationTypeForObject } from "babylonjs-editor-tools";
 
-import { getSoundById } from "../../../../tools/sound/tools";
 import { getInspectorPropertyValue } from "../../../../tools/property";
 
 import { getDefaultRenderingPipeline } from "../../../rendering/default-pipeline";
 
+import { SoundNode } from "../../../nodes/sound";
+
 export function parseCinematic(data: ICinematic, scene: Scene) {
 	const tracks = data.tracks.map((track) => {
 		return parseCinematicTrack(track, scene);
@@ -41,9 +42,9 @@ export function parseCinematicTrack(track: ICinematicTrack, scene: Scene) {
 		animationType = getAnimationTypeForObject(value);
 	}
 
-	let sound: Sound | null = null;
+	let sound: SoundNode | null = null;
 	if (track.sound) {
-		sound = getSoundById(track.sound, scene);
+		sound = scene.getNodeById(track.sound) as SoundNode;
 	}
 
 	return {

editor/src/editor/layout/cinematic/timelines/add.ts

@@ -1,10 +1,12 @@
-import { Sound, AnimationGroup } from "babylonjs";
+import { AnimationGroup } from "babylonjs";
 import { ICinematicAnimationGroup, ICinematicKey, ICinematicKeyCut, ICinematicKeyEvent, ICinematicSound, ICinematicTrack, isCinematicKeyCut } from "babylonjs-editor-tools";
 
+import { showAlert } from "../../../../ui/dialog";
+
 import { registerUndoRedo } from "../../../../tools/undoredo";
 import { getInspectorPropertyValue } from "../../../../tools/property";
 
-import { showAlert } from "../../../../ui/dialog";
+import { SoundNode } from "../../../nodes/sound";
 
 import { getDefaultRenderingPipeline } from "../../../rendering/default-pipeline";
 
@@ -116,17 +118,16 @@ export function addSoundKey(cinematicEditor: CinematicEditor, track: ICinematicT
 		return;
 	}
 
-	const sound = track.sound as Sound;
-	const buffer = sound.getAudioBuffer();
+	const node = track.sound as SoundNode;
 
-	if (!buffer) {
+	if (!node.sound?.buffer) {
 		return showAlert(
 			"Can't add sound track",
 			"The sound track is not ready yet, please wait until the sound is loaded. If this problem persists, please verify the sound file is correctly loaded."
 		);
 	}
 
-	const duration = buffer.duration;
+	const duration = node.sound.buffer.duration;
 	const fps = cinematicEditor.cinematic.framesPerSecond;
 
 	const key = {

editor/src/editor/layout/cinematic/tools/sync.ts

@@ -1,6 +1,7 @@
-import { AnimationGroup, Sound } from "babylonjs";
+import { AnimationGroup } from "babylonjs";
 
 import { ICinematic } from "babylonjs-editor-tools";
+import { SoundNode } from "../../../nodes/sound";
 
 export interface ISyncAnimationGroupsToFrameOptions {
 	pauseAfterSync: boolean;
@@ -44,8 +45,8 @@ export function syncAnimationGroupsToFrame(frame: number, cinematic: ICinematic,
 
 export function syncSoundsToFrame(frame: number, cinematic: ICinematic) {
 	cinematic.tracks.forEach((track) => {
-		const sound = track.sound as Sound;
-		if (!sound) {
+		const node = track.sound as SoundNode;
+		if (!node) {
 			return;
 		}
 
@@ -59,7 +60,9 @@ export function syncSoundsToFrame(frame: number, cinematic: ICinematic) {
 
 			if (frameDiff > 0) {
 				const offset = frameDiff / cinematic.framesPerSecond;
-				sound.play(0, offset);
+				node.play({
+					startOffset: offset,
+				});
 			}
 		});
 	});

editor/src/editor/layout/cinematic/tracks/sound.tsx

@@ -3,13 +3,14 @@ import { HiSpeakerWave } from "react-icons/hi2";
 
 import { ICinematicTrack } from "babylonjs-editor-tools";
 
-import { getSoundById } from "../../../../tools/sound/tools";
+import { Button } from "../../../../ui/shadcn/ui/button";
+
+import { isSoundNode } from "../../../../tools/guards/sound";
 import { registerUndoRedo } from "../../../../tools/undoredo";
 
 import { CinematicEditor } from "../editor";
 
 import { CinematicEditorRemoveTrackButton } from "./remove";
-import { Button } from "../../../../ui/shadcn/ui/button";
 
 export interface ICinematicEditorSoundTrackProps {
 	track: ICinematicTrack;
@@ -37,7 +38,11 @@ export function CinematicEditorSoundTrack(props: ICinematicEditorSoundTrackProps
 		setDragOver(false);
 
 		const data = JSON.parse(event.dataTransfer.getData("graph/node")) as string[];
-		const sound = getSoundById(data[0], props.cinematicEditor.editor.layout.preview.scene);
+
+		let sound = props.cinematicEditor.editor.layout.preview.scene.getNodeById(data[0]);
+		if (!isSoundNode(sound)) {
+			sound = null;
+		}
 
 		if (sound && sound !== props.track.sound) {
 			const oldSound = props.track.node;