WebGL e la potenza di due dimensioni dell'immagine

Question

Desidero utilizzare WebGL per creare una piccola galleria 3D di flussi fotografici Flickr. Sembra che WebGL consenta solo le immagini quadrate che le dimensioni sono una potenza di due da utilizzare come trame. Devo essere in grado di visualizzare immagini di qualsiasi proporzione e dimensione. Posso vedere che se copio i dati dell'immagine in un'altra immagine che è la dimensione quadratica più vicina e quindi utilizzare le coordinate della trama per renderla visualizzata correttamente. Il problema è, e correggimi se sbaglio, che non posso fare quella manipolazione delle immagini in JavaScript e che avrei bisogno di un server che esegua ASP.NET, Java o qualcosa del genere per fare l'elaborazione per me prima che WebGL potesse prendere le sue mani su di essa.

Esiste un modo per utilizzare immagini di dimensioni arbitrarie in WebGL e JavaScript senza la necessità che un server funga da processore di immagini uomo medio?

Answer 1

Non capisco i dettagli di basso livello abbastanza bene per rispondere completamente alla tua domanda, ma qui ci sono alcune cose che ho trovato:

This post non è incoraggiante:

movimentazione Texture è stato aggiornato in Campo minato in modo che [esso] corrisponda meglio alle specifiche ; in precedenza era abbastanza indulgente [...] e consentiva a di utilizzare trame che non erano realmente valide da un punto di vista WebGL. Ora il numero non visualizzerà [...] un messaggio di errore che dice "Una trama sta per resa come se fosse nera, come per la sezione spec. OpenGL ES 2.0.24 3.8.2 , perché è una texture 2D, con un filtro minification non richiedono un mipmap, con la sua larghezza o altezza non una potenza di due, e con una modalità involucro diverso da CLAMP_TO_EDGE.”

I don Non so se queste condizioni extra si applicano alla tua app. Vedi anche lo OpenGL ES spec.

This thread va abbastanza in profondità, sul sostegno allo "NPOT":

OpenGL supporta texture NPOT in due modi. Il primo è chiamato "Rettangolo Textures" (RT), che può essere di qualsiasi dimensione, ma non può essere ripetuto, mappato in mip o con bordi. E invece di usare le coordinate di trama 0-1, usano 0-w, 0-h. OpenGL Supporta anche le trame NPOT reali, che hanno vincoli simili da a RT, ma che utilizzano le normali coordinate di trama 0-1.

Il problema è che alcuni vecchi hardware (e quando dico "vecchio" intendo l'hardware dal 2005) supportano solo RT, non vero NPOT. Non è possibile emulare NPOT quando si ha il supporto RT perché in GLSL si utilizza un campionatore diverso per RT (sampler2DRect vs sampler2D).

OpenGL ES supporta solo NPOT, non RT.

...

Un'implementazione WebGL può scalare fino dati delle texture NPOT alla prossima più alta potenza di due dimensioni durante texImage2D e texSubImage2D chiamate. Ciò non comporterebbe alcuna modifica API. O3D fa questo in alcuni casi come prova che la tecnica può funzionare senza che l'utente finale conosca lo utente. Penso che sarebbe una cattiva idea esporre trame rettangolari nell'API WebGL; non sono sicuramente la strada da seguire.

Quindi, prendere quel FWIW ...

Answer 2

Non ho alcun problema con le strutture npot (FF & cromo) a condizione che si esegue:

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 soluzione semplice sarebbe ridimensionare utilizzando la tela 2D e utilizzarla come trama.

Answer 4

This page riassume bene la situazione (e più o meno riafferma ciò che gli altri rispondenti hanno già detto). Fondamentalmente, WebGL non supporta le trame NPOT con mipmapping e/o ripetizioni. E se non riesci a cavartela senza quelle modalità, la texture può essere ridimensionata in una tela 2D. E la pagina include un codice a portata di mano per il ridimensionamento della tela.

Aggiornamento: WebGL2, la prossima versione di WebGL, supports NPOT textures.