xcode8でdoxygen commentのwarningが出る問題の回避策

こんにちは．@rootxです．

最近xcode8にアップデートしましたが，glfw3のプロジェクトを作っていたら大量の警告が発生しました．

Documentation Issue Group 

/usr/local/include/GLFW/glfw3.h:744:8: Empty paragraph passed to '@sa' command/main.cpp:12:10: In file included from /User/main.cpp:12:

どうやらdoxygenコメントに不備があると，警告を出すようになったみたいですね．


暫定的に，次のように警告を抑制することで回避しました．

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdocumentation"
#include <GLFW/glfw3.h>
#pragma clang pop

外部ライブラリのヘッダではでないように設定したいですね；


でわでわ．

開発環境構築 Win7 x64

Windows の開発環境構築

インストールするもの

• Atom
• GLSL Preview
• atom-typescript
• autocomplete-webgl
• VirtualBox
• Vagrant
• vagrant init bent/centos-6.7 
• Visual Studio Community 2015
• Visual Studio Code
• TypeScript
• Putty
• UTF-8
• WinSCP

トラブル対応

Vagrantの共有フォルダが参照できない

==> default: Mounting shared folders...
    default: /vagrant => D:/Vagrant/mycentos
Failed to mount folders in Linux guest. This is usually because
the "vboxsf" file system is not available. Please verify that
the guest additions are properly installed in the guest and
can work properly. The command attempted was:

mount -t vboxsf -o uid=`id -u vagrant`,gid=`getent group vagrant | cut -d: -f3`
vagrant /vagrant
mount -t vboxsf -o uid=`id -u vagrant`,gid=`id -g vagrant` vagrant /vagrant

The error output from the last command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

こんな風にマウント失敗のエラーが出ていた．
どうもVirtualBoxのGuestAdditionsがおかしくなっているようなので，次の対応を実施：

1. 稼働OSを停止： vagrant halt
2. プラグインインストール： vagrant plugin install vagrant-vbguestd:\Vagrant\mycentos>vagrant plugin install vagrant-vbguestInstalling the 'vagrant-vbguest' plugin. This can take a few minutes...Installed the plugin 'vagrant-vbguest (0.11.0)'!
3. 再起動する途中でインストールされる： vagrant up
   

References

• http://dotinstall.com/lessons/basic_localdev_win/
• 
  
• 
  

VirtualBoxにUbuntuをインストールしてnode.jsを立ち上げるまでのメモ

こんにちは．@rootxです．

所要でubuntuを使いたくなったので，VirutalBoxで環境を整えます．

環境

• Win7 Pro 64bit
• CPU i7-6700
• MEM 16GB (pc3-12800)
• GPU GeForce970

手順

1. VirutalBoxをインストール

ここから． https://www.virtualbox.org/wiki/Downloads

> VirtualBox 5.0.10 for Windows hosts
と
> VirtualBox 5.0.10 Oracle VM VirtualBox Extension Pack All supported platforms
の両方をダウンロード．
前者はVirtualBox本体．後者は物理的なPCのデバイスサポートみたいなイメージ．（Support for USB 2.0 and USB 3.0 devices, VirtualBox RDP and PXE boot for Intel cards. ）

VirtualBox-5.X.XX-XXXXX-Win.exeを実行して，デフォルトでインストール．
起動だけ確認して一旦終了．
# 日本語化されているんですね．少し驚き．

続いて，
Oracle_VM_VirtualBox_Extension_Pack-5.0.10-104061.vbox-extpackをダブルクリックするとVirtualBoxが起動され，「機能拡張パッケージをインストールする？」と聞かれるのでダイアログにしたがって進める．
「インストールに成功しました」などとダイアログが出ればOK．

2. VirtualBoxにubuntuをインストール

ubuntuのISOイメージからインストールする手段もありますが，
ubuntu JapaneseTeamで仮想ハードディスクイメージが公開されているので，それを使います．
（少しバージョンが古いですが）

