vci:sample:material:transparent
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
vci:sample:material:transparent [2019/10/04 15:39] oinari [透明になる原理] |
vci:sample:material:transparent [2023/10/02 20:54] (現在) pastatto 非推奨のAPIを書き換えてサンプルの追加 |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| ====== アイテムを消したり出したりする(透明なテクスチャを使用) ====== | ====== アイテムを消したり出したりする(透明なテクスチャを使用) ====== | ||
| - | \\ | ||
| - | テクスチャの透明部分を使ってアイテムを表示したり非表示にしたりするサンプルです。\\ | ||
| - | **実際にオブジェクトが消失するわけではなく、見た目上消えてるように見えるだけ**です。\\ | ||
| - | \\ | ||
| - | ---- | + | [[https://developer.virtualcast.jp/vci-docs/api/classes/ExportMaterial/SetTextureOffset.html|SetTextureOffset]] を利用した、テクスチャの透明部分を使ってアイテムを表示したり非表示にしたりするサンプルVCIです。\\ |
| + | **実際にオブジェクトが消失するわけではなく、見た目上消えてるように見えるだけ**です。 | ||
| - | ===== 透明になる原理 ===== | + | === サンプルデータ === |
| + | {{ :vci:sample:material:material_transparent.zip |}} | ||
| - | {{:vci:sample:material:uvoffset.jpg?direct&500|}}\\ | + | ==== 透明になる原理 ==== |
| + | |||
| + | {{: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)の位置にずらせば、緑の所から透明の所を参照するようになり、緑→透明という風に変化します。 |
| - | + | ||
| - | ---- | + | |
| - | ===== 素材データ ===== | + | ==== 画像作成 ==== |
| {{:vci:sample:material:texturetransparent.jpg?direct&600|}}\\ | {{:vci:sample:material:texturetransparent.jpg?direct&600|}}\\ | ||
| - **透明の部分があるテクスチャを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で透明な部分がある事を確認しましょう。 | ||
| ライン 32: | ライン 30: | ||
| ===== VCIスクリプト ===== | ===== VCIスクリプト ===== | ||
| + | ''ExportMaterial._ALL_SetTextureOffset(name, offset)''\\ | ||
| + | 第一引数にマテリアル名を入れ、第二引数にUVをオフセットしたい値を入れると、第一引数で指定したマテリアルのUV座標がオフセットされます。\\ | ||
| + | 上記のスクリプトでは、UVの位置を透明の部分にオフセットする事でアイテムを透明にして、消えたように見せます。\\ | ||
| + | 詳細は [[https://developer.virtualcast.jp/vci-docs/api/classes/ExportMaterial/SetTextureOffset.html|SetTextureOffset]] のページを確認してください。 | ||
| + | |||
| + | ''_TransparentIsActive = not(_TransparentIsActive)''\\ | ||
| + | true か false の入ってるboolを ''not()'' で囲むと反転した値になります。\\ | ||
| + | このようにすると**現在の状態を反転させる**というトグルスイッチのような挙動を書くことができます。\\ | ||
| + | ''TransparentChange()'' を実行するたびに反転するので、実行する毎に切り替わります。 | ||
| <file lua main.lua> | <file lua main.lua> | ||
| local _TransparentIsActive = false | local _TransparentIsActive = false | ||
| + | |||
| function onUse() | function onUse() | ||
| TransparentChange() | TransparentChange() | ||
| end | end | ||
| + | |||
| function TransparentChange() | function TransparentChange() | ||
| + | |||
| -- 透明の場合、不透明に戻す | -- 透明の場合、不透明に戻す | ||
| if _TransparentIsActive == true then | if _TransparentIsActive == true then | ||
| local offset = Vector2.__new(0, 0) | local offset = Vector2.__new(0, 0) | ||
| -- マテリアルの名前を指定してUVを変更 | -- マテリアルの名前を指定してUVを変更 | ||
| - | vci.assets._ALL_SetMaterialTextureOffsetFromName("TransparentMaterial", offset) | + | vci.assets.material._ALL_SetTextureOffset("TransparentMaterial", offset) |
| print("不透明") | print("不透明") | ||
| end | end | ||
| + | |||
| -- 不透明の場合、透明にする | -- 不透明の場合、透明にする | ||
| if _TransparentIsActive == false then | if _TransparentIsActive == false then | ||
| local offset = Vector2.__new(0.5, 0.5) | local offset = Vector2.__new(0.5, 0.5) | ||
| -- マテリアルの名前を指定してUVを変更 | -- マテリアルの名前を指定してUVを変更 | ||
| - | vci.assets._ALL_SetMaterialTextureOffsetFromName("TransparentMaterial", offset) | + | vci.assets.material._ALL_SetTextureOffset("TransparentMaterial", offset) |
| print("透明") | print("透明") | ||
| end | end | ||
| + | |||
| -- 状態を反転させる | -- 状態を反転させる | ||
| _TransparentIsActive = not(_TransparentIsActive) | _TransparentIsActive = not(_TransparentIsActive) | ||
| + | |||
| end | end | ||
| </file> | </file> | ||
| - | ===== VCIスクリプト(解説) ===== | ||
| - | |||
| - | ''vci.assets._ALL_SetMaterialTextureOffsetFromName()''\\ | ||
| - | 第一引数にマテリアル名を入れ、第二引数にUVをオフセットしたい値を入れると、第一引数で指定したマテリアルのUV座標がオフセットされます。\\ | ||
| - | 上記のスクリプトでは、UVの位置を透明の部分にオフセットする事でアイテムを透明にして、消えたように見せます。\\ | ||
| - | 詳細は [[vci:script:reference:exportassets|vci.assets(ExportAssets)]] のページを確認してください。 | ||
| - | |||
| - | ''_TransparentIsActive = not(_TransparentIsActive)''\\ | ||
| - | true か false の入ってるboolを ''not()'' で囲むと反転した値になります。\\ | ||
| - | このようにすると**現在の状態を反転させる**というトグルスイッチのような挙動を書くことができます。\\ | ||
| - | ''TransparentChange()'' を実行するたびに反転するので、実行する毎に切り替わります。\\ | ||
| - | |||
| - | ---- | ||
| - | ===== Tips ===== | + | ==== Tips ==== |
| **Subitemを遠くへ移動した時、透明でない部分が映りこんでしまう場合** | **Subitemを遠くへ移動した時、透明でない部分が映りこんでしまう場合** | ||
| ライン 84: | ライン 78: | ||
| UVの大きさと透明の部分がピッタリの場合、遠くに移動した際に不透明の領域が映りこむ可能があります。\\ | UVの大きさと透明の部分がピッタリの場合、遠くに移動した際に不透明の領域が映りこむ可能があります。\\ | ||
| それは、遠くにあるオブジェクトのテクスチャはmipmapという機能によって、低解像度のものに差し替えられるため、低解像度になった際に透明の部分に不透明のピクセルが入り込むためです。\\ | それは、遠くにあるオブジェクトのテクスチャはmipmapという機能によって、低解像度のものに差し替えられるため、低解像度になった際に透明の部分に不透明のピクセルが入り込むためです。\\ | ||
| - | UVの大きさを小さくしたり、透明部分を大きくし、余白を作る事で解決します。\\ | + | UVの大きさを小さくしたり、透明部分を大きくし、余白を作る事で解決します。 |
vci/sample/material/transparent.1570171184.txt.gz · 最終更新: 2019/10/04 15:39 by oinari