How to attach dataURI to an image name when loading a .mtl file?

Questions
1

Please help me, i am creating a babylon js extension for turbowarp. i want to make a function to load a .obj file with a .mtl file. the only problem is that i can’t directly give a image as an input due to some limitations of turbowarp and thats why i can only give dataURI of a image as a string.

Here is my plan, suppose that i have a .mtl file that contains the diffuse texture of my 3d model. the .mtl file has a “texture.png” image in the diffuse texture. now i want to make a function to attach the dataURI of that image to “texture.png” so, whenever babylon.js sees a image named “texture.png”, it will go and take the dataURI of that image from my program. and yeah i am a beginner in javascript :slight_smile:

pweeazee reply i am a newbie!

2

Would it be possible to put the data URI in the .mtl file instead of the texture.png reference?

To answer your direct question, you can change any network request made in babylon using web request modifiers. WebRequest.CustomRequestModifiers is an array with functions that will be executed before each network request is done, so you can have a kind of map that maps texture names to data URIs. Something like this:

BABYLON.WebRequest.CustomRequestModifiers.push((request, url) => {
   switch(url) {
      case "texture1.png": // the full URL of the request from the .mtl file
           return "dataURINumber1";
      //.. continue
   }
});
1 Like
3

i am sorry for late reply, i had my online tuition. well yeah if putting the data URI directly in the .mtl file is the only possible way then i will have to do it. but suppose that i replace those with dataURI and then i load it through my babylon loader, how exactly i will tell babylon to use that dataURI there instead of the name of the image? im a starter in javascript so yeah i don’t know much about it, i would really like if u would help me further.

hey and i also asked chatgpt and chatgpt gave me this code which doesn’t work and gives some errors, i wonder if it is possible to make it work. and if it isn’t then no problem. here is the code:

const imageDataMap = {
  "texture.png": input.imageURI  // e.g. "data:image/png;base64,...."
};

// 4) install preprocess hook
BABYLON.Tools.PreprocessUrl = (url) => {
  // if it's not a string, leave it alone
  if (typeof url !== "string") {
    return url;
  }
  // extract the file name
  const name = url.split("/").pop();
  // if we have a data-URI for that name, return it (string)
  if (imageDataMap[name]) {
    return imageDataMap[name];
  }
  // otherwise return the original URL (string)
  return url;
};

// 5) load both in the same AppendAsync call
await BABYLON.SceneLoader.AppendAsync("", [ objF, mtlF ], scene);
4

Have you tried the code I provided you? (i edited it a bit to make it clearer)

5

well i just came right now and quickly replied i am implmenting that…

6

okay so this is my final code with your method and yeah, i load .obj and .mtl from its string.

const objF = new File(
                [ new Blob([input.obj], { type: "text/plain" }) ],
                "scene.obj"
              );
              
            
              const mtlF = new File(
                [ new Blob([input.mtl], { type: "text/plain" }) ],
                "east sector in one part.mtl"
              );
              
              
              BABYLON.WebRequest.CustomRequestModifiers.push((request, url) => {
                switch(url) {
                   case "texture.png": return input.imageURI;
                }
             });
              
            
              await BABYLON.SceneLoader.AppendAsync("", [ objF, mtlF ], scene);
7

i got this error- vm warn Promise rejected in compiled script: TypeError: t.startsWith is not a function

and this is the SAME exact error i got with chatgpt code. what do i do? it comes from inside the loader

8

Please reproduce this on the playground so we can work on the same codebase, otherwise it is very hard to help.

9

and also i noticed that the loader runs on typescript but my my program runs on javascript i hope that wouldn’t create any issue…

10

okay

11

well, ugh i never worked inside playground idk how to even import files like .obj and .mtl to it

1 Like
12
1 Like