https://www.ubuntulinux.jp/download/ja-remix-vhd から，「Ubuntu 14.04 LTS - 2019年4月までサポート」にある「ubuntu-ja-14.04-desktop-amd64-vhd.zip 」

手順もそこにある通りだが，linux 32bitしかメニューから選択でてきませんでした．
BIOSが怪しいのかな？と思いましたが，一旦windowsを再起動したら，出てくるようになりました（謎）．


ハードディスクで「すでにある仮想ハードディスクファイルを使用する」から，先ほどダウンロードしたZIP，を解凍して作成されたvhdファイルを指定．（100GB指定）

起動すると，ubuntuの初回セットアップが始まるので適当に進める．


さくっと動作できたので一旦VMシャットダウン．

設定を変更
* システム>プロセッサ：2コア
* システム>マザーボード>メインメモリー：１GB
* ディスプレイ> スクリーン>ビデオメモリー:128MB
* ディスプレイ> スクリーン>アクセラレーション:3Dアクセラレーションを有効化をON


再度起動して，（なにかエラーが出ましたが無視して），ウィンドウの「デバイス」メニューを開き、「Guest Additions のCDイメージを挿入」を選択 (これは忘れがち)


あとは，ubuntuのソフトウェアアップデートがあるはずなので，適宜適用する．
左のメニューの一番上から，updateと入力して，「ソフトウェアの更新」を実行．
終わるまで結構時間がかかるので，一服してから再開します．





3. node.jsを起動する



 でわでわ．

Unityでレイトレ

こんにちは．@rootxです．

Unityをアセット管理として用いたレイトレプログラムを書いてみましょう．

Unity5でレイトレーシング

はじめに

なぜUnityで行うか？

先日から少しだけUnityを操作しているのですが，最近のゲームエンジンらしく物理ベースマテリアルに対応している上に，いろんなローダやアセットがたくさんあって，自分で書くよりこれでいいじゃん，と思ったところが始まりです．

ベタのレンダラを書いたことのある人はお分かりかと思いますが，最初に絵を出力するまでに，レンダリング以外の処理を書くのがすごく大変です．例えば，ファイルの読み込みや，画像として保存する，テクスチャに対応する，などなどです．ちょっとプレビューしたいと思ったり，それにGUIを付けたいと思っても，なんだかよくわからないことを，たくさんたくさん調べて書く必要があります．

そこで，

本論の目的は，初学者（私も含め）向けにレンダラの本質（と思われるところ）に焦点を

また，高速化や多くのテクニックの必要性を体験してもらうことです．

なお他のアプローチとしては，任意のフレームをobj等に出力して，自作あるいは既存のレンダラでレンダリングする，という方法もあります．

開発環境

os x 10.10

Unity 5.2.0f3

