0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

PlayCanvasAdvent Calendar 2019

Day 4

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する -2

Posted at

ここで紹介するのは、PlayCanvasの3Dハンズオン用のチュートリアル資料です。
"チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する"からアクセスできます。
#Materialを適用していく
PC_material.png
シーン(SCENE)に配置されているオブジェクトを見ると、地面、UFOとタンクの一部のマテリアルが未設定のため真っ白です。これから各MATERIALを設定していきます。
左側のHIERARCHYから"tank"→"tank_cannon"を選択します。(+をクリックすると格納されているHIERARCHYが展開されます)
右側のENTITYに"tank_cannon"の設定が表示されます。
ENTITYのMODEL内の"画像"をクリック。
PC_material_3.png
画像をクリックするとオブジェクトに適用されているマテリアル一覧が出ます。重複しているマテリアルがありますが、これは3Dソフト側でオブジェクトを作成した際に、メッシュ単位でマテリアルを適用しているためです。
例えば、顔と体が独立したメッシュで、それらを選択し、fbxに変換したものをPlayCanvasにインポートすると、1つのオブジェクトに複数のメッシュ(Mesh Instances)がある状態になります。
設定していくマテリアルは赤枠の"tank_Material"です。クリックするとMATERIALの各項目が出てきます。
PC_material_6.png
ASSETS欄の中の”texture”フォルダをクリック。このシーンで使用されているテクスチャが入っています。
PC_material_7.png
MATERIALの各項目は何も設定されていません。PC_material_8.png

##DIFFUSE(カラー)
PC_material_8_1.png
DEFUSSEに"body.png"を適用しました。この段階では金属や革の質感、環境光の効果が確認できません。

##SPECULAR/Glossiness(光沢)
PC_material_8_2.png
Glossinessを100%に上げてみると、光沢感と環境光が反映されますが、ポリゴン形状に沿った効果なので、全体的にツルツルした感じです。

##SPECULAR/Metalness&Glossiness(メタル光沢)
PC_material_8_3.png
Use Metalnessに☑を入れ、"body_metalness.png"を適用、Glossinessには”body_glossiness.png”を適用しました。Metalnessで鈍いメタルな質感を出し、Glossinessで革や窓などの光沢が必要無いマットな部分と差別化しています。
##OPACITY(透過)
PC_material_8_4.png
窓部分を半透明にします。透過したい部分のテクスチャを黒#000000~で透過されます。また、透過方法にはいくつかのブレンドタイプがあります。
PC_material_8_7.png
##NORMAL(法線マップ)
PC_material_8_5.png
疑似的な凹凸を追加します。Bumpinessで0~2で高低差を調整。
##AO(アンビエントクルージョン)
PC_material_8_6.png

光の遮蔽部分を追加。Occiudse Specularで投影タイプを選択できます。
基本的な効果としては以上です。ここからは、さらに特殊な効果を見ていきます。
##EMISSIVE(自己発光)
PC_material_8_8 (1).png
発光させたい部分のカラー情報を持ったテクスチャを適用。今回はラインやマーク部分に使用。
##ENVIRONMENT(環境マップ)
PC_material_8_9.png
マテリアル個別に環境マップを適用できます。ワールドに適用されている環境マップより優先的に描画されます。※Environmentはワールド環境への設定が個別にあり、後半で作成/設定方法を解説します。
##PARALAX(視差マッピング)
キャラクターに入れると効果が分かりにくいので、地面のマテリアルを設定しながら見ていきます。
###DIFFUSE
カラー情報のみ
feild1.png
###NORMAL
法線マップ。疑似的な凹凸が出ました。
feild2.png
###PARALAX
normalmapは法線方向に凹凸を作るのに対して、paralaxは白黒を高低差(ハイトマップ)として疑似的に凹凸を作ります。
feild3.png

これで、テクスチャとマテリアルの設定は終了です。次はParticl Systemを使って幾つかのエフェクトを作成していきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?