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

環境

Unity 2017.1.0f3
MixedRealityToolkit-Unity for Unity 2017.1.0f3
MRDL V.0.1.3 Unity 2017 Compat
Visual Studio 2017

完成イメージ

MixedRealityToolkit-UnityのColorPickerをMRDesignLabs_Unityを使って書き換えてみた。 #HoloLens #HoloLensJP pic.twitter.com/96BIJO0a6d
— がおまる@HoloLens研究者 (@gaomar) 2017年8月16日

プロジェクト新規作成

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

Main Cameraを削除します

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

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

ColorPickerImageの設定を変更します

キャンバスを追加

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

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

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

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

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

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);
        }
    }
}

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

大きさと配置はご自由に

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

GazeableColorPicker.csに適用していく

CanvasRendererのSetColorを選択する

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

実行

Unityのプレビュー画面でも確認出来ます。

おまけ

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

ColorPickerCanvasに対してTagalongとBillboardいうスクリプトをアタッチします。

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