(noch nicht mobil-geeignet)Website in 3d!
Neu: Wie viel sind das: 250000 Einwohner? (Auf dieser Seite wird auch die Bedienung der Tech-Demos incl. der Karte erklärt!)
Webseiten in 3d?!
Warum eigentlich sind Webseiten in 2d? Die Welt ist doch 3d! Eine Darstellung in 3d wäre viel intuitiver. Klar, am Anfang des Web-Zeitalters waren die Rechner noch nicht leistungsfähig genug für 3d-Darstellungen. Aber heute geht schon viel mehr und WebGL ist in aktuellen Webbrowsern verfügbar (und vieles an 3d-Elementen kann man auch jetzt schon in normale Webseiten integrieren).Die frühen Ansätze für 3d-Inhalte waren leider gescheitert: VRML war zu früh dran, eine Integration in die Webbrowser blieb in weiter Ferne. "Second Life" konnte viel in seine Welt integrieren und konnte einen großen Hype lostreten, war aber nicht wirklich angetreten, Inhalte darzustellen und mit seinem total proprietären Ansatz auch klar im Nachteil im Gegensatz zum offenen Web, wo jeder seinen eigenen Teil der Web-Welt hosten kann.
Schön könnte es ja sein. Zunächst einmal zu den naheliegenden, kleinen Dingen:
Ein Menü mit baumförmiger Struktur: Warum nicht gleich als Baum?
Eine 3d-Grafik mit Balken? Da möchte man auch mal die Perspektive ändern können.
Pseudo-3d-Bedienelemente mit Schattenkanten usw. andeuten?
Warum nicht gleich 3d, wenn man sich offenbar schon 3d Meme wünscht?
Webseiten-Elemente, die 3d-Inhalte darstellen sollen, können nahtlos integriert werden.
Wie wäre es mit einer subtilen Transition nach 3d?
Webseiten in 3d zu bedienen kann ganz einfach sein, wie man hier sieht.
Sie zu erstellen ist natürlich ungewohnt und man kann nicht einfach aus den vielen Tools auswöhlen,
wie für konventionelle Seiten. Den Platz mit HTML-Layout in einem horizontal begrentzten 2d-Raum zu verteilen
ist aber auch nicht immer einfach.
Mit dieser Seite hier versuche ich auszuloten, was man benötigt, um 3d-Webseiten zu entwickeln und
wie weit die Webbrowser denn schon entwickelt sind für diesen Zweck.
Meines Erachtens müssen einfache, klare 3d-Meme/Bedienelemente gefunden werden, die es ermöglichen, Inhalte sinnvoll
zu transportieren. Vielleicht kann man dann auch einen solchen einfachen, intuitiven Standard entwickeln, wie
es einstmals mit HTTP + URLs + HTML mit seinem Hylperlink-Konzept und einfacher, inuitiver Bedienung und
Gestaltung von Inhalten gelungen war!
Ich würde mich freuen über Rückmeldungen zu meinen Versuchen und Ideen, wie man noch besser ansetzen könnte,
um entsprechendes auch für den Sprung in die 3d Welt schaffen zu können!
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.