Um grafische Elemente in Web/OpenGL auf der Leinwand positionieren zu können, bedarf es größeren Aufwands, als wir es von 3D- und Vektoreditoren gewohnt sind – und einen Trip in die Welt der Mathematik.
Der Zeichenbereich von OpenGL wird von drei Achsen (wovon ich die Tiefen-Achse ignorieren kann) definiert, die je von -1 bis 1 laufen. Die Herausforderung im Positionieren besteht also hauptsächlich darin, die Koordinaten von zu Zeichnendem in diesen Bereich zu übertragen. Wenn wir von einem Koordinatensystem ausgehen, das bei 0 beginnt und bei 10 endet, wird der Punkt [10, 20] beispielsweise zu [0, 1].
Enter the Matrix
Positionsdaten werden mithilfe von Transformationsmatrizen manipuliert. Aufgrund verblüffender Kniffe der linearen Algebra können Skalierung, Rotation, Verschiebung und Scherung mittels Matrizen gespeichert und angewandt werden.
Die Transformationsmatrix wird auf der CPU erstellt, mit anderen Matrizen multipliziert und dann an den Vertex-Shader übergeben. Beim Rendern wendet die GPU die Transformationen an und zeichnet die gegebenen Daten an der entsprechenden Stelle.
Im Vektoreditor werden die genannten Techniken für Folgendes gebraucht:
- Zoomen/Drehen der Zeichenfläche
- nondestruktives Transformieren (Rotieren, Verschieben, …) von Pfaden
- Effekte bzw. Modifier
Im nächsten Beitrag geht es um das Konzept hinter Bézierkurven und was sie alles können.