Impac Tech Blog

3D-Animation mit WebGL

2012-01-09T08:53:00.005+01:00

Dieser Post zeigt wie man im Browser eine 3D-Animation mit WebGL programmieren kann. WebGL ist eine Mischung zwischen JavaScript und OpenGL. Der Vorteil davon ist, dass die Berechnung der Bildbearbeitung auf der Grafikkarte passiert und dadurch performanter ist. Weil WebGL eine relativ neue Technologie ist, gibt es auch einige Einschränkungen, welche beachtet werden müssen:

WebGL läuft nur auf Browsern, welche HTML5 unterstützen
Im IE ist WebGL nicht implementiert, es gibt jedoch ein kostenpflichtiges Plugin (http://iewebgl.com/) um dieses Problem zu beheben
Auf dem Client ist eine Grafikkarte die OpenGL unterstützt erforderlich

Wir programmieren einen 3D-Würfel mit einem Logo, welcher mittels der Maus um sämtliche Achsen gedreht werden kann. Das Resultat kann hier betrachtet werden. Im folgenden werden einige Aspekte angeschaut, Details können dem Blog Learning WebGL entnommen werden.

Shaders

Shader sind Miniprogramme, welche direkt auf der Grafikkarte ausgeführt werden um eine Grafik zu berechnen. Für jede WebGL Grafik gibt es zwei Shaders, ein Vertex-Shader und ein Fragment-Shader, welche in der Sprache GLSL geschrieben werden. Um Berechnungen durchzuführen wird als erstes der Vertex-Shader aufgerufen. In diesem werden die einzelnen Koordinaten (Vertices) mit einer Matrize multipliziert um die Positionen einer 3D-Grafik in Pixel zu berechnen. Der Output dieser Berechnung wird dem Fragment-Shader übergeben, welcher die einzelnen Punkte linear interpoliert um die 3D-Grafik als Ganzes darzustellen. Dieser Abschnitt ist keine Definition, sondern beschreibt nur den Ablauf des Renderings auf einem sehr abstrakten Level!

Vertex

Vertex oder in Mehrzahl Vertices sind Koordinaten von einzelnen Punkten in einem 3D-Koordinatensystem mit einer X-, Y- und Z-Achse. Diese dienen dazu, Objekte auf einer Leinwand (Canvas) zu positionieren. Jeder 3D-Grafik besteht aus n Vertices, welche ihr aussehen beeinflussen.

Aufbau des Programms

In ein HTML-Dokument wird ein canvas eingebettet, welches seit HTML5 zum Funktionsumfang gehört. Deshalb muss der Browser HTML5 unterstützen um WebGL-Objekte darstellen zu können.

Beim laden der Seite wird die JavaScript-Funktion webGLStart aufgerufen, welche dafür verantwortlich ist, dass das canvas mit der 3D-Grafik angezeigt wird. In dieser Funktion werden nacheinander die Funktionen initGL, initShaders, initBuffers, initTextures und tick aufgerufen.

Die Funktion initGL überprüft ob WebGL auf dem Client unterstützt wird und füllt im Erfolgsfall das GL-Objekt ab. In der Funktion initShaders werden die Shaders kompiliert und an das GL-Objekt angehängt. In initBuffers werden die Koordinaten für das Objekt in ArrayBuffers gefüllt und dem GL-Objekt angehängt. Dasselbe geschieht in initTextures mit den Textures. Textures sind Bilder, welche auf die 3D-Grafik gelegt werden.

Die tick-Funktion wird in einer Endlosschleife (requestAnimFrame) aufgerufen und zeichnet die Grafik mittels drawScene neu auf den Bildschirm.

Oracle Tabelle in einen anderen Tablespace verschieben

2011-07-13T11:24:00.000+02:00

Das Verschieben einer Tabelle von einem Tablespace in einem anderen sollte nur in Ausnahmefällen erfolgen. Dies kann z.B. notwendig sein, wenn die Performance drastisch sinkt. Sämtliche Indizes dieser Tabelle werden gelöscht und müssen neu erstellt werden.

alter table [schema].[ursprungs_tabelle] move tablespace [ziel_tablespace];

Die Indizes müssen neu gebildet werden.

alter index [schema].[index] rebuild;

Rails Migrations mit Oracle Enhanced Adapter

2011-07-07T12:47:00.000+02:00

Da Oracle für verschiedene numerische Datentypen nur den Datentyp NUMBER kennt, kann dies zu Problemen führen, wenn eine Rails-Applikation auf eine bereits bestehende Datenbank zurückgreift. Wird eine neue Tabelle mit Hilfe von Migrations angelegt, werden die Datentypen wie folgt zugewiesen:

 :boolean => number(1)  
 :integer => number(38)  
 :float => number  
 :decimal => decimal

Sind Integer-Werte in der bestehenden Datenbank mit NUMBER ohne Grössenangabe definiert, werden diese in der Rails-Applikation standardmässig als BigDecimal behandelt. Dies kann sich fehlerhaft auf die Applikation auswirken (Darstellungsprobleme, Vergleichsabfragen etc.).

Um das Problem zu lösen, können verschiedene Ansätze gewählt werden:

Wenn möglich, sollte der Datentyp auf der Datenbank angepasst werden (z.B. NUMBER(12)).
Mit der Option

 emulate_integers_by_column_name

kann eingestellt werden, dass alle Datenbankfelder, welche auf ID enden, in der Applikation als Fixnum behandelt werden. Dazu kann die Datei config/initializers/oracle_enhanced.rb angelegt und mit folgendem Code abgefüllt werden:

 ActiveRecord::ConnectionAdapters::OracleEnhancedAdapter.emulate_dates_by_column_name = true

Um die Einstellungen global zu ändern, kann die Methode is_integer_column aus der Klasse OracleEnhancedAdapter überschrieben werden.

Müssen nur spezifische Attribute angepasst werden, können für diese im Model die Getter-Methode überschrieben werden.

 def attr   
  self[:attr].to_i if self[:attr].kinf_of? Numeric   
  self[:attr]  
 end

jQuery Mobile Beta 1 veröffentlicht

2011-06-21T20:53:00.000+02:00

Das JQuery Mobile Team hat die Beta 1 Version veröffentlicht. Es wurde viel Arbeit in Kompatibilität, Geschwindigkeit und Erweiterbarkeit gesteckt. Die Version 1.0 ist für den späten Sommer geplant. Bis dahin werden weitere Betaversionen in einem höheren Rhythmus veröffentlicht.
Die Kompatibilität wurde auf Blackberry 5 und Opera Mini ausgedehnt. WP7 wurde bereits in der Alpha 4 unterstützt.

Mehr dazu im offiziellen Blog-Post

Tutorial - Facebook Fanseiten Pinnwand auf Contao-Webseite einbinden

2011-06-17T09:13:00.000+02:00

Nachfolgend eine Anleitung, wie man die Pinnwand einer Facebook-Fanseite in eine Webseite einbindet, die mit Contao administriert wird.

1) Dateien downloaden und Access Token generieren
Die Dateien von http://www.neosmart.de/social-media/facebook-wall downloaden und entpacken. Bei der Live Demo den Access Token generieren lassen, dazu muss man im Facebook eingeloggt sein.

