Tag: firefox

201312Nov

Firefox: Shader Editor ermöglicht Echtzeit-Bearbeitung

Für OpenGL- bzw. WebGL-Entwickler dürfte dank Mozilla ein kleiner Traum in Erfüllung gehen: Ab Firefox 27, der momentan über den Nightly-Kanal heruntergeladen werden kann (inzwischen schon Version 28), wird in den Firefox Developer Tools ein "Shader Editor" integriert sein. Wie in diesem Artikel nachzulesen ist, kann der Shader Editor über die Einstellungen des Entwickler-Panels aktiviert werden. Die Seite muss neu geladen werden, damit der WebGL-Kontext erkannt werden kann. Ist dies geschehen, können alle einzelnen Shader-Programme der laufenden WebGL-Anwendung in Echtzeit bearbeitet oder deaktiviert werden. Dabei ist besonders hilfreich, dass die Codes des Vertex- und Fragment-Shaders separat voneinander bearbeitet werden können.

Firefox - Live editing WebGL shaders with Firefox Developer Tools

Allein die "Epic Citadel"-Anwendung, eine Web-Demo der Unreal Engine, verwendet über 200 verschiedene Shader — also kleine Programme, welche direkt auf der GPU der Grafikkarte ausgeführt werden und grafische Echtzeit-Effekte erlauben. Mit Shadern lassen sich hochkomplexe Visualisierungen und Animationen umsetzen, die allerdings nicht immer leicht zu verstehen sind. Daher stellt der Shader Editor eine große Hilfe dar, wenn es um das Verständnis eines Shader-Programms geht. Wer den Editor ausprobieren will, kann beispielsweise auch die Shader der GLSL Sandbox verändern und die Auswirkungen sofort betrachten.

201322Mai

Firefox 23: Firefox Developer Tool mit Netzerkmonitor

Die integrierten Entwicklerwerkzeuge, die seit Version 10 in Firefox zur Grundausstattung zählen, bekommen im August mit Version 23 des Browsers ein Update spendiert, in dem auch ein Netzwerkmonitor enthalten sein wird. Wie im Mozilla Hacks-Blog zu lesen ist, wird es zudem einen "Remote Style Editor" geben, mit dem sich eine Seite auch auf mobile Geräten in Echtzeit anpassen lässt. Voraussetzung auf dem Endgerät dafür ist ein installierter Firefox, der etwa für Android vorliegt.

Firefox Developer Tool - Netzerkmonitor

Weiterhin wird es ein "Option Panel" geben, in dem sich bestimmte Tools an- und ausschalten lassen. Auch ein erster Support für SourceMaps wird integriert sein, wodurch sich komprimierter JavaScript-Code in ursprünglicher Form anzeigen und mit Breakpoints versehen lässt. Wer sich selbst einen Eindruck von den Features verschaffen möchte, kann einfach Firefox Aurora installieren und ausprobieren.
Doch nicht nur das Developer Tool von Firefox bekommt Neuerungen: Auch der immer noch unangefochtene Firebug wird stets aktualisiert und erhält mit Version 1.12 ebenfalls interessante Funktionen.

201305Mai

Unreal Engine 3: Erste Demo der HTML5-Version

Erst im März berichtete ich über die Portierung der Unreal Engine 3 in den Webbrowser, die Epic Games zusammen mit Mozilla realisiert hatte. Die HTML5-Demo war allerdings nur Besuchern der GDC 2013 vorbehalten. Seit letzter Woche kann die HTML5-Version der "Epic Citadel" nun auch öffentlich getestet werden. Bei der HTML5-Demo handelt es sich um die dreidimensionale Umsetzung einer mittelalterlichen Burg, die virtuell erkundet werden kann. Um die Demo ausführen zu können, wird ein Nightly Build von Firefox empfohlen, da in dieser Version spezielle JavaScript-Anpassungen enthalten sind, die für einen flüssigen Ablauf der WebGL-Demonstration sorgen.

Epic Citadel HTML5

In den FAQ der HTML5-Demo schreibt Epic Games Genaueres über die JavaScript-Erweiterungen und die unterstützten Browser. Unter Google Chrome läuft die Demo zwar, aber es kommt zu Abstürzen. Unter Safari oder Opera kann die Demonstration derzeit nicht angesehen werden, da die Browser nicht mit der Engine kompatibel sind. Es handelt sich also noch um eine sehr frühe Demo, die aber schon jetzt zeigt, was mit WebGL möglich ist. Erst kürzlich wurde bekannt, dass Microsoft auch in Internet Explorer 11 WebGL unterstützen will.

