Diese Seite in 2d (für alle Geräte nutzbar)
> HTML5/Javascript > Webseite in 3d!

Webseite in 3d!

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

Neu (Anfang April 2017): Diese Seiten hier sind die 3d-Version meiner Homepage - Dies ist nun zwar schon so weit gereift, daß man es sich gut einmal ansehen kann, Darstellungsfehler sind in dieser experimentellen Version aber noch möglich.
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 und IE11 ein wenig. 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-Textobjekte zu extrudieren. Dies bedeutet leider einen großen Rechenaufwand für jedes einzelne Zeichen, das man darstellen möchte.
(2) Fonts selbst rendern. Ich kenne keine Bibliothek dafür, aber mit einigem Aufwand geht das im Prinzip wohl auch effizient darzustellen, die Vorbereitungsberechnungen sind aber wohl ein wenig aufwendig, wenn man dies in Bildern zwischenspeichert... (plus Ladezeiten) im Grunde führt das zu der nächsten Möglichkeit:
(3) Text in einen Canvas 2d Context rendern und das als Bild auf eine Fläche im 3d Context abbilden. Um das flexibler und Bildspeichersparender zu machen, kann man natürlich für jedes Zeichen und jede benutzte Größe dieser Zeichen ein Bild anlegen und diese Bilder in 3d-Meshes zusammenfügen, was aber auch wieder aufwendig ist. Aufwand ist ansonsten aber nicht nur der Speicherverbrauch für die ganzen Bilder, sondern auch die Organisation des Ganzen ist nicht unerheblich.
(4) Einen Vektor-Font selbst bauen. Diese Variante kann man in meiner 3d-Webseite in den Optionen (links oben in blau) auch für Web-Texte einschalten. An vielen anderen Stellen verwende ich das immer, z.B. im Baum-Menü und bei diversen Beschriftungen. 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 zurechtzukommen.
(5) Einen HTML-Bereich (DIV/IFRAME) 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 (Easteregg)) 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 nun noch mit aufwendigen Spezialkostruktionen, soweit das überhaupt geht.

 

 

 


Diese Seite in 2d (für alle Geräte nutzbar), Impressum