Aizu-Progressive xr Lab blog

会津大学のVR部であるA-PxLの部員が持ち回りで投稿していくブログです。部員がそれぞれVRに関する出来事やVRにちなんだことについて学んだことを書いていきます。

「面白法人カヤックVR分室」としても活動しています。詳細はこちら

Unityでオンラインゲームを作れるPhotonのすすめ

はじめに

こんにちは、学部2年の星野です。タイトルにもある通り、春休みの間Photonというサービスを使いUnityでオンラインゲームを作っていました。サーバーの知識もほとんど持たない自分でも短期間でオンラインゲームを作ることができました。Photonの使い方についての記事はネット上にたくさんあるので、今回はPhotonを使ってみての感想を中心に書いていきたいと思います。

Photonとは

f:id:aizu-vr:20200628225108j:plain

オンラインゲームを簡単に作れるサービス
ゲームサーバーを自分で構築する必要がない
無料プランもある

なぜPhotonを選んだか

Photonと同じようなサービスは他にも存在しています。(モノビットエンジンなど) その中からPhotonを選んだ一番の理由は

ネット上に情報が多い

ということです。 自分の調べ方が悪いせいかもしれませんが、同じようなサービスの中でネット上にある情報量がダントツでした。

Photonを使ってみた感想

分かりやすくて簡単

Photonへの接続やルーム処理などは数行のスクリプトで行うことができます。 ネット上に使用例がたくさんある上に、非常に分かりやすい仕組みになっていたので簡単に使うことができました。

サーバーの知識が必要ない

サーバーについて考える時間をゲーム作りの方へまわすことができます。

安心のサポート

無料プランで分からないところがあったのでメールで質問を送ったところ、すぐに返信が来て疑問を解消することができました。

Photonを使う上での注意点

無料プランについて

Photonの無料プランには「20CCU(同時接続人数の単位)まで」「月の通信料は60GBまで」という制限があり、これを超えなければ無料で使うことができます。 CCUは超えようとすると21番目以降の人が接続されなくなり、通信料が超えてしまうと超過して接続してしまい料金が請求される可能性があります。 無料でPhotonを使いたい人は通信料には注意しましょう。(通信料は自分で確認することができます)

まとめ

分かりやすくて簡単
サーバー関係の知識はないけどオンラインゲームを作ってみたいという人にはピッタリ
困ったときはネットで調べれば大体解決する。どうしても解決しないときは直接質問もできる。
無料プランを使う場合、制限に注意する。

アバターの服の一部に動く絵をかく

はじめに

こんにちは, 学部3年の木村です.
この記事では, 私がよく使わせて頂いているこのアバターの着物の模様を自分でもかきたくなったのでシェーダーで袖に絵を描けるようにしたことを書きます.

豊姫うか -Toyohime Uka- ver.2.00

試したこと

袖の領域をマスクする

まずは袖のマスク用のテクスチャを用意しました.

こんな感じで袖の領域を切り抜けます.

シェーダーはArktoon-Shadersを少し改変して使いました.
arcludeFrag.cgincのフラグメントシェーダーでDiffuseが宣言している箇所を以下のように変更し, float3 customColor(float2 uv, float3 color)関数内で絵を描きます.

float3 Diffuse = (customColor(i.uv0, _MainTex_var.rgb)*REF_COLOR.rgb);

上の画像のようにマスクした領域をピンクに塗る場合はこのようになります.

float3 customColor(float2 uv, float3 color)
{
    float mask = UNITY_SAMPLE_TEX2D(REF_SHADERMASK, TRANSFORM_TEX(uv, REF_SHADERMASK)).r;
    return lerp(color, float3(1, 0, 1), mask);
}


ここで試しに袖に絵を描いてみましたが, 境界線が目立ってしまってよくなかったです.

UV座標を見て頑張る

次に試したのは絵を描きたい領域をUV座標で直接切り分ける方法です.

float2 st = uv*2. - 1.;
float3 col = color;
if(color.r >= .1 && color.g >= .1 && color.b >= .1) return float3(st, 0);   // 襟の部分
if(st.x >= 0.) return float3(st, 0);  // 胴の部分
if(st.y <= 0.) 
{
   // 左袖
   st = mul(st + 1., R(-.74));
   float i = smoothstep(.5, 1., st.x);
   st.x -= _Time.x*.5;
   st.y += _Time.x;
   col = lerp(col, float3(st.x-.83, st.y+.2, 0), i);
} else
{
   // 右袖
   st = mul(st, R(-.85));
   float i = smoothstep(.5, 1.,st.y);
   st.x += _Time.x;
   st.y -= _Time.x*.5;
   col = lerp(col, float3(st.x + .25, st.y-.8, 0), i);
}
return col;

無理矢理感しかないですが, とりあえず部位ごとに色を塗れるようになりました.
あとは袖にだけ絵を描きます.

最終的にこうなりました

花びらの距離関数

float sdFlower(float2 p, float size)
{
    p+= .5;
    p*=.7;
    float a = atan2(p.y, p.x);  // -PI~PI
    a+= sin(_Time.y);
    float d = min(abs(cos(a * 5.) + .4), abs(sin(a * 5.)) + 1.1) * .32*size;
    return step(length(p), d);
}

今後

この記事を書いてる途中でマスクを使っても境界線は誤魔化せそうだなと思いました.
また, 花びらの動き方など単調なのでもっと自然の花びらのような動きをさせたいです.

Rayを使って壁に弾痕を残したい+α

