vci:sample:material:transparent
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 最新リビジョン 両方とも次のリビジョン | ||
|
vci:sample:material:transparent [2019/10/04 15:39] oinari |
vci:sample:material:transparent [2021/06/24 17:44] t-daihisa |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| ====== アイテムを消したり出したりする(透明なテクスチャを使用) ====== | ====== アイテムを消したり出したりする(透明なテクスチャを使用) ====== | ||
| - | \\ | ||
| - | テクスチャの透明部分を使ってアイテムを表示したり非表示にしたりするサンプルです。\\ | ||
| - | **実際にオブジェクトが消失するわけではなく、見た目上消えてるように見えるだけ**です。\\ | ||
| - | \\ | ||
| - | ---- | + | テクスチャの透明部分を使ってアイテムを表示したり非表示にしたりするサンプルです。\\ |
| + | **実際にオブジェクトが消失するわけではなく、見た目上消えてるように見えるだけ**です。 | ||
| ===== 透明になる原理 ===== | ===== 透明になる原理 ===== | ||
| - | {{:vci:sample:material:uvoffset.jpg?direct&600|}}\\ | + | {{:vci:sample:material:uvoffset.jpg?direct&500|}} |
| VCIはスクリプトを使って3DモデルのUV座標をずらす事ができます。\\ | VCIはスクリプトを使って3DモデルのUV座標をずらす事ができます。\\ | ||
| (UV座標とは、モデルに適用するテクスチャを参照する位置です)\\ | (UV座標とは、モデルに適用するテクスチャを参照する位置です)\\ | ||
| - | 初期位置が原点の(0,0)になるので、上記の図の場合(0.5,0.5)の位置にずらしてやれば、緑の所から透明の所を参照するようになり、緑→透明という風に変化します。\\ | + | 初期位置が原点の(0,0)になるので、上記の図の場合(0.5,0.5)の位置にずらしてやれば、緑の所から透明の所を参照するようになり、緑→透明という風に変化します。 |
| - | + | ||
| - | ---- | + | |
| ===== 素材データ ===== | ===== 素材データ ===== | ||
| ライン 22: | ライン 17: | ||
| - **透明の部分があるテクスチャをpng**で作成します。\\ 画像にはpngの他にjpegやbmpなどありますが、透明が使えるファイル形式はpngになります。\\ | - **透明の部分があるテクスチャをpng**で作成します。\\ 画像にはpngの他にjpegやbmpなどありますが、透明が使えるファイル形式はpngになります。\\ | ||
| - | - 消したい3Dモデルを用意します。\\ 3DモデルのUVが１で作成したテクスチャの透明部分に収まるようにします。\\ このUV領域をVCIスクリプトで透明の部分に移動する事で、オブジェクトを消したように見せるので、UVの位置とテクスチャの透明部分が分かりやすいような位置になってると後で楽です。\\ | + | - 消したい3Dモデルを用意します。\\ 3DモデルのUVが１で作成したテクスチャの透明部分に収まるようにします。\\ このUV領域をVCIスクリプトで透明の部分に移動する事で、オブジェクトを消したように見せるので、UVの位置とテクスチャの透明部分が分かりやすいような位置になってると後で楽です。 |
| ===== コンポーネント設定 ===== | ===== コンポーネント設定 ===== | ||
| - | {{:vci:sample:material:transparentvci.jpg?direct&600|}}\\ | + | {{:vci:sample:material:transparentvci.jpg?direct&600|}} |
| - 透明なテクスチャを使う場合、マテリアルのShaderは**UniGLTF/UniUnlit**に変更します。\\ そして、**RenderingTypeをTransparent**に変更してPreviewで透明な部分がある事を確認しましょう。 | - 透明なテクスチャを使う場合、マテリアルのShaderは**UniGLTF/UniUnlit**に変更します。\\ そして、**RenderingTypeをTransparent**に変更してPreviewで透明な部分がある事を確認しましょう。 | ||
| ライン 74: | ライン 69: | ||
| true か false の入ってるboolを ''not()'' で囲むと反転した値になります。\\ | true か false の入ってるboolを ''not()'' で囲むと反転した値になります。\\ | ||
| このようにすると**現在の状態を反転させる**というトグルスイッチのような挙動を書くことができます。\\ | このようにすると**現在の状態を反転させる**というトグルスイッチのような挙動を書くことができます。\\ | ||
| - | ''TransparentChange()'' を実行するたびに反転するので、実行する毎に切り替わります。\\ | + | ''TransparentChange()'' を実行するたびに反転するので、実行する毎に切り替わります。 |
| - | + | ||
| - | ---- | + | |
| ===== Tips ===== | ===== Tips ===== | ||
| ライン 84: | ライン 77: | ||
| UVの大きさと透明の部分がピッタリの場合、遠くに移動した際に不透明の領域が映りこむ可能があります。\\ | UVの大きさと透明の部分がピッタリの場合、遠くに移動した際に不透明の領域が映りこむ可能があります。\\ | ||
| それは、遠くにあるオブジェクトのテクスチャはmipmapという機能によって、低解像度のものに差し替えられるため、低解像度になった際に透明の部分に不透明のピクセルが入り込むためです。\\ | それは、遠くにあるオブジェクトのテクスチャはmipmapという機能によって、低解像度のものに差し替えられるため、低解像度になった際に透明の部分に不透明のピクセルが入り込むためです。\\ | ||
| - | UVの大きさを小さくしたり、透明部分を大きくし、余白を作る事で解決します。\\ | + | UVの大きさを小さくしたり、透明部分を大きくし、余白を作る事で解決します。 |
vci/sample/material/transparent.txt · 最終更新: 2023/10/02 20:54 by pastatto