@2112-lab/central-plant 0.1.0 → 0.1.2

package/dist/esm/src/textureConfig.js

@@ -1,9 +1,51 @@
-import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import * as THREE from 'three';
 
+/**
+ * Helper function to get asset paths that works in both bundled and modular contexts
+ * @param {string} assetPath - Relative path from the assets directory
+ * @returns {string} - The full path to the asset
+ */
+function getAssetPath(assetPath) {
+  // Strip leading slash if present
+  if (assetPath.startsWith('/')) {
+    assetPath = assetPath.substring(1);
+  }
+
+  // In browser context, check for different module formats
+  if (typeof window !== 'undefined') {
+    // For bundled version, assets should be in dist/bundle/assets/
+    // For ESM/CJS, assets should be in their respective folders
+
+    // Try to determine if we're using the bundled version or ESM/CJS
+    var isBundled = typeof CentralPlantUtils !== 'undefined';
+
+    // Check if we're running in a Nuxt.js environment (localhost:3000 is a common dev server)
+    var isNuxtEnv = window.location.hostname === 'localhost' && (window.location.port === '3000' || window.location.port === '3001');
+    if (isNuxtEnv) {
+      // In Nuxt.js environment, assets are likely in the /static directory at the root
+      return "/".concat(assetPath); // No /assets/ prefix in the URL path
+    } else if (isBundled) {
+      // Get the base URL for the module
+      var baseUrl = import.meta.url;
+      // In bundled format, assets are in the assets folder next to the bundle
+      return new URL("./assets/".concat(assetPath), baseUrl).href;
+    } else {
+      // Get the base URL for the module
+      var _baseUrl = import.meta.url;
+      // In ESM/CJS format, need to go up relative to current module path
+      return new URL("../assets/".concat(assetPath), _baseUrl).href;
+    }
+  }
+
+  // In Node.js context
+  return "assets/".concat(assetPath);
+}
 var TEXTURE_SETS = {
   // Light metallic texture using the gravel_embedded_concrete with metallic properties
   light_metal: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/gravel_embedded_concrete_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/gravel_embedded_concrete_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -29,6 +71,8 @@ var TEXTURE_SETS = {
     }
   },
   brick: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/pavement_03_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/pavement_03_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -51,6 +95,8 @@ var TEXTURE_SETS = {
     }
   },
   gravel_embedded_concrete: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/gravel_embedded_concrete_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/gravel_embedded_concrete_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -71,8 +117,8 @@ var TEXTURE_SETS = {
   }
 };
 
