Add async constructor for Materials with image textures

[jjhembd]

A Material instance currently gives no indication of whether its textures are loaded or not. This makes unit testing difficult.

For example, the following test will fail since the image is not loaded before the scene renders:

it("renders blue from a blue texture", function () {
  primitive.appearance.material = Material.fromType("Image", { 
    image: "./Data/Images/Blue.png"
  });
  scene.primitives.add(primitive);
  // ... Set camera view, etc...

  expect(scene).toRender([0, 0, 255, 255]);
  // Error: Expected to render [0,0,255,255], but actually rendered [255,255,255,255].
});

Some current tests fix the problem by waiting for a change in the length of the material._loadedImages array, but this is complicated to set up.

Proposal: add a static method Material.fromUrl returning a Promise. The Promise would resolve to a new Material instance with all textures ready for use. The above test would become:

it("renders blue from a blue texture", async function () {
  const material = await Material.fromUrl({
    type: "Image",
    image: "./Data/Images/Blue.png",
   });
  primitive.appearance.material = material;
  scene.primitives.add(primitive);
  // ... Set camera view, etc...

  expect(scene).toRender([0, 0, 255, 255]);
});

[gaurav8y785675474]

hello jjhembd i am a beginner in open source world can you please tell me exact location of code[related to this issue] in files so that i can work on that

[ggetz]

Hello @gaurav8y785675474,

The new function should be added to packages/engine/Source/Scene/Material.js.

Then search the unit tests for occurrences of material._loadedImages. That should be replaces with the async/await pattern shown above.

[wesleykebrown]

Hi, I’m a part of the Flagship program for JTC. I would like to work on this issue ticket, please! This is a great opportunity to test my abilities.

[ggetz]

@wesleykebrown Sounds great!