WebGL y la potencia del tamaño de dos imágenes

Question

Quiero usar WebGL para hacer una pequeña galería 3D de secuencias de fotos de Flickr. Parece que WebGL solo permite imágenes cuadradas cuyas dimensiones tienen una potencia de dos para usarse como texturas. Necesito poder mostrar imágenes de cualquier proporción y dimensión. Puedo ver que si copio los datos de la imagen en otra imagen que es la dimensión cuadrada más cercana y luego uso las coordenadas de la textura para que se muestre correctamente. El problema es, y corríjanme si estoy equivocado, que no puedo hacer esa manipulación de imagen en JavaScript y necesitaría un servidor corriendo ASP.NET, Java o algo así para hacer el procesamiento antes de que WebGL pudiera obtener sus manos. en eso.

¿Hay alguna manera de usar imágenes de tamaño arbitrario en WebGL y JavaScript sin la necesidad de que un servidor actúe como un procesador de imagen de intermediario?

Answer 1

No entiendo los detalles de bajo nivel lo suficientemente bien como para responder por completo a su pregunta, pero aquí hay algunas cosas que encontré:

This post no es alentador:

manejo de textura ha sido actualizada en campo de minas para que [mejor] coincida con la especificación; anteriormente era bastante permisivo [...] y le permitía utilizar texturas que realmente no eran válidas desde un punto de vista WebGL. Ahora no verá un mensaje de error que dice "Una textura va a se representará como si fuera negro, como según la sección de especificaciones OpenGL ES 2.0.24 3.8.2 , debido a que es una textura 2D, con un filtro de reducción no que requiere un mipmap, con su anchura o altura no es una potencia de dos, y con un modo de envoltura diferente de CLAMP_TO_EDGE.”

I don No sé si esas condiciones adicionales se aplican a su aplicación. Vea también el OpenGL ES spec.

This thread va bastante profundo sobre el apoyo a "NPOT":

OpenGL soporta texturas NPOT de dos maneras. El primero se llama "Rectángulo Texturas" (RT), que puede ser de cualquier tamaño, pero no puede ser repetitivo, con mip-mapped o tienen bordes. Y en lugar de usar coordenadas de textura 0-1, usan 0-w, 0-h. OpenGL también admite texturas NPOT verdaderas, que tienen restricciones similares a RT, pero que usan las coordenadas normales de textura 0-1.

El problema es que algunos hardware antiguo (y cuando digo "viejo", me refiero a de hardware a partir de 2005) sólo es compatible con RT, no es cierto NPOT. No es posible emular el NPOT cuando solo tiene soporte de RT porque en GLSL utiliza un muestreador diferente para RT (sampler2DRect vs sampler2D).

OpenGL ES solo es compatible con NPOT, no con RT.

...

Una aplicación WebGL puede ampliar los datos de textura NPOT a la siguiente mayor potencia de dos dimensiones durante texImage2D y texSubImage2D llamadas. Esto no implicaría ningún cambio en la API. O3D lo hace en algunos casos como prueba de que la técnica puede funcionar sin que el usuario final sepa . Creo que sería una mala idea exponer las texturas rectangulares en la API WebGL; Definitivamente no son el camino a seguir.

lo tanto, tener que Fwiw ...

Answer 2

no tengo ningún problema con texturas npot (FF & cromo) siempre que se ejecuta:

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

Una solución sencilla sería debe cambiar el tamaño con 2d canvas y usar eso como una textura.

Answer 4

This page muy bien resume la situación (y más o menos vuelve a expresar lo que ya han dicho los otros respondedores). Básicamente, WebGL no es compatible con texturas NPOT con mipmapping y/o repeticiones. Y si no puede escapar sin esos modos, la textura puede cambiar de tamaño en un lienzo 2D. Y la página incluye algunos códigos útiles para cambiar el tamaño del lienzo.

Actualización: WebGL2, la próxima versión de WebGL, supports NPOT textures.