Loading a cubemap - many WebGL warnings

I’m running playcanvas engine-only, and when I load a cubemap JPG, it prints many WebGL warnings. I understand these don’t cause any problems, but I do find it very annoying :wink:
Is there anything I can change in my code to fix it? I copied this code mostly from the new GLTF viewer.

const initSkyboxFromTexture = function (skybox) {
  var app = pc.app;
  var device = app.graphicsDevice;

  var cubemaps = [];

  var reprojectToCubemap = function (src, size) {
    // generate faces cubemap
    var faces = new pc.Texture(device, {
      name: "skyboxFaces",
      cubemap: true,
      width: size,
      height: size,
      type: pc.TEXTURETYPE_RGBM,
      addressU: pc.ADDRESS_CLAMP_TO_EDGE,
      addressV: pc.ADDRESS_CLAMP_TO_EDGE,
    });
    pc.reprojectTexture(device, src, faces);
    return faces;
  };

  if (skybox.cubemap) {
    if (
      skybox.type === pc.TEXTURETYPE_DEFAULT ||
      skybox.type === pc.TEXTURETYPE_RGBM
    ) {
      // cubemap format is acceptible, use it directly
      cubemaps.push(skybox);
    } else {
      // cubemap must be rgbm or default to be used on the skybox
      cubemaps.push(reprojectToCubemap(skybox, skybox.width));
    }
  } else {
    // reproject equirect to cubemap for skybox
    cubemaps.push(reprojectToCubemap(skybox, skybox.width / 4));
  }

  // generate prefiltered lighting data
  var sizes = [128, 64, 32, 16, 8, 4];
  var specPower = [undefined, 512, 128, 32, 8, 2];
  for (var i = 0; i < sizes.length; ++i) {
    var prefilter = new pc.Texture(device, {
      cubemap: true,
      name: "skyboxPrefilter" + i,
      width: sizes[i],
      height: sizes[i],
      type: pc.TEXTURETYPE_RGBM,
      addressU: pc.ADDRESS_CLAMP_TO_EDGE,
      addressV: pc.ADDRESS_CLAMP_TO_EDGE,
    });
    pc.reprojectTexture(device, cubemaps[1] || skybox, prefilter, specPower[i]);
    cubemaps.push(prefilter);
  }

  // assign the textures to the scene
  app.scene.gammaCorrection = pc.GAMMA_SRGB;
  app.scene.toneMapping = pc.TONEMAP_LINEAR;
  app.scene.skyboxMip = 1;
  app.scene.setSkybox(cubemaps);
  app.scene.skyboxIntensity = 1;
  app.renderNextFrame = true;
  // app.scene.gammaCorrection = pc.GAMMA_SRGB;
  // app.scene.toneMapping = pc.TONEMAP_ACES;
  // app.scene.skyboxMip = 0; // Set the skybox to the 128x128 cubemap mipmap level
  // app.scene.setSkybox(cubemaps);
  // app.renderNextFrame = true; // ensure we render again when the cubemap arrives
};

export const loadCubemap = (assetName, assetUrl) => {
  const app = pc.app;

  var textureAsset = new pc.Asset(assetName, "texture", {
    url: assetUrl,
    filename: assetName + ".jpg",
  });
  textureAsset.ready(function () {
    var texture = textureAsset.resource;
    if (
      texture.type === pc.TEXTURETYPE_DEFAULT &&
      texture.format === pc.PIXELFORMAT_R8_G8_B8_A8
    ) {
      // assume RGBA data (pngs) are RGBM
      texture.type = pc.TEXTURETYPE_RGBM;
    }
    initSkyboxFromTexture(texture);
  });
  app.assets.add(textureAsset);
  app.assets.load(textureAsset);
};

I think this is related to the Firefox decision on reporting a heavy operation. You can check this SO answer.

1 Like