Cross Road

Unity、VR、MR、ARを中心とした技術ブログ

Unityで様々な線を描くことができるアセット、"Vectrosity"を試してみました

===
2017/6/13追記

1. 準備の終わりに、Unity5.6.0p1でも動いたことと、Unityプロジェクト内でのunitypackageインポート手順を追記しました。
===

きれいな表現の勉強ということで、前回のSkyshop(下記)に続き、今度は線を描くアセットを勉強してみました。

magicbullet.hatenablog.jp


Vectrosity という、$29.95のアセットです。

このアセットは、「線を描く」で思いつきそうなことが、ほぼ全て網羅されています。

選択した箇所を枠で囲ってみたり、

Vectrosityで枠をつくった例

個々のオブジェクト間を線でつないでみたり、

Vectrosityで個々のオブジェクト間を線でつないだ例


楕円やGridを描いてみたり、

Vectrosityで楕円を描いた例

VectrosityでGridを描いた例

などです。


他にも、任意のオブジェクトをワイヤーフレームのようにできます。

Vectrosityでワイヤーフレームを描いた例


それぞれの線の描画は、サンプルシーンが別々に用意されているので、それを見ることでだいたいイメージがつかめます。

全ては多いので、今回は、

1.準備
2.ワイヤーフレームの表現
3.光の線の描画表現

の3つを解説したいと思います。


1. 準備

まずは購入し、インポートします。インポートすると、Unityのバージョン別のパッケージが複数同梱されています。以下は、Unity5系のフォルダ構造です。

Vectrosityのフォルダ構成


マニュアルを元に整理しました。

Unityのバージョン 使用するパッケージ
4.6〜5.1台 Vectrosity 4フォルダを使用
5.2.2〜5.2.3 Vectrosity 5 フォルダのVectrosity5-Unity5.2.2.unitypackageを使用
5.3以降 Vectrosity 5 フォルダのVectrosity5-Unity5.3.unitypackageを使用


5.2.0、5.2.1、5.2.4は、この表のどこにも当てはまりませんが、私の5.2.4の環境では、Vectrosity5-Unity5.2.2.unitypackageを特にエラーなく使うことができました。

5.2系の場合、5.2.2.unitypackageを使うのがよさそうです。また、説明書には、展開するunitypackageは一つだけにしてほしい、との記載がありました。


===
2017/6/13 追加
2017/6/13時点でVectrosityをダウンロードすると、5.4と5.6のパッケージが準備されています。
Unity5.6.0p1でも動きました。
また、ダウンロードしてインポートすると、Assetsフォルダの中にunitypackageが複数格納されています。
該当するバージョンのunitypackageをダブルクリックすると、その場で展開されてAssetsフォルダ以下に追加されます。

たとえば、Vectrosity5Sourceを展開すると、このようになります。普段のunitypackageインポートと同じ手順です。

Vectrosityのunitypackage

Vectrosityのunitypackageをimportする画面

===


その他、自分で試してわかった内容のメモです。

・使わないバージョンのフォルダは削除してかまわない

