iOS: HTML5 con sviluppo Three.js

Question

Sto progettando di sviluppare un HTML5 con le pagine Three.js, in modo da poter ottenere facilmente schermate 3D e il supporto per le piattaforme mobili nel metodo multipiattaforma. Ho letto che Three.js utilizza WebGL, ma i browser iOS e Android non lo supportano, quindi non posso sviluppare app di questo tipo.

Qualcuno potrebbe consigliare, se posso sviluppare HTML5 con le pagine Three.js per ottenere interazioni 3D su app iOS e Android o non come web app? In caso contrario, ti preghiamo di darmi i link ufficiali in cui viene menzionato che non è supportato.

Grazie.

Answer 1

Three.js funzionerà correttamente senza WebGL. Puoi usare il renderizzatore Canvas - è descritto nella documentazione di Three.js, sono sicuro che puoi trovarlo su github usando google o anche Bing. Non è veloce come usare WebGL, ma uno non corre Monte Carlo in una Nissan Sentra.

Non ci si deve aspettare un 3D ad alte prestazioni su qualsiasi piattaforma mobile, soprattutto perché le prestazioni di javascript possono essere molto lente. Prova ad accedere ad alcuni dei vari esempi di Three.js utilizzando dispositivi mobili (sia con che senza webgl) per avere un'idea delle prestazioni.

Answer 2

Ho provato a eseguire le demo Three.js Canvas sul mio iPad Air ed è stato terribile. Di solito Safari si arresta in modo anomalo e anche se il rendering funziona funziona a 2-3 fps. Quindi sembra molto grezzo sui dispositivi iOS adesso

Answer 3

"ma i browser iOS e Android non lo supportano" Posso usare Three.js e le sue demo webgl sul browser Android di serie a partire dalla versione 2.3.7. fino a 4,3+. L'argomento non è valido: P

Answer 4

Supporto browser iOS e Android webgl non come browser Web, a volte è possibile ridurre gli effetti di rendering per farlo funzionare. Questo di solito lo fa. Per l'app, l'abilità di rendering di webview di Android è bassa. Ios ne ha uno migliore.

E puoi collegare un motore di rendering nell'app, come XWalkView. Ecco un mio post come utilizzarlo per il rendering dei modelli 3D con three.js nella mia app android4.2.0. Per IOS ci sono anche soluzioni di rilevanza.

Answer 5

iOS Safari e Android Chrome hanno supportato WebGL per diversi anni.

Il problema a cui ci si potrebbe riferire è AndroidView WebView o iOS UIWebView (il controllo che è possibile inserire in un'applicazione nativa per visualizzare una pagina Web) può o non può supportare WebGL. WebGL is supported in WebViews as of Android 5.0 apparently anche se le persone hanno run into issues

Un'altra opzione è utilizzare qualcosa come CocoonJS. Apparentemente forniscono custom webview implementations per Android 4.0+ e iOS 8+.

Per quanto riguarda le prestazioni, three.js funzionerà perfettamente su scene semplici con dispositivi mobili. Ci sono molti esempi Il 3D su dispositivi mobili in generale richiede risorse ottimizzate (modelli poligonali inferiori, trame più piccole, shader più semplici, meno luci, ecc ...) rispetto al desktop e in particolare con three.js

Answer 6

La risposta scelta a questa domanda consiglia di utilizzare il Three.js CanvasRenderer, ma come mostrato here nella documentazione Three.js, CanvasRenderer è obsoleta:

NOTA: il renderer tela è obsoleta e non è più parte del nucleo Three.js .

È importante notare che può ancora essere utilizzato per semplici scene 3d e può essere trovato su Github here

WebGL è supportato in Androids WebView V36 e soprattutto, come si è visto here. alternativa con più vecchio Android Chrome browsers WebGL può essere attivata digitando: chrome://flags nel browser e selezionando il Abilita link che appare sotto il Abilita WebGL intestazione nella finestra del browser, o aggiornando WebView dal Google Android Play Store.

WebGL è stato supportato su Mobile Safari da iOS 8.0b.

A mobilehtml5.org si può vedere ciò che le versioni dei dispositivi mobili supportano caratteristiche specifiche HTML5:

Sony Xperia Android 2.3 supporta anche WebGL.