» de.DX9 Rendering
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

de.DX9 Rendering

English | French | Mandarin | Italian

The original english version of this page is newer and may contain information this translation does not have! Click here to view the english version.

** Koordinaten Systeme


Im folgenden Tutorial wollen wir eine einfache Szene im Renderer (DX9) ? kreieren.

Öffnen sie zunächst einen neuen Patch:
Als erstes benötigen wir den Renderer (DX9) ?. Gehen sie sicher, dass es nicht die GDI oder TTY Version ist. Der Rechner braucht vielleicht einen Moment um DirectX zu laden. Nun erscheint ein schwarzes Fenster mit dem Titel „DirectX Renderer”. Als nächstes brauchen wir einen Renderknoten: Wir wählen Quad (DX9) aus der Liste. Nur DX9 Render-Knoten werden im Renderer (DX9) dargestellt.
Die GDI, TTY und DX9 Rendersysteme sind unabhängig voneinander, sie können nicht gemischt werden. Es ist jedoch möglich mit GDITexture (EX9.Texture) den Inhalt eines GDI Fensters als Textur für ein Objekt im DX9 Renderer zu benutzen.

Das „Quad“ erscheint als ein weisses Rechteck in seiner Standardgrösse.
Um Objekte bewegen zu können benötigen wir einen oder mehrere „Transform-Knoten“.

Erstellen sie ein paar Transform-Knoten:
Scale (Transform), Translate (Transform), Rotate (Transform), Transform (Transform 2d) und ein Trapeze (Transform):

Verbinden sie den Output von Scale (Transform) mit dem Quad (DX9) und verändern sie die X und Y Pins des Scale Knotens. Das Quad ändert die Höhe und Breite. Löschen sie die Verbindung wieder und sie werden feststellen, dass das Quad in seine ürsprüngliche Position zurück springt.

Transformationen sind eine Ausnahme der Regel! Normalerweise bleibt der aktuelle Wert eines Pins erhalten wenn eine Verbindung gelöscht wird. Der Grund dafür, und warum dies der Preis für einen
wesentlich grösseren Vorteil ist, wird in einem späteren Kapitel genauer erläutert.

Versuchen sie nun das gleiche mit den Translate (Transform) und Rotate (Transform) Knoten. Mit ihnen können sie das Quad verschieben und drehen. Da die Knoten hauptsächlich für 3 Dimensionen ausgelegt sind, haben manche Pins keine Auswirkung, weil wir noch keine Kamera angeschlossen haben. Ignorieren sie diese Pins und machen sie sich mit den funktionierenden vertraut.

Verbinden sie als nächstes mehrere Transformknoten:

Was bedeutet das ? Es ist wichtig zu verstehen, dass dies eine Folge von Operationen ist. Bei diesem Beispiel wird zuerst Skaliert, dann verschoben, und dann gedreht. Wenn sie etwas darüber nachdenken und eine Weile damit herumexperimentieren, merken sie schnell, dass die Abfolge tatsächlich eine Rolle spielt und dass es wichtig ist Dinge in der richtigen Reihenfolge zu tun.
Versuchen sie als nächstes den Transform (Transform 2D) Knoten:

Der Transform (Transform 2d) Knoten besitzt alle Parameter die zum Arbeiten in 2 Dimensionen nötig sind. Dieser Knoten ist lediglich eine Abkürzung für die oft benötigten Operationen. Anstatt sich mit Scale, Translate und Rotate Knoten herumzuschlagen, können sie alle Operationen mit dem Transform (Transform 2d) Knoten erledigen.

Es gibt eine weitere Version dieses Knotens, Transform (Transform 3d). Dieser Knoten hat wesentlich mehr Eingänge und erlaubt es damit ein Objekt im Raum zu plazieren. Doch gedulden sie sich noch etwas, ohne eine Kamera kommt noch kein richtiges 3D-Feeling auf.

Schauen sie sich, wenn sie wollen, noch den Trapeze (Transform) Knoten an, er verformt das Quad in ein Trapez.
Löschen sie nun alle Transfromationen wieder: Warum heisst dieser Knoten Quad?
Quad steht sicherlich für Quadrat – aber offensichtlich stellt das Bild kein Quadrat dar: Der Quad Knoten zeichnet offensichtlich ein Rechteck. Womit hängt das zusammen?

Koordinaten Systeme

Um dies zu verstehen, werfen wir einen Blick auf das Koordinatensystem des Renderers:

Der Fensterbereich hat ein Standardintervall von -1 bis +1 in beiden Dimensionen.

Es gibt ausserdem noch eine Z-Koordinate, die nicht in das Diagramm eingezeichnet ist. Die positive Z-Achse zeigt in den Bildschirm. Dies ist als linkshändiges Koordinatensystem bekannt. Da die
Standardprojektion eine Parallelprojektion ist, werden sie die Z-Koordinate in den folgenden Beispielen kaum wahrnehmen.

