Unity：Looking Glass を WebGL を使ってブラウザで表示する

# 注意

本記事は、Looking Glass SDK 0.14.0 での記事になります、***最新版は 1.0.0 で本記事は対応していない***のでご了承ください。

# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[ブログ](https://www.fast-system.jp/unity%ef%bc%9alooking-glass-%e3%82%92-webgl-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/)に全文ありますのでぜひご参照ください。*

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LookingGlass の表示をブラウザ（WebGL）から行うことに成功した！ <a href="https://twitter.com/hashtag/LookingGlass?src=hash&amp;ref_src=twsrc%5Etfw">#LookingGlass</a><a href="https://t.co/GQ5y5uoXGx">https://t.co/GQ5y5uoXGx</a> <a href="https://t.co/tvYoZ2Fc4s">pic.twitter.com/tvYoZ2Fc4s</a></p>&mdash; たっつー（ささきたかし） (@kingyo222) <a href="https://twitter.com/kingyo222/status/1098364516209876992?ref_src=twsrc%5Etfw">2019年2月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ソースコードの変更点

## DLL参照部分を無効にする

以下、２つのスクリプトの先頭行に「#define EEPROM_DISABLED」と追加しましょう。

- HoloPlay/Core/Scripts/Config.cs に Define を追加
- HoloPlay/Core/Scripts/EEPROMCalibration.cs に Define を追加

![image-4-1024x768.png](https://qiita-image-store.s3.amazonaws.com/0/227880/1a061592-7320-bdd8-ce8b-1dd58ae67a2f.png)

```C#
#define EEPROM_DISABLED
//Copyright 2017 Looking Glass Factory Inc.
//All rights reserved.
//Unauthorized copying or distribution of this file, and the source code contained herein, is strictly prohibited.

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using HoloPlay.Extras;
using UnityEngine;
using UnityEngine.Events;

namespace HoloPlay
{
    [ExecuteInEditMode]
    public static class Config
    {
```

```C#
#define EEPROM_DISABLED
#if !EEPROM_DISABLED
using System;
using System.Collections;
using System.Runtime.InteropServices;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
using System.Reflection;

namespace HoloPlay
{
    public class EEPROMCalibration
    { 
```

## 個体固有の情報を読み込んだと勘違いさせる

Config.cs の当該個所に、「eepromFound = true;」を追加します。

```C#
#if !EEPROM_DISABLED
            // 省略
#else
            eepromFound = true;
#endif
            if (!eepromFound)
            {
```

## 個体固有の情報を取得して強制的に書き換える

（USBが動作しなくなっているので別プロジェクトを作って） 一度普通にLookingGlassを起動して、以下の情報を取得しましょう

- 実行してから「HoloPlay Capture」を選択。
- インスペクターの表示を「Debugに切り替える」。
- Quiltスクリプトに表示されているConfigの設定値をメモ。

![image-12.png](https://qiita-image-store.s3.amazonaws.com/0/227880/c1bb3a72-f741-f80a-9fe6-337aa6eabf72.png)

![image-10.png](https://qiita-image-store.s3.amazonaws.com/0/227880/f93589dd-dde2-a8a7-4690-0a36b70d435a.png)

以下の個体情報をメモしておいてください。Serialに「0000」などが表示されていると上手く読み込めていないので注意してください。

![image-9.png](https://qiita-image-store.s3.amazonaws.com/0/227880/5f3d0f96-c6d2-4239-42da-8d8eff471c05.png)

次に、Config.cs の以下のソースコードの固有値情報を上でメモした情報に書き換えてください。

```C#
        /// <summary>
        /// Type for visual lenticular calibration
        /// </summary>
        [Serializable]
        public class VisualConfig
        {
            public string configVersion = "1.0";
            public string serial = "LKG-2K-01409";
            public ConfigValue pitch = new ConfigValue(47.57965f, 1f, 200, "Pitch");
            public ConfigValue slope = new ConfigValue(-5.443152f, -30, 30, "Slope");
            public ConfigValue center = new ConfigValue(-0.07010868f, -1, 1, "Center");
            public ConfigValue viewCone = new ConfigValue(40, 0, 180, "View Cone");
            public ConfigValue invView = new ConfigValue(1, 0, 1, "View Inversion", true);
            public ConfigValue verticalAngle = new ConfigValue(0, -20, 20, "Vert Angle");
            public ConfigValue DPI = new ConfigValue(338, 1, 1000, "DPI", true);
            public ConfigValue screenW = new ConfigValue(2560, 640, 6400, "Screen Width", true);
            public ConfigValue screenH = new ConfigValue(1600, 480, 4800, "Screen Height", true);
            public ConfigValue flipImageX = new ConfigValue(0, 0, 1, "Flip Image X", true);
            public ConfigValue flipImageY = new ConfigValue(0, 0, 1, "Flip Image Y", true);
            public ConfigValue flipSubp = new ConfigValue(0, 0, 1, "Flip Subpixels", true);
            [NonSerialized] public string loadedFrom = "not loaded -- default used";
            [NonSerialized] public bool loadedSuccess = false;
        }
```

# 最後に

[ブログ](https://www.fast-system.jp/unity%ef%bc%9alooking-glass-%e3%82%92-webgl-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/)にWebのデモがありますが、LookingGlassは個体毎の情報を設定しないと動かないのでぜひみなさんの環境で動かしてみてください。

![WS000019-1-1024x576.jpg](https://qiita-image-store.s3.amazonaws.com/0/227880/fd822349-0831-8a71-0522-e02fc848fcae.jpeg)

***それでは、よい Looking Glass ライフを！***

*よければ ブログ「[初心者向けUnity情報サイト](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*