3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

HTML5 und JavaScript bieten alle Funktionen, um komplexe Grafiken und Animationen im Browser zu realisieren. Die JavaScript-Bibliothek „seen.js“ bietet hierfür eine umfangreiche Auswahl an Möglichkeiten, um aufwändige 3D-Welten im Browser entstehen zu lassen. „seen.js“ ist unabhängig von jQuery oder anderen Bibliotheken und erstellt eindrucksvolle 3D-Objekte und Szenerien auf der Basis von HTML5-Canvas und SVG. 3D im Browser, ganz ohne Plugin…

seenjs

So entwickeln Sie mit Seen.js aus einfachen Flächen komplexe Szenerien

Der Einstieg in „seen.js“ ist nicht einfach – so vielseitig ist die Bibliothek. Dafür sind die Möglichkeiten umso beeindruckender. Starten wir am Anfang: zunächst muss die JavaScript-Bibliothek eingebunden werden. Auch wenn „seen.js“ ohne weitere Abhängigkeiten auskommt, sollte CoffeeScript ebenfalls mit eingebunden werden. Denn die komplette Dokumentation von „seen.js“ und alle Beispiele basieren auf CoffeeScript. Nachfolgend legen wir eine Zeichenfläche an – also ein „<canvas>“- oder „<svg>“-Element. Anschließend erfolgt die Programmierung per CoffeeScript.

<canvas width="640" height"425" id="seenjs"></canvas>

<script type="text/coffeescript">
…
</script>

Im Beispiel legen wir ein Canvas-Element an, welches als Zeichenfläche für „seen.js“ genutzt werden soll. Die Grundlage für 3D-Objekte sind die sogenannten „Shapes“, also Flächen. Diese „Shapes“ können in Größe, Farbe und Form definiert werden. Neben der Entwicklung eigener „Shapes“ bietet „seen.js“ auch einige einfache, vordefinierte Formen an. So lassen sich unter anderem Kugeln („spheres“) und Tetraeder („tetrahedron“) verwenden.

kugel = seen.Shapes.sphere(1).scale(100)

Im Beispiel wird per „Shapes.sphere()“ eine einfache Kugel definiert, die aus mehreren dreieckigen Flächen zusammengesetzt ist. Die Zahl innerhalb der Methode gibt an, wie komplex die Kugel sein soll. Je größer die Zahl ist, desto größer ist die Anzahl der dargestellten Flächen. Per „scale()“ geben wir der Kugel ihre Größe. Der Wert „1“ stellt dabei die kleinstmögliche Größe dar.

seenjs_sphere
Zwei Kugeln mit unterschiedlich vielen Flächen

Im nächsten Schritt definieren wir die Farbe der Kugel.

for flaeche in kugel.flaechen
  flaeche.fill.color = seen.Colors.rgb(0, 145, 190, 255)
  flaeche.fill.metallic = true
  flaeche.fill.specularColor = flaeche.fill.color

Im Beispiel wird per „for“-Schleife die Farbe jeder einzelnen Fläche der Kugel zugewiesen. Über die Eigenschaft „color“ legen wir dann die Farbe fest. Dabei gibt es mehrere Möglichkeiten, eine Farbe zu definieren. Per „Colors.rgb()“ wird ein Farbton per RGB inklusive eines Alphawertes ausgezeichnet. Alternativ kann die Farbe auch per „Colors.hrs()“ angegeben werden. Die Beigabe des Parameters „metallic“ bewirkt, das die Fläche metallisch reflektiert. In diesem Fall wird statt einer einfachen Lichtreflexion, die per „specularColor“ festgelegte Farbe als Reflexionsfarbe verwendet.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

seenjs_sphere_metallic
Zwei Kugeln – ohne und mit Metallic-Effekt

Im nächsten Schritt wird die Kugel per „Models.default().add()“ einem Modell hinzugefügt.

objekte = seen.Models.default().add(kugel)

Anschließend wird die Szenerie definiert, in welche das Modell – hier die Kugel – hineingesetzt wird.

szenerie = new seen.Scene
  model : objekte
  viewport : seen.Viewports.center(640, 425)

Im Beispiel wird die Kugel der Szene über die Variable „objekte“ hinzugefügt. „Viewports.center()“ definiert, wo die Kugel innerhalb der Szene zentriert werden soll. Im Beispiel wollen wir die Kugel innerhalb der Zeichenfläche zentrieren, weshalb wir die Maße des „<canvas>“-Elementes übergeben.

Im letzten Schritt muss die Szenerie einschließlich der Kugel gerendert und dem Canvas-Element zugewiesen werden.

seen.Context("seenjs", szenerie).render()

Dies geschieht per „Context()“-Methode. Übergeben werden die ID des Canvas-Elements sowie die Szenerie. Zuletzt wird alles per „render()“ auf die HTML5-Canvas gezeichnet.

Wie Sie mit Seen.js mehrere 3D-Objekte erstellen

In einer Szene können wir beliebig viele 3D-Objekte platzieren. Dazu erstellen wir zunächst ein neues „Shapes“-Objekt.

pyramide = seen.Shapes.tetrahedron()
pyramide.scale(50)
seen.Colors.randomSurfaces2(pyramide)

Im Beispiel definieren wir per „Shapes.tetrahedron()“ eine einfache dreiseitige Pyramide und bringen sie per „scale()“ auf eine passende Größe. Die Farbe wird per „Colors.randomSurfaces2()“ per Zufall ausgewählt. Im nächsten Schritt weisen wir die Pyramide per „append()“ und „add()“ der Variablen „objekte“ zu. In dieser ist ja bereits die Kugel enthalten.

objekte.append().translate(-25, 25, 100).add(pyramide)

Mit der „translate()“-Methode platzieren wir die Pyramide in Relation zur Kugel. Ohne Angabe von „translate()“ erhält die Pyramide denselben Mittelpunkt wie die Kugel.

seenjs_append
Zwei Objekte innerhalb einer Szene

Mit den Methoden „rotx()“, „roty()“ und „rotz()“ lassen sich einzelne oder alle Objekte im Raum drehen.

pyramide.rotx(30)
objekte.roty(90)

Im Beispiel wird die Pyramide um 30 Grad auf der X-Achse gedreht. Gleichzeitig drehen alle Objekte der Szenerie um 90 Grad auf der Y-Achse.

seenjs_rot
Gedrehte Objekte

3D-Animationen mit Seen.js

Die definierten Objekte können nun mit wenig Aufwand innerhalb der Szenerie animiert werden. Dazu fügen wir der „render()“-Methode einfach noch die „animate()“-Methode hinzu. Über ein Event wird schließlich definiert, wie die Animation verlaufen soll.

seen.Context("seenjs", szenerie).render().animate()
  .onBefore((zeit, deltazeit) -> objekte.rotx(deltazeit * 1e-4).roty(0.5 * deltazeit * 1e-4))
  .start()

Im Beispiel definieren wir per „onBefore()“ ein Event, welches vor jedem Framewechsel aufgerufen wird. Übergeben werden die Zeit sowie die Deltazeit. Mit der Deltazeit lässt sich die Geschwindigkeit der Bewegung festlegen. Im Beispiel bringen wir alle Objekte der Szene per „rotx()“ und „roty()“ in Bewegung. Sie drehen sich um die eigene Achse, wobei die Rotation um die Y-Achse schneller abläuft.

So erstellen Sie mit Seen.js eigene Objekte

In „seen.js“ gibt es mehrere Möglichkeiten, eigene Objekte zu erstellen. Eine Möglichkeit ist die „extrude()“-Methode. Hierbei werden Flächen im dreidimensionalen Raum definiert, die zusammen ein Objekt bilden.

pfeil = seen.Shapes.extrude([
  seen.P(0, 0, 0)
  seen.P(1, 1, 0)
  seen.P(1, 0.5, 0)
  seen.P(2, 0.5, 0)
  seen.P(2, -0.5, 0)
  seen.P(1, -0.5, 0)
  seen.P(1, -1, 0)
 ], seen.P(0, 0, 0))

Im Beispiel erstellen wir per „Shapes.extrude()“ einen einfachen Pfeil. Die Koordinaten geben wir mit der Methode „P()“ an. Sie enthält je drei Koordinaten, um je einen Punkt auf der X-, Y- und X-Achse des Raums zu spezifizieren. Für komplexere Formen unterstützt „seen.js“ das Wavefront-Format. Hierbei handelt es sich um ein Dateiformat zum Speichern von geometrischen Formen. Es wird von vielen Animationsprogrammen verwendet und bietet sich daher gut an.

$.get "irgendwas.obj", {}, (inhalt) ->
  irgendwas = seen.Shapes.obj(inhalt, false)

Im Beispiel laden wir per jQuery eine Objektdatei im Wavefront-Format. Der Inhalt der Datei wird an die Methode „Shapes.opj()“ weitergegeben. Diese Methode interpretiert das Format und stellt daraus ein 3D-Objekt für „seen.js“ dar.

Die vielen weiteren Möglichkeiten der Seen.js

„seen.js“ bietet zahlreiche weitere Möglichkeiten, um Objekte zu erstellen, ihr Aussehen zu verändern und sie in Bewegung zu bringen. So gibt es etwa die Möglichkeit, eine Szenerie aus verschiedenen Blickwinkeln zu betrachten. Außerdem können unterschiedliche Lichtquellen definiert werden. Dank verschiedener Events besteht die Möglichkeit, auf Ereignisse wie Mausbewegungen und -klicks zu reagieren.

Seen.js: Kostenlos und gut dokumentiert

„seen.js“ steht unter der Apache-Lizenz. Das heißt, die Bibliothek steht jedem zur freien Verfügung. Auf der Website von „seen.js“ gibt es etliche Beispiele, die die Möglichkeiten von „seen.js“ gut darstellen. Trotz umfangreicher Dokumentation ist der Einstieg nicht einfach. Das Potenzial von „seen.js“ ist jedoch hoch. Vor allem, aber nicht nur in Anbetracht des aktuellen Low-Poly-Trends lohnt sich ein Blick in die Bibliothek, da vor allem diesem Trend folgend einige sehr vorzeigbare Grafiken und Animationen erstellt werden können.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
NodeCode
Gast
Seen.js war mir bis jetzt noch nicht bekannt, scheint aber ganz interessant zu sein. Vor allem, dass man damit sowohl die HTML5-Canvas- als auch die SVG-Technologie verwenden kann. So etwas ist mir von keiner ähnlichen JavaScript-Bibliothek bekannt. Ich habe Seen.js gleich mal zu meinen 3D-Alternativen für die Canvas-Zeichnung hinzugefügt, auch wenn ich mir schwer in der Entscheidung tat, ob die Bibliothek nun eher unter 3D oder SVG einzuordnen ist. Schließlich macht sie ja beides. Aber da man entweder HTML5-Canvas oder SVG verwenden kann, während es in beiden Fällen immer 3D ist, trifft 3D wohl auch besser zu. In diesem Sinne… Read more »
trackback

[…] Dabei stellt jedes Element eine Seite der Form dar. Per CSS3 werden die einzelnen Formen dreidimensional zueinander […]

trackback

[…] Cardboard ermöglicht erlebbare 3D-Szenerien. Dazu ist die Handhabe von A-Frame denkbar einfach. Während du bei anderen 3D-Frameworks per JavaScript programmieren musst, läuft hier alles sehr einfach über eine eigene […]

wpDiscuz