盲点だった！ChromeでwebGLを表示させる設定

#はじめに

webGLでのページを表示する方向けです。
ググり方に限界を感じてる人も少しは参考になるかもです。
自分はThree.jsを学習している中でサンプルが動かないことが多々あり、四苦八苦の中解決策を見出したので他の方に役立てれたら幸いです。
まずは[このサイト](https://get.webgl.org/)で自分がwebGLが表示できるか確認してみましょう
<img width="630" alt="Screen Shot 2020-06-13 at 20.30.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/e0e1b52d-cdae-8c2e-b4b3-378a231e3947.png">
このような画面が出てたら、特に設定する必要はありません。webGLのページは見れるはずです。
仕組みを知りたい方がいましたら、一緒に読み進めてLGTMしていただけると嬉しいです。
<img width="629" alt="Screen Shot 2020-06-13 at 20.34.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/ab99bdd4-7a2d-4854-5d19-3c9e17855dbc.png">
こちらの画面が出た方は設定をする必要があるので一緒に進めていきましょう。

# 解決までの道のり
こちら備忘録とどこで見つけたのかという手順も共有したいため、歴史を公開します。
そんなのいいから、設定だけ教えてって方は飛ばしてください

#### きっかけは書籍のサンプルが動かなかった
みんな大好きオライリーの「はじめてのThree.js」を開始して、気持ちよく進めていました。
オライリーの本はサンプルが充実しているので、つまづくことがほとんどなく初心者にはうってつけ、上級者でも何度でも読み返したくなる本になっております。
(回し者じゃないですが、本当におすすめです)

何回かページが表示されなくなる時もありましたが、パソコンの再起動を試したり、chromeの拡張機能をoffにしたらすぐに表示されたのであんまり気になっていませんでした。

しかし、ある日とうとう全く表示できないサンプルに出くわしてしまいやる気が削がれてしまったのです。Three.jsのリソースは自分が調べた限りあまりなく、絶大な信頼をおけるオライリーさんでも無理なのか、、と落胆しました。
ダメもとでオライリージャパンのメールに問い合わせってみたところ、個人的なサポートはやっていないとのこと(多分全部対応してたら個人レッスンみたいになっちゃって、対応しきれなくなるからだとおもいます)

最終的にchrome内でエラーを探して原因解決することにしたので、その手順を書き留めておこうかと思います。

#### chromeの検証
chromeでローカルwebサーバーを立てていたので、検証しました。
![Screen Shot 2020-06-13 at 20.52.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/56a89660-6dbf-0eeb-f70b-4360729646d2.png)
画面内右クリックして、inspect(検証)
![Screen Shot 2020-06-13 at 20.53.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f7ac9b4a-fd2e-ec09-f89b-786c5f4b3315.png)
上の要素からコンソールを選択して、エラーを見ていきます。
![Screen Shot 2020-06-13 at 20.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/3719a509-577b-9ce1-a38c-29bdb2379e81.png)
黄色はやばめです。赤はえぐめです。

#### ググる
とりあえずエラー文をぐぐります。
<img width="1097" alt="Screen Shot 2020-06-13 at 20.56.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/9260ec5a-dc0f-2294-f8c6-7bfc806cd5ed.png">
色々出てきました。英語に負けずにガンガンアタックしていきましょう
２番めのが比較的新しかったので、中を見てみました。
<img width="1033" alt="Screen Shot 2020-06-13 at 20.59.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/fb683638-7121-cb69-4b1c-5c7d89657d72.png">
すでに解決されているようなのでそこに行ってみます。
ところでこのかっこいいHUDは何なのでしょう。chromeの拡張機能だったら即入れたいです。

最終的には[ここ](https://github.com/GitSquared/edex-ui/issues/217)で全て解決できました。
はじめの方にこのサイト行けば、webGLが動かせるかわかるよーって回答があり
<img width="748" alt="Screen Shot 2020-06-13 at 21.02.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/403735db-3f21-35b3-1bbe-b7d61666e76d.png">
先ほどのwebGL動かせませんよーって画面が出たのでエラー文をまたぐぐり
<img width="931" alt="Screen Shot 2020-06-13 at 21.05.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/1f398464-75df-d724-abb5-f10d6276fe05.png">
[この中](https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser)でwebGLをオンにする方法をゲットしました！
(そもそもwebGLはオンにしないといけないやり方がわからんかった)

さて、ここからが本番です。
ググり方がわからなかった方、参考になりましたでしょうか？

# chromeのwebGL設定
- これをアドレスバーに入力してください

```
chrome://settings
```
- 一番下までスクロールして、Advancedを押しましょう
![Screen Shot 2020-06-13 at 21.11.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/ba98513c-6379-1ef0-8456-7dd05fdae3ee.png)
- 下の方にある、systemのハードウェアアクセラレーションをオンにします
![Screen Shot 2020-06-13 at 21.12.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/60d1e74d-b2a9-6ab6-e5bf-61c1d33b9ffe.png)
- 次はこちらをアドレスバーに入力してください

```
chrome://flags
```
- 何やらたくさん出てきますが、検索バーでwebGLとタイプします
![Screen Shot 2020-06-13 at 21.15.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d0e79f3c-d189-d132-d0f8-c9fa0dc52e86.png)
- 一つだけ引っかかると思うので、右側にあるトグルをenableにしてrelaunchしましょう
![Screen Shot 2020-06-13 at 21.16.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/75356f38-4577-4869-2992-7c1b592f8a7a.png)
![Screen Shot 2020-06-13 at 21.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/6ea3401e-54cc-ec81-0fc0-e1eeae0fe0fb.png)

もう一度[ここ](https://get.webgl.org/)をみてみましょう！
立方体がグルグルと回っていませんか？
ここまで来ればあなたもwebGLマスターです！(大嘘)
webGLの可能性は無限大ですね。

ぜひ、楽しんでいきましょう