Research Canvas 3D mobile-Devices

sight011

Erfahrenes Mitglied
Hey Leute ich sitz gerade an einer Research-Aktion,

ich versuch etwas darüber heraus zufinden in wie weit sich dreidimensionale Inhalte auf mobilen Devices darstellen lassen (vorrangig: iphone/ipad).

http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html

Dieser Content lässt sich ohne Probleme auf dem iphone anzeigen. Jedoch lässt sich webgl-based Content nicht anzeigen, weil webgl noch nicht unterstützt wird.


Ich hab es bereits geschafft geschafft 3D-Modelle über Blender als three.js Files zu exportieren.
Und kann mir diese auch z.B. auf dieser Seite anzeigen lassen:

http://blackjk3.github.com/threefab/


Nur weiß ich noch nicht richtig, wie ich die Dateiin eine richtige html Seite einbaue!

Eine Frage wäre auch ob, three.js --> "webgl based only" ist, weil dann würde es ja für das iphone nicht in Frage kommen?!

Wie sieht es aus - teilt jemand sein Wissen?


(

Linksammlung:

webgl erklärt:
http://www.senaeh.de/einstieg-in-webgl-mit-three-js/

testen ob dein verwendeter Browser WebGl unterstützt:
http://analyticalgraphicsinc.github.com/webglreport/


)



laut der Quelle: "MozillaWiki" --> Canvas 3D has now become WebGL


iOS Mobile Safari – WebGL is fully supported, but currently only for iAd customers. We expect WebGL to be fully enabled to all users at the same time that Apple enables it in desktop Safari.
 
Zuletzt bearbeitet:
Eine Frage wäre auch ob, three.js --> "webgl based only" ist, weil dann würde es ja für das iphone nicht in Frage kommen?!

Der zweite Satz auf der three.js GitHub Seite lautet

The library provides <canvas>, <svg> and WebGL renderers.
https://github.com/mrdoob/three.js/

Wenn du in three.js einsteigen willst: http://www.aerotwist.com/tutorials/getting-started-with-three-js/

Von WebGL zu Canvas zu wechseln ist so einfach wie "new THREE.WebGLRenderer();" durch "new THREE.CanvasRenderer();" zu ersetzen.

Edit: Noch eine empfehlenswerte Seite: http://caniuse.com/#search=webgl , http://caniuse.com/#search=svg , http://caniuse.com/#search=canvas
 
Danke erstmal! :)


The library provides <canvas>, <svg> and WebGL renderers.


prinzipiell schon klar!

Nur das Problem ist eigentlich eher was ist das -->

http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html


denn:

laut der Quelle: "MozillaWiki" --> Canvas 3D has now become WebGL

Das was man zu sehen bekommt wenn man sich den oberen Link anschaut ist ja 3D (zumindest rein optisch!)!

Nur wenn Canvas 3D Webgl ist -- dann eh frag ich mich was ist das mit der Box dann? Denn es wird mir ja auf dem Handy angezeigt!

Schwierig zu versetehen - weißt Du was ich meine?



EDIT: DEIN ANWAND HAT MIR IM DETIAL DOCH WEITER GEHOLFEN******

Folgendes -- die svg Geschichten funktionieren ja auf dem iphone!

Die Frage ist wie komplex man diese gestalten kann!

Dieses geht z.B. auf dem iphone:

http://www.lutanho.net/svgvml3d/functionplot.html

aus dieser Libary:

http://www.lutanho.net/svgvml3d/index.html


bei diesen Beispielen sehe ich leiuder keine Texturen!
 
Zuletzt bearbeitet:
Das was man zu sehen bekommt wenn man sich den oberen Link anschaut ist ja 3D (zumindest rein optisch!)!

Nur wenn Canvas 3D Webgl ist -- dann eh frag ich mich was ist das mit der Box dann? Denn es wird mir ja auf dem Handy angezeigt!

Es spielt keine Rolle welcher Renderer benutzt wird. Auch der SVG und Canvas Renderer rendern 3D Objekte natürlich in 3D.

Folgendes -- die svg Geschichten funktionieren ja auf dem iphone!

Genauso wie <canvas>.

Die Frage ist wie komplex man diese gestalten kann!

Probiere es aus. Erstelle eine Machbarkeitsstudie zu deinem geplanten Projekt.
 
Ich werde es mit Canvas probieren. Schade ist bei dem Blender-Threejs-Exporter das ich nicht festlegen kann als was ich das ganze exportieren möchte ob: <canvas> <svg> oder WebGL

Deswegen muss ich testen, was dabei nun wirklich raus kommt und wie ich das ganze in einer html Seite unterbringe!

