Mit WebGL kann der Browser direkt mit der Grafikkarte kommunizieren und die Ergebnisse hardwarebeschleunigt ohne zusätzliches Plugin via HTML5-Canvas darstellen.
Mittlerweile können eigentlich alle modernen Browser mit WebGL umgehen. Vieles funktioniert übrigens auch schon auf mobilen Geräten. Allerdings sollte man hier beachten, dass diese Systeme im Web noch nicht ganz so leistungsfähig sind wie z.B. Desktoprechner oder Notebooks.
Vielleicht habe ich sie noch nicht entdeckt oder bemerkt, aber es wundert mich schon ein bisschen, dass es noch nicht so viele WebGL-Anwendung gibt. Verwendungszwecke für solche, wie z.B. Architekturvisualisierungen, Autokonfiguratoren, Küchen- bzw. Einrichtungsplaner, 3D-Produktansichten, Spiele usw., gibt es ganz sicher genug.
Die Beispiele sind (noch) nicht für mobile Endgeräte geeignet bzw. dafür optimiert worden.
Ausnahmsweise mal kein Spiel. Eher etwas zum entspannen und zurücklehnen. Sich einfach mal den Luxus gönnen und zusehen wie die Zeit vergeht.
Die Idee ist an sich nicht wirklich neu. Ich wollte eigentlich nur wissen, ob ich es schaffe, so etwas als Echtzeitsimulation hinzubekommen, inkl. aktueller Uhrzeit.
Da sich die Uhren der Form des Untergrundes anpassen, musste ich dieses Mal auf die (zumindest für mich) Low-Level Physics-Engine Ammo.js zurückgreifen. Da diese echte Softbodys unterstützt. Allerdings zu lasten der Performance. Aus diesem Grund sollte man eigentlich auch auf sog. Mesh-Collider (welche ich für den Wirbel verwendet habe) verzichten, da hier, ähnlich wie beim Softbody, für die Kollisionsberechnung wirklich alle Punkte und Dreiecksflächen des Objekts herangezogen werden müssen.
Obwohl das Ganze vielleicht trivial aussieht, hat hier vor allem die CPU (eigentlich nur ein Core, aber trotzdem) einiges zu berechnen. Es ist einfach viel schwieriger zu simulieren, dass ein Körper den Anderen nicht durchdringt, als ihn einfach durchfliegen zu lassen.
Am liebsten hätte ich natürlich schmelzende Uhren, allerdings mit Uhrzeiger, simuliert. Hierzu müsste aber zwischen den einzelnen Punkten zusätzlich eine Art Federberechnung stattfinden. Leider habe ich diese Funktion bei Ammo.js (noch) nicht entdeckt. Allerdings würden dann wahrscheinlich auch moderne Gamingrechner vor hohen Herausforderungen gestellt werden.
verstopfen.
Das Spielprinzip ist (wie immer) einfach. Dieses Mal angelehnt an das Spiel Columns
aus den 90'er Jahren.
Es erinnert auch ein bisschen an Tetris
.
Die fallenden Blöcke müssen nur in die richtige Spalte bewegt werden, um mind. 3 gleiche Steine in einer Reihe zu bilden. Egal ob horizontal, vertikal oder diagonal. Diese werden entfernt, so dass die verbleibenden Blöcke in der Spalte nachrutschen. Während des Fallens kann die Reihenfolge der Steine, zyklisch von oben nach unten geändert werden. Das Spiel ist zu ende, wenn keine Steine mehr nachfolgen können, weil man ganz oben angekommen ist. Die Fallgeschwindigkeit wird natürlich langsam aber stetig erhöht.
Die Symbole auf den Steinen sind übrigens hauptsächlich für Farbenblinde bestimmt.
Diese WebGL-Variante wurde genau so wie die Android Version mit Unity erstellt. Im grunde musste, nach ein paar Anpassungen, beim Erstellen nur die Plattform geändert werden. Leider kann es auch bei einer schnellen Verbindung etwas dauern, bis der Inhalt angezeigt wird.
Ein Experiment um die physikalischen Berechnungen in Echtzeit von Physi.js zu testen. Ein einfaches Flipperspiel, mit dem Wichtigsten was dazu gehört, wie Multi-, Extraball, stoßen inkl. TILT und anderen Funktionen. Interessant wird es übrigens ab 2 oder mehr Bällen. Ab 4 Bälle kann es sogar stressig werden ;-). Brennen in der Mitte alle blauen Lämpchen gibt es sogar etwas spezielles. Obwohl der Flipper einfach gehalten ist, ist es oft gar nicht so leicht den Ball lange genug im Spiel zu halten.
Im großen und ganzen ist die Simulation von Physi.js wirklich klasse. Nur die Constraints bei den Paddles haben mich etwas Nerven gekostet, da hier die Simulation unter bestimmten (ungeklärten) Umständen völlig verrückt spielt. Ich hoffe, dass es mit Hilfe der eingebauten Korrekturen, nur mehr äußerst selten vorkommt, wenn überhaupt. Eine 2D-Engine hätte übrigens völlig ausgereicht – aber egal.
Im Chrome, Firefox und einem aktuellen Edge (so ab 2016) läuft das Beispiel meist sehr flüssig, wobei Chrome, zumindest bei mir, doch noch ein bisschen schneller ist.
SIMPLE BALL wurde übrigens als Chromeexperiment anerkannt.
Die ersten Versuche mit Three.js und WebGL. Eine etwas andere Art der Präsentation von Bildern und Videos.
Leider zeigen mittlerweile alle aktuellen Browser dieses Beispiel nur mehr fehlerhaft an. Das liegt aber eher an der etwas älteren Version von Three.js, welche hier verwendet wird. Durch die vielen Änderungen bzw. Optimierungen, die in der Zwischenzeit bei Three.js stattgefunden haben, ist eine Migration auf die neueste Version ziemlich aufwändig. Vielleicht irgendwann mal.
Freezenach Klick auf ein Video oder ruckelige Wiedergabe der Videos (im Chrome). ⇒ Grafiktreiber updaten.
Da es noch nicht so viele Imageviewer bzw. Bilderkarusells im Web gibt, musste ich einen eigenen Mediaviewer, für Bilder, Videos und normalen HTML Inhalt, erstellen. ;-)
Allerdings verwendet dieser, sofern es der Browser zulässt, nur CSS-Transformationen und -Überblendungen (Transitions). Die Übergänge sind somit hardwarebeschleunigt und werden hier nur durch wechseln der jeweiligen CSS-Klassen erzeugt.