Full SBSモードにも対応して電気メガネに特化したディスプレイテストツールですよ！GitHub Copilotのプレミアム要求を使い果たしたので追加課金をして作成しました。
はじめに
先日公開した「体感サイズ比較ツール」に続き、またしても電気メガネ（ARグラス・スマートグラス）用のツールを作ってしまいました。
今回作ったのは、「電気メガネディスプレイテストツール」です。
ARグラスを買ったとき、最初に何をしますか？
YouTubeで高画質な動画を見たり、PCに繋いで作業環境を作ったりすると思います。でも、ふと気になることはありませんか？
- 「画面の端っこ、ちょっと歪んでない？」
- 「黒い背景のとき、変な光（ゴースト）が見える気がする」
- 「3Dモードにしたけど、ちゃんと立体に見えてる？」
- 「なんかグラデーションが滑らかに見えない？」
こういう「表示品質」を確認しようと思ったとき、適当な画像を探して表示させるのは意外と面倒です。特に3D（SBS）のテスト動画などは、YouTubeで探しても広告が入ったりしてテンポが悪いことも。
「それなら、ブラウザでアクセスするだけで全部チェックできるツールがあればいいじゃない」
ということで、作りました。
ツールの特徴
1. インストール不要、ブラウザで即起動
アプリのインストールは不要です。PC、Mac、Android、iPhone（15以降）など、ARグラスを接続できるデバイスのブラウザでアクセスするだけで動きます。PWA（Progressive Web Apps）に対応しているので、ホーム画面に追加すればオフラインでも動作します。
でもスマートフォンではブラウザのミラーリングでは全画面表示がうまくできませんので、GalaxyのSamsung DeXなどデスクトップモードを活用してください。
2. Full SBS (3840×1080) 対応
XREAL Air / Air 2シリーズ / Oneシリーズ、Rokid Maxなどの主要なARグラスが対応している「3Dモード（Full SBS）」に完全対応しています。
XREAL Air / Air 2シリーズでは音量+ボタンを長押し、XREAL OneシリーズではOSDメニューから設定など機種ごとに設定が違うので取扱説明書等でご確認ください。
3. 23種類の豊富なテストパターン
歪みチェックから3D立体視まで、実用的な23種類のパターンを搭載しました。
搭載しているテストパターン
全部紹介すると長くなるので、いくつかピックアップして紹介します。
歪み・解像度チェック
- グリッド / 同心円: レンズの歪み（樽型・糸巻き型）を一発で確認できます。
- チェッカーボード / ドット: 画面の隅々までピクセルが潰れずに表示されているかチェックします。
- 画面範囲 (FoV): 画面の端が欠けていないか（ケラレ）を確認できます。「95%」「90%」のガイドライン付き。
色再現・階調
- 単色 (白/赤/緑/青/黒): ドット抜けや色ムラの確認に。特に「黒」は、OLED（有機EL）特有の「完全な黒（消灯）」ができているか、変に光漏れしていないかのチェックに役立ちます。
- グラデーション: 階調が滑らかか、変な縞模様（バンディング）が出ていないかを確認します。
AR特化・動的テスト
- ゴースト検出: 黒背景に白い点を表示し、光学系特有の内部反射（ゴースト）がどこに出るかを探れます。
- 残像テスト: 画面上を高速で移動する四角形を目で追うことで、残像の少なさやリフレッシュレート（60Hz/120Hz）の違いを体感できます。
3D立体視 (Half SBS / Full SBS)
個人的に一番こだわったのがここです。
- 3D立方体 / トンネル / スターフィールド:
ただの画像ではなく、JavaScriptでリアルタイムに計算して描画しています。グラスを3Dモードにすると、星が手前に飛び出してきたり、トンネルが奥に続いて見えたりします。
「ちゃんと3Dに見える！」という感動を、ブラウザだけで手軽に味わえます。
可読性
- 文章テスト: 青空文庫（羅生門）や英語テキスト(Alice’s Adventures in Wonderland)を表示し、文字の読みやすさを確認できます。フォントサイズや明朝/ゴシックの切り替えも可能です。
使い方
使い方は極めてシンプルです。
- タップ / クリック: 次のテストへ進む
- 縦スワイプ / 矢印キー: 前後のテストへ移動
- 長押し / 右クリック: メニューを開いて、好きなテストに直接ジャンプ
気に入ったテストパターンや、特定の設定（例：グリッドの間隔を狭くした状態）は、メニューの「Xでシェア」ボタンからURLとして共有できます。
「この機種、四隅の歪みどう？」と聞かれたときに、グリッド表示のURLをポンと送るだけで済みます。
開発の裏話
前回のサイズ比較ツールと同様、今回も Vanilla JS (素のJavaScript) だけで構築しています。Reactなどのフレームワークは使っていません。
そして今回も、開発の相棒は GitHub Copilot です。
特に3D描画周りの実装は、Copilotにかなり助けられました。
「Three.jsなどの重いライブラリは使いたくない。2DのCanvas APIだけで、3Dの座標計算をしてワイヤーフレームの立方体を描画したい。視差（Parallax）も考慮して。」
という無茶振りを投げたところ、見事に「3D座標を回転させて、視点距離とFoVから2D座標に投影する関数」を書き出してくれました。
スターフィールド（星空）の描画ロジックも、「星が奥から手前に流れてきて、Z座標に応じて大きさと明るさが変わるようにして」と頼んだら一瞬でした。
人間がやったのは、UIの微調整と、「Full SBSモードへの切り替え忘れ」を警告するモーダルの実装くらいです。
おしまいに
「新しいARグラスを買ったけど、初期不良がないか心配」
「手持ちの機種の画質を改めてチェックしたい」
「3Dモードを試してみたいけど、手頃なコンテンツがない」
そんな時に、ブックマークからサッと呼び出して使っていただければ幸いです。
メガネ単体で3DoF / 6DoFに対応しているXREAL One Proは視野角はとにかく広いんですが、外周部が色ずれするけど顔をそっちに向けて中心視野で見るから問題ないやろみたいな思想が見て取れるので面白いですよ。
スマートフォンでも簡単にメガネ側でフルスクリーン表示できる仕組みがあれば良かったんですが…
明日は12月1日でGitHub Copilotプレミアム要求の残弾が回復するのでまた新しいツールを作れるといいな！
現場からは以上です。