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
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);
};