feat: add support of selection outliner

.vscode/settings.json

@@ -16,10 +16,8 @@
 		"source.fixAll.eslint": "always"
 	},
 	"files.insertFinalNewline": true,
-	"javascript.format.semicolons": "insert",
-	"typescript.format.semicolons": "insert",
-	"typescript.preferences.quoteStyle": "double",
-	"javascript.preferences.quoteStyle": "double",
+	"js/ts.format.semicolons": "insert",
+	"js/ts.preferences.quoteStyle": "double",
 	"[javascript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
@@ -35,6 +33,8 @@
 	"[jsonc]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
-	"typescript.preferences.importModuleSpecifier": "project-relative",
-	"typescript.preferences.autoImportFileExcludePatterns": ["**/export.ts"]
+	"js/ts.preferences.importModuleSpecifier": "project-relative",
+	"js/ts.preferences.autoImportFileExcludePatterns": ["**/export.ts"],
+	"js/ts.tsdk.path": "node_modules/typescript/lib",
+	"js/ts.tsdk.promptToUseWorkspaceVersion": true
 }

cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor-cli",
-	"version": "5.4.0",
+	"version": "5.4.1-alpha.5",
 	"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 -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 ? "BC2" : "BC1"},UBN,lRGB -o "${options.destinationFolder}"`;
 			break;
 
 		case "-pvrtc.ktx":

cli/src/pack/assets/process.mts

@@ -9,7 +9,7 @@ import { processExportedMaterial } from "./material.mjs";
 import { processExportedNodeParticleSystemSet } from "./particle-system.mjs";
 
 const supportedImagesExtensions: string[] = [".jpg", ".jpeg", ".webp", ".png", ".bmp"];
-const supportedCubeTexturesExtensions: string[] = [".env", ".dds"];
+const supportedCubeTexturesExtensions: string[] = [".env", ".dds", ".hdr"];
 const supportedAudioExtensions: string[] = [".mp3", ".wav", ".wave", ".ogg"];
 const supportedJsonExtensions: string[] = [".material", ".gui", ".cinematic", ".npss", ".ragdoll", ".json"];
 const supportedMiscExtensions: string[] = [".3dl", ".exr", ".hdr"];

cli/src/pack/assets/texture.mts

@@ -19,7 +19,7 @@ export interface IComputeExportedTextureOptions extends IProcessAssetFileOptions
 }
 
 export async function processExportedTexture(absolutePath: string, options: IComputeExportedTextureOptions): Promise<void> {
-	const extension = extname(absolutePath).toLocaleLowerCase();
+	const extension = extname(absolutePath);
 
 	const metadata = await sharp(absolutePath).metadata();
 	if (!metadata.width || !metadata.height) {

cli/src/pack/scene.mts

@@ -474,7 +474,11 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		physicsGravity: options.config.physics.gravity,
 		physicsEngine: "HavokPlugin",
 
-		metadata: options.config.metadata,
+		metadata: {
+			...options.config.metadata,
+			rendering: options.config.rendering,
+			clusteredLight: options.config.clusteredLight,
+		},
 
 		morphTargetManagers,
 		lights,
@@ -522,7 +526,7 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		postProcesses: [],
 		spriteManagers: [],
 		reflectionProbes: [],
-	};
+	} as any;
 
 	// Resolve parenting for mesh instances.
 	const allNodes = [...scene.meshes, ...scene.cameras, ...scene.lights, ...scene.transformNodes, ...scene.meshes.map((m) => m.instances ?? []).flat()];
@@ -539,6 +543,14 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		}
 	});
 