-/**
- * Create a Three.js texture with appropriate settings
+/**
+ * Create a Three.js texture with appropriate settings
  */
 function createTexture(textureLoader, url) {
   var repeat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
@@ -83,86 +129,467 @@ function createTexture(textureLoader, url) {
     textureLoader = new THREE.TextureLoader();
   }
   try {
-    var texture = textureLoader.load(url);
-    texture.wrapS = THREE.RepeatWrapping;
-    texture.wrapT = THREE.RepeatWrapping;
-    texture.repeat.set(repeat.x, repeat.y);
-    texture.colorSpace = THREE.SRGBColorSpace;
-    return texture;
+    console.log("\uD83D\uDD0D Beginning texture load from: ".concat(url));
+
+    // Create placeholder texture for immediate use
+    // This will prevent the "no image data found" warning
+    var placeholderTexture = createPlaceholderTexture(0xcccccc);
+
+    // Create a promise to track when the real texture is loaded
+    var loadPromise = new Promise(function (resolve, reject) {
+      textureLoader.load(url, function (loadedTexture) {
+        console.log("\u2705 Successfully loaded texture from: ".concat(url));
+
+        // Check if the loaded texture has valid image data
+        if (loadedTexture.image && (loadedTexture.image instanceof HTMLImageElement && loadedTexture.image.complete || !(loadedTexture.image instanceof HTMLImageElement))) {
+          console.log("\u2705 Image data verified for ".concat(url));
+
+          // Explicitly set colorSpace for all textures to ensure proper rendering
+          if (loadedTexture.colorSpace !== undefined) {
+            loadedTexture.colorSpace = THREE.SRGBColorSpace;
+            console.log("\uD83C\uDFA8 Set colorSpace to SRGBColorSpace for ".concat(url));
+          } else if (loadedTexture.encoding !== undefined) {
+            loadedTexture.encoding = THREE.sRGBEncoding;
+            console.log("\uD83C\uDFA8 Set encoding to sRGBEncoding for ".concat(url));
+          }
+
+          // Configure texture properties
+          loadedTexture.wrapS = THREE.RepeatWrapping;
+          loadedTexture.wrapT = THREE.RepeatWrapping;
+          loadedTexture.repeat.set(repeat.x, repeat.y);
+          loadedTexture.needsUpdate = true;
+          resolve(loadedTexture);
+        } else {
+          console.warn("\u26A0\uFE0F Loaded texture from ".concat(url, " but image data is not ready"));
+          reject(new Error('Texture loaded but image data not ready'));
+        }
+      }, function (progressEvent) {
+        if (progressEvent.lengthComputable) {
+          var percentComplete = progressEvent.loaded / progressEvent.total * 100;
+          console.log("Loading texture ".concat(url, ": ").concat(Math.round(percentComplete), "% complete"));
+        }
+      }, function (error) {
+        console.error("\u274C Error loading texture from ".concat(url, ":"), error);
+        reject(error);
+      });
+    });
+
+    // Configure placeholder texture properties
+    placeholderTexture.wrapS = THREE.RepeatWrapping;
+    placeholderTexture.wrapT = THREE.RepeatWrapping;
+    placeholderTexture.repeat.set(repeat.x, repeat.y);
+
+    // Store the load promise and url for later reference
+    placeholderTexture.loadPromise = loadPromise;
+    placeholderTexture.url = url;
+
+    // When the real texture loads, we'll swap it in
+    loadPromise.then(function (realTexture) {
+      // Copy all properties from the real texture to the placeholder
+      Object.keys(realTexture).forEach(function (key) {
+        // Skip certain properties that shouldn't be copied
+        if (['uuid', 'id', 'version', 'isTexture'].includes(key)) return;
+        placeholderTexture[key] = realTexture[key];
+      });
+      placeholderTexture.image = realTexture.image;
+      placeholderTexture.source = realTexture.source;
+      placeholderTexture.needsUpdate = true;
+      console.log("\uD83D\uDD04 Updated placeholder texture with real image data for ".concat(url));
+    }).catch(function () {
+      console.warn("\u26A0\uFE0F Using placeholder for texture: ".concat(url));
+    });
+    return placeholderTexture;
   } catch (error) {
     console.error("Failed to load texture: ".concat(url), error);
-    return null;
+    return createPlaceholderTexture(0xdd3333); // Red placeholder for errors
   }
 }
 
-/**
- * Load a texture set and create a material
+/**
+ * Load a texture set and create a material
  */
 function loadTextureSetAndCreateMaterial(_x, _x2) {
   return _loadTextureSetAndCreateMaterial.apply(this, arguments);
 }