f:id:aizu-vr:20200427225115p:plain こんにちは。学部3年の山田です。 今回はUnityで壁とかに弾痕を残すやつをいろんなサイトをコピペ参考にしながら作ったので紹介します。

今回使用したAssetとモデル紹介

使わせていただいた銃の3Dモデル  かっこいい

製作者:GHOST EMPIRE

BOOTH↓ booth.pm

アニメーション作成に使ったAsset↓

assetstore.unity.com

血のエフェクト↓

assetstore.unity.com

Rayを使う

弾痕を残すやつを作るうえでどんな実装方法にするか考えてみた結果、まず”弾が当たった場所に弾痕の画像を置く”という機能を作れば良いと思い調べたところUnityのRayという機能が引っかかり、実装している先駆者様もいました。

Rayの主な使い方は当たり判定を飛ばしてcolliderにぶつけて何かするというものです。今回は銃の先端からRayを飛ばし、壁にぶつかったらその座標を取得し、取得した座標に弾痕を置く、という実装方法になっています。

実装

早速ですが下記サイトにある記事を参考にして銃の先端からRayを飛ばし、オブジェクトと接触した座標に弾痕を表示させるものを作ります。

qiita.com

こちらで紹介されているものはカメラの中心からRayを飛ばして画像をオブジェクトの表面に表示させるものです。このままカメラオブジェクトを銃の子として銃の先端に配置するだけでもいいですが、必要なものはRayの初期位置と方向なので他のオブジェクトでも代用できます。


UnityのRayを使って壁に弾痕を残すやつテスト

デバッグ用にRayを可視化してあります。Rayとオブジェクトが接触した座標に弾痕が表示されています。

あとはボタンを押したら壁に弾痕が現れるような処理を追加するだけです。下記サイトを参考に弾痕を配置する処理を追加します。配置する座標と角度は上記サイトを参考にしました。

nopitech.com

これで銃口からRayを飛ばして、当たった場所に弾痕を配置させることができるようになりました。

あとはキャラクターに持たせるなりカメラの子にするなりすればそれっぽいものは作れます。

今回はUnityChanに持たせてみました。


UnityのRayを使って壁に弾痕を残すやつ

無事、壁に弾痕が残るのを確認できました。

おまけ 人と壁を区別できるようにする

Raycastの要素の中にRaycastHitというものがあります。これはRayが当たったオブジェクトの情報を読み取ることができ、今回もオブジェクトにRayが当たった場所などの情報を読み取っています。RaycastHitで読み取ることができる情報の中に、オブジェクトのレイヤー情報があります。これを使って人と壁を区別します。

人として扱うオブジェクトのレイヤー番号を8、壁として扱うオブジェクトのレイヤーをDefault(番号0)とします。 下記サイトを参考に、レイヤー番号が0なら弾痕を、レイヤー番号が8なら血のパーティクルを配置するようにします。

teratail.com

実装した結果↓


UnityのRayを使って弾痕を残すやつ2

人(豆腐)を撃った時には血が出ます。 終

部室を3Dスキャンしてみた

こんにちは、ぶろっくのいずです。 タイトルの通り、許可を得てスマートシティAiCTにあるA-PxLの部室を数千枚の写真から3D復元してみました。



出来たのはこんな感じです。 f:id:aizu-vr:20200413212933p:plain



clusterというアプリ(PCとスマホ対応)で歩き回れます。



そして、A-PxLはなんとVRコミケ「バーチャルマーケット4」に出店予定!!

バーチャルマーケットでもA-PxLの部室が使われることになりました。

※A-PxLが出店しているこのブースは現在、数人の部員によるチームで活動しています。



今回、使ったのはフォトグラメトリという技術です。フォトグラメトリとは、被写体を様々な角度から撮影し、その写真を解析することで被写体を3次元的に復元する技術のことです。



フォトグラメトリのソフトの紹介↓


自分もフォトグラメトリをやりたい!という人には、まず、スマホのアプリ「Display.land」をおすすめします。 styly.cc 無料な上に扱いやすく、撮影を頑張ればモデルのクオリティもそれなりに高いです。



スマホじゃなくてパソコンでフォトグラメトリをやりたいという人には、まずSteamにある「3DF Zephyr」の体験版をおすすめします。 store.steampowered.com 3DF Zephyrの体験版は50枚まで写真を使えて、モデルをエクスポートすることができるため、フォトグラメトリを使ってみたい人にはおすすめです。3DF Zephyrは日本語にも対応してるので人によっては使いやすいですね。



「お金は出すから一番クオリティが高いフォトグラメトリのモデルが欲しいんだ!」という人には「Reality Capture」をおすすめします。 store.steampowered.com 業者が使うようなライセンスはめちゃくちゃ高くて、Steamの個人向けのライセンスでも高いです。それでも、フォトグラメトリソフトでReality Capture以上の品質を出せるソフトは今のところ見たことがありません。ちなみに今回の記事で紹介しているA-PxLの部室のモデルは、Reality Captureを使っています。


それぞれのフォトグラメトリソフトに得意不得意があるかと思いますが、おすすめしたいソフトはこんな感じです。

...終わり...

ゲームのCGモデルを作る際のワークフロー紹介

こんにちは、次年度から学部4年になる丹野です。今回私はコンシューマゲームで使用されるようなリアルよりのモデルを作る際のワークフローを紹介したいと思います。

続きを読む

会津大学VR部の部員が持ち回りで投稿していくブログです。特にテーマに縛りを設けずに書いていきます!