Aber deswegern frage ichg ja hier - vielleicht weiß das ja schon jemand ;)


Vielleicht geht es im Endeffekt nur über diesen Weg:

(OpenGL)

http://books.google.de/books?id=Nxy...v-_SvBA&ved=0CDIQ6AEwAjgU#v=onepage&q&f=false
 
Zuletzt bearbeitet:
Ich werde es mit Canvas probieren. Schade ist bei dem Blender-Threejs-Exporter das ich nicht festlegen kann als was ich das ganze exportieren möchte ob: <canvas> <svg> oder WebGL

Deswegen muss ich testen, was dabei nun wirklich raus kommt und wie ich das ganze in einer html Seite unterbringe!

Du scheinst es noch nicht ganz verstanden zu haben. Three.js verwaltet intern die Szene, mit allen Objekten, Texturen, Lichtern etc. Jetzt kannst du diese Szene optional auch graphisch ausgeben lassen (wäre ansonsten etwas witzlos). Auf welche weise three.js diese Szene ausgibt (SVG, Canvas, etc.) spielt dabei keine Rolle, davon weiß die Szene ja nichts!

Wie du das in die HTML Seite bringst, dazu solltest du schon JavaScript programmieren können. Ob es dafür auch fertige Codes gibt weiß ich nicht.
 
Auf welche weise three.js diese Szene ausgibt (SVG, Canvas, etc.) spielt dabei keine Rolle, davon weiß die Szene ja nichts!

Wie meinst Du das genau?

Durch die nicht spezifizierte Ausgabemöglichkeit, so dass ich angeben könnte SVG, canvas oder webgl - ergibt sich mir doch folgendes Problem -->


Sobald Webgl verwendet wird läuft es nicht mehr auf Apples mobilen Endgeräten! Und genau dafür brauche ich es!
 
Du entscheidest in deinem Code doch selbst, welche Ausgabe verwendet werden soll.

Siehe #2:

Von WebGL zu Canvas zu wechseln ist so einfach wie "new THREE.WebGLRenderer();" durch "new THREE.CanvasRenderer();" zu ersetzen.

Du kannst sogar prüfen, ob WebGL vorhanden ist und dann entscheiden, was verwendet wird.

Javascript:
var webglSupported = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();

var renderer;

if(webglSupported) {
    renderer = new THREE.WebGLRenderer();;
} else {
    renderer = new THREE.CanvasRenderer();
}
https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js
 
Das sind alles sehr hilfreiche Informationen!

Dann stellen sich mir vorerst noch 3 Fragen:

Wenn ich ein Auto in 3d habe (um das ich die kamera frei bewegen kann) - kann ich dann wirklich selbst entscheiden ob ich beispielsweise canvas oder webgl nutze? Oder ist nur webgl dazu im stande (ich bräuchte canvas :( )?

Kann ich bei canvas auch Bilder als Texturen und HDRI als Umgebung verwenden?

Hällst Du den GPU eines iphones für stark genung eine Autorotation zu bewerkstelligen?
 
Wenn ich ein Auto in 3d habe (um das ich die kamera frei bewegen kann) - kann ich dann wirklich selbst entscheiden ob ich beispielsweise canvas oder webgl nutze? Oder ist nur webgl dazu im stande (ich bräuchte canvas :( )?

Ja. Du schreibst die Software und du entscheidest welcher Renderer benutzt wird. Ob das mit dem Auto flüssig läuft, hängt natürlich von der Komplexität des Models und den Fähigkeiten des Gerätes ab. Wenn ich mir die Beispiele angucke, dann kann man auch mit dem CanvasRenderer ganz ansehnliche Sachen machen. http://mrdoob.github.com/three.js/

Kann ich bei canvas auch Bilder als Texturen und HDRI als Umgebung verwenden?

Was Texturen angeht: Siehe Beispielseite (z.B. der Globus hat offensichtlich ein Bild als Textur). Wie die HDR Texturen technisch funktionieren weiß ich nicht, also kann ich dazu nichts sagen.

Hällst Du den GPU eines iphones für stark genung eine Autorotation zu bewerkstelligen?

Ich bin mir nicht sicher ob es auf dem IPhone mittels GPU oder CPU berechnet wird. Aber davon abgesehen hängt das von diversen Faktoren ab. Du kannst ein Auto Model mit 1000 oder 1000000 Polygonen erstellen. Und die Textur kann Spiegelungen haben, es kann mehrere Lichtquellen mit Schatten geben. All das beeinflusst die Performance.


Mir fehlt die Erfahrung, vor allem mit dem IPhone, um eine qualifizierte Aussage zu treffen.
 
Zurück