・スクリプトは全てUnityscript(C#ではない)で書かれている

・ただし、C#のAPIも用意されているのでC#でも使用可能

・VectrosicyDemos.unitypackageを展開し、_Scenesフォルダを開くと、多数のサンプルシーンがある。

・シーンには最低限のスクリプトだけが使われてる。Scriptsフォルダはシーン別にフォルダ分けされている。そのため、該当するシーンのスクリプトを見れば「どうやったらこの表現ができるのか」が理解しやすい

・UnityScriptの場合はimport Vectrosity、C#の場合はusing Vectrosity、をスクリプトの冒頭に付けるだけで使える

2. ワイヤーフレームの表現

最終的にこんな変化をさせます。

ワイヤーフレーム風の表現


ちなみに、ここで使ったのはWizard Staff Packという杖モデルです。何でもよかったのですが、cubeやsphereではつまらないし、あまり大きいのは準備が大変なのでこれにしてみました。

2-1. LineMakerによる、フレーム情報の生成

まず、前準備として、ワイヤーフレームを作るには、LineMakerというツールでワイヤーフレーム化したいオブジェクトを選択し、フレーム用のデータを生成する必要があります。

LineMakerはAssetsの中に追加されています。

LinkMakerの選択場所


Hierarchy Viewで対象のオブジェクトを選択してからLineMakerを開くと、このようなウインドウが表示されます。

LinkMakerウインドウ

番号①②③の順に選択します。

Pointer Size とLine Sizeはオブジェクトの大きさによって調整すればよいと思います。今回のStaff(杖)は小さかったので、どちらも最小サイズにしました。


③を選択すると、拡張子".bytes"形式のファイルが生成されます。これはオブジェクトの頂点座標をまとめたもののようです。

ワイヤーフレーム化したい処理で使います。

オブジェクトの頂点座標を取得する方法はもう一つあって、Generate Line(UnityScript)、Generate Line(C#)のどちらかをクリックしてもよいです。

クリックすると、new Vector3(a,b,c)の配列がクリップボードにコピーされます。

scriptに貼付ければ、ここで処理を記述することで、ワイヤーフレームを生成できます。

ただ、new Vector3(a,b,c)の数があまりに多いためか、私の使っているMono Developがしょっちゅう固まりました。

特定の頂点座標を知りたい、などがなければ、bytes形式のファイルを使った方がやりやすいと思います。

2-2. スクリプトで、ワイヤーフレームを生成する処理を記述

たとえば、以下のようなスクリプトを作成し、Staffオブジェクトにアタッチします。

using UnityEngine;
using System.Collections;
using Vectrosity;

public class GenerateWireFrame : MonoBehaviour {

	public TextAsset frameData; /*(1)*/
	private VectorLine line;
	private Color color1 = Color.green;

	void Start () {
		var linePoints = VectorLine.BytesToVector3List (frameData.bytes); /*(2)*/
		line = new VectorLine(this.gameObject.name, linePoints, 2.0f);/*(3)*/
		line.SetColor(color1);/*(4)*/
		VectorManager.ObjectSetup (this.gameObject, line, Visibility.Dynamic, Brightness.None);/*(5)*/
	}
}

以下、補足です。

(1)
まず、TextAsset型で変数を宣言します。ここには、先ほどLineMakerで作った.bytes形式のデータを、Inspector上で指定します。

(2)
TextAsset型の変数を読み込み、描画すべき点を取得します。

(3)
VectorLineのインスタンスを生成します。ここの2.0fは太さです。

(4)
色指定です。記述は必須ではなく、記述ない場合、白線のワイヤーフレームになります。

(5)
線を描画します。


この状態でシーン実行すると、上で紹介したようにstaffがワイヤー状になります。

また、同様の手順でやれば、任意のモデルをこのような表現にできます。


ちなみに、もし下記のような結果になった場合、使うAPIが間違っている可能性があります。

APIの使用が間違っていた場合の例

私の場合、bytesファイルの読み込み時に、間違って"BytesToVector2List"を指定してました。。

3.光の線の描画表現

デモシーンの中に、Scribblecubeというシーンがあります。

[補足]
scribble :走り書きする

VectrosityのScribblecubeの例


scribble(走り書き)とはいえ、光の線はきれいですよね。ここでは、サンプルシーン実行時に出たエラー対処方法と、オブジェクトを光の線で描画する方法を解説します。

3-1. サンプルシーン実行時に出たエラー対処方法

サンプルシーンを実行すると、以下のエラーが出ます。

Vectrosity Scribblecubeのサンプルシーン実行時のエラー

エラーの内容

ArgumentException: Input Axis Mouse ScrollWheel is not setup.
To change the input settings use: Edit -> Project Settings -> Input
CameraZoom.Update () (at Assets/VectrosityDemos/Scripts/Scribblecube/CameraZoom.js:5)


これは、マウススクロールのキー割当がされてない場合に発生します。修正方法は下記です。

Vectrosity Scribblecubeのエラー修正方法

Edit -> Project Settings -> Input を選択

Axis を11に変更

新しく追加されたElementを、以下のように変更する

Name : Mouse ScrollWheel
Gravity : 0
Dead:0
Sensitivity:0.1
Type : Mouse Movement
Axis :3rd Axis (joysticks and Scrollwheel)
Joy Num : Get motion from all joysticks


これでマウススクロールができるようになったので、スクロールによってscribbleの中身に近づくことができます。

scribblecubeシーンの実行例

うまく使うと、幻想的なシーンも作れそうですね。

ちなみに、Unity5.2.4で新規プロジェクトを作ったら、Mouse ScrollWheelは初めから設定されていました。
なぜVectrosityのアセットインポート時に設定がなかったのかは不明です。

3-2. オブジェクトを光の線で描画する方法

サンプルシーンの光の線を出す仕組みを調べたところ、

line = new VectorLine("Line", linePoints, lineTexture, lineWidth, LineType.Continuous);

のように、線のインスタンス生成で、テクスチャを指定していました。先ほどのワイヤーフレームのときは、

line = new VectorLine(this.gameObject.name, linePoints, 2.0f);

だったので、テクスチャの指定はありませんでした。そこで、このlineTextureを調べると、

public Texture lineTexture;

で定義されており、ProjectViewで見ると、形式はpsd(Photoshop)でした。
(テクスチャにPhotoshop形式も指定できるとは知りませんでした)


Photoshopで開いてみました。

Photoshopで開いたlineTexture

Photoshopで開いたlineTextureのアルファ

このように、中心が白色で、あとはalphaを段階的に変えているようです。

サンプルシーンでは光の線を描画する方法しか描かれていませんが、先ほど任意のオブジェクトをワイヤーフレーム化させることができているので、このワイヤーフレームを光の線で描画してみます。

方法は、psd形式のファイルをlineTextureとして指定し、以下のようなコードを書くだけです。

using UnityEngine;
using System.Collections;
using Vectrosity;
using System.Collections.Generic;

public class GenerateWireFrame : MonoBehaviour {

	public Texture lineTexture;
	public Material lineMaterial;

	public TextAsset frameData;

	private VectorLine line;
	private float lineWidth = 15.0f;

	private Color color1 = Color.blue;
   private Color color2 = new Color( 0,1.0f,1.0f,0.4f);

	void Start () {
		var linePoints = VectorLine.BytesToVector3List (frameData.bytes);
	 	line = new VectorLine("Line", linePoints, lineTexture, lineWidth, LineType.Continuous);
		//line.SetColor(color1);
                line.SetColor(color2);
		VectorManager.ObjectSetup (this.gameObject, line, Visibility.Dynamic, Brightness.None);
	}
}

Color.blue(alpha=1)を指定した場合と、

Color.blue(alpha=1)


Colorのalphaを0.4にしたシアン色の場合です。

Color.blue(alpha=0.4)


alpha値を小さくする方が、より線の周辺が淡くなるので光って見えます。

この仕組みを使えば、好きな色の光の線も描けそうですね。