Der Ursprung mit den Koordinaten (0, 0) ist in der Mitte des Fensters.
Ein Standard-Quad hat eine Höhe und Breite von 1 und die Mitte bei (0, 0). Deshalb reicht das Quad von -0.5 bis +0.5 in beiden Dimensionen.
Ändern sie die Form des Renderers in ein sehr breites Rechteck:

Sie sehen wie das Quad ebenfalls mehr und mehr gestreckt wird, weil das Koordinatensystem in der selben Weise wie das Fenster gestreckt wird.

Die X/Y-Proportionen des Rendering sind also von der Grösse des Fensters abhängig: Wenn sie das Fenster zu einem Quadrat formen, wird auch das Quad zu einem Quadrat.
Aber wie können wir das Quad sonst quadratisch machen ? Einen quadratischen Renderer zu haben ist zwar ganz nett, doch wenn man auf Vollbild umstellt, wird man höchstwahrscheinlich ein Seitenverhältnis von 3:4 haben. Eine einleuchtende Lösung ist es, ein Scale Knoten mit dem Quad zu verbinden:

Versuchen sie es: Löschen sie den Renderer, und erstellen sie einen neuen Renderer (DX9), die Standardproportion ist 3:4, und verbinden sie einen Scale Knoten mit dem Quad:
Da das Seitenverhältnis 3:4 ist, müssen wir die X-Koordinate mit 75 . 0 43 = skalieren um ein Quadrat erhalten. Versuchen sie es.

Aber das klingt mühsam – mit jedem Renderknoten im Patch ein Scale zu verbinden.
Die Lösung ist es, den „Projection Transform” Pin des Renderers zu nutzen: ein Transformationsknoten an diesem Pin wirkt auf alle Objekte im Renderer:
Wenn sie eine Transformation auf diesen Pin anwenden, sieht das Ergebnis aus, als ob die Transformation auf alle dargestellten Objekte angewendet wurde.

Sehr interessant, das Quad sieht genau so aus wie vorher. Aber was passiert hinter den Kulissen ?
Sehen sie sich das Diagramm unten an: Wenn wir Scale mit dem Renderer verbinden, wird das ganze Koordinatensystem transformiert. Der Punkt (x=1, y=1), der vorher die obere rechte Ecke war, ist nun in den sichbaren Bereich gewandert.

Verbinden sie nun einen Translate Knoten mit dem Scale: Sie sehen wie sie das Quad bewegen können. Scale- und Transformationsknoten an diesem Pin können als eine primitive Kamera in der Szene aufgefasst werden. Wenn sie etwas mit diesem Pin verbinden, manipulieren sie nicht die Objekte selbst, sondern die Kamera, die sie darstellt.

Texturen

Nach diesen abstrakteren Konzepten, wollen wir nun ein etwas interessanteres Bild auf den Schirm bringen. Säubern sie zunächst das Patch, aber lassen sie Scale am Renderer.
Dann müssen wir den FileTexture (EX9.Texture) Knoten erstellen und mit dem Quad verbinden. Klicken sie mit der Rechten Maustaste auf den „FileName“ Pin und wählen sie ein Bild von der Festplatte. FileTexture kann BMP, JPG, TIF und TGA in den Speicher laden – In diesem Beispiel werden wir das Bild „flower four.jpg“ aus dem girlpower/images Ordner verwenden.

Verbinden sie nun ein Transform (Transform 2d) mit FileTexture (EX9.Texture). Sie sehen, wie sie so das Bild auf dem Quad bewegen und zoomen können.

Auf diese Weise ist es auch möglich heruszuzoomen, um viele Wiederholungen der Textur auf dem Quad zu bekommen: Stellen sie ScaleX und ScaleY auf ca. 5:

Erstellen sie nun einen Address (EX9.SamplerState) Knoten und bringen sie ihn am FileTexture (EX9.Texture) an. Die Kategorie SamplerState bedeutet, dass dieser Knoten mit dem Teil der ihrer Grafikkarte interagiert, der die Eigenschaften des Texturierungs-Prozesses definiert.

Es gibt hier noch eine Reihe weiterer Knoten, die aber hier noch nicht besprochen werden sollen. Um verschiedene Eigenschaften gleichzeitig einzustellen, verbinden sie mehrere SamplerState-Knoten in
einer Reihe an einen Texturknoten, die Abfolge spielt hier keine Rolle.

Versuchen sie nun die verschiedenen Parameter von Address (EX9.SamplerState). Abhängig vom eingestellten Abbildungsmodus sehen sie verschiedene Muster, die die Textur unterschiedlich darstellen.