UnityScript (C#)

開発指針

レイキャスト，古典的レイトレ，パストレの流れを追う．

マテリアルはstandard shaderの設定を使う．

テクスチャ対応．

高速化手段はあまり考えない．

MMDモデルのレンダリングくらいまで．

ここから

準備（適当に）

新規プロジェクトを作成．

適当なオブジェクトの配置．

カメラの設定．
スクリプトを作成．
カメラに，作成したスクリプトをアタッチ．

とりあえず，こんな感じにしてみました．

絵を出す（モノクロから）

レイトレーシングの基本的な考え方は，視点（カメラ）からたくさんの視線（レイ）を飛ばして，当たったオブジェクトの位置に基づいていろいろ計算して，色を決定します．

Unityでは便利なAPIがたくさん用意されているのでそれを使って，色の決定の部分を書いていく，という感じで進めます．

レンダリング結果を保持するキャンバスを用意して画面に表示する

レンダリング結果は，テクスチャに描画します．

最初にテクスチャを用意します．今回は，スクリーンサイズと同じサイズのテクスチャをStart()で確保し，レンダリングのためのRendering()を呼びだします，


全画素について処理を行うため，横方向(width)と縦方向(height)の2重ループとなります．
レイトレースを行うには，各ピクセルにおいて，カメラから発するその画素位置を向いたレイを生成し，その結果に応じて色を計算します．

この時点では，まず単純な背景色（黒）をテクスチャへ書き込み，そして画面への表示を行うだけの処理にします．
UnityのColorは不透明度を持っているので，黒の場合は (0.0f, 0.0f, 0.0f, 1.0f)とします．
また，数値で場合は必ずfloat精度として記述してください．うっかり new Color(0.0, 0.0, 0.0 1.0)のように記述すると，コンパイルに失敗してUnityがエラーとなってしまいます．

すべてのピクセルに色を設定したら，テクスチャのApply()で反映することを忘れないようにしてください．
描画した内容を画面に表示するために，OnGUI()コールバックを用意して，テクスチャを画面を覆うような領域に描画します．

	using UnityEngine;
	using System.Collections;
	public class RayTracer : MonoBehaviour {
	private Texture2D myCanvas;
	// Use this for initialization
	void Start () {
	myCanvas = new Texture2D(Screen.width, Screen.height); // ゲーム実行時のスクリーンサイズと同じにしておく
	Rendering();
	}
	// Update is called once per frame
	void Update () {
	}
	void Rendering()
	{
	Color backgroundColor = new Color(0.0f, 0.0f, 0.0f, 1.0f);
	for (int h = 0; h < myCanvas.height; h++) {
	for (int w = 0; w < myCanvas.width; w++) {
	Color c = backgroundColor;
	myCanvas.SetPixel(w, h, c);
	}
	}
	myCanvas.Apply();
	}
	void OnGUI() {
	GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), myCanvas);
	}
	}

view raw UnityRayTrace0.cs hosted with ❤ by GitHub

https://gist.github.com/cslroot/c66ebadf2ad3651bcab3
この状態で実行すると，真っ黒になると思います．
背景色として指定したbackgroundColorの値をいろいろ変えて，指定した色になることを確認してみましょう．
ここまでできれば，各ピクセルの色をどのように決定するか，という部分に集中して取り組むことができるでしょう．

レイを飛ばして，当たったところを表示する

Unityでは，Physics.Raycast()という大変便利な関数が用意されています．このAPIは，任意の位置（座標）と指定の方向（ベクトル）を指定することで，その半直線の交差情報を取得することができます．
交差情報は，単純に当たった/当たっていないだけではなく，どの物体（シーン内のGameObject）にあたったか，その位置，法線，uv座標なども取得することが可能です．

注意：当たったかどうか，はCollider（コライダ）と呼ばれるコンポーネントで判定されます．Colliderがアタッチされていない要素には当たり判定がないため，Raycast()では無視されてしまいます．

これを使うには，各ピクセルに対しするレイの位置と方向を算出する必要がありますが，Unityにはその計算を自動的に行なってくれるAPIが用意されています：

mainCamera.ScreenPointToRay(Vector3(w, h, 0));



それではまず，当たった場合に白，当たらない場合に黒で表示するように改造してみます．

	//---- 各ピクセルの色を，当たったかどうかで変更する -----
	var ray = mainCamera.ScreenPointToRay(new Vector3(w, h, 0.0f)); // カメラからのレイの生成
	RaycastHit hit;
	if (Physics.Raycast(ray, out hit)) {
	c = new Color(1.0f, 1.0f, 1.0f, 1.0f); // 当たった場合は白（当たらない場合は変更なし）
	}

view raw UnityRayTrace0-1.cs hosted with ❤ by GitHub

https://gist.github.com/cslroot/4eb475710a11f87f174e

オブジェクトの色を表示する

物体が表示されましたが，陰影もなく色もない状態です．

そこで，当たった点の情報を利用して物体色を反映させたいと思います，

現時点では2つの物体（CubeとSphere）に材質情報がありませんので，まずはマテリアルを用意します．

