MixedRealityToolkit-UnityのColorPickerをMRDesignLabs_Unityを使って書き換えてみた

HoloToolkitから名前が変わりMixedRealityToolkitになりましたね。
色々環境を新しくして、そのMixedRealityToolkitにあるColorPickerのサンプルをMRDesignLabs用に書き換えてみました。
今回はプロジェクトを最初から作ってみました。
プログラム自体がかなりスッキリとしました。

#環境
* [Unity 2017.1.0f3](https://unity3d.com/unity/whats-new/unity-2017.1.0)
* [MixedRealityToolkit-Unity for Unity 2017.1.0f3](https://github.com/Microsoft/MixedRealityToolkit-Unity/releases/tag/v1.2017.1.0)
* [MRDL V.0.1.3 Unity 2017 Compat](https://github.com/Microsoft/MRDesignLabs_Unity/releases/tag/v0.1.3-Unity-2017)
* Visual Studio 2017

#完成イメージ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">MixedRealityToolkit-UnityのColorPickerをMRDesignLabs_Unityを使って書き換えてみた。 <a href="https://twitter.com/hashtag/HoloLens?src=hash">#HoloLens</a> <a href="https://twitter.com/hashtag/HoloLensJP?src=hash">#HoloLensJP</a> <a href="https://t.co/96BIJO0a6d">pic.twitter.com/96BIJO0a6d</a></p>&mdash; がおまる@HoloLens研究者 (@gaomar) <a href="https://twitter.com/gaomar/status/897699902154788864">2017年8月16日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

#プロジェクト新規作成
Unityのプロジェクトを新規作成していただき、
ダウンロードしてきたものをこのように配置します。

![s100.png](https://qiita-image-store.s3.amazonaws.com/0/154355/b714fcd0-41ed-98de-27ec-f42b676b80d9.png)

* Main Cameraを削除します

![s101.png](https://qiita-image-store.s3.amazonaws.com/0/154355/9bb1a626-b88e-0bdb-d812-e0e607a46c10.png)

* HUXのHoloLens用カメラを設置します

![s102.png](https://qiita-image-store.s3.amazonaws.com/0/154355/6eaf9243-d3df-4348-9464-bb00ee173a11.png)

![s103.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/026bc0fe-5650-146c-f4b3-b065b6c4ac16.png)

* マテリアルを新規作成してColorPickerImageをドラッグ・アンド・ドロップします

![s104.png](https://qiita-image-store.s3.amazonaws.com/0/154355/235717be-c390-4c8f-8a46-e9a6c29676bb.png)

* ColorPickerImageの設定を変更します

![s105.png](https://qiita-image-store.s3.amazonaws.com/0/154355/0c2519ff-8245-961c-964c-c6732143c702.png)

* キャンバスを追加

![s106.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/03fda523-92ef-63b2-b786-383ee8fc018e.png)

* World SpaceにしてScaleを変更出来るようします

![s107.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/100dee7f-0ea1-7c22-980a-b590749c2d96.png)

* 設定はこんな感じにしました。キャンバス名はColorPickerCanvasでサンプルと同じにしています。

![s108.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/47e99005-fcbf-13e1-c24b-6d481b3b1322.png)

* 色を選択するやつを追加します。3D ObjectのQuadを追加しましょう。

![s109.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/a802d295-e73d-4443-d200-294fa820bf30.png)

* 名前はPickerにしてMaterialsを先程作成したColorPickerMaterialを指定します

![s110.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/dd0dc005-9344-ad93-eb7d-3366f0152439.png)

* Pickerに新規スクリプトを追加する

![s111.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/080a0fbc-06fe-264b-178d-804aeed40ef7.png)


```csharp:GazeableColorPicker.cs
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.

using HoloToolkit.Unity.InputModule;
using HUX.Focus;
using HUX.Interaction;
using System;
using UnityEngine;
using UnityEngine.Events;

namespace HoloToolkit.Examples.ColorPicker
{
    public class GazeableColorPicker : MonoBehaviour
    {
        public Renderer rendererComponent;

        [System.Serializable]
        public class PickedColorCallback : UnityEvent<Color> { }

        public PickedColorCallback OnGazedColor = new PickedColorCallback();
        public PickedColorCallback OnPickedColor = new PickedColorCallback();

        private bool gazing = false;

        private void Start()
        {
            FocusManager.OnFocusEnter += FocusManager_OnFocusEnter;
            FocusManager.OnFocusExit += FocusManager_OnFocusExit;
        }

        // フォーカスアウト
        private void FocusManager_OnFocusExit(GameObject arg1, FocusArgs arg2)
        {
            gazing = false;
        }

        // フォーカス当たった
        private void FocusManager_OnFocusEnter(GameObject arg1, FocusArgs arg2)
        {
            gazing = true;
        }

        void Update()
        {
            if (gazing == false) return;
            UpdatePickedColor(OnGazedColor);
        }

        void UpdatePickedColor(PickedColorCallback cb)
        {

            FocusInfo hit = FocusManager.Instance.GazeFocuser.FocusHitInfo;
            if (hit.transform.gameObject != rendererComponent.gameObject) return;
            
            Texture2D texture = rendererComponent.material.mainTexture as Texture2D;
            Vector2 pixelUV = hit.textureCoord;
            pixelUV.x *= texture.width;
            pixelUV.y *= texture.height;

            Color col = texture.GetPixel((int)pixelUV.x, (int)pixelUV.y);
            cb.Invoke(col);
        }

        // タップ処理
        public void Tapped(InteractionManager.InteractionEventArgs e)
        {
            UpdatePickedColor(OnPickedColor);
        }
    }
}
```

* 色を反映するパレットを追加する

![s112.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/e4f168a2-a286-7825-f320-6c6cba44324c.png)

大きさと配置はご自由に
![s114.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/428cb4ea-9ade-e8c1-3f73-eabf01b06393.png)

* プレビュー用パレットを追加する

![s115.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/78a212d0-9d1d-050b-f9ca-4bf3c42d6588.png)

![s116.PNG](https://qiita-image-store.s3.amazonaws.com/0/154355/cc461571-eb96-f3df-782f-62d6e641a6b0.png)

* GazeableColorPicker.csに適用していく

![s200.png](https://qiita-image-store.s3.amazonaws.com/0/154355/0e9bc296-6895-71cc-05ab-518b3f5bb8ed.png)

![s201.png](https://qiita-image-store.s3.amazonaws.com/0/154355/3db349ad-a5da-77c2-e776-b6a39c6c710e.png)

![s202.png](https://qiita-image-store.s3.amazonaws.com/0/154355/86221c3a-7769-a5cf-510f-3e31439381ce.png)

* CanvasRendererのSetColorを選択する

![s203.png](https://qiita-image-store.s3.amazonaws.com/0/154355/63799dc8-7ab4-0a12-474b-cffcb7235890.png)

* 下のOn Picked Colorも同じようにする

![s204.png](https://qiita-image-store.s3.amazonaws.com/0/154355/c695e7f6-2dce-c0e8-552e-21b82d39e15b.png)

#実行
Unityのプレビュー画面でも確認出来ます。
![s205.png](https://qiita-image-store.s3.amazonaws.com/0/154355/c7f73462-fbdf-940d-56f5-473d86b05739.png)

#おまけ
今のままではパレットはその場に居座り続けます。
追従するように設定しておきましょう。

ColorPickerCanvasに対してTagalongとBillboardいうスクリプトをアタッチします。
![s207.png](https://qiita-image-store.s3.amazonaws.com/0/154355/7f8700f8-f1a2-5331-6e51-830c08f38ae2.png)

![s208.png](https://qiita-image-store.s3.amazonaws.com/0/154355/f7905297-ddd4-3d6e-0305-5529b7b45f4a.png)

最後にUWP用に書き出します。

![s206.png](https://qiita-image-store.s3.amazonaws.com/0/154355/cdfda137-d3a7-7606-1ca8-0cd2d946fcbe.png)