Merge pull request #7326 from BabylonJS/master

4.1.0-beta.13

Playground/js/zipTool.js

@@ -67,7 +67,7 @@ class ZipTool {
         }
 
         if (textures[index].isCube) {
-            if (textures[index].name.indexOf("dds") === -1) {
+            if (textures[index].name.indexOf("dds") === -1 && textures[index].name.indexOf(".env") === -1) {
                 if (textures[index]._extensions) {
                     for (var i = 0; i < 6; i++) {
                         textures.push({ name: textures[index].name + textures[index]._extensions[i] });

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12",
-        "babylonjs-gui": "4.1.0-beta.12",
-        "babylonjs-loaders": "4.1.0-beta.12",
-        "babylonjs-materials": "4.1.0-beta.12",
-        "babylonjs-serializers": "4.1.0-beta.12",
-        "babylonjs-gltf2interface": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13",
+        "babylonjs-gui": "4.1.0-beta.13",
+        "babylonjs-loaders": "4.1.0-beta.13",
+        "babylonjs-materials": "4.1.0-beta.13",
+        "babylonjs-serializers": "4.1.0-beta.13",
+        "babylonjs-gltf2interface": "4.1.0-beta.13"
     },
     "devDependencies": {
         "@types/react": "~16.7.3",

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.1.0-beta.12",
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs-gltf2interface": "4.1.0-beta.13",
+        "babylonjs": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":119395,"engineOnly":156240,"sceneOnly":502047,"minGridMaterial":632428,"minStandardMaterial":756948}
+{"thinEngineOnly":112431,"engineOnly":149276,"sceneOnly":502475,"minGridMaterial":632856,"minStandardMaterial":757384}

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.12",
-        "babylonjs-gltf2interface": "4.1.0-beta.12"
+        "babylonjs": "4.1.0-beta.13",
+        "babylonjs-gltf2interface": "4.1.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/what's new.md

@@ -265,8 +265,10 @@
 - Fixed an issue with pose input in webxr ([RaananW](https://github.com/RaananW/))
 - Fixed bug when parsing animation group without 'to' value ([noalak](https://github.com/noalak/))
 - isRightCamera and isLeftCamera were not set in WebXR ([RaananW](https://github.com/RaananW/))
-- Sandbox will now load assets relatively path-ed to same folder([Kyle Belfort](https://github.com/belfortk))
-- Playground will now render the returned scene from createScene() when there are multiple scenes added to engine([Kyle Belfort](https://github.com/belfortk))
+- Sandbox will now load assets relatively path-ed to same folder ([Kyle Belfort](https://github.com/belfortk))
+- Playground will now render the returned scene from createScene() when there are multiple scenes added to engine ([Kyle Belfort](https://github.com/belfortk))
+- Fixed bug so Playground will now download .env texture files to ./textures in .zip  ([Kyle Belfort](https://github.com/belfortk))
+- It was not possible to change the gaze and laser color in VR ([#7323](https://github.com/BabylonJS/Babylon.js/issues/7323)) ([RaananW](https://github.com/RaananW/))
 
 ## Breaking changes
 

package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.1.0-beta.12",
+    "version": "4.1.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

src/Cameras/VR/vrExperienceHelper.ts

@@ -429,6 +429,11 @@ export class VRExperienceHelper {
     private _leftController: Nullable<VRExperienceHelperControllerGazer> = null;
     private _rightController: Nullable<VRExperienceHelperControllerGazer> = null;
 
+    private _gazeColor: Color3 = new Color3(0.7, 0.7, 0.7);
+    private _laserColor: Color3 = new Color3(0.7, 0.7, 0.7);
+    private _pickedLaserColor: Color3 = new Color3(0.2, 0.2, 1);
+    private _pickedGazeColor: Color3 = new Color3(0, 0, 1);
+
     /**
      * Observable raised when a new mesh is selected based on meshSelectionPredicate
      */
@@ -2193,13 +2198,13 @@ export class VRExperienceHelper {
                     this.onNewMeshPicked.notifyObservers(hit);
                     gazer._currentMeshSelected = hit.pickedMesh;
                     if (hit.pickedMesh.isPickable && hit.pickedMesh.actionManager) {
-                        this.changeGazeColor(new Color3(0, 0, 1));
-                        this.changeLaserColor(new Color3(0.2, 0.2, 1));
+                        this.changeGazeColor(this._pickedGazeColor);
+                        this.changeLaserColor(this._pickedLaserColor);
                         gazer._isActionableMesh = true;
                     }
                     else {
-                        this.changeGazeColor(new Color3(0.7, 0.7, 0.7));
-                        this.changeLaserColor(new Color3(0.7, 0.7, 0.7));
+                        this.changeGazeColor(this._gazeColor);
+                        this.changeLaserColor(this._laserColor);
                         gazer._isActionableMesh = false;
                     }
                     try {
@@ -2216,8 +2221,8 @@ export class VRExperienceHelper {
                 else {
                     this._notifySelectedMeshUnselected(gazer._currentMeshSelected);
                     gazer._currentMeshSelected = null;
-                    this.changeGazeColor(new Color3(0.7, 0.7, 0.7));
-                    this.changeLaserColor(new Color3(0.7, 0.7, 0.7));
+                    this.changeGazeColor(this._gazeColor);
+                    this.changeLaserColor(this._laserColor);
                 }
             }
         }
@@ -2225,8 +2230,8 @@ export class VRExperienceHelper {
             this._notifySelectedMeshUnselected(gazer._currentMeshSelected);
             gazer._currentMeshSelected = null;
             //this._teleportationAllowed = false;
-            this.changeGazeColor(new Color3(0.7, 0.7, 0.7));
-            this.changeLaserColor(new Color3(0.7, 0.7, 0.7));
+            this.changeGazeColor(this._gazeColor);
+            this.changeLaserColor(this._laserColor);
         }
     }
 
@@ -2237,6 +2242,26 @@ export class VRExperienceHelper {
     }
 
     /**
+     * Permanently set new colors for the laser pointer
+     * @param color the new laser color
+     * @param pickedColor the new laser color when picked mesh detected
+     */
+    public setLaserColor(color: Color3, pickedColor: Color3 = this._pickedLaserColor) {
+        this._laserColor = color;
+        this._pickedLaserColor = pickedColor;
+    }
+
+    /**
+     * Permanently set new colors for the gaze pointer
+     * @param color the new gaze color
+     * @param pickedColor the new gaze color when picked mesh detected
+     */
+    public setGazeColor(color: Color3, pickedColor: Color3 = this._pickedGazeColor) {
+        this._gazeColor = color;
+        this._pickedGazeColor = pickedColor;
+    }
+
+    /**
      * Sets the color of the laser ray from the vr controllers.
      * @param color new color for the ray.
      */

src/Engines/Processors/shaderProcessor.ts

@@ -8,7 +8,12 @@ import { ShaderDefineAndOperator } from './Expressions/Operators/shaderDefineAnd
 import { ShaderDefineExpression } from './Expressions/shaderDefineExpression';
 import { ShaderDefineArithmeticOperator } from './Expressions/Operators/shaderDefineArithmeticOperator';
 import { ProcessingOptions } from './shaderProcessingOptions';
-import { FileTools } from '../../Misc/fileTools';
+import { _DevTools } from '../../Misc/devTools';
+
+declare type WebRequest = import("../../Misc/webRequest").WebRequest;
+declare type LoadFileError = import("../../Misc/fileTools").LoadFileError;
+declare type IOfflineProvider = import("../../Offline/IOfflineProvider").IOfflineProvider;
+declare type IFileRequest  = import("../../Misc/fileRequest").IFileRequest;
 
 /** @hidden */
 export class ShaderProcessor {
@@ -331,7 +336,7 @@ export class ShaderProcessor {
             } else {
                 var includeShaderUrl = options.shadersRepository + "ShadersInclude/" + includeFile + ".fx";
 
-                FileTools.LoadFile(includeShaderUrl, (fileContent) => {
+                ShaderProcessor._FileToolsLoadFile(includeShaderUrl, (fileContent) => {
                     options.includesShadersStore[includeFile] = fileContent as string;
                     this._ProcessIncludes(<string>returnValue, options, callback);
                 });
@@ -343,4 +348,19 @@ export class ShaderProcessor {
 
         callback(returnValue);
     }
+
+    /**
+     * Loads a file from a url
+     * @param url url to load
+     * @param onSuccess callback called when the file successfully loads
+     * @param onProgress callback called while file is loading (if the server supports this mode)
+     * @param offlineProvider defines the offline provider for caching
+     * @param useArrayBuffer defines a boolean indicating that date must be returned as ArrayBuffer
+     * @param onError callback called when the file fails to load
+     * @returns a file request object
+     * @hidden
+     */
+    public static _FileToolsLoadFile(url: string, onSuccess: (data: string | ArrayBuffer, responseURL?: string) => void, onProgress?: (ev: ProgressEvent) => void, offlineProvider?: IOfflineProvider, useArrayBuffer?: boolean, onError?: (request?: WebRequest, exception?: LoadFileError) => void): IFileRequest {
+        throw  _DevTools.WarnImport("FileTools");
+    }
 }

src/Engines/thinEngine.ts

@@ -23,13 +23,14 @@ import { IPipelineContext } from './IPipelineContext';
 import { WebGLPipelineContext } from './WebGL/webGLPipelineContext';
 import { VertexBuffer } from '../Meshes/buffer';
 import { InstancingAttributeInfo } from './instancingAttributeInfo';
-import { FileTools } from '../Misc/fileTools';
 import { BaseTexture } from '../Materials/Textures/baseTexture';
 import { IOfflineProvider } from '../Offline/IOfflineProvider';
 import { IEffectFallbacks } from '../Materials/iEffectFallbacks';
 import { IWebRequest } from '../Misc/interfaces/iWebRequest';
 import { CanvasGenerator } from '../Misc/canvasGenerator';
 
+declare type WebRequest = import("../Misc/webRequest").WebRequest;
+declare type LoadFileError = import("../Misc/fileTools").LoadFileError;
 declare type Observer<T> = import("../Misc/observable").Observer<T>;
 declare type VideoTexture = import("../Materials/Textures/videoTexture").VideoTexture;
 declare type RenderTargetTexture = import("../Materials/Textures/renderTargetTexture").RenderTargetTexture;
@@ -131,14 +132,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.1.0-beta.12";
+        return "babylonjs@4.1.0-beta.13";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.1.0-beta.12";
+        return "4.1.0-beta.13";
     }
 
     /**
@@ -624,7 +625,7 @@ export class ThinEngine {
                     if (this._gl) {
                         this._webGLVersion = 2.0;
 
-                        // Prevent weird browsers to lie :-)
+                        // Prevent weird browsers to lie
                         if (!this._gl.deleteQuery) {
                             this._webGLVersion = 1.0;
                         }
@@ -2952,11 +2953,11 @@ export class ThinEngine {
                 if (buffer && ((<HTMLImageElement>buffer).decoding || (<ImageBitmap>buffer).close)) {
                     onload(<HTMLImageElement>buffer);
                 } else {
-                    FileTools.LoadImage(url, onload, onInternalError, scene ? scene.offlineProvider : null, mimeType);
+                    ThinEngine._FileToolsLoadImage(url, onload, onInternalError, scene ? scene.offlineProvider : null, mimeType);
                 }
             }
             else if (typeof buffer === "string" || buffer instanceof ArrayBuffer || ArrayBuffer.isView(buffer) || buffer instanceof Blob) {
-                FileTools.LoadImage(buffer, onload, onInternalError, scene ? scene.offlineProvider : null, mimeType);
+                ThinEngine._FileToolsLoadImage(buffer, onload, onInternalError, scene ? scene.offlineProvider : null, mimeType);
             }
             else if (buffer) {
                 onload(<HTMLImageElement>buffer);
@@ -2967,6 +2968,20 @@ export class ThinEngine {
     }
 
     /**
+     * Loads an image as an HTMLImageElement.
+     * @param input url string, ArrayBuffer, or Blob to load
+     * @param onLoad callback called when the image successfully loads
+     * @param onError callback called when the image fails to load
+     * @param offlineProvider offline provider for caching
+     * @param mimeType optional mime type
+     * @returns the HTMLImageElement of the loaded image
+     * @hidden
+     */
+    public static _FileToolsLoadImage(input: string | ArrayBuffer | ArrayBufferView | Blob, onLoad: (img: HTMLImageElement | ImageBitmap) => void, onError: (message?: string, exception?: any) => void, offlineProvider: Nullable<IOfflineProvider>, mimeType?: string): Nullable<HTMLImageElement> {
+        throw _DevTools.WarnImport("FileTools");
+    }
+
+    /**
      * @hidden
      */
     public _rescaleTexture(source: InternalTexture, destination: InternalTexture, scene: Nullable<any>, internalFormat: number, onComplete: () => void): void {
@@ -4167,7 +4182,7 @@ export class ThinEngine {
     /** @hidden */
     public _loadFile(url: string, onSuccess: (data: string | ArrayBuffer, responseURL?: string) => void, onProgress?: (data: any) => void,
         offlineProvider?: IOfflineProvider, useArrayBuffer?: boolean, onError?: (request?: IWebRequest, exception?: any) => void): IFileRequest {
-        let request = FileTools.LoadFile(url, onSuccess, onProgress, offlineProvider, useArrayBuffer, onError);
+        let request = ThinEngine._FileToolsLoadFile(url, onSuccess, onProgress, offlineProvider, useArrayBuffer, onError);
         this._activeRequests.push(request);
         request.onCompleteObservable.add((request) => {
             this._activeRequests.splice(this._activeRequests.indexOf(request), 1);
@@ -4176,6 +4191,21 @@ export class ThinEngine {
     }
 
     /**
+     * Loads a file from a url
+     * @param url url to load
+     * @param onSuccess callback called when the file successfully loads
+     * @param onProgress callback called while file is loading (if the server supports this mode)
+     * @param offlineProvider defines the offline provider for caching
+     * @param useArrayBuffer defines a boolean indicating that date must be returned as ArrayBuffer
+     * @param onError callback called when the file fails to load
+     * @returns a file request object
+     * @hidden
+     */
+    public static _FileToolsLoadFile(url: string, onSuccess: (data: string | ArrayBuffer, responseURL?: string) => void, onProgress?: (ev: ProgressEvent) => void, offlineProvider?: IOfflineProvider, useArrayBuffer?: boolean, onError?: (request?: WebRequest, exception?: LoadFileError) => void): IFileRequest {
+        throw  _DevTools.WarnImport("FileTools");
+    }
+
+    /**
      * Reads pixels from the current frame buffer. Please note that this function can be slow
      * @param x defines the x coordinate of the rectangle where pixels must be read
      * @param y defines the y coordinate of the rectangle where pixels must be read

src/Materials/Textures/baseTexture.ts

@@ -11,6 +11,8 @@ import { IAnimatable } from '../../Animations/animatable.interface';
 import { GUID } from '../../Misc/guid';
 import { ISize, Size } from '../../Maths/math.size';
 
+import "../../Misc/fileTools";
+
 declare type Animation = import("../../Animations/animation").Animation;
 
 /**

src/Misc/fileTools.ts

@@ -8,6 +8,8 @@ import { FilesInputStore } from './filesInputStore';
 import { RetryStrategy } from './retryStrategy';
 import { BaseError } from './baseError';
 import { StringTools } from './stringTools';
+import { ThinEngine } from '../Engines/thinEngine';
+import { ShaderProcessor } from '../Engines/Processors/shaderProcessor';
 
 /** @ignore */
 export class LoadFileError extends BaseError {
@@ -110,12 +112,12 @@ export class FileTools {
             return;
         }
 
-        if (this.CorsBehavior) {
-            if (typeof (this.CorsBehavior) === 'string' || this.CorsBehavior instanceof String) {
-                element.crossOrigin = <string>this.CorsBehavior;
+        if (FileTools.CorsBehavior) {
+            if (typeof (FileTools.CorsBehavior) === 'string' || this.CorsBehavior instanceof String) {
+                element.crossOrigin = <string>FileTools.CorsBehavior;
             }
             else {
-                var result = this.CorsBehavior(url);
+                var result = FileTools.CorsBehavior(url);
                 if (result) {
                     element.crossOrigin = result;
                 }
@@ -149,12 +151,12 @@ export class FileTools {
             usingObjectURL = true;
         }
         else {
-            url = this._CleanUrl(input);
-            url = this.PreprocessUrl(input);
+            url = FileTools._CleanUrl(input);
+            url = FileTools.PreprocessUrl(input);
         }
 
         if (typeof Image === "undefined") {
-            this.LoadFile(url, (data) => {
+            FileTools.LoadFile(url, (data) => {
                 createImageBitmap(new Blob([data])).then((imgBmp) => {
                     onLoad(imgBmp);
                     if (usingObjectURL) {
@@ -175,7 +177,7 @@ export class FileTools {
         }
 
         var img = new Image();
-        this.SetCorsBehavior(url, img);
+        FileTools.SetCorsBehavior(url, img);
 
         const loadHandler = () => {
             img.removeEventListener("load", loadHandler);
@@ -307,11 +309,11 @@ export class FileTools {
             }
             const file = FilesInputStore.FilesToLoad[fileName];
             if (file) {
-                return this.ReadFile(file, onSuccess, onProgress, useArrayBuffer, onError ? (error) => onError(undefined, new LoadFileError(error.message, error.file)) : undefined);
+                return FileTools.ReadFile(file, onSuccess, onProgress, useArrayBuffer, onError ? (error) => onError(undefined, new LoadFileError(error.message, error.file)) : undefined);
             }
         }
 
-        return this.RequestFile(url, (data, request) => {
+        return FileTools.RequestFile(url, (data, request) => {
             onSuccess(data, request ? request.responseURL : undefined);
         }, onProgress, offlineProvider, useArrayBuffer, onError ? (error) => {
             onError(error.request, new LoadFileError(error.message, error.request));
@@ -329,10 +331,10 @@ export class FileTools {
      * @returns a file request object
      */
     public static RequestFile(url: string, onSuccess: (data: string | ArrayBuffer, request?: WebRequest) => void, onProgress?: (event: ProgressEvent) => void, offlineProvider?: IOfflineProvider, useArrayBuffer?: boolean, onError?: (error: RequestFileError) => void, onOpened?: (request: WebRequest) => void): IFileRequest {
-        url = this._CleanUrl(url);
-        url = this.PreprocessUrl(url);
+        url = FileTools._CleanUrl(url);
+        url = FileTools.PreprocessUrl(url);
 
-        const loadUrl = this.BaseUrl + url;
+        const loadUrl = FileTools.BaseUrl + url;
 
         let aborted = false;
         const fileRequest: IFileRequest = {
@@ -390,12 +392,12 @@ export class FileTools {
                         // Some browsers have issues where onreadystatechange can be called multiple times with the same value.
                         request.removeEventListener("readystatechange", onReadyStateChange);
 
-                        if ((request.status >= 200 && request.status < 300) || (request.status === 0 && (!DomManagement.IsWindowObjectExist() || this.IsFileURL()))) {
+                        if ((request.status >= 200 && request.status < 300) || (request.status === 0 && (!DomManagement.IsWindowObjectExist() || FileTools.IsFileURL()))) {
                             onSuccess(useArrayBuffer ? request.response : request.responseText, request);
                             return;
                         }
 
-                        let retryStrategy = this.DefaultRetryStrategy;
+                        let retryStrategy = FileTools.DefaultRetryStrategy;
                         if (retryStrategy) {
                             let waitTime = retryStrategy(loadUrl, request, retryIndex);
                             if (waitTime !== -1) {
@@ -438,7 +440,7 @@ export class FileTools {
                 // TODO: database needs to support aborting and should return a IFileRequest
 
                 if (offlineProvider) {
-                    offlineProvider.loadFile(this.BaseUrl + url, (data) => {
+                    offlineProvider.loadFile(FileTools.BaseUrl + url, (data) => {
                         if (!aborted) {
                             onSuccess(data);
                         }
@@ -468,4 +470,8 @@ export class FileTools {
     public static IsFileURL(): boolean {
         return location.protocol === "file:";
     }
-}
+}
+
+ThinEngine._FileToolsLoadImage = FileTools.LoadImage.bind(FileTools);
+ThinEngine._FileToolsLoadFile = FileTools.LoadFile.bind(FileTools);
+ShaderProcessor._FileToolsLoadFile = FileTools.LoadFile.bind(FileTools);