Unity上の操作

プロジェクトビューから，新規のマテリアルを作成します(Create > Material)．

それぞれの物体に別々のマテリアルを持たせるので2つ作成しておきましょう(MatCube, MatSphere)．

それらのマテリアルを選択して，Albedoの色を指定します．とりあえず赤と青にしておきます．

マテリアルを，Hierarchy内のCubeとSphereにそれぞれドラッグ＆ドロップしてアタッチします．

ここまでの操作で，Unity上の物体に色が反映されたと思います．

ScriptからAlbedoカラーの取得

色を取得するには，レイと交差した物体のマテリアルを参照する必要があります．

これは，Raycast()のout引数であるRaycastHit構造体から，collider経由で取得します．

	// c = new Color(1.0f, 1.0f, 1.0f, 1.0f);
	var material = hit.collider.GetComponent<Renderer>().material;
	c = material.color;

view raw UnityRayTrace1-2.cs hosted with ❤ by GitHub

https://gist.github.com/cslroot/ce44b752bedce904c6ac

テクスチャマッピングを有効にする

マテリアルが取得できればテクスチャも簡単に習得できます．
テクスチャが設定されている場合は，Material.mainTextureプロパティでアクセスできます．
また，レイと交差した箇所のテクスチャ座標は，RaycastHit.textureCoordに格納されています．

	var material = hit.collider.GetComponent<Renderer>().material;
	c = material.color;
	var tex2D = material.mainTexture as Texture2D;
	if (tex2D != null) {
	c = c * tex2D.GetPixelBilinear(hit.textureCoord[0], hit.textureCoord[1]);
	}

view raw gistfile1.txt hosted with ❤ by GitHub

https://gist.github.com/cslroot/ddcff7c39476e19da582

テクスチャを使うときに重要な点が1つあります．
スクリプトからテクスチャの値を取得する場合は，テクスチャの設定で「Read/Write Enble」を変更しなければなりません．これをしない場合，実行時にエラーが発生します．
テクスチャを選択「Texture Type > Advanced」にして「Read/Write Enable」をONにしてください．


今回はこのへんでー．

参考文献

• https://github.com/BenjaminSchaaf/Unity-Raytracer

 でわでわ．

Unityの画面を動画にする

こんにちは．@rootxです．

前回の続きで，Unityで遊んでいます．
今回は，Unity画面を連番キャプチャして

きっと他の開発者の方が作られていると思いますが，Unityスクリプトの勉強として作成しています．

まずは連番出力
かるく調べた感じですと，3つの方法がありそうです：

1. 「Application.CaptureScreenShot」というそのまんまなAPIを使う方法
2. RenderTextureを使う方法
3. Texture2DのReadPixelsを使う方法

今回は任意のサイズで保存したかったので，3番目の方法を採用します．
ちなみに，1番目の方法は遅い，とのこと．

