Die 2D-Benutzeroberfläche von Cocos Creator 3.x verfügt über eine UIOpacity-Komponente, die die Transparenz der Benutzeroberfläche dynamisch ändern kann, was sehr praktisch ist. Viele Studenten wünschen sich eine solche Komponente für 3D-Objekte, um die Transparenz von 3D-Objekten dynamisch zu steuern und zu ändern. Heute werde ich eine Komponente Opacity3D implementieren, die die Transparenz von 3D-Objekten basierend auf Cocos Creator 3.8 dynamisch ändern kann.
Wie kann ein 3D- Objekt transluzent dargestellt werden?
Bevor wir die Opacity3D-Komponente schreiben, verstehen wir zunächst, wie ein 3D-Objekt durchscheinend angezeigt wird. Tatsächlich ist dieses Prinzip sehr einfach, solange zwei Bedingungen erfüllt sind:
(1) Die Rendering-Warteschlange, in der sich das 3D-Objekt befindet, ist die „transparente Warteschlange“;
(2) Wenn das Fragmentelement eines 3D-Objekts gefärbt ist, liegt die Alpha-Transparenz zwischen (0~1);
Wenn die beiden oben genannten Bedingungen erfüllt sind, ist das 3D-Objekt durchscheinend. Ist es unter Bedingung (2) erforderlich, den Shader zu ändern, wenn die Transparenz der Fragmentfärbung zwischen (0 und 1) liegen muss? Die Antwort lautet „Nein“, da der Standard-Shader von CocosCreator 3.x ein Farbattribut von „mainColor“ bereitstellt. Der Standardwert ist Weiß. Wenn Sie die Transparenz von „mainColor“ ändern, überlagert der Fragment-Shader nach der Übergabe an den Shader den Farbwert von mainColor. Wenn wir also die Transparenz des Objekts ändern möchten, können wir dies durch Ändern von mainColor tun.
Wenn wir Opacity3D selbst schreiben, nutzen wir diese Funktion des Shaders. Wenn der von uns entwickelte Shader keinen MainColor-Mechanismus hat und wir die Opacity3D-Komponente verwenden müssen, können wir den MainColor-Mechanismus zum Shader hinzufügen oder den Code ändern Verwenden Sie ähnliche Farbvariablen.
Spezifische Implementierung der O Pactity3D- Komponente
Suchen Sie das 3D-Objekt, das durchscheinend sein soll, erstellen Sie ein Material und verwenden Sie den integrierten, nicht beleuchteten Shader, der über einen mainColor-Mechanismus verfügt. Setzen Sie die Rendering-Warteschlange des Objektmaterials auf „Transparent“. wie das Bild zeigt
Fügen Sie als Nächstes die Opacity3D-Komponente zum entsprechenden Knoten hinzu und passen Sie deren Transparenz im Editor an, wie unten gezeigt:
Beim Laufen wird der Würfel durchscheinend.
Kernimplementierung der Opacity3D - Komponente
Die Kernimplementierung von Opactity3D ist eigentlich sehr einfach. Beginnen wir mit dem Quellcode (Cocos Creator 3.8):
Das Kernprinzip besteht darin, die Mitgliedsvariable Alpha zu definieren, dann get /set zu schreiben, get den a- Plah- Wert zurückzugeben und set den Alpha- Wert festzulegen und ihn mit dem Material zu synchronisieren. Der Hauptzweck des Schreibens von get /set besteht darin, mit dem zusammenzuarbeiten Mechanismus von t ween . Hier gibt es ein sehr wichtiges Datenelement, isSharedMode. Wir alle wissen, dass, wenn wir die Parameter eines Materials ändern, alle Parameter aller Objekte, die das geänderte Material verwenden, geändert werden. Manchmal haben wir 100 Objekte und vielleicht nur eines davon Wenn ein Objekt die Transparenz ändert und die anderen sich nicht ändern, können wir i sSharedMode auf false setzen , wodurch für jedes Objekt eine separate Materialobjektinstanz erstellt wird.
Kombiniert mit T ween , um die Transparenz von 3D- Objekten schrittweise zu ändern
Wir alle wissen, dass Tween eigentlich ein Vorlagenmechanismus ist. Über einen bestimmten Zeitraum hinweg wird die Aktualisierung verwendet, um ein bestimmtes Attribut kontinuierlich zu ändern, solange das Attribut get/set ist. Wir haben Alphas get/set in Opacity3D implementiert, sodass wir mit Tween zusammenarbeiten können, um Farbverläufe zu erreichen. Der Code lautet wie folgt:
Das war's für den heutigen Austausch. Hier ist der Projektquellcode für das Tutorial. Gleichzeitig habe ich die entsprechenden offenen Kurse auf unserer offiziellen Website veröffentlicht. Die Adresse lautet wie folgt: Sie können sich die spezifischen Video-Tutorials ansehen.
Creator 3.8 Transparenzverlauf von 3D-Objekten (bycwedu.com)