WebGL et la puissance de deux tailles d'image

Question

Je veux utiliser WebGL pour créer une petite galerie 3D de flux de photos Flickr. On dirait que WebGL ne permet que des images carrées dont les dimensions sont une puissance de deux à utiliser comme textures. Je dois être capable d'afficher des images de n'importe quelle proportion et dimension. Je peux voir cela si je copie les données d'image dans une autre image qui est la dimension carrée la plus proche et puis employez les coordonnées de texture pour l'afficher correctement. Le problème est, et corrigez-moi si je me trompe, que je ne peux pas faire cette manipulation d'image en JavaScript et aurais besoin d'un serveur exécutant ASP.NET, Java ou quelque chose comme ça pour faire le traitement avant que WebGL puisse avoir ses mains dessus. Existe-t-il un moyen d'utiliser des images de taille arbitraire dans WebGL et JavaScript sans avoir besoin d'un serveur pour agir comme un processeur d'image intermédiaire?

Answer 1

Je ne comprends pas les détails de bas niveau assez bien pour répondre complètement à votre question, mais voici quelques choses que j'ai:

This post n'est pas encourageant:

manipulation de texture a été mis à jour dans Minefield de sorte que [il] correspond mieux à la spécification ; auparavant c'était assez pardonnant [...] et vous permettait d'utiliser des textures qui n'étaient pas vraiment valables à partir d'un point de vue WebGL. Maintenant il ne [...] vous verrez pas un message d'erreur disant "Une texture va à être rendue comme si elle était noire, comme par la section de spécifications OpenGL ES 2.0.24 3.8.2 , parce qu'elle est une texture 2D, avec un filtre minification pas nécessitant un mipmap, avec sa largeur ou hauteur pas une puissance de deux, et avec un mode d'enroulement différent de CLAMP_TO_EDGE. »

I don Ne sais pas si ces conditions supplémentaires s'appliquent à votre application. Voir aussi le OpenGL ES spec.

This thread va assez en profondeur sur le soutien aux "NPOT":

OpenGL prend en charge les textures NPOT de deux façons. Le premier est appelé "Rectangle Textures" (RT), qui peut être de n'importe quelle taille, mais ne peut pas être répété, mip-mappé ou avoir des bordures. Et plutôt que d'utiliser les coordonnées de texture 0-1, ils utilisent 0-w, 0-h. OpenGL prend également en charge les vraies textures NPOT, qui ont des contraintes similaires à RT, mais qui utilisent les coordonnées de texture 0-1 normales. Le problème est que certains matériels plus anciens (et quand je dis «plus vieux», je veux dire matériel de 2005) ne supporte que RT, pas vrai NPOT. Il n'est pas possible d'émuler NPOT lorsque vous avez juste le support de RT, car dans GLSL vous utilisez un échantillonneur différent pour RT (sampler2DRect vs sampler2D). OpenGL ES prend uniquement en charge NPOT, pas RT.

...

Une implémentation WebGL peut évoluer les données de texture NPOT à la prochaine puissance la plus élevée de deux dimensions pendant les appels texImage2D et texSubImage2D . Cela n'entraînerait aucune modification de l'API. O3D le fait dans certains cas comme preuve que la technique peut fonctionner sans l'utilisateur final sachant. Je pense que ce serait une mauvaise idée d'exposer les textures rectangulaires dans l'API WebGL; ils ne sont certainement pas la voie à suivre.

Alors, prenez ce FWIW ...

Answer 2

je n'ai aucun problème avec les textures NPOT (FF & chrome) à condition que vous exécutez:

texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, LINEAR); 
texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR); 
texParameteri(TEXTURE_2D, TEXTURE_WRAP_S, CLAMP_TO_EDGE); 
texParameteri(TEXTURE_2D, TEXTURE_WRAP_T, CLAMP_TO_EDGE); 

Answer 3

Une solution simple serait être à redimensionner en utilisant 2d canvas et l'utiliser comme texture.

Answer 4

This page résume bien la situation (et reprend plus ou moins ce que les autres répondeurs ont déjà dit). Fondamentalement, WebGL ne prend pas en charge les textures NPOT avec mipmapping et/ou répétitions. Et si vous ne pouvez pas vous en passer sans ces modes, la texture peut être redimensionnée dans un canevas 2D. Et la page comprend un code pratique pour le redimensionnement de la toile.

Mise à jour: WebGL2, la prochaine version de WebGL, supports NPOT textures.