Spreading

Natürlich können wir Spreads auch auf 3d-Objekte anwenden. Bauen sie folgendes Patch auf:

Stellen sie SpreadCount von LinearSpread (Spreads) auf 6 und verändern sie anschliessend die Werte der Input Pins am Translate (Transform)-Knoten. Die Quads bewegen sich aus der Mitte heraus.

Blending

Wie sie bemerken, addieren sich die Farben, wenn mehrere Objekte sich überlagern, ähnlich wie mehrere Diaprojektoren sich überlagern würden (Da die Helligkeit eines Bildschirms beschränkt ist, versucht DirectX sehr helle und intensive Farben mit Weiss zu simulieren). Dies unterscheidet sich vom GDI Modus, in dem sich die Farben einfach gegenseitig überschreiben. Erstellen sie einen Blend (EX9.RenderState) und verbinden ihn mit dem Quad (gehen sie sicher, nicht den Blend (EX9.RenderState Advanced) gewählt zu haben). Am Input können sie die verschiedenen Blend Modi auswählen. Diese sind den Ebenenoperationen in Programmen wie z.B. Photoshop ähnlich. Probieren sie die verschiedenen Modi aus und bleiben bei einem ihrer Wahl. Die Verwendung der RenderState Knoten ist den SamplerState Knoten sehr ähnlich.

Eine andere interessante Option ist es, dem Quad eine Farbe zu geben. Der Effekt ist vergleichbar mit einem Farbfilter auf einer Lampe.

3-D

Bis jetzt haben wir 3D noch nicht wirklich erforscht. Wir haben einige Pins für ZWerte gesehen, sie haben aber bisher nichts spektakuläres bewirkt. Ausserdem haben wir den den Projection Transform Pin am Renderer kennengelernt.
In diesem Abschnitt wollen wir herausfinden, wie dieser Pin dazu verwedet werden kann eine Zentralperspektive zu erzeugen. Dabei wird das Koordinatensystem des Renderers stark verzerrt, aber dies erlaubt uns eine dreidimensionale Ansicht der Szene. Das folgende Diagramm zeigt ein Beispiel für ein typisches Koordinatensystem.

Erstellen sie einen Perspective (Transform)-Knoten. Er repräsentiert eine spezielle Transformation, die die grundlegendesten inneren Funktionen einer zentralperspektivischen Kamera ausführt:

Sobald sie den Perspective (Transform) Knoten wie auf dem obigen Bild verbinden, wird der Bildschirm schwarz.
Wieso das?
Es ist die Folge einer simplen Kamera Funktion: Objekte werden grösser, wenn sie näher kommen. Wir haben bis jetzt noch keine Distanz zwischen dem Objekt und der Kamera angegeben. Wenn wir einfach nur einen Perspective Knoten erstellen, plazieren wir die Kamera direkt in das Objekt. Deshalb ist das Objekt unendlich gross und nichts wird angezeigt.
Lassen sie uns also einen kleinen Abstand herstellen: Fügen sie nach dem Perspective (Transform) Knoten ein Translate (Transform) ein und stellen Z auf ungefähr 1. Sobald sie den Wert ändern, erscheint das Bild wieder, weil wir die Kamera damit relativ zu unserer virtuellen Szene bewegen.

Verändern sie nun wieder die Werte der Rotate (Transform) und Translate (Transform) Knoten des Quads; die Objekte bewegen sich im dreidimensionalen Raum.

Doch irgendwie sieht diese Struktur in 3D etwas langweilig aus, nur einemzweidimensionale Scheibe. Um dies zu verbessern, fügen sie einen Rotate (Transform) zwischen Translate (Transform) und Quad (DX9) ein. Das Einfügen eines Rotate Knoten an dieser Stelle bedeutet, dass die Objekte erst gedreht werden, nachdem sie vervielfacht, gemeinsam gedreht und transformiert wurden.

Stellen sie nun den X Input des neuen Rotate (Transform) auf etwa 0.3 und beobachten sie wie sich die einzelnen Quads drehen.

Depth-Buffer

Wählen sie jetzt Blend am Pin DrawMode des Blend (EX9.RenderState)-Knotens, sehen sie sich das Ergebnis an:

Irgendetwas stimmt mit dem Bild nicht. Es ist nicht klar, welche Objekte weiter vorne oder hinten sind. Offensichtlich verdecken sich die Objekte nicht so wie man es erwarten würde.
Warum nun das?
Normalerweise werden in vvvv die Objekte in einer Reihenfolge gezeichnet, die durch die Priority Pins der Objekte bestimmt wird. Zuerst werden alle Objekte nach ihrer Priorität geordnet und dann eins über dass andere gezeichnet.

