Reading Images

Before you can apply images to a 3D model, you need to read the images in. Previously you used fetch to read in text and JSON files. The text files you had to parse yourself. The JSON files the browser parsed for you.

Images are a bit simpler. Instead of fetch, you create a new Image, which is the type that corresponds to an HTML img element, and set its src to the URL of your image. The browser automatically downloads and parses the image in the background. To pause the main thread until the image is ready, you await the promise returned by the image's decode method.

This utility function does all the work of reading in an image:

async function readImage(url) {
  const image = new Image();
  image.src = url;
  await image.decode();
  return image;
}

You call it from an asynchronous function like this:

const toastImage = await readImage('toast-albedo.png');

The browser can decode many different image file formats. There are two primary formats you should be familiar with:

• JPG: an image format that greatly reduces the storage size of photographs. The compression scheme it uses leads to information loss and blurring in areas where the colors change abruptly. JPG doesn't support transparency.
• PNG: an image format that doesn't compress files as efficiently as JPG, but which retains all original color data so that the decompressed image perfectly matches the original. PNG supports transparency. Non-photographic images, such as those made by an artist, are often stored using this format because of its high fidelity.

JPG images are small when compressed, but you will be sending the decompressed images to your graphics card. The decompressed images are not any smaller. The only real advantage of JPG is that your texture assets will take up less space on disk and they will download faster.