201328Mär

Mozilla: Unreal Engine 3 nativ im Webbrowser nutzbar

Wer den Mozilla-Blog verfolgt, wird wahrscheinlich schon die Meldung über die Unreal Engine 3 gelesen haben: Mozilla und Epic haben es in einer ersten Demo geschafft, die 3D-Engine in den Browser zu portieren. Das Ganze ist ohne Plugin möglich und basiert auf dem Javascript-Subset asm.js sowie der JavaScript-Engine-Anpassung "Odinmonkey" (Firefox Nightly), welche das Ausführen von JavaScript-Anwendungen beschleunigt – JavaScript-Code kann dadurch halb so schnell wie nativer Code, also in der Geschwindigkeit von Java oder C# ausgeführt werden. Durch asm.js werden strikte Typen für Float- und Integer-Werte und ein virtueller Heap-Speicherbereich eingeführt, der mit einem typisierten Array realisiert wird. Etwas Ähnliches gab es kürzlich schon mit dem Mozilla-Compiler LLJS, der zudem Pointer oder Structs bietet.

The Mozilla Blog - Mozilla is Unlocking the Power of the Web as a Platform for Gaming

Die Portierung der Unreal Engine 3 (über 1 Million Zeilen Code) basierte auf der Verwendung von Emscripten, einem LLVM-zu-JavaScript-Compiler. In dem Blog-Eintrag findet sich momentan nur ein Video der Demonstration und der Hinweis, dass man bei Mozilla derzeit mit Disney, EA und ZeptoLab zusammenarbeitet, um die Performance-Verbesserungen in modernen Browser-Spielen unterzubringen. Wer die GDC 2013 besucht, kann die Demo in Firefox am nVidia-Stand testen.
Das Portieren einer renommierten 3D-Engine in den Browser war eigentlich nur eine Frage der Zeit, denn erst im Januar wurde bereits mit BananaBread ein Ego-Shooter gezeigt, der auf WebGL und JavaScript basiert. Die Demo aus dem Video zeigt übrigens die Epic Citadel, die auch schon für die Flash-Version der Engine (Stage 3D) genutzt wird.

201308Jan

BananaBread: 3D-Ego-Shooter auf WebGL-Basis

Dass WebGL eine vielversprechende Technologie darstellt, zeigen schon seit geraumer Zeit die Demos von Three.js, die inzwischen einige interessante Effekte aufzeigen, die durch OpenGL ermöglicht werden (Shader, Bump-Maps, Normal Mapping, usw.). Einen ersten 3D-Ego-Shooter, der Gerbrauch von WebGL und der Sauerbraten-Engine (Cube 2) macht, stellt BananaBread dar. Das Projekt ist in C++ und OpenGL entwickelt worden und wird durch den LLVM-Compiler Emscripten in JavaScript und WebGL übersetzt.

BananaBread - 3D-Ego-Shooter auf WebGL-Basis

Das Spiel lässt sich in gewohnter Manier mit den Tasten W, A, S, D und der Maus steuern. Es gibt verschiedene Waffen und Levels, in denen der Spieler gegen Bots antreten kann. Es wurde sogar eine Third-Person-Ansicht integriert, die über die Taste 9 aktiviert werden kann. Die beiden Entwickler Alon Zakai und Ehsan Akhgari von Mozilla möchten mit dem Projekt zeigen, was mit WebGL und modernen Webbrowsern möglich ist.

201203Sep

Firefox: JSTerm als interaktives JavaScript-Terminal

In der aktuellen Beta-Version von Firefox (Version 16) steht unter Anderem eine neue Kommandozeile zur Verfügung, mit der sich unterschiedliche Aktionen durchführen lassen. So können verschiedene Funktionen des Browsers einfach über die Eingabe eines entsprechenden Schlüsselwortes aufgerufen werden. Beispielsweise lassen sich die Cookies einer Seite direkt bearbeiten, Elemente untersuchen, CSS-Stile editieren oder eine geöffnete Seite als Screenshot exportieren.
Die neuen "Web Developer Tools" von Firefox (seit Version 10), die durch ihr dunkles Erscheinungsbild auffallen, stellen künftig eine Alternative zu Firebug dar. Mit dem Inspektor, einem Debugger und der "Web Console" stehen komfortable Werkzeuge bereit, die den Firebug-Tools sehr ähnlich sind. Noch einen Schritt weiter geht Mozilla-Entwickler Paul Rouget, der mit seiner Firefox-Erweiterung JSTerm die Web Developer Tools von Firefox um eine interaktive JavaScript-Konsole erweitert.