とりあえずザクッと書いてみました．

	using UnityEngine;
	using System.Collections;
	// 指定したフレームを任意の解像度で連番PNGに出力するスクリプト for Unity5
	// ## メモ:
	// * モーション付きMMDモデルの再生画像を高解像度でキャプチャして動画を作ります．
	// * ゲームの解像度と関係なく，指定した解像度の画像を生成できます．
	// * モーション再生のような自動再生されるようなシーンでしか使えないです．キャプチャしない間のフレームはすごい早く動いちゃいます．
	// * どの解像度までいけるかは不明です．GPUが確保できるテクスチャサイズに依存するはず．
	// ## 使い方:
	// 1. カメラにアタッチする
	// 2. 各種設定: 開始フレーム番号(StartFrame)と終了フレーム番号(EndFrame)を指定
	// 3. 再生する
	public class SaveToPNG : MonoBehaviour
	{
	#region　設定
	// 再生時のフレームレート(固定)
	public int FrameRate = 30;
	public int StartFrame = 0;
	public int EndFrame = 0; // 0 : all frame
	// 保存先．相対パスの場合はプロジェクトフォルダ直下になるはず（自動フォルダ作成）
	public string SaveFolder = "ScreenShot";
	// ファイル名の接頭語
	public string FileNamePrefix = "S";
	// 出力解像度
	public int Width = 640;
	public int Height = 480;
	#endregion
	RenderTexture renderTexture;
	Texture2D texForScreenShot;
	Camera curCamera;
	// Use this for initialization
	void Start()
	{
	Time.captureFramerate =
	FrameRate; // 固定フレームにしてキャプチャ時間を気にせずゲーム時間を進めるための設定．
	System.IO.Directory.CreateDirectory(SaveFolder);
	curCamera = GetComponent<Camera>();
	renderTexture = new RenderTexture(Width, Height, 24);
	// renderTexture.antiAliasing = 2; // TODO: なぜかアンチエイリアスを有効にするとうまくキャプチャできない…
	texForScreenShot = new Texture2D(Width, Height, TextureFormat.RGB24, false);
	}
	// Update is called once per frame
	void LateUpdate()
	{
	var curFrame = Time.frameCount;
	if (StartFrame <= curFrame && (curFrame <= EndFrame || EndFrame == 0)) {
	StartCoroutine(SaveScreenShot());
	}
	}
	void OnDestroy()
	{
	Destroy(renderTexture);
	}
	public IEnumerator SaveScreenShot()
	{
	yield return new WaitForEndOfFrame();
	var prevRT = curCamera.targetTexture;
	curCamera.targetTexture = renderTexture;
	curCamera.Render();
	RenderTexture.active = renderTexture;
	texForScreenShot.ReadPixels(new Rect(0, 0, Width, Height), 0, 0);
	texForScreenShot.Apply();
	curCamera.targetTexture = precRT;
	RenderTexture.active = null;
	// Encode texture into PNG
	byte[] bytes = texForScreenShot.EncodeToPNG();
	// For testing purposes, also write to a file in the project folder
	string fileName = string.Format("{0}{1:D04}.png", FileNamePrefix, Time.frameCount);
	var path = System.IO.Path.Combine(SaveFolder, fileName);
	System.IO.File.WriteAllBytes(path, bytes);
	Debug.Log("Saved: " + path);
	}
	}

view raw SaveToPNG.cs hosted with ❤ by GitHub

連番画像を動画にする

ffmpegで簡単に作成できます．

ffmpeg -r 30 -i SS-%04d.png -vcodec libx264 -pix_fmt yuv420p test.mp4

view raw gistfile1.txt hosted with ❤ by GitHub

30と書いた箇所は，指定したFrameRate（出力時のフレームレート）と同じにしてください．

参考文献

http://blog.almostlogical.com/2009/12/11/render-to-texture-unity3d/
http://answers.unity3d.com/questions/22954/how-to-save-a-picture-take-screenshot-from-a-camer.html


 でわでわ．

はじめてのUnityプロジェクト：MMDを動かす

こんにちは．@rootxです．

はじめに

とあるところで「主婦ゆに」（サイン入り）を手に入れました！
Unityにはあまり興味がなかったのですが，せっかくなので触ってみようと思います．

とりあえずはお手本通りに，MMDモデル(PMD, VMD)を読み込み，踊ってもらおうと思います．

なお，Unity5のインストール，アカウント作成を完了したところからスタートとします．

環境

MacBook (Retina, 12-inch, Early 2015)
OS X 10.10  Yosemite
Unity 5.2.0f3

プロジェクトの作成

Newで新規プロジェクトを作成

3Dを選択

アセットはあとから追加できるので，Asset Packagesは特に変更なし

Create Project

とりあえずシーンを保存する

シーンは，ゲーム開発でいう"レベル"に相当．

Save Scene

Asset直下はいろいろなアセットが増えていくのでScenesフォルダを作ってそこに保存．

