Nodes: Ensure background update waits for loaded images.

Author: Mugen87

src/renderers/common/nodes/Nodes.js

@@ -1,7 +1,7 @@
 import DataMap from '../DataMap.js';
 import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
-import { NodeFrame, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, viewportBottomLeft, normalWorld, pmremTexture, viewportTopLeft } from '../../../nodes/Nodes.js';
+import { NodeFrame, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, viewportBottomLeft, normalWorld, pmremTexture, viewportTopLeft, vec4 } from '../../../nodes/Nodes.js';
 
 import { EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../../constants.js';
 
@@ -20,6 +20,8 @@ class Nodes extends DataMap {
 		this.callHashCache = new ChainMap();
 		this.groupsData = new ChainMap();
 
+		this._envMapFallback = vec4( 0, 0, 0, 1 );
+
 	}
 
 	updateGroup( nodeUniformsGroup ) {
@@ -264,13 +266,30 @@ class Nodes extends DataMap {
 
 		if ( background ) {
 
-			if ( sceneData.background !== background ) {
+			if ( sceneData.background !== background || sceneData.backgroundReady === false ) {
 
 				let backgroundNode = null;
 
 				if ( background.isCubeTexture === true || ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) ) {
 
-					backgroundNode = pmremTexture( background, normalWorld );
+					const image = background.image;
+
+					const isCubeMap = background.isCubeTexture === true;
+					const isEquirectMap = ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping );
+
+					if ( ( isCubeMap && isCubeMapReady( image ) ) || ( isEquirectMap && isEquirectangularMapReady( image ) ) ) {
+
+						backgroundNode = pmremTexture( background, normalWorld );
+
+						sceneData.backgroundReady = true;
+
+					} else {
+
+						backgroundNode = this._envMapFallback; // fallback when texture data are not ready
+
+						sceneData.backgroundReady = false;
+
+					}
 
 				} else if ( background.isTexture === true ) {
 
@@ -485,4 +504,30 @@ class Nodes extends DataMap {
 
 }
 
+function isCubeMapReady( image ) {
+
+	if ( image === null || image === undefined ) return false;
+
+	let count = 0;
+	const length = 6;
+
+	for ( let i = 0; i < length; i ++ ) {
+
+		if ( image[ i ] !== undefined ) count ++;
+
+	}
+
+	return count === length;
+
+
+}
+
+function isEquirectangularMapReady( image ) {
+
+	if ( image === null || image === undefined ) return false;
+
+	return image.height > 0;
+
+}
+
 export default Nodes;