Editor: Fix KTX2 support with glTF asset. (#27191)

editor/js/Editor.js

@@ -44,6 +44,7 @@ function Editor() {
 		spaceChanged: new Signal(),
 		rendererCreated: new Signal(),
 		rendererUpdated: new Signal(),
+		rendererDetectKTX2Support: new Signal(),
 
 		sceneBackgroundChanged: new Signal(),
 		sceneEnvironmentChanged: new Signal(),

editor/js/Loader.js

@@ -280,6 +280,8 @@ function Loader( editor ) {
 					const ktx2Loader = new KTX2Loader();
 					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
 
+					editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
+
 					const loader = new GLTFLoader();
 					loader.setDRACOLoader( dracoLoader );
 					loader.setKTX2Loader( ktx2Loader );
@@ -322,6 +324,8 @@ function Loader( editor ) {
 					const ktx2Loader = new KTX2Loader();
 					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
 
+					editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
+
 					const loader = new GLTFLoader( manager );
 					loader.setDRACOLoader( dracoLoader );
 					loader.setKTX2Loader( ktx2Loader );
@@ -977,6 +981,8 @@ function Loader( editor ) {
 					const ktx2Loader = new KTX2Loader();
 					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
 
+					editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
+
 					const loader = new GLTFLoader();
 					loader.setDRACOLoader( dracoLoader );
 					loader.setKTX2Loader( ktx2Loader );
@@ -1012,6 +1018,8 @@ function Loader( editor ) {
 					const ktx2Loader = new KTX2Loader();
 					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
 
+					editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
+
 					const loader = new GLTFLoader();
 					loader.setDRACOLoader( dracoLoader );
 					loader.setKTX2Loader( ktx2Loader );

editor/js/Sidebar.Material.MapProperty.js

@@ -17,7 +17,7 @@ function SidebarMaterialMapProperty( editor, property, name ) {
 	const enabled = new UICheckbox( false ).setMarginRight( '8px' ).onChange( onChange );
 	container.add( enabled );
 
-	const map = new UITexture().onChange( onMapChange );
+	const map = new UITexture( editor ).onChange( onMapChange );
 	container.add( map );
 
 	const mapType = property.replace( 'Map', '' );

editor/js/Sidebar.Scene.js

@@ -175,11 +175,11 @@ function SidebarScene( editor ) {
 	const backgroundColor = new UIColor().setValue( '#000000' ).setMarginLeft( '8px' ).onInput( onBackgroundChanged );
 	backgroundRow.add( backgroundColor );
 
-	const backgroundTexture = new UITexture().setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	const backgroundTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onBackgroundChanged );
 	backgroundTexture.setDisplay( 'none' );
 	backgroundRow.add( backgroundTexture );
 
-	const backgroundEquirectangularTexture = new UITexture().setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	const backgroundEquirectangularTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onBackgroundChanged );
 	backgroundEquirectangularTexture.setDisplay( 'none' );
 	backgroundRow.add( backgroundEquirectangularTexture );
 
@@ -244,7 +244,7 @@ function SidebarScene( editor ) {
 	environmentRow.add( new UIText( strings.getKey( 'sidebar/scene/environment' ) ).setWidth( '90px' ) );
 	environmentRow.add( environmentType );
 
-	const environmentEquirectangularTexture = new UITexture().setMarginLeft( '8px' ).onChange( onEnvironmentChanged );
+	const environmentEquirectangularTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onEnvironmentChanged );
 	environmentEquirectangularTexture.setDisplay( 'none' );
 	environmentRow.add( environmentEquirectangularTexture );
 

editor/js/Viewport.js

@@ -388,6 +388,12 @@ function Viewport( editor ) {
 
 	} );
 
+	signals.rendererDetectKTX2Support.add( function ( ktx2Loader ) {
+
+		ktx2Loader.detectSupport( renderer );
+
+	} );
+
 	signals.sceneGraphChanged.add( function () {
 
 		render();

editor/js/libs/ui.three.js

@@ -4,12 +4,12 @@ import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 import { TGALoader } from 'three/addons/loaders/TGALoader.js';
 
-import { UIElement, UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
+import { UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
 import { MoveObjectCommand } from '../commands/MoveObjectCommand.js';
 
 class UITexture extends UISpan {
 
-	constructor( mapping ) {
+	constructor( editor ) {
 
 		super();
 
@@ -100,10 +100,9 @@ class UITexture extends UISpan {
 
 					const arrayBuffer = event.target.result;
 					const blobURL = URL.createObjectURL( new Blob( [ arrayBuffer ] ) );
-					const tempRenderer = new THREE.WebGLRenderer();
 					const ktx2Loader = new KTX2Loader();
 					ktx2Loader.setTranscoderPath( '../../examples/jsm/libs/basis/' );
-					ktx2Loader.detectSupport( tempRenderer );
+					editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
 
 					ktx2Loader.load( blobURL, function ( texture ) {
 
@@ -114,7 +113,6 @@ class UITexture extends UISpan {
 
 						if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
 						ktx2Loader.dispose();
-						tempRenderer.dispose();
 
 					} );
 
@@ -129,7 +127,7 @@ class UITexture extends UISpan {
 					const image = document.createElement( 'img' );
 					image.addEventListener( 'load', function () {
 
-						const texture = new THREE.Texture( this, mapping );
+						const texture = new THREE.Texture( this );
 						texture.sourceFile = file.name;
 						texture.needsUpdate = true;
 
@@ -235,145 +233,6 @@ class UITexture extends UISpan {
 
 }
 
-class UICubeTexture extends UIElement {
-
-	constructor() {
-
-		const container = new UIDiv();
-
-		super( container.dom );
-
-		this.cubeTexture = null;
-		this.onChangeCallback = null;
-
-		this.textures = [];
-
-		const scope = this;
-
-		const pRow = new UIRow();
-		const nRow = new UIRow();
-
-		pRow.add( new UIText( 'P:' ).setWidth( '35px' ) );
-		nRow.add( new UIText( 'N:' ).setWidth( '35px' ) );
-
-		const posXTexture = new UITexture().onChange( onTextureChanged );
-		const negXTexture = new UITexture().onChange( onTextureChanged );
-		const posYTexture = new UITexture().onChange( onTextureChanged );
-		const negYTexture = new UITexture().onChange( onTextureChanged );
-		const posZTexture = new UITexture().onChange( onTextureChanged );
-		const negZTexture = new UITexture().onChange( onTextureChanged );
-
-		this.textures.push( posXTexture, negXTexture, posYTexture, negYTexture, posZTexture, negZTexture );
-
-		pRow.add( posXTexture );
-		pRow.add( posYTexture );
-		pRow.add( posZTexture );
-
-		nRow.add( negXTexture );
-		nRow.add( negYTexture );
-		nRow.add( negZTexture );
-
-		container.add( pRow, nRow );
-
-		function onTextureChanged() {
-
-			const images = [];
-
-			for ( let i = 0; i < scope.textures.length; i ++ ) {
-
-				const texture = scope.textures[ i ].getValue();
-
-				if ( texture !== null ) {
-
-					images.push( texture.isHDRTexture ? texture : texture.image );
-
-				}
-
-			}
-
-			if ( images.length === 6 ) {
-
-				const cubeTexture = new THREE.CubeTexture( images );
-				cubeTexture.needsUpdate = true;
-
-				if ( images[ 0 ].isHDRTexture ) cubeTexture.isHDRTexture = true;
-
-				scope.cubeTexture = cubeTexture;
-
-				if ( scope.onChangeCallback ) scope.onChangeCallback( cubeTexture );
-
-			}
-
-		}
-
-	}
-
-	setColorSpace( colorSpace ) {
-
-		const cubeTexture = this.getValue();
-		if ( cubeTexture !== null ) {
-
-			cubeTexture.colorSpace = colorSpace;
-
-		}
-
-		return this;
-
-	}
-
-	getValue() {
-
-		return this.cubeTexture;
-
-	}
-
-	setValue( cubeTexture ) {
-
-		this.cubeTexture = cubeTexture;
-
-		if ( cubeTexture !== null ) {
-
-			const images = cubeTexture.image;
-
-			if ( Array.isArray( images ) === true && images.length === 6 ) {
-
-				for ( let i = 0; i < images.length; i ++ ) {
-
-					const image = images[ i ];
-
-					const texture = new THREE.Texture( image );
-					this.textures[ i ].setValue( texture );
-
-				}
-
-			}
-
-		} else {
-
-			const textures = this.textures;
-
-			for ( let i = 0; i < textures.length; i ++ ) {
-
-				textures[ i ].setValue( null );
-
-			}
-
-		}
-
-		return this;
-
-	}
-
-	onChange( callback ) {
-
-		this.onChangeCallback = callback;
-
-		return this;
-
-	}
-
-}
-
 class UIOutliner extends UIDiv {
 
 	constructor( editor ) {
@@ -980,4 +839,4 @@ function renderToCanvas( texture ) {
 
 }
 
-export { UITexture, UICubeTexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };
+export { UITexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };