Plotten einer Funktion im R3 direkt im Browser mit MathBox

Einleitung

Für den Matse-Internetauftritt möchten wir gern etwas interessantes aus der Welt der Mathematik einbinden. Schnell kam die Idee, eine Funktion im R3 zu plotten. Und dies nicht nur als Bild oder Animation darzustellen, sondern interaktiv als drehbares 3D-Objekt.

Umsetzung

Nach intensiver Recherche fanden wir MathBox, ein Framework, das auf ThreeJS aufsetzt und viel Boilerplate abstrahiert. Wir nutzen eine feststehende Kamera, die auf den Punkt 0, 0, 0 im Raum blickt. Hier plotten wir die Funktion auf einer Ebene von 192 Einheiten Breite und Höhe. Mit der Maus kann der gesamte Plot gedreht und aus jeder Perspektive betrachtet werden. Das Rendering läuft dank WebGL direkt auf der Grafikkarte, also hardwarebeschleunigt ab. Alternativ ist ein Softwarerendering möglich, das kein OpenGL benötigt und den HTML5-Canvas nutzt.

Three.js bietet grundsätzlich drei verschiedene vordefinierte Shader an: Basic, Lambert und Phong. Die beiden Letzteren bieten Lichteffekte wie Reflektion. Dafür werden allerdings Lichtquellen benötigt und es müsste eine komplexe Szene erstellt werden. So entschieden wir uns für den Basic-Shader. Hier wird unabhängig von eventuellen Lichtquellen jede Oberfläche angezeigt.

Texturen lassen sich einfach als PNG einbinden und auf die geplottete Oberfläche legen.

 

Unbenannt

Codebeispiele

Ausblick

Wir möchten darauf hinaus, dass man im ersten Schritt eine Auswahl an Funktionen hat die man plotten lassen kann. Der nächste Schritt wäre dann eine kompakte UI mit der interaktiv eine Funktion eingeben werden kann.

Dokumentation:

von Torben Binder, Ann-Christin Müller, Sebastian Müller. MTS31, OSZ IMT