http://www.peter-strohm.de/webgl WebGL Tutorial, Hintergründe und Neuigkeiten de-de Peter Strohm Fri, 4 Mar 2011 Tue, 1 Jun 2010 http://www.mozilla.com/en-US/firefox/all-beta.html Endlich ist eine offizielle Beta-Version des FireFox 4.0 zum Download freigegeben. Damit bleiben uns WebGLern endlich die Nightly-Builds erspart. Tue, 1 Jun 2010 http://www.jobworld.de/stellenangebote-jobs-Muenchen/Spannendes_Prestige_Projekt_Javasript_5mkn3-7ege9.html?l=85579 Die wirtschaftliche Bedeutung von WebGL wächst: heute habe ich die erste Jobausschreibung zum Thema WebGL entdeckt: Jobangebot Meine Prognose: das wird nicht das letzte gewesen sein. Tue, 1 Jun 2010 http://www.peter-strohm.de/webgl/webgltutorial7.php Endlich bin ich dazu gekommen, ein weiteres Kapitel meines WebGL-Tutorials online zu stellen: Beleuchtung I ist seit heute veröffentlicht. Es geht um Umgebungslicht und gerichtete Beleuchtung (Ambient and Directional Light für die Anglizisten). Viel Spass! Sat, 31 Jul 2010 http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences Es geht um das NPOT(No-Power-Of-Two; "keine 2er-Potenz")-Problem. Aus Gründen, die hier erklärt sind, müssen Texturengrafiken für WebGL ausschließlich Kantenlängen haben, die einer 2er-Potenz entsprechen (4,8,16,..,1024 etc Pixel hoch bzw. breit). Netterweise ist Mozilla nicht so anspruchsvoll und hat meine Texturen auch bisher brav angezeigt. Jezt habe ich die Grafikdateien angepasst, und siehe da: auch in Chromium klappt's mit den Texturen! Sun, 8 Aug 2010 http://www.peter-strohm.de/webgl/webgltutorial8.php Das achte Kapitel meines WebGL-Tutorials ist seit heute online. Es geht um die Interaktion des Users mit der 3D-Szene. Wie kann man ermitteln, welches 3D-Objekt ein User angeklickt hat? Wie überträgt man die 2D-Koordinaten der Maus zurück in den 3D Raum? Diese und weitere Fragen beantwortet das Tutorial. Außerdem gibt es interessantes über die Verwendung einer 2D-Canvas als Textur für 3D-Objekte und einen Schritt zur Verbesserung der Verwaltung der 3D-Vertizes und Dreiecke. Fri, 20 Aug 2010 http://www.mathjax.org/ In eigener Sache: Die mathematischen Formeln, die in den Tutorials vorkommen (v.A. in Nr. 2 und 8) hatte ich bisher als Grafiken erstellt und mit dem <img>-Tag eingefügt. Seit heute werden die Formeln mittels der JavaScript-Bibliothek MathJax dynamisch erzeugt. Das sieht deutlich besser aus und lässt sich leichter pflegen falls doch mal etwas nicht stimmt. Ich denke, die dafür leicht verlängerten Ladezeiten sind ein erträgliches Opfer. Tue, 2 Oct 2010 http://www.mozilla.com/de/firefox/all-beta.html Gute Nachrichten: In den aktuellen Beta-/Nightly- Versionen von Chromium und Firefox ist die WebGL-Unterstützung standardmäßig aktiviert. D.h. es wird bald nicht mehr nötig sein, den Browser in irgendeiner Weise für WebGL zu konfigurieren und ich kann vielleicht bald Tutorial "0" löschen. Wed, 2 Feb 2011 http://webgl.peter-strohm.de/minimalistischesWebGLBeispiel.html Für alle Neueinsteiger in WebGL sicherlich hilfreich: Ich habe eine minimalistische WebGL-Seite erstellt, die ohne verschachtelte JavaScript-Funktionen auskommt, keine zusätzlichen .js Dateien nachlädt und mit insgesamt 69 Zeilen Quellcode überschaubar ist. Bewusst weggelassen sind Fehlerbehandlungen. Das Beispiel soll die essenziellen Schritte bei der Erstellung von WebGL-Seiten aufzeigen. Der Quellcode ist ausführlich kommentiert. Getestet mit Firefox 4.0b 10 und Chrome 9 beta minimalistischesWebGLBeispiel_ScreenThumb.jpg Fri, 4 Feb 2011 http://www.google.com/chrome/intl/de/landing_win.html?hl=de Ein großer Schritt für die WebGL-Welt: Mit Chrome 9.0 hat der erste der großen Browser eine offizielle Version veröffentlich, die von Hause aus WebGL unterstützt. Bis auch Firefox 4.0 das Betastadium verlässt wird es voraussichtlich ebenfalls nur noch wenige Wochen dauern. Jezt geht's richtig los! http://www.google.com/intl/de/images/logos/chrome_logo.gif Sun, 6 Feb 2011 http://webgl.peter-strohm.de/WebGLSpickzettel.xml Eine Übersicht über die wichtigsten WebGL API-Funktionen ist in dem WebGL Spickzettel zu finden. Funktionen, Parameter und Rückgabewerte sind dort aufgelistet und auf deutsch erläutert. spickzettel_thumb.jpg Tue, 15 Feb 2011 webgltutorial4.php Mit gutem Grund wird in den WebGL-FAQs dringend empfohlen, für WebGL-Animationen die neue (browserabhängige) Funktion requestAnimationFrame zu verwenden. Bisher findet man i.d.R. setInterval in WebGL-Beispielen. Ich habe Kapitel 4 : Animation entsprechend aktualisiert. requestAnimation_thumb.jpg Thu, 17 Feb 2011 http://code.google.com/p/glmatrix/ Vektor- und Matrizzenrechnung ist ein wichtiges Thema bei der Erstellung von WebGL-Seiten. In den Tutorials auf dieser Seite wird dafür die Javascript Bibliothek Sylvester.js verwendet. Aus heutiger Sicht ist glmatrix.js jedoch mehr zu empfehlen (siehe Link). glmatrix.js ist speziell für WebGL auf Geschwindigkeit optimiert in der Anwendung nicht komplizierter als sylvester.js. algebra_thumb.jpg Mon, 21 Feb 2011 pstextured/index.html Das "Objekt" war ja vor einiger Zeit schonmal als extremer Quickhack online. Inzwischen habe ich den OBJ-Parser überarbeitet und wieder eine angemessene "über den Autor"-Seite online gestellt. Die Daten werden direkt aus einer .obj-Datei und zugehöriger .mtl-Datei geladen. Die Scandaten wurden mit einem Vitus Pro Bodyscanner erzeugt. pstextured_thumb.jpg Wed, 23 Feb 2011 http://senchalabs.github.com/philogl/ Sencha, die Firma die auch das Javascript Framework ExtJS entwickelt, hat mit PhiloGL ein professionel aufgebautes Framework entwickelt. Es ist sehr nah an WebGL und meiner Ansicht nach lohnt es sich nicht, da der Lernaufwand kaum geringer sein dürfte als für reines WebGL. Ich habe es dennoch zum Anlass genommen, die Frameworks-Übersicht auf dieser Seite zu aktualisieren. philogl_thumb.jpg Sun, 27 Feb 2011 http://blogs.sonyericsson.com/developerworld/2011/02/24/webgl-support-in-the-android-web-browser/ Es sieht so aus, als würde WebGL in nächster Zeit auch in den Android-Standardbrowser Einzug halten. Der verlinkte Blog-Eintrag spricht jedenfalls dafür. Spannend wird sein, wie die begrenzten Hardwareresourcen der mobilen Geräten mit der 3D-Grafik fertig werden. android_thumb.jpg Thu, 3 Mar 2011 http://labs.opera.com/news/2011/02/28/ Mit Opera hat der dritte der großen Browser eine (Vorab-)Version veröffentlicht, die WebGL unterstützt. In dem o.g. Blogeintrag findet sich der Link zum Download der Pre-Releaseversion. Thu, 3 Mar 2011 http://www.macwrench.de/wiki/Versteckte_Safari_Optionen#WebGL_aktivieren Von Apple Safari gibt es offenbar auch eine nightly-build Version in der sich WebGL freischalten lässt. Ich hab's noch nicht ausprobiert, aber 100e Webseiten, die das behaupten können nicht irren ;-). Fri, 4 Mar 2011 http://www.khronos.org/news/press/releases/khronos-releases-final-webgl-1.0-specification Auch wenn der Draft-Status der Spezifikation in den letzten Wochen kaum noch eine Rolle gespielt hat: Erst seit gestern gibt es einen offiziellen "fertigen" WebGL Standard 1.0. Die Khronos-Gruppe hat in einer Pressemitteilung die Freigabe bekanntgegeben. Tue, 22 Mar 2011 http://www.mozilla.com/de/firefox/ Lang hat's gedauert. Heute ist endlich nach zwölf Betas und zwei Release-Candidates die finale Version von Firefox 4.0 MIT WebGL-Unterstützung erschienen. Thu, 28 Apr 2011 http://www.heise.de/ix/inhalt.html Ab heute erscheint in insgesamt drei Teilen ein komplett neu erstelltes WebGL-Tutorial (vom Autor dieser Seiten) in der iX. Im ersten Teil werden die Grundlagen bis zum Erzeugen der ersten Dreiecke für Einsteiger erklärt. Ab sofort im gut sortierten Zeitschriftenhandel. http://www.heise.de/ix/imgs/05/5/8/7/0/4/7/ixtitel0511-3ecd902a903e2349.gif Tue, 10 May 2011 http://www.peter-strohm.de/webgl/webglsicherheit.php Seit kurzem kursiert ein vielzitierter Blogeintrag der Firma Context bezüglich der Sicherheit von WebGL auf diversen IT-Newsseiten. Die dort genannten Kritikpunkte habe ich mir angeschaut, erklärt und bewertet (siehe Link) http://www.peter-strohm.de/webgl/schloss.jpg Wed, 11 May 2011 http://www.youtube.com/watch?v=rfQ8rKGTVlg Auf der Google I/O Konferenz hat Gregg Tavares einen sehr interessanten Vortrag mit dem Titel "WebGL Techniques and Performance" gehalten. Der Vortrag richtet sich an _fortgeschrittene_ Entwickler und ist komplett als Video bei youtube zu sehen. Sat, 28 May 2011 http://www.peter-strohm.de/webgl/webgltutorial1.php Der erste Teil des Tutorials war schon etwas in die Jahre gekommen. Obwohl auch die Version, die bis gestern online war durchaus noch funktioniert hat, gab es doch einiges, das ich inzwischen anders machen bzw. anders erklären würde. Daher gibt es ab heute eine komplett neue Version von "Das erste Dreieck". kap1_thumb.jpg Sun, 23 Oct 2011 http://www.peter-strohm.de/webgl/webgltutorial2.php Das mathematiklastige Tutorial über Projektions- Transformationsmatrizzen hatte auch schon länger einer Auffrischung und ein paar kleinere Fehlerkorrekturen verdient. Seit heute ist die überarbeitete Version online. kap2_thumb.jpg Thu, 16 Feb 2012 http://www.heise-shop.de/heise-zeitschriften-verlag/ix-kompakt-02-2012-webdesign_pid_18466582.html Der Heise-Verlag hat mein WebGL-Tutorial, das bereits im letzten Sommer in drei Teilen in der iX erschienen war, heute nochmal im Rahmen eines Sonderheftes "Webdesign" veröffentlich. Das Heft ist für 12,90? im Heise Onlineshop oder im sehr gut sortierten Zeitschriftenhandel erhältlich. Tue, 28 Feb 2012 http://www.operamini.com/mobile/ Die gerade erschienene Version 12 des Browsers Opera unterstützt WebGL. Pakete für iPhones und Android-Geräte sind auf www.operamini.com/mobile/download/ verfügbar.