frank-bartels-kiel.de Visitenkarte
> HTML5/Javascript > Website in 3d!

Diese Seite gibt's nun  in  3d!  (Noch nicht mobil-geeignet)

Website in 3d!

Siehe bitte auch die Home-Seite zur Motivation, warum ich Webseiten in 3d sinnvoll finde.

Neu: Wie viel sind das: 250000 Einwohner? (Auf dieser Seite wird auch die Bedienung der Karte erklärt!)

Das Browser-Fenster sollte man derzeit noch ca. 1,5 mal so breit wie hoch verwenden. Bislang getestete Webbrowser: Firefox und Chrome am meisten; Edge ein wenig und IE11 hakt noch etwas. Für mobile Geräte funktioniert die Bedienung auf jeden Fall noch nicht!
Viel Spaß beim Benutzen+Testen! Ich freue mich über Rückmeldungen!

Links oben in der 3d-Darstellung ist in blau ein Optionen-Menü:
Vorgabe ist, daß man mit der vertikalen Mausposition auch das Verschieben der Seite (Y-Scroll) bewirkt; dies schaltet sich ab, sobald man das Mausrad bewegt, man kann es hier aber wieder einschalten.
Anstelle der normalen Text-Version kann man zu einer Vektor-Font-Version umschalten - kleinere Darstellungsprobleme z.B. mit Firefox oder Edge können so vermieden werden.

3d-Benutzer-Interface Meme

Das ist eigentlich die größte Herausforderung bei der Idee mit den Homepages in 3d: Welche Bedienelemente wären denn ideal?
Es soll einfach zu bedienen sein und am besten auch einfach zu entwerfen/programmieren. Und obendrein natürlich nützlicher als die übleichen 2d-Webseitenkonstruktionen. Chancen sehe ich schon: HTML (2d) ist ja auch nicht immer ganz einfach, in 3d könnte die Platzaufteilung sich möglicherweise auch vereinfachen, horizontaler Scroll in 2d ist normalerweise ein No-Go, in 3d ist hin- und hergucken weniger problematisch. Ferner sind viele Inhalte 3d, die sich in eine 3d-Welt viel besser integrieren lassen könnten. Benutzer-Interfaces neu zu denken kann zu kreativen und neuen, natürlicheren Bedienkonzepten führen. Wer schon mal ein Malprogramm mit 3d-Brille ausprobiert hat, wird mir wohl zustimmen können.

Ich bin für Kommentare dankbar, wie man meinen Ansatz findet und welche 3d-Benutzer-Interfaces man sich denn so wünschen würde.

Die Umsetzung der 3d-Darstellung

...erfolgt bei meinem Ansatz auf Basis von einer JavaScript-Programmierschnittstelle (WebGL), die in aktuellen Webbrowsern bereits enthalten ist, so daß man die Seiten einfach direkt so aufrufen kann.
In HTML/Javascript stellt sich die Grundlage als Canvas 3d(webgl) Context dar. Um etwas Arbeit zu ersparen, habe ich das Javascript-Framework threejs eingesetzt. Dieses unterstützt ansatzweise auch die Integration von HTML+CSS...

...nur warum ist das eigentlich ein Problem?
Ganz einfach: Weil es in einem Canvas 3d Context leider keine Möglichkeit gibt, einen HTML-Bereich einzusetzen; ja es gibt noch nicht mal irgendeine Möglichkeit direkt Text darzustellen (im Canvas 2d Context gibt es das inzwischen).
Als Ausweichmöglichkeiten gibt es z.B.:
(1) Einen konventionellen Font nutzen, um 3d-Objekte daraus zu bauen (Fläche oder ggf. extrudieren). Dies bedeutet leider einen zu großen Rechenaufwand für ganze Texte, da schon viele Dreiecke je Zeichen gebraucht werden.
(2) Fonts selbst rendern. Ich kenne keine Bibliothek dafür, selbst habe ich den Aufwand auch noch nicht gemacht. Dafür würde man jedes Zeichen (ggf. in verschiedenen Auflösungen) in eine Textur schreiben (Texturatlas) und Teile daraus dann als texturiertes Rechteck dorthin abbilden, wo der Buchstabe gerade stehen soll. Dies führt in der 3D-Szene zu dem Aufwand, ein Rechteck für jedes Zeichen anzuzeigen. Alternativ dazu:
(3) Text in einen Canvas 2d Context rendern und das als Bild auf eine Rechteckfläche im 3d Context abbilden. Das spart die vielen Rechtecke, aber dafür braucht man mehr Texturspeicher.
(4) Einen Vektor-Font selbst bauen. Diese Variante kann man in meiner 3d-Webseite an vielen Stellen sehen (Baum-Menü, Schaltflächen, diverse Beschriftungen), für Web-Texte kann man es einschalten. Hierbei gibt es auch Probleme: Die Liniendicke kann man nicht abhängig von der Entfernung einstellen und die Linien haben defekte Anfangs- und Endstücke (relativ zu dem Ideal, daß Linienenden wenigstens in etwa rund wären), was zu optischen Störungen in Linienzügen führen kann bei Liniendickem>2 und was die Linien an der falschen Stelle aufhören läßt; soweit ich das sehe, ist das Hardware- oder Grafiktreiberbedingt und insofern schwer lösbar - außer mit diversen Heuristiken, um mit den Gegebenheiten einigermaßen zurechtzukommen.
(5) Einen HTML-Bereich einblenden zu dem Canvas 3d Context. Man kann den HTML-Bereich davor einblenden, CSS erlaubt inzwischen die geeignete 3d-Perspektiv-Verzerrung dafür durchzuführen (und threejs unterstützt dies soweit möglich mit eigenem "Renderer" dafür incl. Synchonisierung der Kamera); das nutze ich tatsächlich auch. Das geht aber nur solange gut, wie kein 3d-Objekt davor dargestellt werden müßte, weil der Canvas 3d Context ja an den Stellen überdeckt wird durch den CSS-verzerrten HTML-Bereich. Das Problem kann man auch wirklich sehen, wenn man sich (mit WASD etc.) so hinstellt, daß der HTML-Bereich eigentlich hinter anderen Elementen sein müßte.
Dies Problem kann man lösen, indem man den CSS-verzerrten HTML-Bereich hinter den Canvas 3d Context anordnet und im Canvas 3d Context Durchsichtigkeit genau dort erzeugt, wo der HTML-Bereich zu sehen sein soll, wenn alles 3d-richtig dargestellt sein soll. Das geht soweit auch ganz gut, es gibt bloß einen Haken: Die Interaktion (insbesondere mit der Maus) wird nun vom Canvas 3d Context überdeckt. Das zu lösen (die Interaktionen umzuleiten oder nachzubilden) ist teilweise auch möglich. Spätestens aber bei IFRAMEs im HTML-Bereich geht das aufgrund von Sicherheitseinschränkungen der Webbrowser nur noch mit aufwendigen Spezialkostruktionen, soweit das überhaupt geht.
Auch andere Methoden vermittels Texturspeichers sollen zumindest in einigen Webbrowsern funktionieren, um HTML-Bereiche in eine 3D-Szene abzubilden, mit dem gleichen Interaktivitätsproblem natürlich.

 


Impressum - Datenschutzerklärung   |   Xing - Twitter