+
+/**
+ * Check if a texture has valid image data
+ * @param {THREE.Texture} texture - The texture to check
+ * @returns {boolean} - Whether the texture has valid image data
+ */
 function _loadTextureSetAndCreateMaterial() {
-  _loadTextureSetAndCreateMaterial = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(component, textureSetName) {
-    var textureSet, textureLoader, repeat, loadedTextures, loadTexture, material;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
+  _loadTextureSetAndCreateMaterial = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(component, textureSetName) {
+    var _textureSet$materialP2;
+    var textureSet, textureLoader, repeat, loadedTextures, checkFileExists, loadTexture, texturePromises, hasAnyTextures, _textureSet$materialP, fallbackColor, texturesWithValidData, _i2, _Object$entries, _Object$entries$_i, type, texture, material;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
         case 0:
           if (component) {
-            _context.n = 1;
+            _context4.n = 1;
             break;
           }
           console.warn('Component is required for texture loading');
-          return _context.a(2, new THREE.MeshStandardMaterial({
+          return _context4.a(2, new THREE.MeshStandardMaterial({
             color: 0xaaaaaa
           }));
         case 1:
           textureSet = TEXTURE_SETS[textureSetName];
           if (textureSet) {
-            _context.n = 2;
+            _context4.n = 2;
             break;
           }
           console.warn("Texture set not found: ".concat(textureSetName));
-          return _context.a(2, new THREE.MeshStandardMaterial({
+          return _context4.a(2, new THREE.MeshStandardMaterial({
             color: 0xaaaaaa
           }));
         case 2:
-          textureLoader = component.textureLoader || new THREE.TextureLoader();
+          console.log("\uD83C\uDF08 Loading texture set: ".concat(textureSetName));
+          textureLoader = component.textureLoader || new THREE.TextureLoader(); // Set cross-origin attribute to allow texture loading from different domains
+          if (typeof textureLoader.setCrossOrigin === 'function') {
+            textureLoader.setCrossOrigin('anonymous');
+            console.log('📡 Set cross-origin to anonymous for texture loading');
+          }
           repeat = textureSet.repeat || {
             x: 1,
             y: 1
           };
-          loadedTextures = {}; // Function to load a specific texture from the set
-          loadTexture = function loadTexture(type) {
-            if (!textureSet.files[type]) return null;
-            var url = "".concat(textureSet.path, "/").concat(textureSet.files[type]);
-            return createTexture(textureLoader, url, repeat);
-          }; // Load all textures in the set
-          Object.keys(textureSet.files).forEach(function (type) {
-            loadedTextures[type] = loadTexture(type);
+          loadedTextures = {}; // Function to check if a file exists
+          checkFileExists = /*#__PURE__*/function () {
+            var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url) {
+              return _regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    if (!(typeof window !== 'undefined')) {
+                      _context.n = 1;
+                      break;
+                    }
+                    return _context.a(2, new Promise(function (resolve) {
+                      var img = new Image();
+                      img.onload = function () {
+                        return resolve(true);
+                      };
+                      img.onerror = function () {
+                        return resolve(false);
+                      };
+                      img.src = url;
+                      setTimeout(function () {
+                        return resolve(false);
+                      }, 2000);
+                    }));
+                  case 1:
+                    return _context.a(2, false);
+                }
+              }, _callee);
+            }));
+            return function checkFileExists(_x3) {
+              return _ref.apply(this, arguments);
+            };
+          }(); // Function to load a specific texture from the set
+          loadTexture = /*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(type) {
+              var paths, _i, _paths, path, exists;
+              return _regenerator().w(function (_context2) {
+                while (1) switch (_context2.n) {
+                  case 0:
+                    if (textureSet.files[type]) {
+                      _context2.n = 1;
+                      break;
+                    }
+                    return _context2.a(2, null);
+                  case 1:
+                    // Try multiple paths to find the texture
+                    paths = []; // 1. Try local bundled path first
+                    if (textureSet.localPath) {
+                      paths.push(getAssetPath("".concat(textureSet.localPath, "/").concat(textureSet.files[type])));
+                    }
+
+                    // 2. Try direct path to static folder
+                    paths.push("/textures/".concat(textureSetName, "_1k/").concat(textureSet.files[type]));
+
+                    // 3. Try remote path as fallback
+                    if (textureSet.path) {
+                      paths.push("".concat(textureSet.path, "/").concat(textureSet.files[type]));
+                    }
+                    console.log("\uD83D\uDD0D Will try loading texture ".concat(type, " from paths:"), paths);
+
+                    // Try each path until one works
+                    _i = 0, _paths = paths;
+                  case 2:
+                    if (!(_i < _paths.length)) {
+                      _context2.n = 6;
+                      break;
+                    }
+                    path = _paths[_i];
+                    console.log("\uD83D\uDD04 Checking if texture exists at: ".concat(path));
+                    _context2.n = 3;
+                    return checkFileExists(path);
+                  case 3:
+                    exists = _context2.v;
+                    if (!exists) {
+                      _context2.n = 4;
+                      break;
+                    }
+                    console.log("\u2705 Texture found at: ".concat(path));
+                    return _context2.a(2, createTexture(textureLoader, path, repeat));
+                  case 4:
+                    console.log("\u274C Texture not found at: ".concat(path));
+                  case 5:
+                    _i++;
+                    _context2.n = 2;
+                    break;
+                  case 6:
+                    console.error("\u274C Failed to load ".concat(type, " texture from any path"));
+                    return _context2.a(2, null);
+                }
+              }, _callee2);
+            }));
+            return function loadTexture(_x4) {
+              return _ref2.apply(this, arguments);
+            };
+          }(); // Load all textures in the set
+          texturePromises = Object.keys(textureSet.files).map(/*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(type) {
+              return _regenerator().w(function (_context3) {
+                while (1) switch (_context3.n) {
+                  case 0:
+                    _context3.n = 1;
+                    return loadTexture(type);
+                  case 1:
+                    loadedTextures[type] = _context3.v;
+                    return _context3.a(2, {
+                      type: type,
+                      texture: loadedTextures[type]
+                    });
+                }
+              }, _callee3);
+            }));
+            return function (_x5) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+          _context4.n = 3;
+          return Promise.all(texturePromises);
+        case 3:
+          // Log successful texture loads
+          Object.entries(loadedTextures).forEach(function (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 2),
+              type = _ref5[0],
+              texture = _ref5[1];
+            console.log("".concat(texture ? '✅' : '❌', " ").concat(type, " texture: ").concat(texture ? 'Loaded' : 'Failed'));
+          }); // Create material with textures and properties
+          console.log('Creating material with loaded textures and properties:', textureSet.materialProps);
+
+          // Check if we have at least one texture that's not null
+          hasAnyTextures = Object.values(loadedTextures).some(function (texture) {
+            return texture !== null;
           });
+          if (hasAnyTextures) {
+            _context4.n = 4;
+            break;
+          }
+          console.warn('⚠️ No textures loaded successfully for material. Using fallback color material.');
+
+          // Create a colored material as fallback
+          fallbackColor = ((_textureSet$materialP = textureSet.materialProps) === null || _textureSet$materialP === void 0 ? void 0 : _textureSet$materialP.color) || 0xaaaaaa;
+          return _context4.a(2, new THREE.MeshStandardMaterial({
+            color: fallbackColor,
+            roughness: 0.8,
+            metalness: 0.2,
+            side: THREE.DoubleSide
+          }));
+        case 4:
+          // Verify if the textures have valid image data
+          texturesWithValidData = {};
+          for (_i2 = 0, _Object$entries = Object.entries(loadedTextures); _i2 < _Object$entries.length; _i2++) {
+            _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2), type = _Object$entries$_i[0], texture = _Object$entries$_i[1];
+            if (texture && hasValidImageData(texture)) {
+              console.log("\u2705 Texture '".concat(type, "' has valid image data"));
+              texturesWithValidData[type] = texture;
+            } else if (texture) {
+              console.log("\u26A0\uFE0F Texture '".concat(type, "' doesn't have valid image data yet"));
+              // Keep the texture even if it doesn't have valid data yet
+              // Our createTexture function now handles this with placeholders
+              texturesWithValidData[type] = texture;
+            }
+          }
+
+          // Create the standard material with loaded textures
+          material = new THREE.MeshStandardMaterial(_objectSpread2(_objectSpread2({
+            map: texturesWithValidData.diffuse,
+            normalMap: texturesWithValidData.normal,
+            roughnessMap: texturesWithValidData.roughness,
+            metalnessMap: texturesWithValidData.metalness,
+            aoMap: texturesWithValidData.ao,
+            displacementMap: texturesWithValidData.displacement
+          }, textureSet.materialProps), {}, {
+            side: THREE.DoubleSide // Always set DoubleSide to avoid rendering issues
+          })); // Ensure color is applied even if textures are loading
+
+          if ((!material.map || !hasValidImageData(material.map)) && (_textureSet$materialP2 = textureSet.materialProps) !== null && _textureSet$materialP2 !== void 0 && _textureSet$materialP2.color) {
+            material.color = new THREE.Color(textureSet.materialProps.color);
+            console.log("\uD83C\uDFA8 Applied fallback color: #".concat(material.color.getHexString()));
+          }
 
-          // Create material with textures and properties
-          material = new THREE.MeshStandardMaterial(_objectSpread2({
-            map: loadedTextures.diffuse,
-            normalMap: loadedTextures.normal,
-            roughnessMap: loadedTextures.roughness,
-            metalnessMap: loadedTextures.metalness,
-            aoMap: loadedTextures.ao,
-            displacementMap: loadedTextures.displacement
-          }, textureSet.materialProps)); // Add the environment map if available from the component
+          // Make sure material updates when textures load
+          material.needsUpdate = true;
+
+          // Add the environment map if available from the component
           if (component.scene && component.scene.environment) {
             material.envMap = component.scene.environment;
+            console.log('🌐 Added environment map to material');
           }
-          return _context.a(2, material);
+
+          // Set up texture load monitoring for each texture with a load promise
+          Object.entries(texturesWithValidData).forEach(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+              type = _ref7[0],
+              texture = _ref7[1];
+            if (texture && texture.loadPromise) {
+              texture.loadPromise.then(function () {
+                console.log("\u2705 Texture '".concat(type, "' finished loading, updating material"));
+                material.needsUpdate = true;
+              }).catch(function (error) {
+                console.warn("\u26A0\uFE0F Failed to load '".concat(type, "' texture:"), error);
+              });
+            }
+          });
+          return _context4.a(2, material);
       }
-    }, _callee);
+    }, _callee4);
   }));
   return _loadTextureSetAndCreateMaterial.apply(this, arguments);
 }
+function hasValidImageData(texture) {
+  if (!texture) return false;
+
+  // Check if image exists
+  if (!texture.image) return false;
+
+  // For image objects, check width and height
+  if (texture.image instanceof HTMLImageElement || texture.image instanceof HTMLCanvasElement) {
+    return texture.image.width > 0 && texture.image.height > 0;
+  }
+
+  // For other image types (like ImageBitmap)
+  if (texture.image.data && Array.isArray(texture.image.data)) {
+    return texture.image.data.length > 0;
+  }
+  return false;
+}
+
+/**
+ * Create a placeholder colored texture when image loading fails
+ * @param {number} color - The color for the placeholder texture
+ * @param {number} size - The size of the texture in pixels
+ * @returns {THREE.Texture} - A colored placeholder texture
+ */
+function createPlaceholderTexture() {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0xcccccc;
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 64;
+  // Create a canvas element
+  var canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+
+  // Get the 2D context and fill with color
+  var context = canvas.getContext('2d');
+  if (context) {
+    var hexColor = '#' + color.toString(16).padStart(6, '0');
+    context.fillStyle = hexColor;
+    context.fillRect(0, 0, size, size);
+
+    // Optional: Add a pattern to make it obvious it's a placeholder
+    context.fillStyle = '#' + (color + 0x222222 & 0xffffff).toString(16);
+    context.fillRect(0, 0, size / 2, size / 2);
+    context.fillRect(size / 2, size / 2, size / 2, size / 2);
+  }
+
+  // Create a texture from the canvas
+  var texture = new THREE.CanvasTexture(canvas);
+  texture.needsUpdate = true;
+
+  // Set proper color space
+  if (texture.colorSpace !== undefined) {
+    texture.colorSpace = THREE.SRGBColorSpace;
+  } else if (texture.encoding !== undefined) {
+    texture.encoding = THREE.sRGBEncoding;
+  }
+  return texture;
+}
+
+/**
+ * Helper function to check Three.js compatibility and configuration
+ */
+function checkThreeJSCompatibility() {
+  console.group('🔍 Three.js Compatibility Check');
+
+  // Check Three.js version
+  console.log('Three.js version:', THREE.REVISION);
+
+  // Check color space constants
+  console.log('Color space support:', {
+    SRGBColorSpace: typeof THREE.SRGBColorSpace !== 'undefined',
+    LinearSRGBColorSpace: typeof THREE.LinearSRGBColorSpace !== 'undefined',
+    sRGBEncoding: typeof THREE.sRGBEncoding !== 'undefined'
+  });
+
+  // Check texture-related features
+  console.log('Texture features:', {
+    TextureLoader: typeof THREE.TextureLoader === 'function',
+    RepeatWrapping: typeof THREE.RepeatWrapping !== 'undefined',
+    MirroredRepeatWrapping: typeof THREE.MirroredRepeatWrapping !== 'undefined'
+  });
+
+  // Check shader and material features
+  console.log('Material features:', {
+    MeshStandardMaterial: typeof THREE.MeshStandardMaterial === 'function',
+    MeshBasicMaterial: typeof THREE.MeshBasicMaterial === 'function',
+    ShaderMaterial: typeof THREE.ShaderMaterial === 'function'
+  });
+  console.groupEnd();
+  return {
+    version: THREE.REVISION,
+    hasNewColorSpace: typeof THREE.SRGBColorSpace !== 'undefined',
+    hasOldEncoding: typeof THREE.sRGBEncoding !== 'undefined',
+    hasTextureLoader: typeof THREE.TextureLoader === 'function'
+  };
+}
+function forceUpdateMaterials(scene) {
+  if (!scene) return;
+  console.log('🔄 Forcing update on all scene materials...');
+  var materialCount = 0;
+  scene.traverse(function (node) {
+    if (node.isMesh && node.material) {
+      var materials = Array.isArray(node.material) ? node.material : [node.material];
+      materials.forEach(function (material) {
+        if (material) {
+          material.needsUpdate = true;
+          materialCount++;
+
+          // Ensure maps are properly set
+          if (material.map) {
+            material.map.needsUpdate = true;
+          }
+          if (material.normalMap) {
+            material.normalMap.needsUpdate = true;
+          }
+          if (material.roughnessMap) {
+            material.roughnessMap.needsUpdate = true;
+          }
+        }
+      });
+    }
+  });
+  console.log("\u2705 Updated ".concat(materialCount, " materials in the scene"));
+}
 var textureConfig = {
   TEXTURE_SETS: TEXTURE_SETS,
   createTexture: createTexture,
-  loadTextureSetAndCreateMaterial: loadTextureSetAndCreateMaterial
+  loadTextureSetAndCreateMaterial: loadTextureSetAndCreateMaterial,
+  checkThreeJSCompatibility: checkThreeJSCompatibility,
+  forceUpdateMaterials: forceUpdateMaterials,
+  hasValidImageData: hasValidImageData,
+  createPlaceholderTexture: createPlaceholderTexture
 };
 
-export { TEXTURE_SETS, createTexture, textureConfig as default, loadTextureSetAndCreateMaterial };
+export { TEXTURE_SETS, checkThreeJSCompatibility, createTexture, textureConfig as default, forceUpdateMaterials, loadTextureSetAndCreateMaterial };