1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Research Canvas 3D mobile-Devices

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von sight011, 20. April 2012.

  1. sight011

    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: 20. April 2012
  2. CPoly

    CPoly Mitglied Weizenbier Premium-User

    Der zweite Satz auf der three.js GitHub Seite lautet

    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
  3. sight011

    sight011 Erfahrenes Mitglied

    Danke erstmal! :)



    prinzipiell schon klar!

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

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


    denn:

    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: 20. April 2012
  4. CPoly

    CPoly Mitglied Weizenbier Premium-User

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

    Genauso wie <canvas>.

    Probiere es aus. Erstelle eine Machbarkeitsstudie zu deinem geplanten Projekt.
  5. sight011

    sight011 Erfahrenes Mitglied

    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: 20. April 2012
  6. CPoly

    CPoly Mitglied Weizenbier Premium-User

    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.
  7. sight011

    sight011 Erfahrenes Mitglied

    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!
  8. CPoly

    CPoly Mitglied Weizenbier Premium-User

    Du entscheidest in deinem Code doch selbst, welche Ausgabe verwendet werden soll.

    Siehe #2:

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

    Code (Javascript):
    1.  
    2. var webglSupported = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();
    3.  
    4. var renderer;
    5.  
    6. if(webglSupported) {
    7.     renderer = new THREE.WebGLRenderer();;
    8. } else {
    9.     renderer = new THREE.CanvasRenderer();
    10. }
    11.  
    https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js
  9. sight011

    sight011 Erfahrenes Mitglied

    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?
  10. CPoly

    CPoly Mitglied Weizenbier Premium-User

    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/

    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.

    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.
  11. sight011

    sight011 Erfahrenes Mitglied

    Eine Frage in eine andere Richtung:

    Schon mal von der Umwandlung von 3D-Daten in XML gehört/wissen angehäuft!?

    Ist das perfomanter?
  12. CPoly

    CPoly Mitglied Weizenbier Premium-User

    Ich verstehe die Frage nicht. Das "obj" Dateiformat ist z.B. XML und wird von three.js unterstützt. three hat außerdem sein eigenes Format (du verwendest ja bereits das Blender Plugin). Die beste Performance bekommst du zweifellos mit dem JSON format (https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3.0) ganz einfach weil das initiale Parsen der Modelle weg fällt.

Diese Seite empfehlen