WebGL texImage2D: La conversion nécessite un reformatage des pixels

Question

Ceci est ma première question dans cette page car je ne trouve pas les gens avec cette erreur, j'espère que je m'explique dans cette question. Mm ayant un problème avec les textures WebGl, j'obtiens l'erreur suivante: Erreur: WebGL: texImage2D: La conversion nécessite un reformatage des pixels.

Cela se produit ici:

function initSueloTextures(gl, sueloParametros) { 
    sueloParametros.textureSuelo = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, sueloParametros.textureSuelo); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, 
      new Uint8Array([0, 0, 255, 255])); 
    var sueloImage = new Image(); 
    sueloImage.onload = function() { handleTextureLoaded(gl, sueloImage, sueloParametros.textureSuelo); } 
    sueloImage.src = "resources/marbletexture.png"; 
} 



function handleTextureLoaded(gl, image, texture) { 
    console.log("handleTextureLoaded, image = " + image); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, 
    gl.UNSIGNED_BYTE, image); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 
    gl.generateMipmap(gl.TEXTURE_2D); 
    gl.bindTexture(gl.TEXTURE_2D, null); 
} 

L'erreur apparaît dans la handleTextureLoaded texImage2D. Je pense que les variables que j'utilise ne sont pas un problème car je les ai changées pour d'autres variables globales que j'ai créées pour les tester et l'erreur apparaît toujours.

Im en utilisant la dernière version de Firefox.

Nous vous remercions de votre temps.

Answer 1

Quelle est l'erreur? Vérifiez la console JavaScript de votre navigateur

Si l'image que vous chargez n'est pas une puissance de 2 dans les deux dimensions, vous obtiendrez une erreur et un avertissement. Une erreur lors de l'appel gl.generateMipmap car dans WebGL1, vous ne pouvez pas générer de Mips pour les textures sans pouvoir de puissance. Également un avertissement lorsque vous essayez de le rendre parce que si vous avez une texture non-puissance-de-2, vous devez définir TEXTURE_MIN_FILTER à LINEAR ou NEAREST sinon c'est irrécusable.

puissances de 2 est 1, 2, 4, 8, 16, 32, 64, 128, 256, etc ...

également BTW il est probablement plus utile d'utiliser une virgule au lieu d'un plus avec console.log

console.log("handleTextureLoaded, image =", image); 

Au lieu de

console.log("handleTextureLoaded, image = " + image); 

Comparer les résultats:

La raison est avec un plus l'image est convertie en une chaîne, concaténée avec "handleTextureLoaded, image = ", puis envoyé à console.log donc tout console.log voit est une chaîne unique. Avec la virgule l'image réelle est envoyée à console.log et donc console.log peut faire plus de magie

Answer 2

Ce n'est pas une erreur, malgré l'étiquette "Erreur". C'est juste un avertissement disant que le chargement de votre image à la texture aura besoin de quelques conversions de pixel côté cpu lourd. Si vous n'avez pas vraiment de problèmes de performances, ignorez-le. En ce moment même, il s'agit d'un problème de WIP.

Ce n'est pas une erreur, juste un avertissement ->https://dxr.mozilla.org/mozilla-central/source/dom/canvas/TexUnpackBlob.cpp#316-318

Pour plus d'infos, consultez cette discussion: https://bugzilla.mozilla.org/show_bug.cgi?id=1246410