JSTerm - Firefox JavaScript Terminal

Die Konsole versteht sich als Erweiterung der integrierten "Web Console" und vermittelt ein stärkeres Terminal-Gefühl. Neben der Autovervollständigung und Syntaxhervorhebung bietet die Konsole auch die Möglichkeit, DOM-Elemente und -Funktionen besser analysieren zu können. So können in einem separaten Bereiche alle zugehörigen Eigenschaften und Funktionen zu einem Objekt angesehen werden. Für Firefox-Extension-Entwickler dürfte der "Chrome-Modus" interessant sein, mit dem sich auch die Komponenten von Firefox selbst untersuchen lassen.

201208Feb

Webdesign: CSS-Probleme mit GDI und DirectWrite

Die Welt des Webdesigns hat sich dank individueller Schriftarten durch "@font-face" zum Guten verändert, da Designer nicht mehr auf Systemschriftarten angewiesen sind. Inzwischen unterstützen alle modernen Browser Möglichkeiten, um Schriftarten per "@font-face" in CSS einzusetzen. Das Problem: Browserhersteller beginnen, die Methode zur Darstellung von Schriftarten zu ändern. Das betrifft alle Windows-Systeme ab Windows Vista, denn hier wurde für die ClearType-Darstellung neben der bisher verwendeten GDI-API die Direct2D-API bzw. DirectWrite-API eingeführt. Dadurch ist ein hardwarebeschleunigtes Rendering (also durch die GPU) im Browser möglich. DirectWrite wird in Firefox seit Version 4 und in Internet Explorer seit Version 9 unterstützt. Nur in Chrome kommt bis zum aktuellen Zeitpunkt (Version 16) noch das GDI-Rendering zum Einsatz. Der Safari-Browser ist von dem Dilemma nicht betroffen, da Mac OS X ein eigenes Font-Rendering (Core Text) besitzt. Dafür gibt es ein ähnliches Problem zwischen der Windows- und Mac-Version.
Das eigentliche Problem besteht nun darin, dass die Darstellung von Schriftarten abweicht. Je nachdem, ob die GDI- oder DirectWrite-API verwendet wird, können Abweichungen in Texten entstehen.

Webdesign - CSS-Probleme mit GDI und DirectWrite

In diesem Eintrag bei Stack Overflow wird der Effekt noch einmal deutlich. Wer das Ganze selbst testen möchte, kann dazu auf ein bestehendes jsFiddle-Snippet zurückgreifen. Der springende Punkt ist nun, dass das neue DirectWrite-Rendering ab Firefox 4 und Internet Explorer 9 automatisch aktiviert ist. Läuft der Text aus dem Snippet also über die graue Fläche hinaus, wird DirectWrite und damit Hardwarebeschleunigung verwendet.

Weiterlesen...
201230Jan

HTML5: Aktuelle Demos und Notizen von Mozilla

Christian Heilmann, Principal Technical Evangelist bei Mozilla, hat die Slides zu einer kürzlichen HTML5-Präsentation auf der "Mozilla Vision 2012" in Tokio veröffentlicht. Diese variieren etwas von seinen vorherigen Präsentationen und zeigen die aktuellen Entwicklungen von Mozilla bezüglich HTML5 und CSS3 auf. Dazu werden wieder verschiedene Beispiele aufgeführt wie etwa der morphende CSS3-Würfel. Die 3D-Transitions funktionieren in Firefox erst ab Version 10, die sich momentan im Aurora-Status befindet.

Christian Heilmann - The Future of HTML5 and Web Technologies

Weiterhin wird der 3D CSS Tester aufgeführt, mit dem sich per GUI bequem CSS3-Attribute wie "perspective", "rotateZ" oder "keyframes" ausprobieren lassen. Auch die Firefox-Erweiterung Tilt wird erwähnt, mit der sich seit geraumer Zeit auf WebGL-Basis Websites dreidimensional betrachten lassen. Dabei wird die DOM-Struktur in verschiedenen Ebenen dargestellt, je nachdem, wie komplex die Verschachtelung der Seite ist.
Insgesamt finden sich in der Präsentation einige interessante Links zu aktuellen Beispielen, die den Einsatz von HTML5 und CSS3 demonstrieren.