+	// Configue ennviornment texture
+	if (scene.environmentTexture?.name && scene.environmentTexture.customType === "BABYLON.HDRCubeTexture") {
+		scene.environmentTextureSize = 512;
+		scene.environmentTextureType = "BABYLON.HDRCubeTexture";
+		scene.environmentTextureRotationY = scene.environmentTexture.rotationY;
+		scene.environmentTexture = scene.environmentTexture.name;
+	}
+
 	// Write final scene file.
 	const destination = join(options.publicDir, `${options.sceneName}.babylon`);
 	await fs.writeJSON(destination, scene, {

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor",
-	"version": "5.4.0",
+	"version": "5.4.1-alpha.5",
 	"description": "Babylon.js Editor is a Web Application helping artists to work with Babylon.js",
 	"productName": "Babylon.js Editor",
 	"main": "build/src/index.js",
@@ -40,9 +40,9 @@
 		"vitest": "4.0.17"
 	},
 	"dependencies": {
-		"@babylonjs/addons": "9.0.0",
-		"@babylonjs/core": "9.0.0",
-		"@babylonjs/havok": "1.3.10",
+		"@babylonjs/addons": "9.2.1",
+		"@babylonjs/core": "9.2.1",
+		"@babylonjs/havok": "1.3.12",
 		"@blueprintjs/core": "^5.10.0",
 		"@blueprintjs/select": "^5.1.2",
 		"@emotion/react": "^11.13.3",
@@ -75,18 +75,18 @@
 		"@xterm/xterm": "6.1.0-beta.22",
 		"assimpjs": "0.0.10",
 		"axios": "1.15.0",
-		"babylonjs": "9.0.0",
-		"babylonjs-addons": "9.0.0",
+		"babylonjs": "9.2.1",
+		"babylonjs-addons": "9.2.1",
 		"babylonjs-editor-cli": "latest",
 		"babylonjs-editor-tools": "latest",
-		"babylonjs-gui": "9.0.0",
-		"babylonjs-gui-editor": "9.0.0",
-		"babylonjs-loaders": "9.0.0",
-		"babylonjs-materials": "9.0.0",
-		"babylonjs-node-editor": "9.0.0",
-		"babylonjs-node-particle-editor": "9.0.0",
-		"babylonjs-post-process": "9.0.0",
-		"babylonjs-procedural-textures": "9.0.0",
+		"babylonjs-gui": "9.2.1",
+		"babylonjs-gui-editor": "9.2.1",
+		"babylonjs-loaders": "9.2.1",
+		"babylonjs-materials": "9.2.1",
+		"babylonjs-node-editor": "9.2.1",
+		"babylonjs-node-particle-editor": "9.2.1",
+		"babylonjs-post-process": "9.2.1",
+		"babylonjs-procedural-textures": "9.2.1",
 		"chokidar": "^4.0.3",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",

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

@@ -112,7 +112,7 @@ const ParticleSystemSelectable = createSelectable(AssetBrowserParticleSystemItem
 
 const directoryPackagesExtensions = [".scene", ".navmesh"];
 
-RegisterSceneLoaderPlugin(new AssimpJSLoader(true));
+RegisterSceneLoaderPlugin(new AssimpJSLoader(true, true));
 
 export interface IEditorAssetsBrowserProps {
 	/**
@@ -1452,6 +1452,7 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 				return openModelViewer(this.props.editor, item.props.absolutePath);
 
 			case ".env":
+			case ".hdr":
 				return openEnvViewer(item.props.absolutePath);
 
 			case ".ts":

editor/src/editor/layout/assets-browser/viewers/env-viewer.tsx

@@ -1,8 +1,8 @@
-import { basename } from "path/posix";
+import { basename, extname } from "path/posix";
 
 import { useEffect, useRef } from "react";
 
-import { Engine, Scene, CreateSphere, ArcRotateCamera, Vector3, PBRMaterial, CubeTexture, Texture } from "babylonjs";
+import { Engine, Scene, CreateSphere, ArcRotateCamera, Vector3, PBRMaterial, CubeTexture, Texture, HDRCubeTexture } from "babylonjs";
 
 import { showAlert } from "../../../../ui/dialog";
 
@@ -30,16 +30,27 @@ function AssetBrowserEnvViewer(props: IAssetBrowserEnvViewerProps) {
 		const scene = new Scene(engine);
 		scene.clearColor.set(0, 0, 0, 0);
 
-		const texture = CubeTexture.CreateFromPrefilteredData(props.absolutePath, scene);
-		texture.coordinatesMode = Texture.CUBIC_MODE;
+		let texture: CubeTexture | HDRCubeTexture | null = null;
+		switch (extname(props.absolutePath).toLowerCase()) {
+			case ".env":
+				texture = CubeTexture.CreateFromPrefilteredData(props.absolutePath, scene);
+				break;
+			case ".hdr":
+				texture = new HDRCubeTexture(props.absolutePath, scene, 512);
+				break;
+		}
 
-		const material = new PBRMaterial("material", scene);
-		material.metallic = 1;
-		material.roughness = 0;
-		material.reflectionTexture = texture;
+		if (texture) {
+			texture.coordinatesMode = Texture.CUBIC_MODE;
 
-		const sphere = CreateSphere("sphere", { diameter: 100 }, scene);
-		sphere.material = material;
+			const material = new PBRMaterial("material", scene);
+			material.metallic = 1;
+			material.roughness = 0;
+			material.reflectionTexture = texture;
+
+			const sphere = CreateSphere("sphere", { diameter: 100 }, scene);
+			sphere.material = material;
+		}
 
 		const camera = new ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 150, Vector3.Zero(), scene, true);
 		camera.lowerRadiusLimit = 75;