2) Einstellungen bearbeiten
Die Datei „jquery.neosmart.fb.wall.js“ öffnen. Am Ende der Datei lassen sich die Einstellungen bearbeiten. Die wichtigsten Einstellungen:
id: Name der Fanseite, beispielsweise „fanseite“ bei www.facebook.com/fanseite
accessToken: Den generierten Access Token einfügen

3) Dateien hochladen und einbinden
Für die beiden javascript Dateien unter plugins den Ordner fbwall erstellen. Diese Dateien im entsprechenden Template einbinden:

 <script src="plugins/fbwall/jquery-1.6.1.min.js" type="text/javascript"></script>  
 <script src="plugins/fbwall/jquery.neosmart.fb.wall.js" type="text/javascript"></script>

Die css Datei beispielsweise in den Ordner „tl_files/css“ hochladen und einbinden:

 <link href="tl_files/css/jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>

Die beiden Bilder loader-small.gif und like.gif gemäss der css Datei ins richtige Verzeichnis hochladen.

4) javascript im Template einfügen
Folgenden javascript Code in das Template einfügen :

 <script type="text/javascript">  
 $(function(){  
 $('#fb_wall').fbWall({id:'',accessToken:''});  
 });  
 </script>

Den Access Token auch hier einfügen. Für die id http://graph.facebook.com/fanseite
aufrufen.

5) html einfügen
Im entsprechenden Artikel ein Inhaltselement html erstellen und dort

 <div id=“fb_wall“></div>

eintragen.