Fix ktx texture orientation in sandbox

packages/dev/core/src/Compat/index.ts

@@ -1 +1 @@
-export { CompatibilityOptions } from "./compatibilityOptions";
+export * from "./compatibilityOptions";

packages/dev/core/src/index.ts

@@ -9,12 +9,15 @@ export * from "./Bones/index";
 export * from "./Buffers/index";
 export * from "./Cameras/index";
 export * from "./Collisions/index";
+export * from "./Compat/index";
 export * from "./Compute/index";
 export * from "./Culling/index";
 export * from "./Debug/index";
 export * from "./DeviceInput/index";
 export * from "./Engines/index";
 export * from "./Events/index";
+export * from "./FlowGraph/index";
+export * from "./FrameGraph/index";
 export * from "./Gamepads/index";
 export * from "./Gizmos/index";
 export * from "./Helpers/index";
@@ -26,9 +29,11 @@ export * from "./Loading/index";
 export * from "./Materials/index";
 export * from "./Maths/index";
 export * from "./Meshes/index";
+export * from "./Misc/index";
 export * from "./Morph/index";
 export * from "./Navigation/index";
 export * from "./node";
+export * from "./ObjectModel/index";
 export * from "./Offline/index";
 export * from "./Particles/index";
 export * from "./Physics/index";
@@ -39,10 +44,5 @@ export * from "./scene";
 export * from "./sceneComponent";
 export * from "./Sprites/index";
 export * from "./States/index";
-export * from "./Misc/index";
-export * from "./XR/index";
 export * from "./types";
-export * from "./Compat/index";
-export * from "./FlowGraph/index";
-export * from "./ObjectModel/index";
-export * from "./FrameGraph/index";
+export * from "./XR/index";

packages/tools/sandbox/src/components/renderingZone.tsx

@@ -20,16 +20,28 @@ import "core/Helpers/sceneHelpers";
 import "../scss/renderingZone.scss";
 import { PBRBaseMaterial } from "core/Materials/PBR/pbrBaseMaterial";
 import { Texture } from "core/Materials/Textures/texture";
+import type { ITextureCreationOptions } from "core/Materials/Textures/texture";
 import { PBRMaterial } from "core/Materials/PBR/pbrMaterial";
 import type { AbstractEngine } from "core/Engines/abstractEngine";
+import { setOpenGLOrientationForUV, useOpenGLOrientationForUV } from "core/Compat/compatibilityOptions";
 
-function isTextureAsset(name: string): boolean {
-    const queryStringIndex = name.indexOf("?");
-    if (queryStringIndex !== -1) {
-        name = name.substring(0, queryStringIndex);
+function getFileExtension(str: string): string {
+    return str.split(".").pop() || "";
+}
+
+function isTextureAsset(extension: string): boolean {
+    switch (extension.toLowerCase()) {
+        case "ktx":
+        case "ktx2":
+        case "png":
+        case "jpg":
+        case "jpeg":
+        case "webp": {
+            return true;
+        }
     }
 
-    return name.endsWith(".ktx") || name.endsWith(".ktx2") || name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg") || name.endsWith(".webp");
+    return false;
 }
 
 interface IRenderingZoneProps {
@@ -127,7 +139,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                         return false;
                     }
                     default: {
-                        if (isTextureAsset(name)) {
+                        if (isTextureAsset(extension)) {
                             setSceneFileToLoad(file);
                         }
 
@@ -142,8 +154,9 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
         filesInput.loadAsync = (sceneFile, onProgress) => {
             const filesToLoad = filesInput.filesToLoad;
             if (filesToLoad.length === 1) {
-                const fileName = (filesToLoad[0] as any).correctName;
-                if (isTextureAsset(fileName)) {
+                const fileName = (filesToLoad[0] as any).correctName as string;
+                const fileExtension = getFileExtension(fileName);
+                if (isTextureAsset(fileExtension)) {
                     return Promise.resolve(this.loadTextureAsset(`file:${fileName}`));
                 }
             }
@@ -161,7 +174,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
             // Press R to reload
             if (event.keyCode === 82 && event.target && (event.target as HTMLElement).nodeName !== "INPUT" && this._scene) {
                 if (this.props.assetUrl) {
-                    this.loadAssetFromUrl();
+                    this.loadAssetFromUrl(this.props.assetUrl);
                 } else {
                     filesInput.reload();
                 }
@@ -285,15 +298,16 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
 
     loadTextureAsset(url: string): Scene {
         const scene = new Scene(this._engine);
+
+        const prevousUseOpenGLOrientationForUV = useOpenGLOrientationForUV;
+        setOpenGLOrientationForUV(true);
         const plane = CreatePlane("plane", { size: 1 }, scene);
+        setOpenGLOrientationForUV(prevousUseOpenGLOrientationForUV);
 
-        const texture = new Texture(
-            url,
-            scene,
-            undefined,
-            undefined,
-            Texture.NEAREST_LINEAR,
-            () => {
+        const options: ITextureCreationOptions = {
+            invertY: false,
+            samplingMode: Texture.NEAREST_LINEAR,
+            onLoad: () => {
                 const size = texture.getBaseSize();
                 if (size.width > size.height) {
                     plane.scaling.y = size.height / size.width;
@@ -309,11 +323,12 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
                 scene.debugLayer.show();
                 scene.debugLayer.select(texture, "PREVIEW");
             },
-            (message, exception) => {
+            onError: (message, exception) => {
                 this.props.globalState.onError.notifyObservers({ scene: scene, message: message || exception.message || "Failed to load texture" });
-            }
-        );
+            },
+        };
 
+        const texture = new Texture(url, scene, options);
         const material = new PBRMaterial("unlit", scene);
         material.unlit = true;
         material.albedoTexture = texture;
@@ -323,14 +338,14 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
         return scene;
     }
 
-    loadAssetFromUrl() {
-        const assetUrl = this.props.assetUrl!;
+    loadAssetFromUrl(assetUrl: string) {
         const rootUrl = Tools.GetFolderPath(assetUrl);
         const fileName = Tools.GetFilename(assetUrl);
+        const fileExtension = getFileExtension(fileName);
 
         this._engine.clearInternalTexturesCache();
 
-        const promise = isTextureAsset(assetUrl) ? Promise.resolve(this.loadTextureAsset(assetUrl)) : SceneLoader.LoadAsync(rootUrl, fileName, this._engine);
+        const promise = isTextureAsset(fileExtension) ? Promise.resolve(this.loadTextureAsset(assetUrl)) : SceneLoader.LoadAsync(rootUrl, fileName, this._engine);
 
         promise
             .then((scene) => {
@@ -355,7 +370,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
 
     loadAsset() {
         if (this.props.assetUrl) {
-            this.loadAssetFromUrl();
+            this.loadAssetFromUrl(this.props.assetUrl);
             return;
         }
     }