Co cos Creator 3.xで3Dオブジェクトの透明度を動的に変更する方法
Cocos Creator 3.x の 2D UI には、UI の透明度を動的に変更できるコンポーネント UIOpacity があり、非常に便利です。多くの学生は、3D オブジェクトの透明度を動的に制御および変更するために、3D オブジェクトにそのようなコンポーネントを追加したいと考えています。今日は、Cocos Creator 3.8 をベースに 3D オブジェクトの透明度を動的に変更できるコンポーネント Opacity3D を実装します。
3Dオブジェクトを半透明に表示するにはどうすればよいですか?
Opacity3D コンポーネントを作成する前に、まず 3D オブジェクトがどのように半透明に表示されるかを理解します。実際、この原則は次の 2 つの条件が満たされていれば非常に簡単です。
(1) 3D オブジェクトが配置されているレンダリング キューは「透明キュー」です。
(2) 3D オブジェクトの frag 要素が色付けされている場合、アルファ透明度は (0 ～ 1) の間になります。
上記 2 つの条件が満たされると、3D オブジェクトは半透明になります。条件(2)において、フラグメントカラーリングの透明度を(0~1)の間で設定したい場合、シェーダの修正は必要でしょうか？答えは「いいえ」です。CocosCreator 3.x の標準シェーダーは mainColor のカラー属性を提供するためです。デフォルトは白です。mainColor の透明度を変更すると、それをシェーダーに渡した後、フラグ フラグメント シェーダーがカラー値を重ね合わせます。 mainColor. の値なので、オブジェクトの透明度を変更したい場合は、mainColor. を変更することで変更できます。
Opacity3D を自分で作成するときは、シェーダーのこの機能を利用します。開発するシェーダーに mainColor メカニズムがなく、Opacity3D コンポーネントを使用する必要がある場合は、mainColor メカニズムをシェーダーに追加するか、コードを次のように変更できます。類似した色の変数を使用します。
O pactity3Dコンポーネントの具体的な実装
半透明にしたい 3D オブジェクトを見つけてマテリアルを作成し、mainColor メカニズムを持つ組み込みの build-unlit シェーダを使用します。オブジェクトのマテリアルのレンダリング キューを透明に設定します。写真が示すように:
次に、以下に示すように、Opacity3D コンポーネントを対応するノードに追加し、エディターで透明度を調整します。
実行すると、Cube が半透明になります。
O pacity3Dコンポーネント コアの実装
Opactity3D のコア実装は実際には非常にシンプルなので、ソース コード (Cocos Creator 3.8) から始めましょう。
基本的な原則は、メンバー変数alpha を定義してから get /set を書き込み、get はa plah 値を返し、setはアルファ値を設定してマテリアルと同期することです。get /setを記述する主な目的は、トゥイーンの仕組み。ここには非常に重要なデータ メンバー isSharedModeがあります。マテリアルのパラメータを変更すると、変更されたマテリアルを使用しているすべてのオブジェクトのパラメータがすべて変更されることは誰もが知っています。オブジェクトが100 個ある場合もありますが、1 つの場合はそのうちの 1 つだけかもしれません。 object が透明度を変更し、その他のオブジェクトが変更されない場合は、 i sSharedModeを false に設定できます。これにより、オブジェクトごとに個別のマテリアル オブジェクト インスタンスが作成されます。
T weenと組み合わせて、 3Dオブジェクトの透明度を段階的に変更します。
Tween が実際にはテンプレート メカニズムであることは誰もが知っていますが、属性が get/set である限り、一定の期間を指定して、更新を使用して特定の属性を継続的に変更します。Alpha の get/set を Opacity3D に実装したので、Tween と連携してグラデーションを実現できます。コードは次のとおりです。
