201029Mär

JavaScript: Realistische Beleuchtung mit Canvas

Zwischendurch gibt es wieder Inspiration für 3D-Begeisterte: Johnas Wagner hat auf seinem Blog einen interessanten Artikel über Normal Mapping mit JavaScript verfasst, in dem er an einem beeindruckenden Beispiel die "Normal Mapping"-Technik demonstriert. Dabei wird über ein Bild (oder eine Textur) eine zweite Version des Bildes gelegt, welche detaillierte Tiefeninformationen enthält. In dem interaktiven Beispiel kann ein Leuchtpunkt durch die Maus bewegt werden, was einen räumlichen Eindruck vermittelt.

Normal Mapping with Javascript and Canvas Tag

Der direkte Lichteinfall wird dabei in Echtzeit durch Phong Shading dargestellt — der Entwickler gewährt Interessierten Einblick in den Quellcode seiner Beleuchtungs-Demonstration. Sein "Light.js"-Skript ist knappe 150 Zeilen groß und zeigt sehr schön, was mit Canvas möglich ist. Allerdings macht sich die benötigte Rechenleistung auch bei relativ neuen Computersystemen bemerkbar.

RSS-Feed abonnieren Bookmark bei Del.icio.us