Objekte, die später gezeichnet werden, überdecken also die Objekte die vorher gezeichnet wurden. In unserem Beispiel generiert der Spread viele Quad Zeichnungen: Die ersten Slices werden zuerst gezeichnet; liegen also hinter den letzten. Bedauerlicherweise ist unsere Struktur ein Kreis und hat kein klares Vorne oder Hinten, also überdecken Objekte, die später gezeichnet werden, Dinge, die
sichtbar sein sollten.
Die Lösung des Problems ist eine Technik die Tiefen-Pufferung (engl. Depth Buffering) genannt wird. Um sie zu aktivieren stellen sie den Depth Buffer Pin des Renderers auf 1. Sobald sie den Tiefen-Puffer eingeschaltet haben, werden sie feststellen, dass die Überlagerungen richtig ausgeführt werden.

Die Überlagerungen funktionieren solange richtig, wie sie keine transparenten Objekte benutzen. Das ist eine bekannte Einschränkung des Depth Buffer Algorithmus. Auf der anderen Seite ist er aber
auffallend elegant, unglaublich schnell und auf allen modernen Grafikkarten verfügbar.

Während die Struktur immernoch etwas seltsam aussieht, ist sie nun jedoch völlig verständlich.

Die GirlPower SoftImageTM Kamera

Der Umgang mit Kamera Funktionen scheint recht komplex zu sein, und meistens wollen sie sich wahrscheinlich lieber mit ihren Objekten im Renderer beschäftigen, als eine Kamera zu programmieren. Aus diesem Grund steht ihnen bei vvvv ein Patchzur verfügung, dass an die Kamera Funktionen des 3D-Modelling Programms SoftImage angeleht ist.
Um die Kamera zu benutzen, müssen sie im Hauptmenü den Befehl „Open in Patch“ (CTRL+SHIFT+O) ausführen und das Patch Camera (Transform Softimage).v4p im Ordner modules öffnen (auf diese Weise können sie auch beliebige andere Patches als Subpatches verwenden, IOBoxes im Patch stellen, am Knoten dann die Pins dar). Drücken sie ALT+3, um das aufgesprungene Patch in seinem Knoten zu verbergen, ALT+1 öffnet es wieder. Rechtsklick auf den Knoten öffnet und schliesst ebenfalls das Subpatch (mehr über Fenster Modi im Abschnitt Subpatches ). In den neuen Versionen von vvvv können Patches die sich im Ordner modules befinden (wie z.B. die Kamera) auch direkt über die Knotenliste als Subpatch geöffnet werden.

Um die Kamera zu kontrollieren, müssen sie bestimmte Tasten drücken und gleichzeitig die Maus über das Rendering Fenster ziehen.
Es gibt die folgenden Kommandos:

O Orbit Drehen um einen vorgegeben Punkt
Z Zoom Rechte Maustaste: Zoom (nach oben/unten ziehen)<br>Linke Maustaste:Die Kamera verschieben
P Position Die Kamera noch vorne/hinten bewegen<br>Rechte Maustaste: Schnell<br>Linke Maustaste: Langsam
R Reset Reset der Ansicht auf die standard Startposition

Gleichzeitig ist es interessant das Patch modules/AxisAndGrids.v4p in das Projekt mit einzubinden. Dafür gibt es ebenfalls praktische Tastatur Befehle:

A Axis Koordinatenachsen anzeigen<br>X-Achse: rot<br>Y-Achse: grün<br>Z-Achse: blau
G Grids Zeigt ein Gitter in der X/Y-Ebene an. <br>Beachten sie,dass in der standard Ansicht der Kamera das Gitter nur als weisse Linie erscheint.

übersetzt von tf

anonymous user login

Shoutbox

~4h ago

joreg: vvvvTv S02E01 is out: Buttons & Sliders with Dear ImGui: https://www.youtube.com/live/PuuTilbqd9w

~6d ago

joreg: vvvvTv S02E00 is out: Sensors & Servos with Arduino: https://visualprogramming.net/blog/2024/vvvvtv-is-back-with-season-2/

~7d ago

fleg: hey there! What's the best tool for remote work? Teamviewer feels terrible. Thanks!

~20d ago

joreg: Last call: 6-session vvvv beginner course starting November 4: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-i/

~1mth ago

joreg: Missed the last meetup? You can rewatch it here: https://www.youtube.com/live/MdvTa58uxB0?si=Fwi-9hHoCmo794Ag

~1mth ago

theurbankind: When is the next big event, like node festival ?

~1mth ago

~1mth ago

joreg: Join us for the next vvvv meetup on Oktober 17th: https://visualprogramming.net/blog/2024/25.-vvvv-worldwide-meetup/

~1mth ago

joreg: 6 session beginner course part 2 "Deep Dive" starts January 13th: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-ii/