Texture from image to fill background

Good day everyone, I have a simple question: I need to create static background of the scene in 3D scene, I have a .png picture.

  1. I loading image using asset manager as texture (textureTask)

  2. I am creating backgroundMaterial

  3. I am trying to apply loaded texture as diffuseTexture of background material, but it’s look’s like this property awaits some another type of argument.

  4. There is another problem, when I am trying to load image as texture, it’s provides the error:
    "index.js:2178 BJS - [19:39:47]: Error while trying to load image: /game-assets/"

  5. I am loading assets with AssetsManager, as I said:

    for (let textureName in Textures) {
     let task = assetsManager.addTextureTask(`${textureName}Task`, "/game-assets/backgrounds");
     task.onSuccess = task => ImportedTextures[textureName] = task.texture;

On the other hand, I’m loading meshes with this and it’s works perfect:

  for (let meshName in tiles) {
   let meshOptions = tiles[meshName];
   let task = assetsManager.addMeshTask(`${meshName}Task`, "", "/game-assets/tiles/", meshOptions.filename);
   task.onSuccess = task => tilesMeshes[meshName] = task.loadedMeshes[0]; 

Should I transfer png image to texture somehow, before apply it to textureTask or here is another problem?

Is it possible to have a playground with the issues, it might help a lot.

Also did you consider relying on Layer instead ? it is a way to add full screen texture background or foreground in Babylon: https://www.babylonjs-playground.com/#08A2BS#7

1 Like

Thx for the reply, as I see layer is really a better way, but the problem is in the importing of png image as texture type.
It’s giving me useless error, I just can’t figure out what it means, it’s look like: "Hey, man, you have an error, lol :smiley: "

But another question, layer constructor as well as texture constructor awaits as argument url, should I pass here in-project path to the file with file name and should it contain file extension: “image.jpg” or just “image”?

Well, I am the idiot, I missed signature of importing. There is no babylon problem here, but maybe it will help some one:

  for (let textureName in Textures){
//addTextureTask(taskName: string, url: string, noMipmap?: boolean, invertY?: boolean, samplingMode?: number):
let pathOption = Textures[textureName];
let task = assetsManager.addTextureTask(`${textureName}Task`, "/game-assets/"+pathOption);
task.onError = task => console.log(task.errorObject);
task.onSuccess = task => ImportedTextures[textureName] = task.texture;

you should provide a reachable url in the context of your project
Also base-64 is supported: https://www.babylonjs-playground.com/#1GXCNM#1 (See line 3 and 178)

1 Like

Thx, I will take a note.