MMDファイルの読込み

MMD4Mecanim.unitypackageをダブルクリックしてインポート．

各種MMDファイル(pmd, vmd)をアセットに追加（Projectタブにドラッグ＆ドロップ）

〜〜.pmdファイルの対応する箇所に，〜〜.MMD4Mecanimが生成されているので選択

Inspectorウィンドウに利用条件が出てくるので確認し，チェックONで右下の「同意する」を押す

Inspectorをロックしておく

モーション(*.vmdファイル)をVMD欄にドラッグ&ドロップする．

Processボタンを押す

#変換処理が完了するまで暫く待つ．

pmdと同フォルダにfbxファイルができているので，それをHierarchy（またはScene）にドラッグ＆ドロップ．

動かす

空のAnimator Controllerを追加（Create > Animator Controller）

作成したAnimator Controllerをシーンに配置したMMDモデルのinspectorのAnimator > Controllerにドラッグ＆ドロップで設定

作成したAnimator ControllerをダブルクリックしてAnimatorウィンドウを開く

プロジェクト内のモデルデータを（三角形を押して）展開し，読込み時に指定した*.vmdファイルをAnimatorウィンドウにドラッグ＆ドロップする

ここまでで，再生を押すと踊るよ．

でも残念な感じのカメラなので調整しましょう．

カメラを自動追従に変更する

既存のMainCameraは削除．

メニューの Assets > Import Package > Cameras をインポート

ProjectウィンドウのAssetからHandheldCamera(Standard Assets > Cameras > Prefab)をシーンに追加

カメラの向きがいまいちなので，適当に位置合わせ 

  Position > X: 0 / Y: 0.5 / Z: 2.0

  Rotation > X: -10 / Y: 180 / Z: 0

デフォルトのクリッピングを 変更 Clipping Planes > Near: 0.1 / Far: 100

FOVも気に入らないので変更 Field of view: 50

追従するように設定 Hand Held Cam (Script) > Target: 適当なジョイント（67.joint_Neck）

再生して確認

→ あまりにも激しく動いて良いそうなので，カメラの追従速度を調整する

  Following Speed: 0.5

  FOV: 35

  Position: Y: 1

  Rotation: 355

でわでわ．

Xcodeでも「上の行に改行」したい！

こんにちは．@rootxです．

普段はWindowsのVisual Studioを使っていたりいなかったりするのだけれど，
VSでよく使うショートカットの1つに「CTRL + ENTER」があります．

これはエディタ上で，「1つ上の行に改行を入れる」という操作を

例えば，コード補完等によって，次のような状態担っているとします（★印がカーソル位置）．
-------------
if (false) {
}★
-------------
ここでおもむろに「CTRL+ENTER」を押下すると，
-------------
if (false) {
   ★
}
-------------

こんなふうになります．

先にフローの構造を作ってから編集する，という思考ルーチンなのでこの手順が極めて大切なのです．

xcodeにもそれっぽいのがあるはず！と思っていましたが，
どうやらなさそうなので，Karabinar（旧 KeyRemap4MacBook）で独自ショートカットを定義しました．
gistに置いときます．
https://gist.github.com/cslroot/376f6ac7724e9f1ff705

	<?xml version="1.0"?>
	<root>
	<item>
	<name>UpperEnter</name>
	<appendix>Fn+Enter to insert enter into upper-row. This is similar to (CTRL+ENTER) in Visual Studio</appendix>
	<identifier>private.upper_enter</identifier>
	<autogen>
	__KeyToKey__ KeyCode::RETURN, ModifierFlag::FN,
	KeyCode::CURSOR_UP, KeyCode::CURSOR_RIGHT, ModifierFlag::COMMAND_L, KeyCode::RETURN, Option::NOREPEAT</autogen>
	</item>
	</root>

view raw private.xml hosted with ❤ by GitHub

これで開発効率が5%くらいアップしたはず！



 でわでわ．